Senchacon roadshow

1. Innovations in Sencha Tooling and
Framework
Sandeep Adwankar
Sr. Product Manager

2. Sencha Tools
Brings enterprise grade system of tools to Ext JS framework. Provides
developers of different backgrounds (personas) with:
- Optimal developer use cases and workflow
- Benefits of productivity improvement, quicker time to market
- Robust features, roadmap and upgrade path
- Adopt Ext JS framework quickly and support in Ext JS ecosystem
2
Helps developers quickly build performant, best practices,
beautifully styled apps

3. CONFIDENTIAL • Sencha Inc. ©2016
Design Visually Compelling Web Applications Faster
• Create wireframes and mockups faster
• Improve collaboration between designers and
developers
• A complete UI asset kit for Adobe Illustrator, Sketch,
Omnigraffle, Balsamiq and is also available as
SVG/PNG
Ext JS Stencils
3
• Visual Application Builder reduces manual coding
• Build the UI and code fully featured apps directly in
Architect
• Create your own templates or use an existing one
Architect

4. © 2017 Sencha Inc. • CONFIDENTIAL •
Enterprise Tools to Improve Developer Productivity
IDE & Code Editor Plugins
• Code generation, completion
• Code inspection, refactoring
Cmd – Build Optimization
• Automates development tasks
• Build generation & optimization
Inspector – Simplified
Debugging
• Debugging at source code
• Identifies performance issues
Themer – Visual Theming
• Visual theme creation
• Generates theme in real-time

5. Lets Mockup An App -
NewsApp

6. Ext JS Stencils
• Drag and drop component symbols to
mockups faster
• Supports Components from Modern and
Classic toolkit
• A complete UI asset kit for
- Adobe Illustrator
- Sketch
- Omnigraffle
- Balsamiq
- SVG/PNG
6

7. Sencha Architect
• Drag-n-drop visual app builder
• Best practices code generator that
minimizes manual coding
• Integrates Cordova for hybrid apps
• Support for Themer; import custom
themes

8. Architect – Build Modern Apps in minutes
• Generate modern app with Data UI
Builder
• Generates grid, list, details, form,
controller, stores and mock data from
your data model
8Pro and Premium

9. Architect – Easily create hybrid mobile apps
Convenient menus to quickly create hybrid
mobile apps
• Add Cordova packager and update build
settings with native profiles
• Build iOS/Android apps
• Build and Emulate iOS/Android apps
9Pro and Premium

10. Architect –Import themes from Sencha Themer
• Easily import custom themes created
using Sencha Themer
• Architect copies theme package and
applies theme to app
10Pro and Premium

11. Architect – Best Practices Code Generation
• Best Practices Automated Code Generation
• Easy code refactoring
- Renaming class/function
- Moving class/function
- Promote item to class
- Transform xtype
Pro and Premium

12. Architect – Application Templates and Extensions
• Quick start with provided application
templates
• Save your project as a template
• Save custom components
• Build framework extensions
Pro and Premium

13. Architect 4.1
13

14. Sencha Architect 4.1 – What’s New
• Support for Ext JS 6.2.1 and Cmd 6.2.1
• Drag and drop Premium Components
- D3 , Calendar, Pivot grid, Exporter
• Better Grid Support
- Row widget, header resizer for Classic
- Row expander for Modern
- Grid Builder support in Modern
• Extend Controller and Models
• Asset Manager to manage frameworks
14

15. Architect 4.1 – D3 Adapter
Integrates the D3.js library with Ext JS
core and provides some of the most
commonly used D3 visualizations as ready
to use components in Ext JS.
- Integration with data stores to update the
visualizations as data changes
• Data Store for regular data
• Tree Store for hierarchical data
- Pan/zoom interactions
15

16. Architect 4.1 – Calendar Component
Provides all the building blocks needed to
include advanced calendaring capabilities
in Ext JS applications.
- Day, Week, & Month views
- Store to define events
- Time zone support
- Drag, Resize & Validation
- Google’s Calendar API integration
16

17. Architect 4.1 – Pivot Grid
Powerful data analysis capabilities
available in both Classic and Modern
Toolkit.
- Drag-and-drop configurator
- Plugins for drilldown, range editor, exporter,
etc.
- Different layouts and styling elements
- Optimized for touch-devices
17

