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
   

   View Slide

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
   

   View Slide

3. Copyright Sencha Inc. 2014 3
   This session
   Why upgrading to Ext JS 5
   How to optimise for Touch support
   

   View Slide

4. Copyright Sencha Inc. 2014 4
   Why do you want to
   upgrade?
   

   View Slide

5. Copyright Sencha Inc. 2014 5
   We live in a multi-device world
   

   View Slide

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
   

   View Slide

7. Copyright Sencha Inc. 2014 7
   We live in a multi-device world
   

   View Slide

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?
   

   View Slide

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…)
   

   View Slide

10. Copyright Sencha Inc. 2014 10
    Objectives
    New Events System
    New Themes & Components
    Responsive Design
    Running on a device
    

    View Slide

11. Copyright Sencha Inc. 2014 11
    Event System
    

    View Slide

12. Copyright Sencha Inc. 2014 12
    Ext JS 4 Event System
    Ext JS 4 Event Capturing
    Ext JS 4 Event System
    

    View Slide

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

    View Slide

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
    

    View Slide

15. Copyright Sencha Inc. 2014 15
    Gestures
    Touch-based gestures and
    momentum scrolling
    Touch start, Touch end, Pinch,
    Swipe, Rotate, Drag & Longpress
    Gestures
    

    View Slide

16. Copyright Sencha Inc. 2014 16
    Themes & Components
    

    View Slide

17. Copyright Sencha Inc. 2014 17
    Theme inheritance
    

    View Slide

18. Copyright Sencha Inc. 2014 18
    Neptune Touch
    Neptune Touch Theme
    

    View Slide

19. Copyright Sencha Inc. 2014 19
    Crisp Touch
    Crisp Theme
    

    View Slide

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.
    

    View Slide

21. Copyright Sencha Inc. 2014 21
    Switch themes
    index.html (local)
    bootstrap.css
    

    View Slide

22. Copyright Sencha Inc. 2014
    {
    xtype: ‘textfield’,
    inputType: 'email',
    name: ‘email’,
    fieldLabel: ‘Email’
    }
    22
    Input Type
    

    View Slide

23. Copyright Sencha Inc. 2014 23
    Charts Interaction
    ..
    interactions: [{
    type: 'panzoom'
    }]
    ..
    Chart.js
    ..
    "requires": [
    "sencha-charts"
    ]
    ..
    app.json
    

    View Slide

24. Copyright Sencha Inc. 2014 24
    Other options
    Tab Panel configurations
    Segmented Touch buttons
    Feature/Device checks
    Offline proxies
    

    View Slide

25. Copyright Sencha Inc. 2014 25
    Responsive Design
    

    View Slide

26. Copyright Sencha Inc. 2014 26
    One app for every screen
    

    View Slide

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
    

    View Slide

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
    

    View Slide

29. Copyright Sencha Inc. 2014 29
    Responsive Design in Ext JS
    

    View Slide

30. Copyright Sencha Inc. 2014 30
    Responsive Design in Ext JS
    

    View Slide

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.
    

    View Slide

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'
    }]
    }
    }
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

36. Copyright Sencha Inc. 2014 36
    

    View Slide

37. Copyright Sencha Inc. 2014 37
    Simulator or Emulator
    Xcode
    Android Developer tools
    Visual Studio
    BlackBerry 10 SDK
    

    View Slide

38. Copyright Sencha Inc. 2014 38
    Deploy your app as a web package
    sencha  app  build
    

    View Slide

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
    

    View Slide

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  
    

    View Slide

41. Copyright Sencha Inc. 2014 41
    PhoneGap Cloud Build
    http://build.phonegap.com
    

    View Slide

42. Copyright Sencha Inc. 2014 42
    Sencha Space
    

    View Slide

43. Copyright Sencha Inc. 2014 43
    DEMO
    

    View Slide

44. Copyright Sencha Inc. 2014 44
    Questions?
    

    View Slide

45. Copyright Sencha Inc. 2014 45
    Sencha
    Create amazing apps built on web standards
    lee@sencha.com | ladysign | http://www.speakerdeck.com/savelee
    

    View Slide