Best practices building multi-platform apps John Hasthorpe & Josh Venman
It s good to have options
Android 4.3 10 Tablet Windows 7 14 Laptop Windows 7 15 Laptop Mac OSX 15 Laptop ios 6 4.6 Phone Android 4.1 4.6 Phone Android 4.3 7 Tablet
What s the goal here?
Who is your audience for this application?
What resources do you have access to?
Android 4.3 7 Tablet Google Chrome Opera Apple Safari Dolphin
Where do you fit?????
Out of the Box Apps John Hasthorpe
Content Driven Approach Web Map 283cf78d189245ed8c93328c38d03464 ArcGIS.com Map Viewer
Web Map Clients Mobile Applications -ArcGIS for IOS, Android & Windows Phone -Collector for ArcGIS -Explorer for ArcGIS* (IOS, Android, Windows & Mac) -Mobile SDKs Web Applications -ArcGIS.com Viewer -ArcGIS Explorer Online -ArcGIS Viewer for Flex/Silverlight -Web APIs Web Map Viewing Query Editing Capture Desktop Applications -ArcGIS for Desktop -ArcGIS Explorer Desktop -Location Analytics -Desktop SDKs Camera Access Location tracking Offline
Custom Web Map Clients Flex JavaScript Silverlight varmapdeferred= esri.arcgis.utils.createmap("4778fee6371d4e83a22786029f30c7e1", "map"); mapdeferred.then(function(response) { map = response.map;
Pure Web Apps John Hasthorpe
The Next Step: Web Applications Advantages Target widest audience (1 vs 4) Utiliseexisting/common web development skills Simple deployment Cost ($) Disadvantages Browser/device fragmentation Access to hardware limited* Difficult to monetise Performance
HTML5: Closing the Gap on Native Apps Specification: Structure & Display + Interactivity + Styling (Work in progress) Interoperability 3D Graphics Audio and Video Playback Drag and Drop Offline Storage Access to Hardware* No Plugins Geolocation Application Cache
HTML5 Challenge: Browser Support Browser support will increase in time http://caniuse.com
HTML5 Challenge: Browser Fragmentation Must build and test for browser variations 7.08% 0.32% http://caniuse.com/#feat=offline-apps http://caniuse.com/namevalue-storage
Making Life Easier: Frameworks and Toolkits Esri-Leaflet Library ArcGIS API for JavaScript (Compact Build) Native Look Browser Variations UI Elements Robust Code Gestures Touch Enabled Maps Multiple Platforms Mobile Widgets At What Cost?
What About Hardware? http://www.websitedimensions.com/sitegrid/index.php
Lets get Responsive.. @media screen and (min-device-width:768px) and (max-device-width:1024px) http://maps.esri.com/sp_demos/responsive/index.html http://www.websitedimensions.com/sitegrid/index.php
Demo - Responsive Design Example Responsive Mapping
Jumping Though Hoops?
Pushing the Limits (of a Single App) Mobile Web Apps Responsive Design
Demo - Will that work in HTML5? Can I Use
Hybrid Apps Josh Venman
Mixing it up
Full Capability Native Single Platform Objective C Java Hybrid Multiple SDKs Multiple Platforms Web Partial Capability Hybrid Approaches Potentially good compromise?
Approach #1 Run your JavaScript and HTML app in a native container Apache Cordova Adobe PhoneGap
Approach #2 Turn your JavaScript code in to a native binary Appcelerator Appcelerator Studio
Approach #3 Develop C# and run your code in.net in native executable Xamarin Xamarin Studio
Approach #4 Run mobile ActionScript & Flex Apps in the AIR runtime Adobe AIR Flash Builder
Sometimes native is the smart choice
Demo - Making PhoneGap simpler One approach to hybrid apps
Summary John Hasthorpe
Deciding on a way forward Requirement Web Map In EsriApp Out of the Box Functionality Web App Wrap-up Responsive Decdision Matrix Here Custom Functionality Use Web Development Skills Simple Deployment / Update BroadReach / Single Code Base Focused (UI or Functionality) Access to Hardware App Store Presence Optimum Performance Native Experience Web App Targeted Hybrid App Native App Full Partial
Resources Design Focused - Design Inspiration: http://www.mobile-patterns.com/maps - Layout Testing screen size/orientation/pixel density: http://www.websitedimensions.com/sitegrid/index.php - Responsive Design Template: http://maps.esri.com/sp_demos/responsive/index.html Performance Testing - Firebug: http://getfirebug.com/ - Fiddler: http://fiddler2.com/ - Chrome Dev Tools: https://developers.google.com/chrome-developer-tools Browser Capabilities - CanIUse: http://caniuse.com - HTML5 Rocks: www.html5rocks.com Developer Resources - Esri APIS/SDKS/Samples and HTML5: https://developers.arcgis.com/en/ - ArcGIS Online (for WebMaps): http://arcgis.com/
Resources Continued Building Hybrid Apps Adobe PhoneGap Build: https://build.phonegap.com Apache Cordova: http://cordova.apache.org Telerik Icenium: http://icenium.com Xamarin Studio: http://xamarin.com Adobe Flash Builder: http://www.adobe.com/au/products/flash-builder.html Appcelerator Studio: http://www.appcelerator.com/ More Tools Esri Leaflet plugin https://github.com/esri/esri-leaflet Ripple Emulator http://ripple.incubator.apache.org/
Training Building Web Applications Using the ArcGIS API for JavaScript http://esriaustralia.com.au/training-gis-courses-developer
Questions? Thank you