A highly scalable cross-platform mobile app development strategy

When it comes to deciding what technologies to use in creating a cross-platform mobile app, there's plenty to choose from. Each has their own benefits, but to be able to target all the major platforms with ease, such as iOS, Android, BlackBerry and Windows Phone requires a highly capable application framework. This is where Sencha can help.

Sencha has been building frameworks and tools built around HTML5 for several years. In this session you will get a sense for how the Sencha Touch framework, with its MVC architecture, can be easily used for building powerful cross-platform apps, and how Sencha Architect can aid in the overall design and development process.

Talk given at the Dutch Mobile Conference in Amsterdam on 8th June 2013.

Transcript

1. Daniel Gallo
   @DanielJGallo
   A highly scalable cross-platform
   mobile app development strategy
   

   View Slide

2. ‣ About me and introduction
   ‣ HTML5 mobile app frameworks
   ‣ Where Sencha fits in
   ‣ Sencha Architect overview
   ‣ Questions
   Overview
   

   View Slide

3. About Me
   ‣ Daniel Gallo (@DanielJGallo)
   ‣ Technical Sales Engineer for Sencha
   ‣ Based in the UK
   ‣ Using Sencha’s frameworks since 2009
   ‣ Joined Sencha in February 2012
   ‣ Background in web app development (ASP.NET C#)
   

   View Slide

4. A highly scalable cross-platform
   mobile app development strategy
   

   View Slide

5. ‣ Highly scalable - must be simple to extend and support
   large apps
   A highly scalable cross-platform
   mobile app development strategy
   

   View Slide

6. ‣ Highly scalable - must be simple to extend and support
   large apps
   ‣ Cross-platform - works on all the major platforms out of the
   box
   A highly scalable cross-platform
   mobile app development strategy
   

   View Slide

7. ‣ Highly scalable - must be simple to extend and support
   large apps
   ‣ Cross-platform - works on all the major platforms out of the
   box
   ‣ Mobile app - works on mobile and tablet devices
   A highly scalable cross-platform
   mobile app development strategy
   

   View Slide

8. ‣ Highly scalable - must be simple to extend and support
   large apps
   ‣ Cross-platform - works on all the major platforms out of the
   box
   ‣ Mobile app - works on mobile and tablet devices
   ‣ Development strategy - something that will support you
   and your projects for the years ahead
   A highly scalable cross-platform
   mobile app development strategy
   

   View Slide

9. The Choices
   

   View Slide

10. Development choices
    Plugin-Based
    HTML5 Native
    Easily enable
    cross-platform
    development
    Develop a
    native app for
    each platform
    Rely on third-
    party plugins to
    function
    

    View Slide

11. Plugin-Based
    HTML5 Native
    Easily enable
    cross-platform
    development
    Develop a
    native app for
    each platform
    Rely on third-
    party plugins to
    function
    

    View Slide

12. View Slide

13. So many choices...
    xui
    

    View Slide

14. So many choices...
    

    View Slide

15. Sencha
    Rapid and easy development of rich web apps
    for the broadest range of devices
    from IE6 to the latest tablet
    

    View Slide

16. Sencha Touch Bundle
    ‣ Suite of mobile development tools and components:
    ‣ Sencha Touch - Single page mobile app dev framework
    ‣ Sencha Architect - HTML5 visual app builder
    ‣ Sencha Eclipse Plugin - Enhances coding within Eclipse
    ‣ Sencha Touch Charts - Interactive HTML5 charts
    ‣ Sencha Mobile Packaging - Device APIs and native wrapping
    ‣ Support - Technical support, code reviews, bug fix releases
    

    View Slide

17. Sencha Touch
    

    View Slide

18. ‣ High-performance mobile HTML5
    framework for building cross-
    platform apps
    ‣ Complete set of appealing and
    ready-to-use mobile UI
    components
    ‣ MVC application pattern
    ‣ Comprehensive data layer
    Sencha Touch Mobile HTML5 Framework
    

    View Slide

19. ‣ Build applications that run on
    Android, Apple iOS, BlackBerry,
    and Windows Phone 8
    ‣ Tizen support coming soon
    ‣ Native packaging for iOS and
    Android from Windows and Mac
    Sencha Touch Mobile HTML5 Framework
    

    View Slide

20. ‣ Bring your data to life without the
    need for any plugins
    ‣ Multi-touch gestures allow users to
    pinch and zoom through data, spin
    pie charts, pan line charts, and more
    Sencha Touch Charts
    

    View Slide

21. Where Sencha Touch Fits In
    Sencha Touch - Mobile and Tablet
    Sencha Ext JS - 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
    

    View Slide

22. View Slide

23. Sencha Architect
    

    View Slide

24. View Slide

25. View Slide

26. View Slide

27. View Slide

28. View Slide

29. View Slide

30. View Slide

31. View Slide

32. View Slide

33. View Slide

34. View Slide

35. View Slide

36. View Slide

37. View Slide

38. View Slide

39. View Slide

40. View Slide

41. View Slide

42. View Slide

43. View Slide

44. github.com/DanielGallo/CustomerApp
    

    View Slide

45. Packaging Apps
    

    View Slide

46. ‣ Build native iOS and Android applications using Sencha
    Touch 2
    ‣ Access native APIs from a Sencha Touch 2 app
    ‣ Package apps on Windows and Mac
    Sencha Mobile Packager
    

    View Slide

47. ‣ 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
    

    View Slide

48. ‣ 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()
    }
    });
    Sencha Mobile Packager
    

    View Slide