18. Architect 4.1 – Data Exporter
Supports export for native XLSX format,
as well as many other common export
formats such as HTML, CSV, and TSV.
- Capability to configure the exports for visible
or invisible (hidden columns) data
- Column styling in the exported documents
- Available in both toolkits, for Grids and Pivot
Grid
18

19. Architect 4.1 – Grid Enhancements
Exciting new functionality such as ‘row
body widgets’ that will allow you to add
components to the row body, such as grid
inside a grid.
- Available for both toolkits
- Can be linked to parent grid record
- Can put any component within the row body,
not just grid inside a grid
19

20. Architect 4.1 – Manage Ext JS frameworks, Cmd
• Sencha Architect now has option to
manage frameworks where you can
choose to install or remove framework or
Sencha Cmd versions.
• You can find the Manage Frameworks
option in File tab in Preferences menu.

21. Architect 4.1 – Import and Export Configs
• Import configs – Paste config values and
apply to a class
• Export configs – Export config values to
clipboard that you can copy to other
projects

22. Lets Build NewsApp in
Architect

23. Visual Studio Code Plugin
• Sencha plugin for the fastest growing
source editor – Microsoft’s VS Code
- Intellisense
- Code generation
- Code navigation
- Inspection & refactoring
- Documentation lookup
• @ no additional costs to Ext JS
customers
• Supports Ext JS 4.2+
23

24. Sencha Visual Studio Code Plugin 1.0
Sencha plugin for the fastest growing
source editor – Microsoft’s VS Code.
• No additional costs to Ext JS customers
• Supports Ext JS framework 4.2+
• Visual Studio Code Editor 1.7.2+
24

25. IntelliSense – Code Completion
• Properties
• Keys in Configs
• xtypes
• Events

26. Code Navigation
Supports code navigation for
• class name
• xtypes and other type aliases
• methods and properties
• config keys
• events

27. Documentation Lookup
Supports documentation lookup (F1)
for Ext JS
• class name
• xtypes and other type aliases
• methods and properties
• config keys
• events

28. Code Generation - Create New Ext JS App
• Provides wizard to walk through creation
of new app

29. Integration with Sencha Cmd
• Watch app source code for changes
• Rebuild outputs
• Web Server is started and hosts app
• See compilation errors as they happen

30. Debugging Ext JS Apps
• Microsoft’s “Debugger for Chrome”
extension
• Launch Chrome browser with remote
debugging enabled
• Attach extension to the browser
• Start debugging F5

31. Lets Extend NewsApp in VS
Code

32. Sencha Inspector
• Inspect over nested components and
minimize to improve performance
• For classic toolkit, identify unnecessary
components in layout runs
• Identify issues with data binding
• Debug issues with proxy and stores
32

33. What is Sencha Inspector?
Inspection and debugging
tool built specifically for
Sencha Ext JS applications

34. Why Sencha Inspector?
• Browser based debugging tools work
with rendered DOM, JS, CSS, and
don’t understand Sencha architecture
• Ext JS apps need better debugging
tool to be more efficient and productive
Improve Developer Productivity

35. • Developer has run into issues and needs to debug the application
• Developer wants to review / improve the performance of their app
• Developer wants to watch and review events fired while interacting
with an application
Common Use Cases
Inspecting, Debugging

36. Inspecting Architecture
• Detailed overview of application
architecture for any Ext JS app
• MVC, MVVM architecture details of
Model, View, Controller, ViewModel
Capabilities Overview: Inspection

37. Inspecting Events
• List of all events fired by Ext JS
components and appropriate event
handlers
• Events captured by name, source,
xtype, etc.
Capabilities Overview: Inspection

38. Inspecting Over-Nested Layouts
• Identifies components that are
nested within multiple containers
• Detects over nested containers and
shows prominently
• Helps minimize over nesting to
improve performance
Capabilities Overview: Inspection

39. Debugging Data Bindings
• Identifies issues related to data
binding, which even IDEs cannot
catch
• Displays data binding issues in red
to notify developers
Capabilities Overview: Debugging

40. Debugging Store & Proxies
• Identifies issues with views that are
not able to display data from a
server proxy.
• Shows Model, Store and Proxy
properties for developer to debug.
Capabilities Overview: Debugging

41. Improving App Performance
• Identifies components that
appear in any layout runs
• Points developer to eliminate
things that can reduce
unnecessary layouts of the
components, to improve
performance
Capabilities Overview: Debugging

42. Lets Inspect NewsApp

