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
2. Copyright Sencha Inc. 2014 2 lee@sencha.com ladysign http://www.ladysign-apps.com Lee Boonstra Sales Engineer & Technical Trainer
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
4. Copyright Sencha Inc. 2014 4
5. Copyright Sencha Inc. 2014 5
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
7. Copyright Sencha Inc. 2014 7 What is Ext JS?
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
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
10. Copyright Sencha Inc. 2014 10 What’s new in Ext JS 5?
11. Copyright Sencha Inc. 2014 11 EXT JS 5 | BUSINESS GOALS Same Common Codebase Improved Developer Productivity Multiple Device Deployment
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
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
14. Copyright Sencha Inc. 2014 14 Ext JS 5 Architecture
15. Copyright Sencha Inc. 2014 15 EXT JS 5 | Internet of the 90’s!
16. Copyright Sencha Inc. 2014 16 EXT JS 5 | Internet of the 90’s!
17. Copyright Sencha Inc. 2014 17 EXT JS 5 | Problems of the 90’s
18. Copyright Sencha Inc. 2014 18 EXT JS 5 | There was no client-side architecture
19. Copyright Sencha Inc. 2014 19 EXT JS 5 | New browsers appeared, a revolution of JS frameworks
20. Copyright Sencha Inc. 2014 20 EXT JS 5 | Modern, single page apps
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…
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
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
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
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
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
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
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
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
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
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.
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
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
34. Copyright Sencha Inc. 2014 34 EXT JS 5 | New Components Tag Field example Tag Field New Tag Field component.
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
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
37. Copyright Sencha Inc. 2014 37 EXT JS 5 | New Components Rating Rating Component New Rating widget.
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
39. Copyright Sencha Inc. 2014 39 EXT JS 5 | New Components Dashboard Spreadsheet Spreadsheet selection model ... selModel: { type: 'spreadsheet', }, ... Grid.js
40. Copyright Sencha Inc. 2014 40 Architect Demo
41. Copyright Sencha Inc. 2014 41 Questions?
42. Copyright Sencha Inc. 2014 42 Sencha Create amazing apps built on web standards