Apps In The Multi-Device World - Dutch Mobile Conference

My presentation for the DMC (Dutch Mobile Conference), about Apps in the Multi-Device world.
Sencha Touch & Ext JS! Yeah baby!

Transcript

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

   View Slide

2. Lee Boonstra
   Lead Technical Trainer Europe
   @ 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 develop courses
   and speak at events.”
   

   View Slide

5. “I’ve a background in Java and
   client-side development.
   Before Sencha I worked as a
   
   lead developer for several
   clients:”
   

   View Slide

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

   View Slide

7. 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

8. “How many devices
   
   did you bring with you
   today?”
   

   View Slide

9. What’s in my bag…
   

   View Slide

10. ‣ Laptop
    What’s in my bag…
    

    View Slide

11. ‣ Laptop
    
    ‣ Tablet
    What’s in my bag…
    

    View Slide

12. ‣ Laptop
    
    ‣ Tablet
    
    ‣ E-reader
    What’s in my bag…
    

    View Slide

13. ‣ Laptop
    
    ‣ Tablet
    
    ‣ E-reader
    
    ‣ Game console
    What’s in my bag…
    

    View Slide

14. ‣ Laptop
    
    ‣ Tablet
    
    ‣ E-reader
    
    ‣ Game console
    
    ‣ Camera
    What’s in my bag…
    

    View Slide

15. ‣ Laptop
    
    ‣ Tablet
    
    ‣ E-reader
    
    ‣ Game console
    
    ‣ Camera
    
    ‣ Phone
    
    ‣ …
    What’s in my bag…
    

    View Slide

16. View Slide

17. Different devices, different…
    Multi device design challenges
    

    View Slide

18. ‣ Screen Size
    Different devices, different…
    Multi device design challenges
    

    View Slide

19. ‣ Screen Size
    
    ‣ Operating System & Browser
    Different devices, different…
    Multi device design challenges
    

    View Slide

20. ‣ Screen Size
    
    ‣ Operating System & Browser
    
    ‣ User Input
    Different devices, different…
    Multi device design challenges
    

    View Slide

21. ‣ Screen Size
    
    ‣ Operating System & Browser
    
    ‣ User Input
    
    ‣ Features Set
    Different devices, different…
    Multi device design challenges
    

    View Slide

22. ‣ Screen Size
    
    ‣ Operating System & Browser
    
    ‣ User Input
    
    ‣ Features Set
    
    ‣ Purpose Of Use
    Different devices, different…
    Multi device design challenges
    

    View Slide

23. ‣ Screen Size
    
    ‣ Operating System & Browser
    
    ‣ User Input
    
    ‣ Features Set
    
    ‣ Purpose Of Use
    
    ‣ (…and what about data?)
    Different devices, different…
    Multi device design challenges
    

    View Slide

24. View Slide

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

    View Slide

26. View Slide

27. View Slide

28. View Slide

29. 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

30. View Slide

31. Sencha Touch
    

    View Slide

32. “So, what’s the best
    approach to build an app for
    
    the multi device world?”
    

    View Slide

33. View Slide

34. View Slide

35. View Slide

36. View Slide

37. View Slide

38. View Slide

39. View Slide

40. “Serious App development:
    
    Maintainability, Scalability
    
    and Flexibility.”
    

    View Slide

41. “A good framework,
    
    makes the life
    
    of a developer easier.”
    

    View Slide

42. “Let’s review the
    
    design challenges:
    
    How can we solve our
    problems with the
    
    Sencha Frameworks?”
    

    View Slide

43. !
    Ext JS 5
    Responsive Design!
    
    !
    Screen Size
    Multi device design challenges
    

    View Slide

44. Screen Size
    Multi device design challenges
    !
    //in any class!
    !
    plugins: ['responsive'],!
    responsiveConfig: {!
    landscape: {!
    dock: ‘left’!
    },!
    portrait: {!
    activeItem: 1!
    }!
    }!
    

    View Slide

45. !
    Sencha Touch
    Device profiles can differentiate
    views between multi devices.
    
    !
    Screen Size
    Multi device design challenges
    

    View Slide

46. Screen Size
    Multi device design challenges
    Ext.define('MyApp.profile.Phone', {!
    extend: 'Ext.app.Profile',!
    !
    config: {!
    name: 'Phone',!
    views: ['Main']!
    },!
    !
    isActive: function() {!
    return Ext.os.is('Phone');!
    }!
    });
    

    View Slide

47. Read the case study:
    
    http://bit.ly/Lvx0NC
    https://vimeo.com/33026515
    

    View Slide

48. Sencha runs in any modern
    browser out of the box!
    
    This includes the browsers on:
    
    Mac, Windows, iOS, Android,
    BlackBerry, Windows, Tizen…
    OS / Browser
    Multi device design challenges
    

    View Slide

49. Possibility to package apps as
    hybrid apps,
    
    for example with PhoneGap /
    Cordova integration.
    OS / Browser
    Multi device design challenges
    

    View Slide

50. Check out the tutorial:
    
    http://bit.ly/1nuhS1B
    https://vimeo.com/84073941
    

    View Slide

51. Sencha Touch & Ext JS 5 have
    built-in touch and gesture
    support.
    
    (tap, drag, swipe, pinch and rotate…)
    
    !
    Sencha is all JavaScript!
    
    Include external API’s!
    User Input
    Multi device design challenges
    

    View Slide

52. Check out the tutorial:
    
    http://bit.ly/1lpdJO3
    http://www.youtube.com/watch?v=iR4qLfvHaII
    

    View Slide

53. User Input
    Multi device design challenges
    

    View Slide

54. User input
    Multi device design challenges
    

    View Slide

55. Check out the tutorial:
    
    http://bit.ly/1lpdJO3
    

    View Slide

56. Build a hybrid app, to support device
    specific features.
    
    !
    !
    !
    !
    Features Set
    Multi device design challenges
    

    View Slide

57. Features Set
    Multi device design challenges
    !
    !
    sencha phonegap init com.sencha.myapp MyApp!
    !
    sencha app build native!
    !
    

    View Slide

58. Read the case study:
    
    http://bit.ly/1j2AO41
    https://vimeo.com/32773806
    

    View Slide

59. ‣ Design apps with a purpose!
    
    ‣ Will people use your app on that particular device?
    Purpose Of Use
    Multi device design challenges
    

    View Slide

60. !
    !
    !
    The browser can contain sensitive data,
    
    a direct gateway for cyber-criminals.
    
    !
    About data…
    Multi device design challenges
    

    View Slide

61. 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

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

    View Slide

63. 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

64. !
    “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

65. Promo
    Register for Sencha Training!
    http://www.sencha.com/training/!
    !
    Promo Codes:!
    !
    Get 25% discount:!
    !
    EXT5DMC2014!
    !
    Or get 50% discount, right now!!
    !
    EXT5DMC20140627!
    

    View Slide

66. Questions???
    

    View Slide

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

    View Slide