O'Reilly Webcast: Apps for the Multi-device world.

We live in a multi-device world of phones, tablets, TVs, in-car navs, and smart watches. All these devices have one thing in common: HTML5. In this webcast, 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.

In this webcast you will:

Learn the design challenges for developing for a multi-device world
Learn about HTML5 and Sencha Touch How to solve these design challenges with Sencha±

Transcript

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

   View Slide

2. Lee Boonstra
   !
   !
   !
   lee.boonstra@sencha.com
   ladysign
   http://www.ladysign-apps.com
   

   View Slide

3. Hands-On Sencha Touch 2
   A Real-World App Approach
   
   Pages: 344
   
   !
   ISBN-13: 978-1449366520
   
   ISBN-10: 144936652X
   

   View Slide

4. “As a technical trainer
   I teach Sencha Touch and
   Ext JS. I develop courses
   and speak at events.”
   Lead Technical Trainer,
   Sencha Europe
   

   View Slide

5. View Slide

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

   View Slide

7. View Slide

8. //for  many  years!!!
   

   View Slide

9. View Slide

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

11. View Slide

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

    View Slide

13. 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. ‣ Screen Size
    Different devices, different…
    Multi device design challenges
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

21. ‣ Screen Size
    
    ‣ Operating System & Browser
    
    ‣ User Input
    
    ‣ Features Set
    
    ‣ Purpose Of Use
    
    ‣ Data & Data Security
    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. View Slide

28. Sencha Touch
    

    View Slide

29. Why would I choose
    
    Sencha to create
    
    multi-device apps?
    

    View Slide

30. View Slide

31. View Slide

32. View Slide

33. View Slide

34. View Slide

35. View Slide

36. View Slide

37. View Slide

38. Serious App development:
    
    !
    Maintainability
    Scalability
    
    Flexibility
    

    View Slide

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

    View Slide

40. View Slide

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

    View Slide

42. Screen Size
    Multi device design challenges
    

    View Slide

43. Phone:
    List view
    Tablet Landscape:
    Docked list, body mail
    

    View Slide

44. !
    !
    !
    Responsive Design!
    
    !
    Screen Size
    Multi device design challenges
    

    View Slide

45. Screen Size
    Multi device design challenges
    !
    //in any class!
    !
    plugins: ['responsive'],!
    responsiveConfig: {!
    landscape: {!
    dock: ‘right’!
    },!
    portrait: {!
    dock: ‘bottom’!
    }!
    }!
    

    View Slide

46. DEMO
    

    View Slide

47. !
    !
    !
    Device profiles can differentiate
    views and functionality between
    multiple devices.
    
    !
    Screen Size
    Multi device design challenges
    Sencha Touch
    

    View Slide

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

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

    View Slide

50. Sencha runs in any modern browser
    out of the box!
    
    This includes the browsers on:
    
    !
    OS / Browser
    Multi device design challenges
    Mac OSX
    
    Windows
    
    Unix
    
    iOS
    
    Android
    
    Tizen
    
    Windows Phone
    
    Tizen
    
    

    View Slide

51. Possibility to package apps as
    hybrid apps, to sell in app stores!
    
    !
    Sencha has Adobe PhoneGap &
    Apache Cordova integration.
    OS / Browser
    Multi device design challenges
    

    View Slide

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

    View Slide

53. Built-in touch and gesture
    support.
    
    (tap, drag, swipe, pinch and rotate…)
    
    !
    User Input
    Multi device design challenges
    

    View Slide

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

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

    View Slide

56. View Slide

57. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

64. Download the tutorial:
    
    http://bit.ly/1lK2gUM
    

    View Slide

65. !
    !
    !
    The browser can contain sensitive data,
    
    a direct gateway for cyber-criminals.
    
    !
    Data Security
    Multi device design challenges
    

    View Slide

66. Data Security
    Multi device design challenges
    Sencha Space Client App Management Console
    

    View Slide

67. Data Security
    Multi device design challenges
    Sencha Space Client App
    - Ideal deployment platform for
    HTML5 apps
    
    - Secure and managed environment 

    for business web applications
    
    - Isolates work life from rest of the
    device for users
    
    - Apps within the Sencha Space can
    communicate with each other
    

    View Slide

68. Data Security
    Multi device design challenges
    Management Console
    - Easily deploy apps to a encrypted
    mobile workspace
    
    - Remotely revoke access / wipe data
    
    - Monitor, audit & report on app, device
    or user activity
    

    View Slide

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

    View Slide

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

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

72. Hands-On Sencha Touch 2
    A Real-World App Approach
    • Learn the fundamentals, including the class and layout systems
    
    • Use the Sencha MVC architecture to structure your code
    
    • Make remote connections by implementing server proxies
    
    • Save data offline by implementing client proxies
    
    • Work with view components such as maps, lists, and floating panels
    
    • Implement and handle forms
    
    • Brand your app and create custom themes
    
    • Create production and native build packages for App Stores
    Lee Boonstra
    @ladysign
    http://oreil.ly/1oxLeZZ
    

    View Slide