49. PhoneGap Build
    Sencha Mobile Packager
    Building Your App
    

    View Slide

50. sencha package build settings.json
    From command line:
    Building Your App
    

    View Slide

51. {
    "applicationName": "Simple Camera App",
    "bundleSeedId": "Q8U8378N9L",
    "applicationId": "com.danielgallo.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"
    },
    ...
    Building Your App
    

    View Slide

52. ...
    "configuration": "Debug",
    "platform": "iOS",
    "deviceType": "iPad",
    "certificateAlias": "iPhone Developer",
    "minOSVersion": "4.0",
    "orientations": [
    "portrait",
    "landscapeLeft",
    "landscapeRight",
    "portraitUpsideDown"
    ]
    }
    Building Your App
    

    View Slide

53. From Sencha Architect:
    Building Your App
    

    View Slide

54. Building Your App
    build.phonegap.com
    

    View Slide

55. App Showcase
    

    View Slide

56. Customer: Burrows
    For our developers, the efficiency gain is
    almost immeasurable. Without Sencha
    Touch, we would still be working out how
    to make a momentum-based touch
    scroller.”
    What they do
    Full service communications agency which helps its
    clients give their customers key information and
    creative content to inform their purchase decisions.
    The Problem
    Help Ford dealers sell cars, while immersing
    customers in the Ford brand.
    The Solution
    Sencha Touch provided a platform that takes full
    advantage of the real estate a tablet computer has to
    offer and provided immersive experiences to the user
    via full screen images, serving video and a wealth of
    information regarding the Ford brand.
    The Benefit
    The cost savings of not developing twice can add up
    to the hundreds of thousands, and during a recession
    every penny counts.
    “
    

    View Slide

57. Customer: Revolunet
    With Sencha Touch, we got everything
    we needed right out of the box — in a
    clean, homogeneous API. The robustness
    and flexibility of the data package was
    critical because we had to deal with
    various server APIs.”
    What they do
    Cutting-edge web development agency focused on
    rich web interfaces.
    The Problem
    Create a real estate search engine for French
    agencies, built as a white label application.
    The Solution
    The app allows home buyers to browse the catalogue
    of available properties and search for specific
    properties using an intuitive and beautiful interface.
    The results can be displayed on an interactive map, in
    a list view, or be saved in the user preferences for
    push notifications using PhoneGap.
    The Benefit
    We get a single codebase that covers multiple
    platforms (iOS and Android) - using only Web
    technologies and PhoneGap for push. This is a very
    appealing approach, in terms of cost savings,
    product maintainability, and developer resources.
    “
    

    View Slide

58. Getting Started
    

    View Slide

59. Sencha Touch Bundle
    sencha.com/products/touch-bundle
    ‣ Register for a 30-day trial
    

    View Slide

60. Documentation and Examples
    docs.sencha.com
    

    View Slide

61. Documentation and Examples
    docs.sencha.com
    

    View Slide

62. Community-driven forum for seeking and o ering help.
    ‣ Over 400,000
    registered members
    ‣ Ask questions
    ‣ O er help to others
    ‣ Powerful search facility
    ‣ Premium Forums for
    paid support
    subscribers
    ‣ Monitored by Sencha
    sta
    Sencha Forums
    sencha.com/forum
    

    View Slide

63. Books
    senchaexamples.com/books
    

    View Slide

64. Resources
    

    View Slide

65. ‣ JavaScript unit
    testing tool
    ‣ Can simulate
    user interactions
    ‣ Supports Sencha
    frameworks out
    of the box
    ‣ Run tests in
    browser and
    NodeJS
    Siesta
    bryntum.com/products/siesta/
    

    View Slide

66. Online resource that enables you to see
    Sencha framework code and quickly
    experiment with:
    Sencha Touch
    Ext JS
    Sencha Try
    try.sencha.com
    

    View Slide

67. Online resource for finding and sharing of
    Sencha framework extensions.
    Components
    Data Connectors
    Themes
    Tools
    Sencha Market
    market.sencha.com
    

    View Slide

68. Webinar recordings and product walkthroughs
    Vimeo
    vimeo.com/sencha
    

    View Slide

69. Sencha Events
    

    View Slide

70. Meetups
    meetup.com
    ‣ Sencha meetup groups organised by Sencha community
    ‣ Good opportunity to meet and discuss all things Sencha!
    

    View Slide

71. ‣ Sencha’s annual conference
    ‣ Interact with Sencha engineers and fellow developers
    ‣ 16th - 19th July in Orlando, Florida
    ‣ 1,000 developers
    ‣ 60+ technical sessions
    ‣ Hackathon
    senchacon.com
    Discount
    Code!
    

    View Slide

72. Questions?
    

    View Slide

73. Create amazing apps built on web standards
    Daniel Gallo
    @DanielJGallo
    

    View Slide