Paris Sencha Meetup - Apps for the multi-device world

Paris Sencha Meetup - 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.

8a235da15adae86851fa3216834198ed?s=128

Lee Boonstra

April 01, 2014
Tweet

Transcript

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

  2. Lee Boonstra Technical Trainer @ Sencha ! lee.boonstra@sencha.com ladysign leeboonstra

    http://www.ladysign-apps.com
  3. None
  4. “As a technical trainer I teach Sencha Touch and Ext

    JS. I develop courses and speak at events.”
  5. “I’ve a background in Java and client-side development. Before Sencha

    I worked as a lead developer for several clients:”
  6. Author of: Hands-On Sencha Touch 2 ! May 2014 ISBN:978-1-4493-6652-0

  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.”
  8. “How many devices did you bring with you today?”

  9. What’s in my bag…

  10. ‣ Laptop What’s in my bag…

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

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

  13. ‣ Laptop ‣ Tablet ‣ E-reader ‣ Game console What’s

    in my bag…
  14. ‣ Laptop ‣ Tablet ‣ E-reader ‣ Game console ‣

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

    Camera ‣ Phone ‣ … What’s in my bag…
  16. None
  17. Different devices, different… Multi device design challenges

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

  19. ‣ Screen size ‣ Operating System & Browser Different devices,

    different… Multi device design challenges
  20. ‣ Screen size ‣ Operating System & Browser ‣ User

    input Different devices, different… Multi device design challenges
  21. ‣ Screen size ‣ Operating System & Browser ‣ User

    input ‣ Features set Different devices, different… Multi device design challenges
  22. ‣ Screen size ‣ Operating System & Browser ‣ User

    input ‣ Features set ! ‣ (…and what about data?) Different devices, different… Multi device design challenges
  23. None
  24. “There is one thing, all these devices have in common…”

  25. None
  26. None
  27. None
  28. 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
  29. None
  30. “So, what’s the best approach to build an app for

    the multi device world?”
  31. None
  32. None
  33. None
  34. None
  35. None
  36. None
  37. None
  38. “Serious App development: Maintainability, Scalability and Flexibility.”

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

  40. “Let’s review the design challenges: How can we solve our

    problems with Sencha Touch ?”
  41. The viewport takes the size of a full screen. Device

    profiles can differentiate views between multi devices. Screen size Multi device design challenges
  42. 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');! }! });
  43. Read the case study: http://bit.ly/Lvx0NC https://vimeo.com/33026515

  44. 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
  45. Check out the tutorial: http://bit.ly/1nuhS1B https://vimeo.com/84073941

  46. 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
  47. Check out the tutorial: http://bit.ly/1lpdJO3 http://www.youtube.com/watch?v=iR4qLfvHaII

  48. User input Multi device design challenges

  49. User input Multi device design challenges

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

  51. 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…) ! ! Features set Multi device design challenges
  52. Or use Adobe PhoneGap / Apache Cordova integration with community-driven

    plugins. ! Features set Multi device design challenges
  53. Features set Multi device design challenges sencha phonegap init com.sencha.myapp

    MyApp! ! sencha app build native
  54. ! ! ! The browser can contain sensitive data, a

    direct gateway for cyber-criminals. ! About data… Multi device design challenges
  55. 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
  56. Sencha Space: http://bit.ly/1cvyXjJ https://vimeo.com/70443725

  57. 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.” !
  58. ! “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. !
  59. Create amazing apps built on web standards Lee Boonstra @ladysign

    ! http://www.speakerdeck.com/savelee