More Related Content Similar to Accelerating web application development (20) More from Sandeep Adwankar (11) Accelerating web application development 1. © 2016 Sencha Inc
Accelerating WebApplication Development with
Sencha Architect 4.1 and Themer 1.1
Sandeep Adwankar
Sr. Product Manager
3. © 2016 Sencha Inc
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
3
4. © 2016 Sencha Inc
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
4
5. © 2016 Sencha Inc
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
5
6. © 2016 Sencha Inc
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
6
7. © 2016 Sencha Inc
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
7
8. © 2016 Sencha Inc
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
8
11. © 2016 Sencha Inc
Architect 4.1 – Modern UI Builder
• Similar to classic apps, there is now
support for UI builder in Modern apps.
• Auto-generate grid view columns,
store, model, editors, controller actions
and mock data.
12. © 2016 Sencha Inc
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.
13. © 2016 Sencha Inc
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
14. © 2016 Sencha Inc
Sencha Architect 4.1 EA release
• Run multiple instances of Architect on
your computer
• Updated version of Electron Container
• EAAvailable:
http://pages.sencha.com/ext-js-tools-ea-2016.html
17. © 2016 Sencha Inc
Sencha Themer – Now Part of Pro Bundle!
• Design themes in an interactive visual
environment - no code
• Quick configurations for global theme
variables
• Support for component UIs
• View live style update to your Ext JS app –
No compile, build, reload
• Package your theme, apply to your app
and share with ease
17
18. © 2016 Sencha Inc
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
18
19. © 2016 Sencha Inc
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
19
20. © 2016 Sencha Inc
Themer – Support for Classic and Modern Toolkit
20
21. © 2016 Sencha Inc
Themer – Theme with innovative color selectors
• Color Palette showing base,
background and text color with 5%
lighter and darker
• Material Design based Color Palette
21
22. © 2016 Sencha Inc
Themer – Comprehensive view of all updated styles
• View all Sass variables that you can
style
• As you style you app, filter view to see
updated Sass variables and their
values
22
23. © 2016 Sencha Inc
Themer – Uniquely configure individual Ext JS component
with UIs
• Easy to create a “UI” configuration
• Configure “UI” like any other Ext JS
component
23
24. © 2016 Sencha Inc
Themer – Easy way to add web fonts
• Add Google font URL to use web font
in your app
• Apply the web font to any component
24
25. © 2016 Sencha Inc
Theming Contest – Theme App to win $2500
• Download new contest app
https://www.sencha.com/sencha-theming-
contest-2016/
• Use Themer 1.1
• Theme App and send us your theme
at contest@sencha.com
25
New Theming Contest App
Editor's Notes To expand grid rows. Points:
1. Design themes in an interactive visual environment - no code
2. Quick configurations for global theme variables that cascade across all Ext JS components
3. Support for component Uis
4. View live style update to your Ext JS app – No compile, build, reload
5. Package your theme, apply to your app and share with ease