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

Apps for the multi-device world.

Lee Boonstra
February 22, 2014

Apps for the multi-device world.

We live in a multi-device world of phones, tablets, TVs, in-car navs, smart watches….And there is one thing all these devices have in common: HTML5.
In this session Lee Boonstra, technical trainer at Sencha, will discuss some of the challenges and opportunities of developing for a multi-device world and how Sencha can help you create better experiences. She will also provide some inspiring client examples and case studies.

Lee Boonstra

February 22, 2014
Tweet

More Decks by Lee Boonstra

Other Decks in Technology

Transcript

  1. “Apps for the

    multi-device world.”
    Lee Boonstra

    @ladysign

    View Slide

  2. Lee Boonstra
    Technical Trainer @ Sencha
    !
    [email protected]
    ladysign
    leeboonstra
    http://www.ladysign-apps.com

    View Slide

  3. View Slide

  4. “As a technical trainer
    I teach Sencha Touch and
    Ext JS. I write documentation
    and speak at events.”

    View Slide

  5. Author of:
    Hands-On Sencha Touch 2
    !
    April 2014
    ISBN:978-1-4493-6652-0

    View Slide

  6. Apps for the

    multi-device world.

    !
    “The challenges and opportunities

    of developing for a multi-device world

    and how Sencha can help you

    create better experiences.”

    View Slide

  7. “How many devices

    did you bring with you
    today?”

    View Slide

  8. What’s in my bag…

    View Slide

  9. ‣ Laptop
    What’s in my bag…

    View Slide

  10. ‣ Laptop

    ‣ Tablet
    What’s in my bag…

    View Slide

  11. ‣ Laptop

    ‣ Tablet

    ‣ E-reader
    What’s in my bag…

    View Slide

  12. ‣ Laptop

    ‣ Tablet

    ‣ E-reader

    ‣ Game console
    What’s in my bag…

    View Slide

  13. ‣ Laptop

    ‣ Tablet

    ‣ E-reader

    ‣ Game console

    ‣ Camera
    What’s in my bag…

    View Slide

  14. ‣ Laptop

    ‣ Tablet

    ‣ E-reader

    ‣ Game console

    ‣ Camera

    ‣ Phone

    ‣ …
    What’s in my bag…

    View Slide

  15. View Slide

  16. Different devices, different…
    Multi device design challenges

    View Slide

  17. ‣ Operating System & Browser
    Different devices, different…
    Multi device design challenges

    View Slide

  18. ‣ Operating System & Browser

    ‣ Screen size
    Different devices, different…
    Multi device design challenges

    View Slide

  19. ‣ Operating System & Browser

    ‣ Screen size

    ‣ User input
    Different devices, different…
    Multi device design challenges

    View Slide

  20. ‣ Operating System & Browser

    ‣ Screen size

    ‣ User input

    ‣ Features set
    Different devices, different…
    Multi device design challenges

    View Slide

  21. ‣ Operating System & Browser

    ‣ Screen size

    ‣ User input

    ‣ Features set

    !
    ‣ (…and what about data?)
    Different devices, different…
    Multi device design challenges

    View Slide

  22. “There is one
    thing, all these
    devices have in
    common…”

    View Slide

  23. View Slide

  24. View Slide

  25. View Slide

  26. Where a multi device app fits in
    Database

    Server
    SQL Server

    Oracle

    Sybase

    MySql

    ...
    Application
    Server
    Java

    PHP

    ColdFusion

    .NET

    Ruby on Rails

    ...
    Web 

    Server
    IIS

    Apache

    Tomcat

    Websphere

    ...
    JSON/XML
    Transport Layer
    Internet / Intranet

    View Slide

  27. “So, what’s the best
    approach to build an app for

    the multi device world?”

    View Slide

  28. View Slide

  29. View Slide

  30. View Slide

  31. View Slide

  32. View Slide

  33. View Slide

  34. View Slide

  35. “Serious App development:

    Maintainability, Scalability

    and Flexibility.”

    View Slide

  36. “A good framework,

    makes the life

    of a developer easier.”

    View Slide

  37. View Slide

  38. “Let’s review the

    design challenges:

    How can we solve our
    problems with

    Sencha Touch ?”

    View Slide

  39. Sencha Touch runs in any
    modern browser. This includes
    the browsers on: iOS, Android,
    BlackBerry, Windows, Tizen…

    Also, it’s possible to package
    apps as hybrid apps, for
    example with Cordova
    integration.
    OS / Browser
    Multi device design challenges

    View Slide

  40. Check out the tutorial:

    http://bit.ly/1nuhS1B
    https://vimeo.com/84073941

    View Slide

  41. The viewport takes the size of
    a full screen.

    Device profiles can differentiate
    views between multi devices.

    Screen size
    Multi device design challenges

    View Slide

  42. Read the case study:

    http://bit.ly/Lvx0NC
    https://vimeo.com/33026515

    View Slide

  43. Sencha Touch has built-in touch
    and gesture support.

    (tap, drag, swipe, pinch and rotate…)

    Sencha Touch is all JavaScript!
    Include JavaScript APIs

    (Leap Motion Controller: Leap.js +
    Sencha integration: Leap Cursor Lib)

    User input
    Multi device design challenges

    View Slide

  44. Check out the tutorial:

    http://bit.ly/1lpdJO3
    http://www.youtube.com/watch?v=iR4qLfvHaII

    View Slide

  45. Build a hybrid app, to support device
    specific features.

    Sencha Touch ships with a native
    device API.

    (Accelerometer, Camera, Contacts, Connection, File
    System, Push, Purchases and many more…)

    Or use Adobe PhoneGap /
    Apache Cordova integration with
    community-driven plugins.

    Features set
    Multi device design challenges

    View Slide

  46. Or use Adobe PhoneGap /
    Apache Cordova integration with
    community-driven plugins.

    !
    Features set
    Multi device design challenges

    View Slide

  47. Read the case study:

    http://bit.ly/1j2AO41
    https://vimeo.com/32773806

    View Slide

  48. !
    !
    !
    The browser can contain sensitive data,

    a direct gateway for cyber-criminals.

    !
    About data…
    Multi device design challenges

    View Slide

  49. Sencha Space
    - Easily deploy apps to a encrypted mobile workspace

    - Remotely revoke access / wipe data

    - Monitor, audit & report on app, device or user activity

    - Let the apps within Sencha Space communicate with
    each other
    About data…
    Multi device design challenges

    View Slide

  50. Sencha Space:

    http://bit.ly/1cvyXjJ
    https://vimeo.com/70443725

    View Slide

  51. Summary
    !
    “When you are building apps for the multi-
    device world, you probably want to look into
    HTML5, because that’s language every
    modern device understands.”

    !

    View Slide

  52. !
    “At Sencha, we want to make the life of an
    app developer easier. We do a lot to help
    you, to build better multi device apps, enabling
    customer success…”

    !
    HTML5 frameworks, tools,

    training programs and support.

    !

    View Slide

  53. Create amazing apps built on web standards
    Lee Boonstra
    @ladysign
    !
    http://www.speakerdeck.com/savelee

    View Slide