Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Ext JS 5: What's New

Ext JS 5: What's New

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

Daniel Gallo

June 30, 2014
Tweet

More Decks by Daniel Gallo

Other Decks in Education

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 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
  5. 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
  6. 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
  7. 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.
  8. Copyright Sencha Inc. 2014 9 EXT JS 5 | MVC

    Traditional MVC application approach: Controller Model View
  9. Copyright Sencha Inc. 2014 10 EXT JS 5 | MVVM

    New application architecture: MVVM (Model-View-ViewModel) View Model Model View
  10. Copyright Sencha Inc. 2014 11 EXT JS 5 | MVVM

    New application architecture: MVVM (Model-View-ViewModel) View Model Model View View Controller
  11. 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
  12. 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
  13. 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
  14. 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
  15. 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
  16. Copyright Sencha Inc. 2014 17 EXT JS 5 | THEMES

    Neptune Touch Theme Crisp Theme Crisp and Neptune Touch themes Improve touch interface Themes
  17. 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
  18. 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
  19. 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
  20. 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
  21. 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
  22. 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
  23. 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
  24. 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
  25. 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
  26. Copyright Sencha Inc. 2014 29 EXT JS 5 | GOALS

    Same Common Codebase Improved Developer Productivity Evolutionary, not Revolutionary Multiple Device Deployment
  27. 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
  28. 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
  29. 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
  30. Copyright Sencha Inc. 2014 35 EXT JS 5 | GETTING

    STARTED Sencha Ext JS 5 - Documentation http://docs.sencha.com/extjs/5.0.0
  31. Copyright Sencha Inc. 2014 36 EXT JS 5 | GETTING

    STARTED Sencha Ext JS 5 - Webinar Recordings http://vimeo.com/sencha/
  32. 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
  33. 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
  34. 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