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.

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
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…
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
24. “There is one thing, all these devices have in common…”
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
30. “So, what’s the best approach to build an app for the multi device world?”
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