Building Ext JS 5 apps with Sencha Architect

This session will walk through some of the new features in Ext JS 5 and Sencha Architect 3.1, and demonstrate how to build a data-connected Ext JS 5 app using Sencha Architect.

Transcript

1. Copyright Sencha Inc. 2014 1
   Building Ext JS 5 apps

   with Sencha Architect
   Lee Boonstra
   

   View Slide

2. Copyright Sencha Inc. 2014 2
   lee@sencha.com
   ladysign
   http://www.ladysign-apps.com
   Lee Boonstra
   Sales Engineer & Technical Trainer
   

   View Slide

3. Copyright Sencha Inc. 2014 3
   A Real-World App Approach
   O’Reilly, Pages: 344
   ISBN-13: 978-1449366520
   ISBN-10: 144936652X
   Author:
   Hands-On Sencha Touch 2
   

   View Slide

4. Copyright Sencha Inc. 2014 4
   

   View Slide

5. Copyright Sencha Inc. 2014 5
   

   View Slide

6. Copyright Sencha Inc. 2014 6
   This session
   What’s new in Ext JS 5
   Sencha Architect 3.1
   Build an Ext JS 5 app quickly with Architect
   

   View Slide

7. Copyright Sencha Inc. 2014 7
   What is Ext JS?
   

   View Slide

8. Copyright © 2014 Sencha Inc. 8
   EXT JS | 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
   

   View Slide

9. Copyright Sencha Inc. 2014 9
   EXT JS | FEATURES
   Class system
   Gesture system
   Data package
   Layouts
   Responsive configs
   Two-way data binding
   ARIA
   Component query
   Z-index manager
   MVC/MVVM architecture
   Routing
   Forms
   Enhanced grid
   Keyboard navigation
   Infinite scrolling
   Row editor
   Charting
   Drawing
   Theming
   Documentation
   Screen reader
   

   View Slide

10. Copyright Sencha Inc. 2014 10
    What’s new in Ext JS 5?
    

    View Slide

11. Copyright Sencha Inc. 2014 11
    EXT JS 5 | BUSINESS GOALS
    Same Common Codebase
    Improved Developer Productivity
    Multiple Device Deployment
    

    View Slide

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

    View Slide

13. Copyright Sencha Inc. 2014 13
    EXT JS 5 | NEW FEATURES
    Touch screen support
    New themes
    Widgets
    Touch charts
    VM+VC Architecture
    Two-way data binding
    Routing
    Data improvements
    Responsive config
    New Components
    

    View Slide

14. Copyright Sencha Inc. 2014 14
    Ext JS 5 Architecture
    

    View Slide

15. Copyright Sencha Inc. 2014 15
    EXT JS 5 | Internet of the 90’s!
    

    View Slide

16. Copyright Sencha Inc. 2014 16
    EXT JS 5 | Internet of the 90’s!
    

    View Slide

17. Copyright Sencha Inc. 2014 17
    EXT JS 5 | Problems of the 90’s
    

    View Slide

18. Copyright Sencha Inc. 2014 18
    EXT JS 5 | There was no client-side architecture
    

    View Slide

19. Copyright Sencha Inc. 2014 19
    EXT JS 5 | New browsers appeared, a revolution of JS frameworks
    

    View Slide

20. Copyright Sencha Inc. 2014 20
    EXT JS 5 | Modern, single page apps
    

    View Slide

21. Copyright Sencha Inc. 2014 21
    EXT JS 5 | Design pattern
    Readable / Maintainable Code
    Scalable Code
    Consistent file/folder structure
    Code Reusability
    We need a design pattern…
    

    View Slide

22. Copyright Sencha Inc. 2014
    2007 2009 2011
    22
    EXT JS | A HISTORY OF INNOVATION
    Ext JS 2.0 Ext JS 3.0 Ext JS 4.0
    Class System
    Dynamic Loading
    MVC Architecture
    

    View Slide

23. Copyright Sencha Inc. 2014 23
    EXT JS 5 | MVC
    Controller
    Model View
    Separation of concerns
    Consistent File/Folder structure
    Scalable
    Maintainable Code
    MVC
    Ext JS 4.x
    Store
    

    View Slide

24. Copyright Sencha Inc. 2014 24
    EXT JS 5 | MVC
    Controller
    Model View
    Are global
    Are created with the application
    Contain references to views
    Can become large
    Controllers in Ext JS 4
    Ext JS 4.x
    Store
    

    View Slide

