7. Build New Feature for SenchaCon App
Engagement Metric
• Show summarized data of sessions
attended by company
• Show by countries
• Show over last 5 SenchaCons
• Show details for each attendee – name,
year, country etc.
7
9. Meaningful Mockups
Best Practices for Ext JS Apps:
• Establish clear requirements
between owner and designer
• Use Standard components to
reduce risk of custom
development
9
Did you add
feedback
button?
Yes, it is in
About view
10. Meaningful Mockups using 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
10
13. Efficient App Coding
Best Practices for Ext JS Apps:
• Scaffold your apps
• Use Code generation when possible
• Refactor to manage complexity
• Use Sencha build tools
13
15. Efficient App Coding using Sencha Architect
• Visually build apps
• Code generation, less manual coding
• Easy configuring classes
• Easy refactoring
• Build your templates
15
16. Sencha Architect 4.1 – What’s New
• Drag and drop Premium Components
- Calendar component
- Pivot grid component
- 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
16
19. Performant Apps
Best Practices for Ext JS Apps:
• Validate local data stores
• Validate Data bindings
• Avoid component over-nesting
• Optimize layout runs
19
20. Performant Apps using 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
20
23. Beautifully Styled Apps
Best Practices for Ext JS Apps:
• Quick Start with predefined
themes
• Create components with UIs
• Use unique web fonts
• Use consistent color palette
23
24. Beautifully Style apps using Sencha Themer
• 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
24
25. Sencha Themer 1.1 - What’s New
• Directly connect your app to Themer
• Inspect Sass variables of components
in your app
• Modify Sass variables and see
changes live
Themer Now Part of Pro Bundle
25
New Theming Contest App
Theme App to Win $2500
28. Use Ext JS Tools to deliver delightful web apps at high
velocity
28
Notes de l'éditeur
Points
Introduce yourself
Launch of various tools since last SenchaCon
Survey of # download of tools
Rationale of various tools and how it will help you succeed
84000 downloads todate
Key points
High number of apps being used in enterprise, great to be web developer
Increased by 30% from 755 to 977
Key points
Apps differ from how many people use it
How frequently they use it
Usage of these apps differ
Key points
Some apps like Slack outshine others in terms usage
Beautiful as well as right feature set seems to be key
Rapid release velocity
Key Points
1. Walkthrough senchacon app
Key Points
Communication between product owner and designer
Communication between designer and developer
Android and ios button difference as an example
Points
1. Mockup faster and better
Points:
1. All points above
Points:
1. All points above
Points:
All points above
Build Ext JS Modern apps with drag and drop
Support for live update using Sencha Cmd and Fashion
Support for Ext JS classic and modern
Points
1. All above
Points
Sencha Inspector detects over nested containers and shows prominently to the developer to correct it.
Layout runs means recalculating layouts which needs to be efficient. Lesser the number of components involved in layout runs, more efficient it is
Sencha Inspector will analyze the data bindings on selected components, and highlight keys whose bound values are not found.
Sencha Inspector can debug issues with a view that is not able to display data from server proxy
Points
1. All above
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