Best practices building multi-platform apps. John Hasthorpe & Josh Venman

Transcription

1 Best practices building multi-platform apps John Hasthorpe & Josh Venman

2 It s good to have options

3 Android Tablet Windows 7 14 Laptop Windows 7 15 Laptop Mac OSX 15 Laptop ios Phone Android Phone Android Tablet

4 What s the goal here?

5 Who is your audience for this application?

6 What resources do you have access to?

7 Android Tablet Google Chrome Opera Apple Safari Dolphin

8 Where do you fit?????

9 Out of the Box Apps John Hasthorpe

10

11 Content Driven Approach Web Map 283cf78d189245ed8c93328c38d03464 ArcGIS.com Map Viewer

12 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

13 Custom Web Map Clients Flex JavaScript Silverlight varmapdeferred= esri.arcgis.utils.createmap("4778fee6371d4e83a f30c7e1", "map"); mapdeferred.then(function(response) { map = response.map;

14 Pure Web Apps John Hasthorpe

15 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

16 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

17 HTML5 Challenge: Browser Support Browser support will increase in time

18 HTML5 Challenge: Browser Fragmentation Must build and test for browser variations 7.08% 0.32%

19 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?

20 What About Hardware?

21 Lets get screen and (min-device-width:768px) and (max-device-width:1024px)

22 Demo - Responsive Design Example Responsive Mapping

23 Jumping Though Hoops?

24 Pushing the Limits (of a Single App) Mobile Web Apps Responsive Design

25 Demo - Will that work in HTML5? Can I Use

26 Hybrid Apps Josh Venman

27 Mixing it up

28 Full Capability Native Single Platform Objective C Java Hybrid Multiple SDKs Multiple Platforms Web Partial Capability Hybrid Approaches Potentially good compromise?

29 Approach #1 Run your JavaScript and HTML app in a native container Apache Cordova Adobe PhoneGap

30 Approach #2 Turn your JavaScript code in to a native binary Appcelerator Appcelerator Studio

31 Approach #3 Develop C# and run your code in.net in native executable Xamarin Xamarin Studio

32 Approach #4 Run mobile ActionScript & Flex Apps in the AIR runtime Adobe AIR Flash Builder

33 Sometimes native is the smart choice

34 Demo - Making PhoneGap simpler One approach to hybrid apps

35 Summary John Hasthorpe

36 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

37 Resources Design Focused - Design Inspiration: - Layout Testing screen size/orientation/pixel density: - Responsive Design Template: Performance Testing - Firebug: - Fiddler: - Chrome Dev Tools: Browser Capabilities - CanIUse: - HTML5 Rocks: Developer Resources - Esri APIS/SDKS/Samples and HTML5: - ArcGIS Online (for WebMaps):

38 Resources Continued Building Hybrid Apps Adobe PhoneGap Build: Apache Cordova: Telerik Icenium: Xamarin Studio: Adobe Flash Builder: Appcelerator Studio: More Tools Esri Leaflet plugin Ripple Emulator

39 Training Building Web Applications Using the ArcGIS API for JavaScript

40 Questions? Thank you

41