Sencha Ext JS 5 Preview

Delivered to the Sencha Touch Online Meetup in Germany

Transcript

1. Sencha Ext JS 5.0 Preview Daniel Gallo Sales Engineer
2. Who am I? • Daniel Gallo (@DanielJGallo)! • Technical Sales Engineer at Sencha! • Based in the UK! • Using Sencha’s frameworks since 2009! • Joined Sencha in February 2012! • Background in web app development 
 (ASP.NET C#)
3. Sencha Ext JS 5
4. • Touch-screen support! • Tablets and touch-screen laptops! • New themes (Crisp and Neptune Touch)! • Gestures and momentum scrolling! • Write your app once and deploy to both desktop and tablet users New Features
6. • New application architecture - MVVM (Model-View- ViewModel)! • Two-way data binding automates the connection of the model layer to the view! • View Controllers that are unique to each instance of a view! • View Models manage a data object and allows the connected view to bind to the data and be notified whenever it changes! • A lot less code due to two-way data binding! • Less complex controllers New Features
7. New Features • Traditional MVC application approach:
8. New Features • MVVM application approach:
9. New Features • MVVM and View Controllers:
10. • Charts upgrade! • New touch-enabled charting package, Sencha Charts! • Separate Kitchen Sink for showcasing different Charts! • Two charting packages initially New Features
11. • Data package improvements! • Merge of the data packages from Sencha Touch and Sencha Ext JS in to a Sencha Core Package! • Many to Many Associations! • Chained Stores to allow multiple components to use the same dataset, but have different sorting, filtering and grouping defined! • Data Sessions to help persist a batch of changes to the server, in the correct order New Features
12. • Data package improvements! • Heterogenous Tree Stores mean trees can contain nodes of multiple types! • Custom field types for Models to help with validation! • Model Validation Binding to easily reflect validation results in the forms where the values are displayed, so less custom code New Features
13. • Routing! • Enables deep linking within applications by mapping the URL through to controller actions / methods! • Browser history support! • Sencha Core Package! • Contains core code that is shared between Ext JS 5 and the next major version of Sencha Touch - Class system, Data, Events, Utilities, and Feature/Environment detection! • More code will be able to be shared between the frameworks New Features
14. • Widgets! • A lightweight component that can be created at minimal cost! • Can be used in Grids where multiple instances of components may need to be shown in each cell New Features Ext.Widget
15. • Grids! • Widget column for adding a component or widget config that’s then used as a template for cells in that column ! ! ! ! ! ! • Buffered updates allow you to specify how often changes are updated in the DOM! • Further rendering optimisations New Features
16. • Forms! • Form field layouts div-based - improved rendering times! • New Tag Field component New Features
17. • Dashboards! • Revised portal example based on a new Dashboard component! • Resizable columns, column creation via drag/drop, and item persistence New Features Ext.dashboard.Dashboard
18. • Responsive Plugin! • New plugin that can be added to component instances to enforce how the component is configured under different conditions New Features Ext.create({ xtype: 'viewport', layout: 'border', ! items: [{ title: 'Some Title', plugins: 'responsive', ! responsiveConfig: { 'width < 800': { region: 'north' }, ! 'width >= 800': { region: 'west' } } }] }); Ext.plugin.Responsive
19. • Responsive Plugin! • Can use many different expressions, such as:! •landscape •portrait •tall •wide •width •height •platform New Features Ext.create({ xtype: 'viewport', layout: 'border', ! items: [{ title: 'Some Title', plugins: 'responsive', ! responsiveConfig: { landscape: { region: 'north' }, ! portrait: { region: 'west' } } }] }); Ext.plugin.Responsive
20. Demo
21. • Public beta released on 3rd April! • New examples at dev.sencha.com/ext/5.0.0/ Sencha Ext JS 5
22. • Documentation and guides at docs.sencha.com/extjs/5.0.0/ Getting Started
23. • Some useful guides:! • What’s new in Ext JS 5! • Ext JS 5 Upgrade Guide! • Sencha Cmd 5 Upgrade Guide! • Charts - Upgrade Guide Getting Started
24. • Previous webinar recordings:! • “Are you ready for Ext JS 5?”: https://vimeo.com/93586920 Getting Started
25. • Ext JS 5 Update Training! • 3 full days or 5 half days live online! • Fast Track to Ext JS 5 Training! • 5 full days or 10 half days live online! ! • Advanced Theming for Sencha Touch Training! • 3 full days or 5 half days live online! • Advanced Theming for Ext JS Training! • 3 full days or 5 half days live online New Course Offerings for 2014
26. • November 10th - 13th! • San Francisco Bay Area! • pages.sencha.com/SenchaCon2014RegistrationNotification.html SenchaCon 2014
27. Questions?
28. Create amazing apps built on web standards