Strategies for Building Mobile Apps Using ArcGIS API for JavaScript

1. Strategies for Building Mobile Apps Using ArcGIS API for JavaScript Kelly Hutchins, Lloyd Heberlie

2. Welcome • Introductions • Expectations • Agenda Strategies for Building Mobile Apps Using ArcGIS API for JavaScript

3. Why are we here? Strategies for Building Mobile Apps Using ArcGIS API for JavaScript

4. Mobile resources in the API Kelly Hutchins Strategies for Building Mobile Apps Using ArcGIS API for JavaScript

5. Mobile resources in the API Strategies for Building Mobile Apps Using ArcGIS API for JavaScript

6. ArcGIS for Developers website Kelly Hutchins Strategies for Building Mobile Apps Using ArcGIS API for JavaScript

7. Designing for mobile Lloyd Heberlie Strategies for Building Mobile Apps Using ArcGIS API for JavaScript

8. Touch aware map Strategies for Building Mobile Apps Using ArcGIS API for JavaScript

9. HTML 5 input types Strategies for Building Mobile Apps Using ArcGIS API for JavaScript

10. Geocoder, HomeButton esri/dijit/Geocoder esri/dijit/HomeButton Strategies for Building Mobile Apps Using ArcGIS API for JavaScript

11. Popup Mobile esri/dijit/PopupMobile Strategies for Building Mobile Apps Using ArcGIS API for JavaScript

12. Basemap Gallery esri/dijit/BasemapGallery Strategies for Building Mobile Apps Using ArcGIS API for JavaScript

13. Basemap Toggle esri/dijit/BasemapToggle Strategies for Building Mobile Apps Using ArcGIS API for JavaScript

14. Custom components Custom basemap switcher Strategies for Building Mobile Apps Using ArcGIS API for JavaScript

15. Designing for mobile Lloyd Heberlie Strategies for Building Mobile Apps Using ArcGIS API for JavaScript

16. Productivity and code management Kelly Hutchins Strategies for Building Mobile Apps Using ArcGIS API for JavaScript

17. Setup a developer machine web server Source Control Code quality and verification Strategies for Building Mobile Apps Using ArcGIS API for JavaScript

18. Code formatting and management Strategies for Building Mobile Apps Using ArcGIS API for JavaScript

19. Automation and continuous integration Strategies for Building Mobile Apps Using ArcGIS API for JavaScript

20. Code validation • JSLint • JSHint Strategies for Building Mobile Apps Using ArcGIS API for JavaScript

21. CSS preprocessors Strategies for Building Mobile Apps Using ArcGIS API for JavaScript

22. Productivity and code management Lloyd Heberlie Strategies for Building Mobile Apps Using ArcGIS API for JavaScript

23. Debugging and testing for mobile Kelly Hutchins Strategies for Building Mobile Apps Using ArcGIS API for JavaScript

24. Emulators / Simulators Opera Mobile Emulator iOS Simulator * Windows Phone Emulator * Android Emulator Strategies for Building Mobile Apps Using ArcGIS API for JavaScript

25. Physical devices Strategies for Building Mobile Apps Using ArcGIS API for JavaScript

26. Browser based testing Strategies for Building Mobile Apps Using ArcGIS API for JavaScript

27. Remote debugging • Safari Web Inspector Remote • Google Chrome remote debugging • Adobe Edge Inspect • Synchronized screen capture, device details • Node.js (weinre local) • Web Inspector Remote (weinre) Strategies for Building Mobile Apps Using ArcGIS API for JavaScript

28. Enable Safari remote web inspection Strategies for Building Mobile Apps Using ArcGIS API for JavaScript

29. Safari remote debugging Strategies for Building Mobile Apps Using ArcGIS API for JavaScript

30. Safari remote debugging Strategies for Building Mobile Apps Using ArcGIS API for JavaScript

31. Chrome remote debugging Strategies for Building Mobile Apps Using ArcGIS API for JavaScript

32. Chrome remote debugging Strategies for Building Mobile Apps Using ArcGIS API for JavaScript

33. Adobe Edge Inspect Strategies for Building Mobile Apps Using ArcGIS API for JavaScript

34. Adobe Edge Inspect Strategies for Building Mobile Apps Using ArcGIS API for JavaScript

35. Adobe Edge Inspect device_model = LGE Nexus 5 device_res = 1080x1776 orientation = portrait os_name = Android os_version = 4.4.2 pixel_density = 480 dpi device_model = iPhone device_res = 1136x640 orientation = portrait os_name = iOS os_version = 7.0.4 pixel_density = 326 ppi device_model = iPad device_res = 1024x768 orientation = landscape os_name = iOS os_version = 7.0.4 pixel_density = 132 ppi Strategies for Building Mobile Apps Using ArcGIS API for JavaScript

36. Debugging mobile Lloyd Heberlie Strategies for Building Mobile Apps Using ArcGIS API for JavaScript

37. Optimizing for mobile Lloyd Heberlie Strategies for Building Mobile Apps Using ArcGIS API for JavaScript

38. HTML manifest Strategies for Building Mobile Apps Using ArcGIS API for JavaScript

39. HTML manifest on device Strategies for Building Mobile Apps Using ArcGIS API for JavaScript

40. File compression and caching headers Strategies for Building Mobile Apps Using ArcGIS API for JavaScript

41. Dealing with high density resolution Strategies for Building Mobile Apps Using ArcGIS API for JavaScript

42. iOS network simulation Strategies for Building Mobile Apps Using ArcGIS API for JavaScript

43. Android network speed emulation Strategies for Building Mobile Apps Using ArcGIS API for JavaScript

44. Other network simulation options • Fiddler (Windows) • Charles Network Debugging proxy • Network Link Conditioner (Mac OS) • Dummynet Strategies for Building Mobile Apps Using ArcGIS API for JavaScript

45. Additional resources • Esri resources • Esri resource proxy Strategies for Building Mobile Apps Using ArcGIS API for JavaScript

46. Thank you… Please fill out the session survey: First Offering ID (Tuesday): 1255 Second Offering ID (Thursday): 1366 Online – www.esri.com/ucsessionsurveys Paper – pick up and put in drop box Strategies for Building Mobile Apps Using ArcGIS API for JavaScript

47. Strategiesfor Building Mobile Apps Using ArcGIS API for JavaScript

48. Strategies for Building Mobile Apps Using ArcGIS API for JavaScript