Innovations in Web Applications Tooling - SenchaCon Roadhow 2016

Transcript

1. Innovations in Sencha Framework Marc Gusmano Senior Sales Engineer marc.gusmano@sencha.com
2. Agenda •  A Little Ext JS v6 Recap… •  What’s new in Ext JS 6.5? -  Component Enhancements in Modern Toolkit •  What’s new in Sencha Cmd 6.5? -  Dynamic Package Loading -  Progressive Web Applications
3. A Little Ext JS v6 Recap…
4. Universal App Experience
5. !==! Core! Sencha Ext JS! Sencha Touch! Classic Toolkit! Modern Toolkit! Views / UI Components! DOM! Class / Loader! Data Package! MVC / MVVM! Utilities! Views / UI! Components! DOM! Class / Loader! Data Package! MVC / MVVM! Utilities! Sencha Ext JS 6! New in Ext JS 6.0 – Merged Ext JS & Touch
6. What’s new in Ext JS 6.5?
7. What’s New in Ext JS 6.5? New and improved components Major Upgrade in Modern Toolkit Rich data visualization and data analytics Virtual store and dynamic package loading improve performance for massive data sets •  Deliver rich desktop and mobile experiences using the Modern toolkit ~/aaExt/ext-6.5.0 web
8. Grid Enhancements 8 •  Control selection of cells, rows & columns Flexible Selections •  Inline cell editing and form-based row editing Cell Editing http://localhost:8080/build/examples/kitchensink/?modern#flexible-selection-grid http://localhost:8080/build/examples/kitchensink/?modern#cell-editing
9. Grid Enhancements Virtual Store Grid Tools •  Loads only pages needed by the grid to optimize performance •  Ensures browser performs well even with the largest data sets http://localhost:8080/build/examples/kitchensink/?modern#big-data-grid http://localhost:8080/build/examples/kitchensink/?modern#gridheader-tools
10. Grid Enhancements Group Header Pinning Live Update Grid Widgets 10! http://localhost:8080/build/examples/kitchensink/?modern#grid-tools http://localhost:8080/build/examples/kitchensink/?modern#ticker-grid
11. Grid Enhancements Header menu Context Menu 11 http://localhost:8080/build/examples/kitchensink/?modern#view-options-grid http://localhost:8080/build/examples/kitchensink/?modern#menu- grid
12. List Enhancements List Item Actions (Single) List Item Actions (Multiple) 12 List uses new Virtual Store, which is more intelligent and performant than Buffered Store http://localhost:8080/build/examples/kitchensink/?modern#basic-accordion- swiper
13. Tree Enhancements: Simplified Editing of Hierarchical Data 13 •  Inline editing, tabbing and scrolling Desktop •  Optimized for mobile Mobile http://localhost:8080/build/examples/kitchensink/?modern#tree-editable
14. Forms Enhancements 14 •  Field masking, extensible validations and numerous labeling and error display options Forms Validation •  Advanced validation options: IP address, length, number, phone, time Advanced Validations http://localhost:8080/build/examples/kitchensink/?modern#field-validation-adv http://localhost:8080/build/examples/kitchensink/?modern#field-validation
15. Panels and Tabs Enhancements 15 Header resizing, rotation & collapsing Header position & tools http://localhost:8080/build/examples/kitchensink/?modern#panel-headerposition http://localhost:8080/build/examples/kitchensink/?modern#panel-complex-collapsible
16. Menu Enhancements Button with Menu Docked Toolbar 16 http://localhost:8080/build/examples/kitchensink/?modern#toolbar-menus http://localhost:8080/build/examples/kitchensink/?modern#docked-toolbars
17. Menu Enhancements Floating Menu Edge Menu 17 http://localhost:8080/build/examples/kitchensink/?modern#menus
18. Layout Enhancements Card with Indicators Layouts with Resizable Areas http://localhost:8080/build/examples/kitchensink/?modern#layout-card- indicator http://localhost:8080/build/examples/kitchensink/?modern#layout-box
19. Chart Enhancements: New Components Box Plot Navigator 19 http://localhost:8080/build/examples/kitchensink/?modern#boxplot- nobel http://localhost:8080/build/examples/kitchensink/?modern#navigator-line
20. Pivot Grid Enhancements Widget Column Collapsible Rows and Columns 20 http://localhost:8080/build/examples/kitchensink/?modern#widgets-pivot-grid http://localhost:8080/build/examples/kitchensink/?modern#tabular-pivot-grid
21. D3 Adapter Enhancements •  Upgraded to D3 V4 API – Modular support •  New Organization Chart visualization that works with hierarchical data 21! Org Chart http://localhost:8080/build/examples/kitchensink/?modern#d3-view-sencha-tree
22. Exporter Enhancement •  Export pivot table definitions enabling users to export raw data and the pivot table natively into Excel 22 http://localhost:8080/build/examples/kitchensink/?modern#exporter-pivot-grid
23. Accessibility and Theming •  Focus management and keyboard navigation are now supported with forms and grids -  Navigate easily to different form fields and grid cells Expanded theming API gives more control over the appearance of components 23
24. What’s new in Sencha Cmd 6.5?
25. Sencha Cmd 6.5 Dynamic Package Loading to create a smooth loading experience for large applications Progressive Web App Configs to create mobile web apps that work in offline mode with service worker based caching ECMAScript 2015 (or ES6) support to create Ext JS applications using the latest advances in JavaScript standards 25 •  New Features
26. https://github.com/sencha-extjs-examples/MultiPackageDemo Dynamic Package Loading git clone https://github.com/sencha-extjs-examples/MultiPackageDemo cd MultiPackageDemo sencha workspace install ~/aaExt/ext-6.5.0 cd apps/demo sencha app build –uses -dev sencha app watch
27. Progressive Web Applications (PWA) “A Progressive Web Application uses modern web capabilities to deliver an app-like user experience. They evolve from pages in browser tabs to immersive, top-level apps, maintaining the web's low friction at every moment.“ •  Best of web and native https://github.com/sencha-extjs-examples/PWA
29. Specs of a PWA •  Can run on any type of device, OS or platform •  Have rich, (native) app-like components / UIs •  Have fast performance •  Are secure, they run over https •  Can load instantly •  Can run in offline mode or with a limited network connection •  Can be added to the homescreen (and have an icon and a splash screen)
30. Web Apps Are Better Because •  Easier to deploy and update! •  Web development tools are better than native! •  You’re going to build one anyway!
31. Native Apps Are Better Because •  Access to device APIs! •  Performance (sometimes)! •  Installed on the home screen! •  Work offline! •  Can do stuff in the background!
32. Install to Home Screen •  Create an app shell! •  Use a service worker to prefetch!
33. Service Worker to Pre-cache the App Shell Source: https://developers.google.com/web/fundamentals/getting-started/codelabs/your-first-pwapp/ "progressive": { ! ...! } ! ! Ext JS - app.json!
34. Service Worker in Sencha •  Sencha Cmd 6.5 generates the service worker for you. -  Writes the caching mechanism -  Lists all your assets •  Requires Node JS 6+ to be installed. •  Setup in app.json http://docs.sencha.com/cmd/guides/progressive_web_apps.html
35. Manifest •  JSON manifest that contains paths to icons / splash screens •  Add to home screen •  Splash screens / icons - out of the box generated by Sencha Cmd 6.5!
36. Service Worker API Request Caching – Ext JS Source: https://developers.google.com/web/fundamentals/getting-started/codelabs/your-first-pwapp/ Ext.create('Ext.data.Store', { ! proxy: { ! type: 'ajax', ! ! // @sw-cache { handler: "networkFirst", options: { cache: { name: "api" } } } ! url: '/personnel.json', ! } ! }); ! ! ! ! !
37. Enabling Offline Functionality
38. Service Worker to Pre-cache the App Shell Source: https://developers.google.com/web/fundamentals/getting-started/codelabs/your-first-pwapp/ sw-­‐precache  -­‐-­‐root=dist  -­‐-­‐static-­‐file-­‐globs='dist/**/*.html'  
39. Service Worker API Request Caching – sw-toolbox Source: https://developers.google.com/web/fundamentals/getting-started/codelabs/your-first-pwapp/ toolbox.router.get('/personnel.json', toolbox.networkFirst, { ! cache: { ! name: 'api' ! } ! }); ! ! !
40. Service Worker •  Replacement for AppCache •  JavaScript based •  For offline apps / or bad network connection apps -  Load and Load files from browser cache
41. Questions?