SenchaCon 2016: Web Development at the Speed of Thought: Succeeding in the App Economy - Sandeep Adwankar
Download as PPTX, PDF0 likes220 views
The document discusses best practices and tools for web app development using Ext JS, emphasizing high velocity in feature delivery and user engagement. It highlights the importance of meaningful mockups, efficient coding strategies, and performance optimization through the use of Sencha Architect and Themer. The document also promotes a theming contest to encourage creativity in app design.
SenchaCon 2016: Web Development at the Speed of Thought: Succeeding in the App Economy - Sandeep Adwankar
- 1. Web Development at the Speed of Thought: Succeeding in the App Economy Sandeep Adwankar
- 2. Download Early Access Ext JS To VS Code Plugin Architect 4.1 Themer 1.1 Cmd 6.5 http://aka.ms/sencha-code
- 3. Web App Economy – Cloud Apps in Enterprise are increasing * Netskope Cloud Report, Worldwide, Sept 2016 977 Cloud Apps per Enterprise*
- 4. Web App Economy – Some Apps Are Used More Often Average percentage of enterprise users using cloud app - OKTA Business@ work March 2016
- 5. Web App Economy – New Metrics for Success 5 High Velocity Feature Delivery Delightful Design Slack Daily Active Users
- 6. Developing Delightful Web Apps at High Velocity 6 Ext JS Apps
- 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
- 11. Ext JS Stencils – Mock-up Engagement Metrics 11
- 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
- 14. Efficient App Coding using Sencha IDE Plugins • Code completion, inspection & refactoring • Code generation • Code Navigation • Docs lookup • Cmd App watch 14
- 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
- 17. Sencha Architect 4.1 – Code Engagement Metrics • Add Pivot Grid with DrillDown Plugin 17
- 18. Performant Apps
- 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
- 21. Sencha Inspector – Inspect Engagement Metrics • Inspect Stores 21
- 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
- 26. Sencha Themer - Style Engagement Metrics • Style the app 26
- 27. Summary
- 28. Use Ext JS Tools to deliver delightful web apps at high velocity 28
Editor's Notes
- #2: 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
- #4: Key points High number of apps being used in enterprise, great to be web developer Increased by 30% from 755 to 977
- #5: Key points Apps differ from how many people use it How frequently they use it Usage of these apps differ
- #6: 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
- #8: Key Points 1. Walkthrough senchacon app
- #10: Key Points Communication between product owner and designer Communication between designer and developer Android and ios button difference as an example
- #11: Points 1. Mockup faster and better
- #14: Points: 1. All points above
- #15: Points: 1. All points above
- #16: 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
- #20: Points 1. All above
- #21: 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
- #24: Points 1. All above
- #25: 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