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

A highly scalable cross-platform mobile app dev...

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 jsDay in Verona on 16th May 2013.

Daniel Gallo

May 16, 2013
Tweet

More Decks by Daniel Gallo

Other Decks in Technology

Transcript

  1. ‣ About me and introduction ‣ HTML5 mobile app frameworks

    ‣ Where Sencha fits in ‣ Example app ‣ Questions Overview
  2. About Me ‣ Daniel Gallo (@DanielJGallo) ‣ Technical Sales Engineer

    for Sencha ‣ Based in the UK ‣ Using Sencha Ext JS since 2009 ‣ Joined Sencha in February 2012 ‣ Background in web app development (ASP.NET C#)
  3. ‣ Highly scalable - must be simple to extend and

    support large apps A highly scalable cross-platform mobile app development strategy
  4. ‣ 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
  5. ‣ 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
  6. ‣ 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
  7. 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
  8. Plugin-Based HTML5 Native Easily enable cross-platform development Develop a native

    app for each platform Rely on third- party plugins to function
  9. Sencha Rapid and easy development of rich web apps for

    the broadest range of devices from IE6 to the latest tablet
  10. 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
  11. 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
  12. ‣ 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
  13. ‣ 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
  14. ‣ 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
  15. { "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/[email protected]", "114": "resources/icons/[email protected]", "144": "resources/icons/[email protected]" }, ... Building Your App
  16. ... "configuration": "Debug", "platform": "iOS", "deviceType": "iPad", "certificateAlias": "iPhone Developer",

    "minOSVersion": "4.0", "orientations": [ "portrait", "landscapeLeft", "landscapeRight", "portraitUpsideDown" ] } Building Your App
  17. 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. “
  18. Customer: Stella & Dot We wanted to create a wow

    factor with mobile—the kind of reaction you get with well designed native apps.” What they do An accessories and jewellery seller that combines the best of direct sales with eCommerce The Problem Build a mobile web application with support for multiple smartphone devices including iPhone and Android. The Solution Sencha Touch provided a cross-platform mobile framework using web standard technologies that enable developers to build rich features that look and perform like native applications. The Benefit Sencha Touch reduced development time significantly. We met a tight deadline of about seven weeks to design, build, test and deploy the application. Our web app delivered a native-like user experience across multiple devices. “
  19. 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. “
  20. ‣ Built by @flrent using Sencha Touch 2.2 ‣ Works

    o ine by using app cache ‣ Stores data in local storage jsDay Schedule schedule.jsday.it
  21. ‣ Sencha Touch 2 Up and Running ‣ Available from

    the O’Reilly book stand! ‣ Other useful books listed on senchaexamples.com/books/ Books
  22. ‣ 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/
  23. Online resource that enables you to see Sencha framework code

    and quickly experiment with: Sencha Touch Ext JS Sencha Try try.sencha.com
  24. Online resource for finding and sharing of Sencha framework extensions.

    Components Data Connectors Themes Tools Sencha Market market.sencha.com
  25. Meetups meetup.com ‣ Sencha meetup groups organised by Sencha community

    ‣ Good opportunity to meet and discuss all things Sencha!
  26. ‣ Sencha’s annual developer conference ‣ 16th - 19th July

    in Orlando, Florida ‣ 1,000 developers ‣ 60+ technical sessions ‣ Hackathon SenchaCon senchacon.com
  27. ‣ Next webinar on 23rd May: “Building Cross-Platform Mobile Apps

    with Sencha Touch Bundle” ‣ 8am (PDT) / 4pm (BST) / 5pm (CEST) Webinars sencha.com/company/events