SenchaCon 2016: Web Development at the Speed of Thought: Succeeding in the App Economy - Sandeep...
-
Upload
sencha -
Category
Technology
-
view
66 -
download
0
Transcript of SenchaCon 2016: Web Development at the Speed of Thought: Succeeding in the App Economy - Sandeep...
![Page 1: SenchaCon 2016: Web Development at the Speed of Thought: Succeeding in the App Economy - Sandeep Adwankar](https://reader035.fdocuments.us/reader035/viewer/2022070521/58ef81bc1a28abd1148b45c5/html5/thumbnails/1.jpg)
Web Development at the Speed of Thought: Succeeding in
the App Economy
Sandeep Adwankar
![Page 2: SenchaCon 2016: Web Development at the Speed of Thought: Succeeding in the App Economy - Sandeep Adwankar](https://reader035.fdocuments.us/reader035/viewer/2022070521/58ef81bc1a28abd1148b45c5/html5/thumbnails/2.jpg)
Download Early Access Ext JS ToolsVS Code PluginArchitect 4.1Themer 1.1Cmd 6.5
http://aka.ms/sencha-code
![Page 3: SenchaCon 2016: Web Development at the Speed of Thought: Succeeding in the App Economy - Sandeep Adwankar](https://reader035.fdocuments.us/reader035/viewer/2022070521/58ef81bc1a28abd1148b45c5/html5/thumbnails/3.jpg)
Web App Economy – Cloud Apps in Enterprise are increasing
* Netskope Cloud Report, Worldwide, Sept 2016
977 Cloud Apps per Enterprise*
![Page 4: SenchaCon 2016: Web Development at the Speed of Thought: Succeeding in the App Economy - Sandeep Adwankar](https://reader035.fdocuments.us/reader035/viewer/2022070521/58ef81bc1a28abd1148b45c5/html5/thumbnails/4.jpg)
Web App Economy – Some Apps Are Used More Often
Average percentage of enterprise users using cloud app - OKTA Business@ work March 2016
![Page 5: SenchaCon 2016: Web Development at the Speed of Thought: Succeeding in the App Economy - Sandeep Adwankar](https://reader035.fdocuments.us/reader035/viewer/2022070521/58ef81bc1a28abd1148b45c5/html5/thumbnails/5.jpg)
Web App Economy – New Metrics for Success
5
High Velocity Feature Delivery Delightful Design
Slack Daily Active Users
![Page 6: SenchaCon 2016: Web Development at the Speed of Thought: Succeeding in the App Economy - Sandeep Adwankar](https://reader035.fdocuments.us/reader035/viewer/2022070521/58ef81bc1a28abd1148b45c5/html5/thumbnails/6.jpg)
Developing Delightful Web Apps at High Velocity
6
Meaningful Mockups
Beautifully Styled Apps
Efficient App Coding
Performant Apps
Ext JS Apps
![Page 7: SenchaCon 2016: Web Development at the Speed of Thought: Succeeding in the App Economy - Sandeep Adwankar](https://reader035.fdocuments.us/reader035/viewer/2022070521/58ef81bc1a28abd1148b45c5/html5/thumbnails/7.jpg)
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
![Page 8: SenchaCon 2016: Web Development at the Speed of Thought: Succeeding in the App Economy - Sandeep Adwankar](https://reader035.fdocuments.us/reader035/viewer/2022070521/58ef81bc1a28abd1148b45c5/html5/thumbnails/8.jpg)
Meaningful Mockups
![Page 9: SenchaCon 2016: Web Development at the Speed of Thought: Succeeding in the App Economy - Sandeep Adwankar](https://reader035.fdocuments.us/reader035/viewer/2022070521/58ef81bc1a28abd1148b45c5/html5/thumbnails/9.jpg)
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
![Page 10: SenchaCon 2016: Web Development at the Speed of Thought: Succeeding in the App Economy - Sandeep Adwankar](https://reader035.fdocuments.us/reader035/viewer/2022070521/58ef81bc1a28abd1148b45c5/html5/thumbnails/10.jpg)
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
![Page 11: SenchaCon 2016: Web Development at the Speed of Thought: Succeeding in the App Economy - Sandeep Adwankar](https://reader035.fdocuments.us/reader035/viewer/2022070521/58ef81bc1a28abd1148b45c5/html5/thumbnails/11.jpg)
Ext JS Stencils – Mock-up Engagement Metrics
11
![Page 12: SenchaCon 2016: Web Development at the Speed of Thought: Succeeding in the App Economy - Sandeep Adwankar](https://reader035.fdocuments.us/reader035/viewer/2022070521/58ef81bc1a28abd1148b45c5/html5/thumbnails/12.jpg)
Efficient App Coding
![Page 13: SenchaCon 2016: Web Development at the Speed of Thought: Succeeding in the App Economy - Sandeep Adwankar](https://reader035.fdocuments.us/reader035/viewer/2022070521/58ef81bc1a28abd1148b45c5/html5/thumbnails/13.jpg)
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
![Page 14: SenchaCon 2016: Web Development at the Speed of Thought: Succeeding in the App Economy - Sandeep Adwankar](https://reader035.fdocuments.us/reader035/viewer/2022070521/58ef81bc1a28abd1148b45c5/html5/thumbnails/14.jpg)
Efficient App Coding using Sencha IDE Plugins
• Code completion, inspection & refactoring
• Code generation
• Code Navigation
• Docs lookup
• Cmd App watch
14
![Page 15: SenchaCon 2016: Web Development at the Speed of Thought: Succeeding in the App Economy - Sandeep Adwankar](https://reader035.fdocuments.us/reader035/viewer/2022070521/58ef81bc1a28abd1148b45c5/html5/thumbnails/15.jpg)
Efficient App Coding using Sencha Architect
• Visually build apps
• Code generation, less manual coding
• Easy configuring classes
• Easy refactoring
• Build your templates
15
![Page 16: SenchaCon 2016: Web Development at the Speed of Thought: Succeeding in the App Economy - Sandeep Adwankar](https://reader035.fdocuments.us/reader035/viewer/2022070521/58ef81bc1a28abd1148b45c5/html5/thumbnails/16.jpg)
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
![Page 17: SenchaCon 2016: Web Development at the Speed of Thought: Succeeding in the App Economy - Sandeep Adwankar](https://reader035.fdocuments.us/reader035/viewer/2022070521/58ef81bc1a28abd1148b45c5/html5/thumbnails/17.jpg)
Sencha Architect 4.1 – Code Engagement Metrics
• Add Pivot Grid with DrillDown Plugin
17
![Page 18: SenchaCon 2016: Web Development at the Speed of Thought: Succeeding in the App Economy - Sandeep Adwankar](https://reader035.fdocuments.us/reader035/viewer/2022070521/58ef81bc1a28abd1148b45c5/html5/thumbnails/18.jpg)
Performant Apps
![Page 19: SenchaCon 2016: Web Development at the Speed of Thought: Succeeding in the App Economy - Sandeep Adwankar](https://reader035.fdocuments.us/reader035/viewer/2022070521/58ef81bc1a28abd1148b45c5/html5/thumbnails/19.jpg)
Performant Apps
Best Practices for Ext JS Apps:
• Validate local data stores
• Validate Data bindings
• Avoid component over-nesting
• Optimize layout runs
19
![Page 20: SenchaCon 2016: Web Development at the Speed of Thought: Succeeding in the App Economy - Sandeep Adwankar](https://reader035.fdocuments.us/reader035/viewer/2022070521/58ef81bc1a28abd1148b45c5/html5/thumbnails/20.jpg)
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
![Page 21: SenchaCon 2016: Web Development at the Speed of Thought: Succeeding in the App Economy - Sandeep Adwankar](https://reader035.fdocuments.us/reader035/viewer/2022070521/58ef81bc1a28abd1148b45c5/html5/thumbnails/21.jpg)
Sencha Inspector – Inspect Engagement Metrics
• Inspect Stores
21
![Page 22: SenchaCon 2016: Web Development at the Speed of Thought: Succeeding in the App Economy - Sandeep Adwankar](https://reader035.fdocuments.us/reader035/viewer/2022070521/58ef81bc1a28abd1148b45c5/html5/thumbnails/22.jpg)
Beautifully Styled Apps
![Page 23: SenchaCon 2016: Web Development at the Speed of Thought: Succeeding in the App Economy - Sandeep Adwankar](https://reader035.fdocuments.us/reader035/viewer/2022070521/58ef81bc1a28abd1148b45c5/html5/thumbnails/23.jpg)
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
![Page 24: SenchaCon 2016: Web Development at the Speed of Thought: Succeeding in the App Economy - Sandeep Adwankar](https://reader035.fdocuments.us/reader035/viewer/2022070521/58ef81bc1a28abd1148b45c5/html5/thumbnails/24.jpg)
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
![Page 25: SenchaCon 2016: Web Development at the Speed of Thought: Succeeding in the App Economy - Sandeep Adwankar](https://reader035.fdocuments.us/reader035/viewer/2022070521/58ef81bc1a28abd1148b45c5/html5/thumbnails/25.jpg)
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
![Page 26: SenchaCon 2016: Web Development at the Speed of Thought: Succeeding in the App Economy - Sandeep Adwankar](https://reader035.fdocuments.us/reader035/viewer/2022070521/58ef81bc1a28abd1148b45c5/html5/thumbnails/26.jpg)
Sencha Themer - Style Engagement Metrics
• Style the app
26
![Page 27: SenchaCon 2016: Web Development at the Speed of Thought: Succeeding in the App Economy - Sandeep Adwankar](https://reader035.fdocuments.us/reader035/viewer/2022070521/58ef81bc1a28abd1148b45c5/html5/thumbnails/27.jpg)
Summary
![Page 28: SenchaCon 2016: Web Development at the Speed of Thought: Succeeding in the App Economy - Sandeep Adwankar](https://reader035.fdocuments.us/reader035/viewer/2022070521/58ef81bc1a28abd1148b45c5/html5/thumbnails/28.jpg)
Use Ext JS Tools to deliver delightful web apps at high velocity
28
Meaningful Mockups with Ext JS Stencils
Beautifully Style Apps with Sencha Themer
Efficient App Coding with Ext JS Plugins and Architect
Performant Apps with Sencha Inspector
![Page 29: SenchaCon 2016: Web Development at the Speed of Thought: Succeeding in the App Economy - Sandeep Adwankar](https://reader035.fdocuments.us/reader035/viewer/2022070521/58ef81bc1a28abd1148b45c5/html5/thumbnails/29.jpg)