Optimizing your current Ext JS applications for touch and tablets

While there are so many reasons to upgrade your existing Ext JS 4 apps to Ext JS 5, by far, the most exciting is the ability to add support for gestures and events that make your existing app touch-friendly without needing to do a complete rewrite.

Transcript

1. Copyright Sencha Inc. 2014 1 Optimize for tablet support Lee Boonstra
2. Copyright Sencha Inc. 2014 2 lee@sencha.com ladysign http://www.ladysign-apps.com http://speakerdeck.com/savelee Lee Boonstra Sales Engineer & Technical Trainer
3. Copyright Sencha Inc. 2014 3 This session Why upgrading to Ext JS 5 How to optimise for Touch support
4. Copyright Sencha Inc. 2014 4 Why do you want to upgrade?
5. Copyright Sencha Inc. 2014 5 We live in a multi-device world
6. Copyright Sencha Inc. 2014 6 Ext JS 4 applications on mobile Grid rows are too small No white space No chart interaction Doesn't perform well Designed for mouse/keyboard
7. Copyright Sencha Inc. 2014 7 We live in a multi-device world
8. Copyright Sencha Inc. 2014 8 Why Ext JS 5? When you want to create a large (web) application, that works on desktops and on touch devices. When you have a working Ext JS 4 application, Ext JS 5 is the best way to optimise for mobile experiences such as tablets. Why do you want to use Ext JS 5?
9. Copyright Sencha Inc. 2014 9 Differences with Sencha Touch EXT JS 5 • Apps that need to display lots of data • Apps that have mouse/keyboard support • Support IE8 & 9 • Ext JS components ( grids, trees..) Differences with Sencha Touch Sencha Touch • Support for phones • Device specific themes • Platform/Theme switcher • Offline support • Touch components (action sheets, navigation view…)
10. Copyright Sencha Inc. 2014 10 Objectives New Events System New Themes & Components Responsive Design Running on a device
11. Copyright Sencha Inc. 2014 11 Event System
12. Copyright Sencha Inc. 2014 12 Ext JS 4 Event System Ext JS 4 Event Capturing Ext JS 4 Event System
13. Copyright Sencha Inc. 2014 13 Ext JS 5 Event System Ext JS 4 Event Bubbling Ext JS 5 Event System
14. Copyright Sencha Inc. 2014 14 Performance Reduces the number of interactions with the DOM that can, especially on older browsers, be quite expensive. Performance
15. Copyright Sencha Inc. 2014 15 Gestures Touch-based gestures and momentum scrolling Touch start, Touch end, Pinch, Swipe, Rotate, Drag & Longpress Gestures
16. Copyright Sencha Inc. 2014 16 Themes & Components
17. Copyright Sencha Inc. 2014 17 Theme inheritance
18. Copyright Sencha Inc. 2014 18 Neptune Touch Neptune Touch Theme
19. Copyright Sencha Inc. 2014 19 Crisp Touch Crisp Theme
20. Copyright Sencha Inc. 2014 20 Switch themes /** * The name of the theme for this application. */ "theme": "ext-theme-neptune-touch", app.json To switch a theme, you will have to edit the app.json file.
21. Copyright Sencha Inc. 2014 21 Switch themes index.html (local) bootstrap.css
22. Copyright Sencha Inc. 2014 { xtype: ‘textfield’, inputType: 'email', name: ‘email’, fieldLabel: ‘Email’ } 22 Input Type
23. Copyright Sencha Inc. 2014 23 Charts Interaction .. interactions: [{ type: 'panzoom' }] .. Chart.js .. "requires": [ "sencha-charts" ] .. app.json
24. Copyright Sencha Inc. 2014 24 Other options Tab Panel configurations Segmented Touch buttons Feature/Device checks Offline proxies
25. Copyright Sencha Inc. 2014 25 Responsive Design
26. Copyright Sencha Inc. 2014 26 One app for every screen
27. Copyright Sencha Inc. 2014 27 Traditional Responsive Design /*Default styles*/ .related-products li { float: left; width: 50%; } /*Display 3 per row for medium displays (like mobile phones in landscape or smaller tablets)*/ @media screen and (min-width: 28.75em) { .related-products li { width: 33.3333333%; } } /*Display 6 to a row for large displays (like medium tablets and up) */ @media screen and min-width: 40.5em) { .related-products li { width: 16.6666667%; } stylesheet
28. Copyright Sencha Inc. 2014 28 Responsive Design in Ext JS 28 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
29. Copyright Sencha Inc. 2014 29 Responsive Design in Ext JS
30. Copyright Sencha Inc. 2014 30 Responsive Design in Ext JS
31. Copyright Sencha Inc. 2014 31 Criteria 31 ★ landscape - True if the device orientation is landscape (always true on desktop devices). ★ portrait - True if the device orientation is portrait (always false on desktop devices). ★ tall - True if width < height regardless of device type. ★ wide - True if width > height regardless of device type. ★ width - The width of the viewport ★ height - The height of the viewport. ★ platform - An object containing various booleans describing the platform.
32. Copyright Sencha Inc. 2014 responsiveFormulas: { smallscreen: 'width < 600', bigscreen: 'width >= 600', touchdevice: function(context) { return Ext.feature.has.Touch; } } 32 Responsive Formulas responsiveConfig: { touchdevice: { interactions: [{ type: 'panzoom' }] } }
33. Copyright Sencha Inc. 2014 33 Best practices 33 ★ Inspect your content ★ Design in your browser (no need for PhotoShop) ★ Start with designing the small interface ★ Test & Optimise
34. Copyright Sencha Inc. 2014 34 New in Ext JS 5.1 > Profiles 34 Ext.application({ name: 'Mail', profiles: ['Desktop', 'Tablet'] }); app.js App profiles are executed at load time. Not limited to config settings Profiles
35. Copyright Sencha Inc. 2014 35 New in Ext JS 5.1 > Profiles 35 Ext.application({ name: 'Mail', profiles: ['Phone', 'Tablet'] }); app.js App profiles are executed at load time. Not limited to config settings Profiles Ext.define('Mail.profile.Tablet', { extend: 'Ext.app.Profile', config: { name: 'Tablet', views: [‘tablet.Main'] }, isActive: function() { return Ext.os.is('Tablet'); } }); profile/Tablet.js
36. Copyright Sencha Inc. 2014 36
37. Copyright Sencha Inc. 2014 37 Simulator or Emulator Xcode Android Developer tools Visual Studio BlackBerry 10 SDK
38. Copyright Sencha Inc. 2014 38 Deploy your app as a web package sencha  app  build
39. Copyright Sencha Inc. 2014 39 Run Within Your Network 39 # # Listen: Allows you to bind Apache to specific IP addresses and/or # ports, instead of the default. See also the # directive. # # Change this to Listen on specific IP addresses as shown below to # prevent Apache from glomming onto all bound IP addresses. # #Listen 80 Listen 127.0.0.1:80 httpd.conf
40. Copyright Sencha Inc. 2014 40 PhoneGap / Cordova "builds": { "ios": { //custom build name "packager": "phonegap", "phonegap": { "config": { "platform": "ios", "remote": false, "id": "com.domain.MyApp", "name": "MyApp" } } } }, app.json sencha  app  build  <target>
41. Copyright Sencha Inc. 2014 41 PhoneGap Cloud Build http://build.phonegap.com
42. Copyright Sencha Inc. 2014 42 Sencha Space
43. Copyright Sencha Inc. 2014 43 DEMO
44. Copyright Sencha Inc. 2014 44 Questions?
45. Copyright Sencha Inc. 2014 45 Sencha Create amazing apps built on web standards lee@sencha.com | ladysign | http://www.speakerdeck.com/savelee