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
2. Lee Boonstra ! ! ! lee.boonstra@sencha.com ladysign http://www.ladysign-apps.com
3. Hands-On Sencha Touch 2 A Real-World App Approach Pages: 344 ! ISBN-13: 978-1449366520 ISBN-10: 144936652X
4. “As a technical trainer
   I teach Sencha Touch and
   Ext JS. I develop courses
   and speak at events.” Lead Technical Trainer, Sencha Europe
6. “I’ve a background in Java and client-side development. Before Sencha I worked as a lead developer for several clients:”
8. //for  many  years!!!
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.”
12. “How many devices did you bring with you today?”
13. What’s in my bag…
14. ‣ Laptop ‣ Tablet ‣ E-reader ‣ Game console ‣ Camera ‣ Phone ‣ … What’s in my bag…
16. ‣ Screen Size Different devices, different… Multi device design challenges
17. ‣ Screen Size ‣ Operating System & Browser Different devices, different… Multi device design challenges
18. ‣ Screen Size ‣ Operating System & Browser ‣ User Input Different devices, different… Multi device design challenges
19. ‣ Screen Size ‣ Operating System & Browser ‣ User Input ‣ Features Set Different devices, different… Multi device design challenges
20. ‣ Screen Size ‣ Operating System & Browser ‣ User Input ‣ Features Set ‣ Purpose Of Use Different devices, different… Multi device design challenges
21. ‣ Screen Size ‣ Operating System & Browser ‣ User Input ‣ Features Set ‣ Purpose Of Use ‣ Data & Data Security Different devices, different… Multi device design challenges
22. “There is one thing, all these devices have in common…”
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
28. Sencha Touch
29. Why would I choose Sencha to create multi-device apps?
38. Serious App development: ! Maintainability Scalability Flexibility
39. “A good framework, makes the life of a developer easier.”
41. “Let’s review the design challenges: How can we solve our problems with the Sencha Frameworks?”
42. Screen Size Multi device design challenges
43. Phone: List view Tablet Landscape: Docked list, body mail
44. ! ! ! Responsive Design! ! Screen Size Multi device design challenges
45. Screen Size Multi device design challenges ! //in any class! ! plugins: ['responsive'],! responsiveConfig: {! landscape: {! dock: ‘right’! },! portrait: {! dock: ‘bottom’! }! }!
46. DEMO
47. ! ! ! Device profiles can differentiate views and functionality between multiple devices. ! Screen Size Multi device design challenges Sencha Touch
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');! }! });
49. Read the case study: http://bit.ly/Lvx0NC https://vimeo.com/33026515
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
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
52. Check out the tutorial: http://bit.ly/1nuhS1B https://vimeo.com/84073941
53. Built-in touch and gesture support. (tap, drag, swipe, pinch and rotate…) ! User Input Multi device design challenges
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
55. Check out the tutorial: http://bit.ly/1lpdJO3 http://www.youtube.com/watch?v=iR4qLfvHaII
58. Check out the tutorial: http://bit.ly/1lpdJO3
59. Build a hybrid app, to support device specific features. ! ! ! ! Features Set Multi device design challenges
60. Features Set Multi device design challenges ! ! sencha phonegap init com.sencha.myapp MyApp! ! sencha app build native! !
61. Read the case study: http://bit.ly/1j2AO41 https://vimeo.com/32773806
62. ‣ Design apps with a purpose! ‣ Will people use your app on that particular device? Purpose Of Use Multi device design challenges
63. ‣ Design apps with a purpose! ‣ Will people use your app on that particular device? Purpose Of Use Multi device design challenges
64. Download the tutorial: http://bit.ly/1lK2gUM
65. ! ! ! The browser can contain sensitive data, a direct gateway for cyber-criminals. ! Data Security Multi device design challenges
66. Data Security Multi device design challenges Sencha Space Client App Management Console
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
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
69. Sencha Space: http://bit.ly/1cvyXjJ https://vimeo.com/70443725
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.” !
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. !
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