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
   

   View Slide

2. Lee Boonstra
   Technical Trainer @ Sencha
   lee.boonstra@sencha.com
   ladysign
   leeboonstra
   http://www.ladysign-apps.com
   Wednesday, July 31, 13
   

   View Slide

3. Wednesday, July 31, 13
   

   View Slide

4. Check our Job openings
   http://www.sencha.com/company/careers/
   Wednesday, July 31, 13
   

   View Slide

5. “As a technical trainer
   I teach Sencha Touch and
   Ext JS. I write documentation
   and speak at events.”
   Wednesday, July 31, 13
   

   View Slide

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
   

   View Slide

7. Sencha Touch 2
   Cookbook
   Wednesday, July 31, 13
   

   View Slide

8. Overview
   •
   HTML5 mobile app frameworks
   •
   Where Sencha fits in
   •
   Build an app with Sencha Architect
   •
   Packaging for production
   Wednesday, July 31, 13
   

   View Slide

9. “How to build
   highly scalable
   cross-platform
   mobile apps.”
   Wednesday, July 31, 13
   

   View Slide

10. That’s a mouthful of words...
    Wednesday, July 31, 13
    

    View Slide

11. That’s a mouthful of words...
    •
    Highly scalable
    •
    (maintenance) must be simple to extend and support large apps
    Wednesday, July 31, 13
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

15. HTML5 vs. Native
    The Matrix (1999)
    Wednesday, July 31, 13
    

    View Slide

16. HTML5 vs. Native
    The Matrix (1999)
    Wednesday, July 31, 13
    

    View Slide

17. HTML5 vs. Native
    The Matrix (1999)
    Wednesday, July 31, 13
    

    View Slide

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
    

    View Slide

19. No, this is not a discussion!
    Wednesday, July 31, 13
    

    View Slide

20. The Matrix (1999)
    Wednesday, July 31, 13
    

    View Slide

21. Wednesday, July 31, 13
    

    View Slide

22. Wednesday, July 31, 13
    

    View Slide

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
    

    View Slide

24. More choices...
    Wednesday, July 31, 13
    

    View Slide

25. Advantages of building mobile apps
    with a HTML5 framework
    Wednesday, July 31, 13
    

    View Slide

26. - Write once, run everywhere
    Advantages of building mobile apps
    with a HTML5 framework
    Wednesday, July 31, 13
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

32. Sencha Touch
    Fast and easy development of rich (mobile) web apps
    for the broadest range of devices
    Wednesday, July 31, 13
    

    View Slide

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
    

    View Slide

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
    

    View Slide

35. Wednesday, July 31, 13
    

    View Slide

36. App Showcase
    Wednesday, July 31, 13
    

    View Slide

37. Sartorius App
    dkd Internet Service GmbH
    http://app.sartorius.com/sartobind
    Wednesday, July 31, 13
    

    View Slide

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
    

    View Slide

39. Discover Music
    Sencha Inc.
    http://discovermusic.senchafy.com/
    Wednesday, July 31, 13
    

    View Slide

40. Let’s get our hands dirty
    The Matrix Revolutions (2003)
    Wednesday, July 31, 13
    

    View Slide

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
    

    View Slide

42. Sencha Cmd
    Scaffold:
    apps,
    models,
    controllers
    ...
    Wednesday, July 31, 13
    

    View Slide

43. MVC Architecture
    Wednesday, July 31, 13
    

    View Slide

44. MVC Architecture
    Wednesday, July 31, 13
    

    View Slide

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
    

    View Slide

46. Wednesday, July 31, 13
    

    View Slide

47. Wednesday, July 31, 13
    

    View Slide

48. Wednesday, July 31, 13
    

    View Slide

49. Wednesday, July 31, 13
    

    View Slide

50. Wednesday, July 31, 13
    

    View Slide

51. Wednesday, July 31, 13
    

    View Slide

52. Wednesday, July 31, 13
    

    View Slide

53. Wednesday, July 31, 13
    

    View Slide

54. Wednesday, July 31, 13
    

    View Slide

55. Wednesday, July 31, 13
    

    View Slide

56. Wednesday, July 31, 13
    

    View Slide

57. Wednesday, July 31, 13
    

    View Slide

58. Wednesday, July 31, 13
    

    View Slide

59. Wednesday, July 31, 13
    

    View Slide

60. Wednesday, July 31, 13
    

    View Slide

61. Wednesday, July 31, 13
    

    View Slide

62. Wednesday, July 31, 13
    

    View Slide

63. Wednesday, July 31, 13
    

    View Slide

64. Wednesday, July 31, 13
    

    View Slide

65. Wednesday, July 31, 13
    

    View Slide

66. Wednesday, July 31, 13
    

    View Slide

67. github.com/DanielGallo/CustomerApp
    Wednesday, July 31, 13
    

    View Slide

68. Packaging Apps
    Wednesday, July 31, 13
    

    View Slide

69. Building your app for Web
    sencha app build production
    Wednesday, July 31, 13
    

    View Slide

70. PhoneGap Build
    Sencha Mobile Packager
    Building your app for App Stores
    Wednesday, July 31, 13
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

74. From command line:
    Building Your App
    sencha package build packager.json
    Wednesday, July 31, 13
    

    View Slide

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
    

    View Slide

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
    

    View Slide

77. Building Your App
    Sencha Architect:
    Wednesday, July 31, 13
    

    View Slide

78. Building Your App
    build.phonegap.com
    Wednesday, July 31, 13
    

    View Slide

79. Native APIs
    Wednesday, July 31, 13
    

    View Slide

80. Resources
    Wednesday, July 31, 13
    

    View Slide

81. Documentation and Examples
    docs.sencha.com
    Wednesday, July 31, 13
    

    View Slide

82. Webinar recordings and product walkthroughs
    Vimeo
    vimeo.com/sencha
    Wednesday, July 31, 13
    

    View Slide

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
    

    View Slide

84. Online resource for finding and sharing of
    Sencha framework extensions.
    Sencha Market
    market.sencha.com
    Wednesday, July 31, 13
    

    View Slide

85. Books
    senchaexamples.com/books
    Sencha Touch
    Cookbook
    Lee Boonstra
    O’Reilly
    Sept 2013
    Wednesday, July 31, 13
    

    View Slide

86. When building highly
    scalable cross-platform
    mobile apps, choosing a
    HTML5 framework can be
    wise choice.
    Lee Boonstra
    @ladysign
    Wednesday, July 31, 13
    

    View Slide

87. Create amazing apps built on web standards
    Lee Boonstra
    @ladysign
    http://www.speakerdeck.com/savelee
    Wednesday, July 31, 13
    

    View Slide