Ext JS 5: What's New

Presentation delivered at the Sencha London Meetup, going over some of the new features in Ext JS 5.

Transcript

1. Copyright Sencha Inc. 2014 Sencha 1 Ext JS 5: What’s New Daniel Gallo 
 Sales Engineer, Sencha
2. Copyright Sencha Inc. 2014 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 early 2012 Background in web app development (ASP.NET C#)
3. 3 Sencha Ext JS Sencha Touch Sencha GXT Sencha Architect SENCHA AT A GLANCE | PRODUCTS & SERVICES Sencha Space Develop Design Deploy Support Training Professional Services Technical Support
4. Copyright Sencha Inc. 2014 4 The Interface of Business
5. Copyright Sencha Inc. 2014 5 EXT JS 5 | WHAT IS EXT JS? A better way to build business apps Modern app
 framework Robust user
 interface library Thousands of documented APIs Rich data package Class-based architecture The industry’s most powerful app development framework Deliver solutions to the most platforms and browsers More than 150 user interface components, all designed to work together Complete set of components for building apps
6. Copyright Sencha Inc. 2014 2007 2009 2011 2014 6 EXT JS 5 | A HISTORY OF INNOVATION Ext JS 2.0 Ext JS 3.0 Ext JS 4.0 Ext JS 5.0 Rich Internet Apps using JavaScript Robust user documentation APIs and samples REST support Ext.Direct server-side support Charts and graphs ListView Declarative class system MVC architecture Animation and drawing Two-way data binding MVVM architecture Tablet and touch screen support Routing
7. Copyright Sencha Inc. 2014 7 EXT JS 5 | NEW FEATURES Touch screen support New themes Widgets Touch charts MVVM Architecture Two-way data binding Routing Session management Responsive config Dashboards
8. Copyright Sencha Inc. 2014 8 EXT JS 5 | SUPPORTED PLATFORMS Safari 6+ Firefox IE 8+ Chrome Opera 12+ Safari on
 iOS 6+ Chrome on
 Android 4.1+ IE 10+ on
 Windows 8 Deliver apps on the widest selection of browsers and operating systems with a single code base. Ext JS 5 leverages HTML5 features on modern browsers while maintaining compatibility for legacy browsers.
9. Copyright Sencha Inc. 2014 9 EXT JS 5 | MVC Traditional MVC application approach: Controller Model View
10. Copyright Sencha Inc. 2014 10 EXT JS 5 | MVVM New application architecture: MVVM (Model-View-ViewModel) View Model Model View
11. Copyright Sencha Inc. 2014 11 EXT JS 5 | MVVM New application architecture: MVVM (Model-View-ViewModel) View Model Model View View Controller
12. Copyright Sencha Inc. 2014 12 EXT JS 5 | MVVM View Model Model View View Controller Enables two-way data binding Separation of concerns More scalable and modular app development MVVM
13. Copyright Sencha Inc. 2014 13 EXT JS 5 | TWO-WAY DATA BINDING Live synchronisation between 
 Views and Models Computed values and fields Save time and reduce errors through less custom code Two-way Data Binding Model Compile Change to Model updates View View Template Change to View updates Model Continuous updates. Model is Single-Source-of-Truth
14. Copyright Sencha Inc. 2014 14 EXT JS 5 | TWO-WAY DATA BINDING View.js Ext.define('KitchenSink.view.binding.TwoWay', { extend: 'Ext.panel.Panel', alias: 'widget.binding-two-way', ! width: 300, bodyPadding: 10, ! viewModel: { data: { title: 'The title' } }, ! bind: { title: '{title}' }, ! items: { xtype: 'textfield', fieldLabel: 'Title', labelWidth: 50, bind: '{title}' } }); Two-way data binding example
15. Copyright Sencha Inc. 2014 15 EXT JS 5 | MODEL VALIDATION BINDING Model.js Ext.define('KitchenSink.model.Customer', { extend: 'KitchenSink.model.Base', fields: [ 'name' ], ! proxy: { type: 'rest', url: '/KitchenSink/Customer' }, ! validators: { name: { type: 'length', min: 1 } } }); View.js Ext.define('KitchenSink.view.binding.ModelValidation', { extend: 'Ext.panel.Panel', alias: 'widget.binding-model-validation', title: 'Customer Details', modelValidation: true, session: true, viewModel: { links: { theCustomer: { reference: 'Customer', id: 1 } } }, items: [{ xtype: 'textfield', fieldLabel: 'Name', msgTarget: 'side', bind: '{theCustomer.name}' }] }); Model validation binding example
16. Copyright Sencha Inc. 2014 16 EXT JS 5 | TOUCH SCREEN SUPPORT Tablets and touch screen laptops Touch-based gestures and momentum scrolling Minimal effort to make existing 
 apps touch-compatible Touch Screen Support
17. Copyright Sencha Inc. 2014 17 EXT JS 5 | THEMES Neptune Touch Theme Crisp Theme Crisp and Neptune Touch themes Improve touch interface Themes
18. Copyright Sencha Inc. 2014 18 EXT JS 5 | CHARTS Sencha Charts New touch-enabled charting package, Sencha Charts Separate Kitchen Sink for showcasing all the new Chart components Two charting packages initially Charts
19. Copyright Sencha Inc. 2014 19 EXT JS 5 | ROUTING http://www.example.com/apps/stocks#aapl/01012014 Translates your app’s URL into Controller Actions and Methods Support for multiple routes using
 a single URI Enables deep linking and browser history support Routing
20. Copyright Sencha Inc. 2014 20 EXT JS 5 | RESPONSIVE CONFIG Ext.create({ xtype: 'viewport', layout: 'border', ! items: [{ title: 'Some Title', plugins: 'responsive', ! responsiveConfig: { landscape: { region: 'north' }, ! portrait: { region: 'west' } } }] }); MyViewport.js Ext.create({ xtype: 'viewport', layout: 'border', ! items: [{ title: 'Some Title', plugins: 'responsive', ! responsiveConfig: { 'width < 800': { region: 'north' }, ! 'width >= 800': { region: 'west' } } }] }); MyViewport.js New plugin that can be added to component instances. Enforces how the component is configured under different conditions. Responsive Config
21. Copyright Sencha Inc. 2014 21 EXT JS 5 | RESPONSIVE CONFIG
22. Copyright Sencha Inc. 2014 22 EXT JS 5 | RESPONSIVE CONFIG
23. Copyright Sencha Inc. 2014 23 EXT JS 5 | SESSION MANAGEMENT Transactional data stores Fewer round-trips to the server More robust application behaviours Session Management
24. Copyright Sencha Inc. 2014 24 EXT JS 5 | 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 column’s cells Widgets Widget Grid example
25. Copyright Sencha Inc. 2014 25 EXT JS 5 | WIDGETS Widget Grid example ... columns: [{ text: 'Line', width: 100, dataIndex: 'sequence1', xtype: 'widgetcolumn', widget: { xtype: 'sparklineline', tipTpl: 'Value: {y:number("0.00")}' } }] ... WidgetExample.js
26. Copyright Sencha Inc. 2014 26 EXT JS 5 | DASHBOARDS New Dashboard component adds full support for portal layouts Resizable columns, column creation via drag/drop, and item persistence Dashboards Dashboard example
27. Copyright Sencha Inc. 2014 27 EXT JS 5 | FORMS Form field layouts are now DIV-based, offering improved rendering items. New Tag Field component. Tag Field example
28. Copyright Sencha Inc. 2014 28 EXT JS 5 | 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 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 values are displayed, so less custom code
29. Copyright Sencha Inc. 2014 29 EXT JS 5 | GOALS Same Common Codebase Improved Developer Productivity Evolutionary, not Revolutionary Multiple Device Deployment
30. Copyright Sencha Inc. 2014 30 Tools
31. Copyright Sencha Inc. 2014 31 TOOLS | SENCHA CMD Cross-platform command line tool that automates many application generation and deployment tasks Scaffold, build and minify projects Code generation tools JS compiler to create optimised builds Lightweight web server Native packaging for mobile apps Sencha Cmd
32. Copyright Sencha Inc. 2014 32 TOOLS | APP INSPECTOR FOR SENCHA Free extension for Google Chrome Enhances the Chrome Developer Tools Component Inspector - navigate through all the Sencha components Store Inspector - view the data stores in the app, and explore individual records Event monitor - record events App Inspector for Sencha demo
33. Copyright Sencha Inc. 2014 33 TOOLS | SIESTA Third-party JavaScript unit testing tool that works with Sencha frameworks Perform testing on the DOM Simulate user interactions Generates code coverage reports Can be automated using Selenium or PhantomJS Siesta
34. Copyright Sencha Inc. 2014 34 Getting Started
35. Copyright Sencha Inc. 2014 35 EXT JS 5 | GETTING STARTED Sencha Ext JS 5 - Documentation http://docs.sencha.com/extjs/5.0.0
36. Copyright Sencha Inc. 2014 36 EXT JS 5 | GETTING STARTED Sencha Ext JS 5 - Webinar Recordings http://vimeo.com/sencha/
37. Copyright Sencha Inc. 2014 37 Resources
38. Copyright Sencha Inc. 2014 38 RESOURCES | SENCHA DEVS The definitive directory of developers working with Sencha’s frameworks Developers from all over the world looking for interesting projects Clients looking for developers that match their project’s budget, location and skill requirements senchadevs.com
39. Copyright Sencha Inc. 2014 39 RESOURCES | SENCHA MARKET Online resource for finding and sharing of Sencha framework extensions, including: Architect 3 user extensions Components Data connectors Themes Tools market.sencha.com
40. Copyright Sencha Inc. 2014 40 Training
41. Copyright Sencha Inc. 2014 41 TRAINING | OVERVIEW Comprehensive training programs for developers of all experience levels Helps with developer certification Delivered onsite, public, and online Fast Track to 
 Ext JS Fast Track to Sencha GXT Fast Track to Sencha Touch and Sencha Architect Fast Track to 
 Ext JS and Sencha Architect Ext JS 5 Update and Migration from Ext JS 4
42. Copyright Sencha Inc. 2014 42 Sencha Create amazing apps built on web standards