ExtJS 6: one framework for all devices

MunichJS talk about new features of ExtJS 6

Transcript

1. ExtJS 6:
 one JS framework
 for all devices Olga Petrova
2. History 2007 first release 2008 commercial license 2010 framework for mobile app 2015 ExtJS 6.0
3. ⎯  UI components ⎯  MVC and MVVM ⎯  Data binding ⎯  Theming ⎯  Build tool — Sencha Cmd Why people love ExtJS
4. ExtJS 6 ExtJS 5 + Sencha Touch 2 = ExtJS 6
5. New features ⎯  Universal applications ⎯  Classic and Modern Views ⎯  Share core code ⎯  3D charts
6. Universal app targets ⎯  All devices ⎯  All operating systems ⎯  All browsers ⎯  All screen sizes Single URL
7. MunichJS app Meetups Talks Popularity
8. Folder structure View-specific code Global code
9. Classic view Main tabs Meetup list Agenda Ext.tab.Panel Ext.grid.Panel Ext.view.View
10. Modern view Meetup list Main tabs Agenda Main tabs Ext.grid.Grid Ext.tab.Panel Ext.navigation.View Ext.tab.Panel
11. Ext.define('MunichJS.view.main.MeetupList', {! extend: 'Ext.grid.Panel',! ! xtype: 'meetuplist’,! ! title: 'Meetups’,! ! columns: [! { text: 'Date', dataIndex: 'date' },! { text: 'Company', dataIndex: 'company', flex: 1 },! { text: 'Place', dataIndex: 'place', flex: 1 }! ],! store: {! type: 'Meetup'! }! });!   /classic/view/ MeetupList.js
12. /classic/view/ Main.js Ext.define('MunichJS.view.main.Main', {! extend: 'Ext.tab.Panel',! xtype: 'app-main',! requires: [! 'MunichJS.view.main.MeetupList’,! …! ],! ! items: [{! xtype: 'meetuplist'! }],! …! });!
13. Code-organization MVC MVVM
14. /app/model/ Meetup.js Ext.define('MunichJS.model.Meetup', {! extend: 'MunichJS.model.Base',! ! fields: [! 'date',! 'sponsors',! 'company',! 'place',! 'going’! ]! });!        
15. /app/model/ Talk.js Ext.define('MunichJS.model.Talk', {! extend: 'MunichJS.model.Base'! });!      
16. Model relations Ext.define('MunichJS.model.Meetup', {! extend: 'MunichJS.model.Base',! requires: ['MunichJS.model.Talk'],! ! fields: [! 'date',! 'sponsors',! 'company',! 'place',! 'going',! 'comments'! ],! hasMany: 'Talk'! });! ! //meetup.talks()!
17. /app/store/ Meetup.js Ext.define('MunichJS.store.Meetup', {! extend: 'Ext.data.Store',! storeId: 'meetup’,! alias: 'store.meetup’,! ! model: 'MunichJS.model.Meetup',! ! proxy: {! type: 'ajax',! url: 'app/data/meetup.json',! reader: {! type: 'json',! rootProperty: 'meetup'! }! }! });!  
18. Code-organization MVC MVVM
19. /app/controller/ Main.js Ext.define('MunichJS.controller.Main', {! extend: 'Ext.app.Controller’,! ! views: [ 'main.Main’ ],! ! init: function() {! this.control({! 'meetuplist' : {! activate: this.loadMeetups,! render: this.loadMeetups! }! });! },! loadMeetups: function (grid) {! grid.getStore().load();! }! });!
20. Code-organization MVC MVVM
21. /app/view/ MeetupModel.js Ext.define('MunichJS.view.main.MeetupModel', {! extend: 'Ext.app.ViewModel’,! alias: 'viewmodel.meetup',! ! data: {! meetup: null! },! ! stores: {! talks: {}! }! });!  
22. /classic/view/ Agenda.js Ext.define('MunichJS.view.main.Agenda', {! extend: 'Ext.panel.Panel',! xtype: 'agenda',! requires: [! 'MunichJS.view.main.MeetupModel'! ],! viewModel: 'meetup',! ! bind: {! title: 'Agenda for {meetup.date}'! },! reference: 'agenda',! ! items: [{! xtype: 'dataview',! bind: {! store: '{talks}'! },! …! }]! });!    
23. MVC + VM
24. ⎯  Controller is always alive, ⎯  ViewController is created ⎯  and destroyed with his View ⎯  Controller can control anything, ⎯  ViewController controls ⎯  only his View Controller vs ViewController
25. /classic/view/ MainController.js Ext.define('MunichJS.view.main.MainController', {! extend: 'Ext.app.ViewController',! alias: 'controller.main',! ! control: {! 'meetuplist': {! select: 'onMeetupSelect'! }! },! ! onMeetupSelect: function(sender, meetup) {! var talksStore = meetup.talks(),! agenda = this.lookupReference('agenda');! ! agenda.getViewModel().set('meetup', meetup);! agenda.getViewModel().set('talks', talksStore);! }! });!  
26. /app/view/ Chart.js   Ext.define('MunichJS.view.main.Chart', {! extend: 'Ext.chart.CartesianChart',! xtype: 'meetupchart’,! store: {! type: 'meetup',! autoLoad: true! },! engine: 'Ext.draw.engine.Canvas',! axes: [{! type: 'numeric3d',! position: 'left',! fields: ['going']! }, {! type: 'category3d',! position: 'bottom',! fields: ['date']! }],! series: {! xField: 'date',! yField: 'going',! type: 'bar3d'! }! });!
27. ⎯  Build profiles ⎯  Application profiles ⎯  Platform configs ⎯  Responsive configs Switching views
28. ⎯  Build profiles ⎯  Application profiles ⎯  Platform configs ⎯  Responsive configs Switching views
29. / app.json "builds": {! "classic": {! "toolkit": "classic",! "theme": "theme-triton",! "requires": [! "charts"! ]! },! ! "modern": {! "toolkit": "modern",! "theme": "theme-neptune",! "requires": [! "charts"! ]! }! },!
30. / index.html Ext.beforeLoad = function (tags) {! Ext.manifest = tags.desktop ?! 'classic' : 'modern’; ! };!
31. ⎯  Build profiles ⎯  Application profiles ⎯  Platform configs ⎯  Responsive configs Switching views
32. /app/ Application.js Ext.define('App.Application', {! extend: 'Ext.app.Application',! ! profiles: [! 'Desktop',! 'Mobile'! ]! });!
33. /profile/ Desktop.js Ext.define('App.profile.Desktop', {! extend: 'Ext.app.Profile',! ! mainView: 'App.view.desktop.Main',! ! isActive: function () {! return Ext.os.is.Desktop;! },! ! …! });!
34. ⎯  Build profiles ⎯  Application profiles ⎯  Platform configs ⎯  Responsive configs Switching views
35. Platform configs Ext.define('MunichJS.view.main.Main', {! extend: 'Ext.tab.Panel',! xtype: 'app-main’,! ! header: {! title: {! platformConfig: {! desktop: {! text: 'MunichJS Application'! },! '!desktop': {! text: 'MunichJS App'! }! }! }! },! ! …! });!      
36. ⎯  Build profiles ⎯  Application profiles ⎯  Platform configs ⎯  Responsive configs Switching views
37. Responsive config Ext.define('MunichJS.view.main.Main', {! extend: 'Ext.tab.Panel',! xtype: 'app-main',! ! …! responsiveConfig: {! tall: {! headerPosition: 'top'! },! wide: {! headerPosition: 'left'! }! },! …! });!        
38. ⎯  Build profiles ⎯  Application profiles ⎯  Platform configs ⎯  Responsive configs Switching views
39. ⎯  Loading time ⎯  Performance ⎯  Not completely bug-free Disadvantages
40. Thank you! Icons: Sergey Furtaev furtaev.ru