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.

Transcript

1. “Apps for the
   
   multi-device world.”
   Lee Boonstra
   
   @ladysign
   

   View Slide

2. Lee Boonstra
   Technical Trainer @ Sencha
   !
   lee.boonstra@sencha.com
   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