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

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

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#) 

A highly scalable cross-platform mobile app development strategy 

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

‣ 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 

‣ 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 

‣ 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 

The Choices 

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 

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

No content

So many choices... xui 

So many choices... 

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

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 

Sencha Touch 

‣ 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 

‣ 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 

‣ 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 

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 

No content

Sencha Architect 

No content

No content

No content

No content

No content

No content

No content

No content

No content

No content

No content

No content

No content

No content

No content

No content

No content

No content

No content

No content

github.com/DanielGallo/CustomerApp 

Packaging Apps 

‣ 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 

‣ 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 

‣ 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 

PhoneGap Build Sencha Mobile Packager Building Your App 

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

{ "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 

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

From Sencha Architect: Building Your App 

Building Your App build.phonegap.com 

App Showcase 

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. “ 

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. “ 

Getting Started 

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

Documentation and Examples docs.sencha.com 

Documentation and Examples docs.sencha.com 

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 

Books senchaexamples.com/books 

Resources 

‣ 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/ 

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

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

Webinar recordings and product walkthroughs Vimeo vimeo.com/sencha 

Sencha Events 

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

‣ 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! 

Questions? 

Create amazing apps built on web standards Daniel Gallo @DanielJGallo