25. Copyright Sencha Inc. 2014
    2007 2009 2011 2014
    25
    EXT JS | A HISTORY OF INNOVATION
    Ext JS 2.0 Ext JS 3.0 Ext JS 4.0 Ext JS 5.0
    Class system
    Dynamic Loading
    MVC architecture
    View Controllers
    View Models
    Two-Way
    Databinding
    

    View Slide

26. Copyright Sencha Inc. 2014 26
    EXT JS 5 | VC+VM
    View Model
    Model View
    View Controller
    Separation of concerns
    More scalable and modular app
    development
    No need for controller references
    Enables two-way data binding
    VM + VC
    Ext JS 5.x
    Store
    

    View Slide

27. Copyright Sencha Inc. 2014 27
    EXT JS 5 | TWO-WAY DATA BINDING
    Live synchronization between 

    Views and View Models
    Save time and reduce errors 

    by using less custom code
    Computed values and fields
    Two-way Data Binding
    View Model
    Compile
    Change to Model
    updates View
    View
    Template
    Change to View
    updates VM
    Continuous updates.
    Model is Single-Source-of-Truth
    

    View Slide

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

    View Slide

29. Copyright Sencha Inc. 2014 29
    EXT JS 5 | TWO-WAY DATA BINDING
    View.js
    …
    viewModel: {
    // Formulas are defined by the ViewModel:
    type: 'binding-formulas',
    data: {
    x: 10
    }
    },
    items: [{
    xtype: 'numberfield',
    fieldLabel: 'Number',
    bind: '{x}'
    }, {
    xtype: 'displayfield',
    fieldLabel: 'Calculated',
    bind: '{x} * 2 = {twice} / {x} * 4 = {quad}'
    }]
    …
    Two-way data binding example
    

    View Slide

30. Copyright Sencha Inc. 2014 30
    EXT JS 5 | ROUTING
    http://www.example.com/apps/stocks#aapl/01012014
    Single Page App with unique URLs
    Translates your app’s URL into
    Controller Actions and Methods
    Enables deep linking and browser
    history support
    Routing
    

    View Slide

31. Copyright Sencha Inc. 2014
    Merge of the data packages from Sencha Touch and Sencha Ext JS

    into a Sencha Core Package
    31
    EXT JS 5 | DATA PACKAGE IMPROVEMENTS
    Chained Stores allow multiple components, to use the same data

    store, but with different filtering, sorting or grouping defined.
    Schemas will improve model associations.
    The new Session class will help manage editing of multiple records

    and their associations.
    

    View Slide

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

    View Slide

33. Copyright Sencha Inc. 2014 33
    EXT JS 5 | New Components
    New Dashboard component adds
    full support for portal layouts
    Resizable columns, column
    creation via drag/drop, and 

    item persistence
    Dashboards
    Dashboard example
    

    View Slide

34. Copyright Sencha Inc. 2014 34
    EXT JS 5 | New Components
    Tag Field example
    Tag Field
    New Tag Field component.
    

    View Slide

35. Copyright Sencha Inc. 2014 35
    EXT JS 5 | WIDGETS
    A lightweight component that can
    be created with minimal overhead
    Can be used in Grids where
    multiple instances of components
    may need to be shown in each
    column’s cells
    Widgets
    Widget Grid example
    

    View Slide

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

    View Slide

37. Copyright Sencha Inc. 2014 37
    EXT JS 5 | New Components
    Rating
    Rating Component
    New Rating widget.
    

    View Slide

38. Copyright Sencha Inc. 2014 38
    EXT JS 5 | New Components
    Picker Components
    New Color Picker Component
    Data/Time Picker Component
    ...
    items: [{
    xtype: 'colorpicker',
    listeners: {
    select: function(picker, selColor) {}
    }
    }]
    ...
    View.js
    

    View Slide

39. Copyright Sencha Inc. 2014 39
    EXT JS 5 | New Components
    Dashboard
    Spreadsheet
    Spreadsheet selection model
    ...
    selModel: {
    type: 'spreadsheet',
    },
    ...
    Grid.js
    

    View Slide

40. Copyright Sencha Inc. 2014 40
    Architect Demo
    

    View Slide

41. Copyright Sencha Inc. 2014 41
    Questions?
    

    View Slide

42. Copyright Sencha Inc. 2014 42
    Sencha
    Create amazing apps built on web standards
    

    View Slide