Appsterdam WWLL : Sencha Touch

Appsterdam WWLL : Sencha Touch: How to build highly scalable cross-platform mobile apps.

Transcript

1. “How to build highly scalable cross-platform mobile apps.” Lee Boonstra @ladysign Wednesday, July 31, 13
2. Lee Boonstra Technical Trainer @ Sencha lee.boonstra@sencha.com ladysign leeboonstra http://www.ladysign-apps.com Wednesday, July 31, 13
3. Wednesday, July 31, 13
4. Check our Job openings http://www.sencha.com/company/careers/ Wednesday, July 31, 13
5. “As a technical trainer I teach Sencha Touch and Ext JS. I write documentation and speak at events.” Wednesday, July 31, 13
6. “I’ve a Java and a Front-end development background. Before Sencha, I worked as a lead developer for different clients.” Wednesday, July 31, 13
7. Sencha Touch 2 Cookbook Wednesday, July 31, 13
8. Overview • HTML5 mobile app frameworks • Where Sencha fits in • Build an app with Sencha Architect • Packaging for production Wednesday, July 31, 13
9. “How to build highly scalable cross-platform mobile apps.” Wednesday, July 31, 13
10. That’s a mouthful of words... Wednesday, July 31, 13
11. That’s a mouthful of words... • Highly scalable • (maintenance) must be simple to extend and support large apps Wednesday, July 31, 13
12. That’s a mouthful of words... • Highly scalable • (maintenance) must be simple to extend and support large apps • Cross-platform • works on all major platforms out of the box Wednesday, July 31, 13
13. That’s a mouthful of words... • Highly scalable • (maintenance) must be simple to extend and support large apps • Cross-platform • works on all major platforms out of the box • Mobile app • works on mobile and tablet (touch) devices Wednesday, July 31, 13
14. That’s a mouthful of words... • Highly scalable • (maintenance) must be simple to extend and support large apps • Cross-platform • works on all major platforms out of the box • Mobile app • works on mobile and tablet (touch) devices • Development strategy • something that will support you and your projects for the future Wednesday, July 31, 13
15. HTML5 vs. Native The Matrix (1999) Wednesday, July 31, 13
16. HTML5 vs. Native The Matrix (1999) Wednesday, July 31, 13
17. HTML5 vs. Native The Matrix (1999) Wednesday, July 31, 13
18. HTML5 vs. Native “This is your last change. After this there is no turning back” Morpheus (Matrix 1999) The Matrix (1999) Wednesday, July 31, 13
19. No, this is not a discussion! Wednesday, July 31, 13
20. The Matrix (1999) Wednesday, July 31, 13
21. Wednesday, July 31, 13
22. Wednesday, July 31, 13
23. Where a mobile web app fits in Mobile App - Mobile and Tablet Web App - Desktop and Laptop Internet / Intranet 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 Wednesday, July 31, 13
24. More choices... Wednesday, July 31, 13
25. Advantages of building mobile apps with a HTML5 framework Wednesday, July 31, 13
26. - Write once, run everywhere Advantages of building mobile apps with a HTML5 framework Wednesday, July 31, 13
27. - Write once, run everywhere - Compatible with all modern browsers & devices - Affordable costs and short development times Advantages of building mobile apps with a HTML5 framework Wednesday, July 31, 13
28. - Write once, run everywhere - Compatible with all modern browsers & devices - Affordable costs and short development times - Updates available in real time Advantages of building mobile apps with a HTML5 framework Wednesday, July 31, 13
29. - Write once, run everywhere - Compatible with all modern browsers & devices - Affordable costs and short development times - Updates available in real time - Takes no device space Advantages of building mobile apps with a HTML5 framework Wednesday, July 31, 13
30. - Write once, run everywhere - Compatible with all modern browsers & devices - Affordable costs and short development times - Updates available in real time - Takes no device space - Can be found in App Stores Advantages of building mobile apps with a HTML5 framework Wednesday, July 31, 13
31. Advantages of building mobile apps with a HTML5 framework - Write once, run everywhere - Compatible with all modern browsers & devices - Affordable costs and short development times - Updates available in real time - Takes no device space - Can be found in App Stores - Can access native device APIs Wednesday, July 31, 13
32. Sencha Touch Fast and easy development of rich (mobile) web apps for the broadest range of devices Wednesday, July 31, 13
33. Sencha Touch Mobile HTML5 Framework ‣ High-performance mobile HTML5 framework for building cross-platform apps ‣ Complete set of nice mobile UI (touch-aware) components ‣ MVC application pattern ‣ Handy data layer Wednesday, July 31, 13
34. Sencha Touch Mobile HTML5 Framework ‣ Build apps that run on Android, Apple iOS, BlackBerry, and Windows Phone 8 ‣ Experimental support Firefox OS ‣ ST 2.3 also supports Tizen ‣ Native packaging for iOS and Android from Windows and Mac Wednesday, July 31, 13
35. Wednesday, July 31, 13
36. App Showcase Wednesday, July 31, 13
37. Sartorius App dkd Internet Service GmbH http://app.sartorius.com/sartobind Wednesday, July 31, 13
38. Fastbook Demo Sencha Inc. http://fb.html5isready.com/ http://www.sencha.com/blog/the-making-of-fastbook-an-html5-love-story Wednesday, July 31, 13
39. Discover Music Sencha Inc. http://discovermusic.senchafy.com/ Wednesday, July 31, 13
40. Let’s get our hands dirty The Matrix Revolutions (2003) Wednesday, July 31, 13
41. Code Ext.define('MyApp.view.MainView', { extend: 'Ext.navigation.View', alias: 'widget.mainview', requires: [ 'MyApp.view.CustomerList' ], config: { navigationBar: { docked: 'top', }, items: [ { xtype: 'customerlist', title: 'Customers' } ] } }); Wednesday, July 31, 13
42. Sencha Cmd Scaffold: apps, models, controllers ... Wednesday, July 31, 13
43. MVC Architecture Wednesday, July 31, 13
44. MVC Architecture Wednesday, July 31, 13
45. Sencha Architect Visual app builder, create Sencha Touch and Ext JS applications by dragging and dropping components and previewing your application live. Wednesday, July 31, 13
46. Wednesday, July 31, 13
47. Wednesday, July 31, 13
48. Wednesday, July 31, 13
49. Wednesday, July 31, 13
50. Wednesday, July 31, 13
51. Wednesday, July 31, 13
52. Wednesday, July 31, 13
53. Wednesday, July 31, 13
54. Wednesday, July 31, 13
55. Wednesday, July 31, 13
56. Wednesday, July 31, 13
57. Wednesday, July 31, 13
58. Wednesday, July 31, 13
59. Wednesday, July 31, 13
60. Wednesday, July 31, 13
61. Wednesday, July 31, 13
62. Wednesday, July 31, 13
63. Wednesday, July 31, 13
64. Wednesday, July 31, 13
65. Wednesday, July 31, 13
66. Wednesday, July 31, 13
67. github.com/DanielGallo/CustomerApp Wednesday, July 31, 13
68. Packaging Apps Wednesday, July 31, 13
69. Building your app for Web sencha app build production Wednesday, July 31, 13
70. PhoneGap Build Sencha Mobile Packager Building your app for App Stores Wednesday, July 31, 13
71. ‣ Build native iOS and Android apps using Sencha Touch 2 ‣ Access native APIs from a Sencha Touch 2 app ‣ Cordova 2.9.x APIs & packaging integration ‣ Package apps on Windows and Mac Sencha Mobile Packager Wednesday, July 31, 13
72. ‣ Device information ‣ In-app purchases ‣ Camera ‣ Connection ‣ Contacts ‣ Geolocation ‣ Notification ‣ Orientation ‣ Push Ext.device.Camera.capture({ success: function(image) { imageView.setSrc(image); }, quality: 75, destination: 'data' }); Sencha Mobile Packager Wednesday, July 31, 13
73. Sencha Mobile Packager ‣ Device information ‣ In-app purchases ‣ Camera ‣ Connection ‣ Contacts ‣ Geolocation ‣ Notification ‣ Orientation ‣ Push Ext.Viewport.add({ xtype: 'list', itemTpl: '{First} {Last}', store: { fields: ['First', 'Last'], data: Ext.device.Contacts.getContacts() } }); Wednesday, July 31, 13
74. From command line: Building Your App sencha package build packager.json Wednesday, July 31, 13
75. Building Your App { "applicationName": "Simple Camera App", "bundleSeedId": "Q8U8378N9L", "applicationId": "com.leeboonstra.cameraapp", "outputPath": "../build/", "versionString": "1.0", "inputPath": "./", "icon": { "57": "resources/icons/icon.png", "72": "resources/icons/Icon@72.png", "114": "resources/icons/Icon@2x.png", "144": "resources/icons/Icon@144.png" }, ... Wednesday, July 31, 13
76. Building Your App ... "configuration": "Debug", "platform": "iOS", "deviceType": "iPad", "certificateAlias": "iPhone Developer", "minOSVersion": "4.0", "orientations": [ "portrait", "landscapeLeft", "landscapeRight", "portraitUpsideDown" ] } Wednesday, July 31, 13
77. Building Your App Sencha Architect: Wednesday, July 31, 13
78. Building Your App build.phonegap.com Wednesday, July 31, 13
79. Native APIs Wednesday, July 31, 13
80. Resources Wednesday, July 31, 13
81. Documentation and Examples docs.sencha.com Wednesday, July 31, 13
82. Webinar recordings and product walkthroughs Vimeo vimeo.com/sencha Wednesday, July 31, 13
83. Community-driven forum for seeking and offering help. ‣ Over 400,000 registered members ‣ Ask questions ‣ Offer help to others ‣ Powerful search facility ‣ Premium Forums for paid support subscribers ‣ Monitored by Sencha staff Sencha Forums sencha.com/forum Wednesday, July 31, 13
84. Online resource for finding and sharing of Sencha framework extensions. Sencha Market market.sencha.com Wednesday, July 31, 13
85. Books senchaexamples.com/books Sencha Touch Cookbook Lee Boonstra O’Reilly Sept 2013 Wednesday, July 31, 13
86. When building highly scalable cross-platform mobile apps, choosing a HTML5 framework can be wise choice. Lee Boonstra @ladysign Wednesday, July 31, 13
87. Create amazing apps built on web standards Lee Boonstra @ladysign http://www.speakerdeck.com/savelee Wednesday, July 31, 13