43. Sencha Themer
• Design themes in an interactive visual
environment – no code
• Quick configurations for global variables
that cascade across all components
• Support for component Uis
• Live updates – No compile, build, reload
• Package themes, and share with ease
43

44. Classic Toolkit Modern Toolkit
base
neutral
classic
gray
neptune
crisp
crisp-touch
neptune-touch
triton
base
neptune
triton
ios
material
Create custom theme starting from Ext JS theme

45. Supports theming apps with classic and modern toolkit
45

46. Theme with innovative color selectors
• Color Palette showing base, background
and text color with 5% lighter and darker
• Material Design based Color Palette
46

47. Get comprehensive view of all updated styles
• View all Sass variables that you can
style
• As you style your app, filter view to see
updated Sass variables and their values
47

48. Easy way to add web fonts
• Add Google font URL to use web font in
your app
• Apply the web font to any component
48

49. Manage “Big” mode for modern apps
• Themer creates “Big Mode” variables to
be more touch-friendly
- In Phone view
- Inspecting an app in “Big” mode
49

50. What New in Themer 1.1
• Support for UIs for components such as
grid, list, tabpanel, title bar, form
components (text, datepicker), and more
• Connect your app to Themer and
Inspect app
• Modify component styles and UI in
Inspect mode
50

51. Themer 1.1 – Supports Extensive Component UIs
• Support for modern grid, list, tabpanel,
title bar, form components and more
• Full access to all Sass variables for “UI”
configuration.
51

52. Column Header
Check Column Header
Group
Header
Row
Check
Cell
Expander
Cell
Paging
Toolbar
Text
Cell
Row Numberer
Cell
Number
Cell
Widget
Cell
Date
Cell
Theming Modern Grid

53. Themer 1.1 – Theme Modern Grids and Make Them
Unique
• Modern Grid consists of grid cells, rows,
columns, column header, paging toolbar
and more
• With Themer, each of these
subcomponents can be uniquely themed
• Just add “ui” config for the specific
subcomponent in the grid and then
theme the UI with Themer.
53

54. Themer 1.1 – Easily Connect app to Themer
• Directly connect your app to Themer
• Update app.json and view connected
apps from View -> Connected Apps
54

55. Themer 1.1 – Directly Theme your app
• Inspect mode provides fine-grained
control over style selection in Your App
• Modify Sass variables and see changes
live
• Inspect mode allows freezing and
locking state of all components in
preview app
• Easy way to theme component states
such as – hover, pressed, open
55

56. Themer 1.1 – Inspect and Style with Component Tree
• In “Inspect” mode, click on the app and
view component tree
• View and them selected component’s
styles and UIs
56

57. Themer 1.1 – Import Colors from CSS
• Import colors from existing css files and
add to color palette
• Color palette will show imported colors
with lighter and darker options in
increments of +/- 5%.
57

58. Architect 4.1.2 – New release to support Themer 1.1
• Import themes with UIs created using
Sencha Themer
• Architect copies theme package and
applies theme to app
58Pro and Premium

59. Sencha Themer – Theming Contest
• Download Themer 1.1 & our contest
App
sencha.com/sencha-theming-contest-2016/
• Theme App and send us your theme at
contest@sencha.com
59
Winning Prize $2500

60. Lets Theme NewsApp

61. Lets Build An App -
NewsApp

62. Sencha Cmd
• Project Scaffolding
• Code Minification & Build Generation
• Application Tuning & Optimization
• Image Spriting for Legacy Browsers
• Native Packaging
• Theme Compiler – Fashion

63. Lets Cordova build -
NewsApp

64. Ext JS Framework 6.5

65. Ext JS 6.5
• Rich feature set – in Modern toolkit
• Desktop look-n-feel and related behavior
• Leverage the browser advancements – features + performance
• Common codebase for Ext JS, React (and Angular)
• Preparing for modern language features and tooling

66. Grid Enhancements
Live Update Grid Widgets Grid Tools

67. Forms Enhancements
Field Validations Advanced Validations

68. Toolbar Enhancements
Docked toolbar Menu and other components

69. Menu Enhancements
Floating Menu Grid Header Menu

70. Calendar Enhancements
Date Panel / Picker for Date Field Time Zone Support

71. Charts Enhancements
items: [{
xtype: 'chartnavigator',
chart: {
xtype: 'cartesian',
...
...
store: {...},
axes: [...],
series: [...],
},
navigator: {
axis: 'bottom'
}
}]

72. Questions?