Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Optimizing your current Ext JS applications for touch and tablets

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.

Lee Boonstra

December 01, 2014
Tweet

More Decks by Lee Boonstra

Other Decks in Technology

Transcript

  1. Copyright Sencha Inc. 2014 3 This session Why upgrading to

    Ext JS 5 How to optimise for Touch support
  2. 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
  3. 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?
  4. 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…)
  5. Copyright Sencha Inc. 2014 10 Objectives New Events System New

    Themes & Components Responsive Design Running on a device
  6. Copyright Sencha Inc. 2014 12 Ext JS 4 Event System

    Ext JS 4 Event Capturing Ext JS 4 Event System
  7. Copyright Sencha Inc. 2014 13 Ext JS 5 Event System

    Ext JS 4 Event Bubbling Ext JS 5 Event System
  8. Copyright Sencha Inc. 2014 14 Performance Reduces the number of

    interactions with the DOM that can, especially on older browsers, be quite expensive. Performance
  9. Copyright Sencha Inc. 2014 15 Gestures Touch-based gestures and momentum

    scrolling Touch start, Touch end, Pinch, Swipe, Rotate, Drag & Longpress Gestures
  10. 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.
  11. Copyright Sencha Inc. 2014 { xtype: ‘textfield’, inputType: 'email', name:

    ‘email’, fieldLabel: ‘Email’ } 22 Input Type
  12. Copyright Sencha Inc. 2014 23 Charts Interaction .. interactions: [{

    type: 'panzoom' }] .. Chart.js .. "requires": [ "sencha-charts" ] .. app.json
  13. Copyright Sencha Inc. 2014 24 Other options Tab Panel configurations

    Segmented Touch buttons Feature/Device checks Offline proxies
  14. 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
  15. 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
  16. 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.
  17. 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' }] } }
  18. 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
  19. 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
  20. 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
  21. Copyright Sencha Inc. 2014 37 Simulator or Emulator Xcode Android

    Developer tools Visual Studio BlackBerry 10 SDK
  22. Copyright Sencha Inc. 2014 38 Deploy your app as a

    web package sencha  app  build
  23. 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
  24. 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>
  25. Copyright Sencha Inc. 2014 45 Sencha Create amazing apps built

    on web standards [email protected] | ladysign | http://www.speakerdeck.com/savelee