Ext JS 5: What's New - Speaker Deck

Slide 1

Slide 1 text

Slide 2

Slide 2 text

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#)

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

Copyright Sencha Inc. 2014 7 EXT JS 5 | NEW FEATURES Touch screen support New themes Grid widgets Touch charts MVVM Architecture Two-way data binding Routing Session management Responsive config Dashboards

Slide 8

Slide 8 text

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.

Slide 9

Slide 9 text

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

Copyright Sencha Inc. 2014 13 EXT JS 5 | TWO-WAY DATA BINDING Live synchronisation between   Views and Models Computed values and ﬁelds 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

Slide 14

Slide 14 text

Copyright Sencha Inc. 2014 14 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

Slide 15

Slide 15 text

Copyright Sencha Inc. 2014 15 EXT JS 5 | THEMES Neptune Touch Theme Crisp Theme Crisp and Neptune Touch themes Improve touch interface Themes

Slide 16

Slide 16 text

Copyright Sencha Inc. 2014 16 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

Slide 17

Slide 17 text

Copyright Sencha Inc. 2014 17 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

Slide 18

Slide 18 text

Copyright Sencha Inc. 2014 18 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 conﬁgured under different conditions. Responsive Config

Slide 19

Slide 19 text

Slide 20

Slide 20 text

Copyright Sencha Inc. 2014 20 EXT JS 5 | SESSION MANAGEMENT Transactional data stores Fewer round-trips to the server More robust application behaviours Session Management

Slide 21

Slide 21 text

Copyright Sencha Inc. 2014 21 EXT JS 5 | GRID 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 Grid Widgets Widget Grid example

Slide 22

Slide 22 text

Copyright Sencha Inc. 2014 22 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

Slide 23

Slide 23 text

Copyright Sencha Inc. 2014 23 EXT JS 5 | FORMS Form ﬁeld layouts are now DIV-based, offering improved rendering items. New Tag Field component. Tag Field example

Slide 24

Slide 24 text

Copyright Sencha Inc. 2014 24 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

Slide 25

Slide 25 text

Copyright Sencha Inc. 2014 25 EXT JS 5 | BUSINESS GOALS Multiple Device Deployment Evolutionary, not Revolutionary Improved Developer Productivity Backwards and Forwards   Compatibility

Slide 26

Slide 26 text

Slide 27

Slide 27 text

Copyright Sencha Inc. 2014 27 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

Slide 28

Slide 28 text

Copyright Sencha Inc. 2014 28 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

Slide 29

Slide 29 text

Copyright Sencha Inc. 2014 29 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

Slide 30

Slide 30 text

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

Slide 33

Slide 33 text

Slide 34

Slide 34 text

Copyright Sencha Inc. 2014 34 RESOURCES | SENCHA DEVS The deﬁnitive 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

Slide 35

Slide 35 text

Copyright Sencha Inc. 2014 35 RESOURCES | SENCHA MARKET Online resource for ﬁnding and sharing of Sencha framework extensions, including: Architect 3 user extensions Components Data connectors Themes Tools market.sencha.com

Slide 36

Slide 36 text

Slide 37

Slide 37 text

Copyright Sencha Inc. 2014 37 TRAINING | OVERVIEW Comprehensive training programs for developers of all experience levels Helps with developer certiﬁcation Delivered onsite, public, and online Fast Track to Sencha Ext JS 4 days Fast Track to Sencha Ext JS and Sencha Architect 5 days Fast Track to Sencha Touch and Sencha Architect 5 days Fast Track to Sencha GXT 4 days