Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Appsterdam WWLL : Sencha Touch

Appsterdam WWLL : Sencha Touch

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

Lee Boonstra

July 31, 2013
Tweet

More Decks by Lee Boonstra

Other Decks in Programming

Transcript

  1. “As a technical trainer I teach Sencha Touch and Ext

    JS. I write documentation and speak at events.” Wednesday, July 31, 13
  2. “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
  3. Overview • HTML5 mobile app frameworks • Where Sencha fits

    in • Build an app with Sencha Architect • Packaging for production Wednesday, July 31, 13
  4. That’s a mouthful of words... • Highly scalable • (maintenance)

    must be simple to extend and support large apps Wednesday, July 31, 13
  5. 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
  6. 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
  7. 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
  8. 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
  9. 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
  10. - Write once, run everywhere Advantages of building mobile apps

    with a HTML5 framework Wednesday, July 31, 13
  11. - 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
  12. - 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
  13. - 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
  14. - 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
  15. 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
  16. Sencha Touch Fast and easy development of rich (mobile) web

    apps for the broadest range of devices Wednesday, July 31, 13
  17. 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
  18. 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
  19. 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
  20. 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
  21. ‣ 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
  22. ‣ 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
  23. 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
  24. 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/[email protected]", "114": "resources/icons/[email protected]", "144": "resources/icons/[email protected]" }, ... Wednesday, July 31, 13
  25. Building Your App ... "configuration": "Debug", "platform": "iOS", "deviceType": "iPad",

    "certificateAlias": "iPhone Developer", "minOSVersion": "4.0", "orientations": [ "portrait", "landscapeLeft", "landscapeRight", "portraitUpsideDown" ] } Wednesday, July 31, 13
  26. 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
  27. Online resource for finding and sharing of Sencha framework extensions.

    Sencha Market market.sencha.com Wednesday, July 31, 13
  28. When building highly scalable cross-platform mobile apps, choosing a HTML5

    framework can be wise choice. Lee Boonstra @ladysign Wednesday, July 31, 13
  29. Create amazing apps built on web standards Lee Boonstra @ladysign

    http://www.speakerdeck.com/savelee Wednesday, July 31, 13