![Page 1: Building Native Apps with ArcGIS API for JavaScript …proceedings.esri.com/library/userconf/devsummit15/papers/dev_int... · Mobile web map used in areas of intermittent or no internet](https://reader031.vdocuments.net/reader031/viewer/2022013015/5b8f651c09d3f208228c6635/html5/thumbnails/1.jpg)
Building Native Apps with ArcGIS API for JavaScript Using PhoneGap and jQuery
Andy Gup, Lloyd Heberlie
![Page 2: Building Native Apps with ArcGIS API for JavaScript …proceedings.esri.com/library/userconf/devsummit15/papers/dev_int... · Mobile web map used in areas of intermittent or no internet](https://reader031.vdocuments.net/reader031/viewer/2022013015/5b8f651c09d3f208228c6635/html5/thumbnails/2.jpg)
Agenda
•Getting to know PhoneGap• jQuery and jQuery mobile overview• jQuery and ArcGIS API for JavaScript• Putting it all together• Additional information
![Page 3: Building Native Apps with ArcGIS API for JavaScript …proceedings.esri.com/library/userconf/devsummit15/papers/dev_int... · Mobile web map used in areas of intermittent or no internet](https://reader031.vdocuments.net/reader031/viewer/2022013015/5b8f651c09d3f208228c6635/html5/thumbnails/3.jpg)
Technical workshops at Dev Summit
• Web- Building Mobile Web Apps with the ArcGIS API for JavaScript
• Hybrid- You are here!
• Native- Search the agenda for “Runtime SDK”
![Page 4: Building Native Apps with ArcGIS API for JavaScript …proceedings.esri.com/library/userconf/devsummit15/papers/dev_int... · Mobile web map used in areas of intermittent or no internet](https://reader031.vdocuments.net/reader031/viewer/2022013015/5b8f651c09d3f208228c6635/html5/thumbnails/4.jpg)
Application comparison: Native vs. Web
• ArcGIS Runtime SDK for Android• https://developers.arcgis.com/android/guide/native-vs-web.htm• ArcGIS Runtime SDK for iOS• https://developers.arcgis.com/ios/objective-c/guide/native-vs-web.htm
![Page 5: Building Native Apps with ArcGIS API for JavaScript …proceedings.esri.com/library/userconf/devsummit15/papers/dev_int... · Mobile web map used in areas of intermittent or no internet](https://reader031.vdocuments.net/reader031/viewer/2022013015/5b8f651c09d3f208228c6635/html5/thumbnails/5.jpg)
Lloyd Heberlie
Hello Cordova and Resources
![Page 6: Building Native Apps with ArcGIS API for JavaScript …proceedings.esri.com/library/userconf/devsummit15/papers/dev_int... · Mobile web map used in areas of intermittent or no internet](https://reader031.vdocuments.net/reader031/viewer/2022013015/5b8f651c09d3f208228c6635/html5/thumbnails/6.jpg)
Enable Safari remote web inspection
![Page 7: Building Native Apps with ArcGIS API for JavaScript …proceedings.esri.com/library/userconf/devsummit15/papers/dev_int... · Mobile web map used in areas of intermittent or no internet](https://reader031.vdocuments.net/reader031/viewer/2022013015/5b8f651c09d3f208228c6635/html5/thumbnails/7.jpg)
What is PhoneGap?
• Application container technology• Core engine is 100% open source• Web view container, plus JS API• HTML5, CSS3, JS = Native App
PhoneGap
![Page 8: Building Native Apps with ArcGIS API for JavaScript …proceedings.esri.com/library/userconf/devsummit15/papers/dev_int... · Mobile web map used in areas of intermittent or no internet](https://reader031.vdocuments.net/reader031/viewer/2022013015/5b8f651c09d3f208228c6635/html5/thumbnails/8.jpg)
PhoneGap architecture
PhoneGapPlugins
PhoneGap ApplicationCode
NativeApp
![Page 9: Building Native Apps with ArcGIS API for JavaScript …proceedings.esri.com/library/userconf/devsummit15/papers/dev_int... · Mobile web map used in areas of intermittent or no internet](https://reader031.vdocuments.net/reader031/viewer/2022013015/5b8f651c09d3f208228c6635/html5/thumbnails/9.jpg)
PhoneGap Plugins
![Page 10: Building Native Apps with ArcGIS API for JavaScript …proceedings.esri.com/library/userconf/devsummit15/papers/dev_int... · Mobile web map used in areas of intermittent or no internet](https://reader031.vdocuments.net/reader031/viewer/2022013015/5b8f651c09d3f208228c6635/html5/thumbnails/10.jpg)
PhoneGap Plugin options
![Page 11: Building Native Apps with ArcGIS API for JavaScript …proceedings.esri.com/library/userconf/devsummit15/papers/dev_int... · Mobile web map used in areas of intermittent or no internet](https://reader031.vdocuments.net/reader031/viewer/2022013015/5b8f651c09d3f208228c6635/html5/thumbnails/11.jpg)
Setup a developer machine
Source Control
Code quality and verification
web server
![Page 12: Building Native Apps with ArcGIS API for JavaScript …proceedings.esri.com/library/userconf/devsummit15/papers/dev_int... · Mobile web map used in areas of intermittent or no internet](https://reader031.vdocuments.net/reader031/viewer/2022013015/5b8f651c09d3f208228c6635/html5/thumbnails/12.jpg)
Preparing for PhoneGap
![Page 13: Building Native Apps with ArcGIS API for JavaScript …proceedings.esri.com/library/userconf/devsummit15/papers/dev_int... · Mobile web map used in areas of intermittent or no internet](https://reader031.vdocuments.net/reader031/viewer/2022013015/5b8f651c09d3f208228c6635/html5/thumbnails/13.jpg)
Installing PhoneGap and Apache Cordova
![Page 14: Building Native Apps with ArcGIS API for JavaScript …proceedings.esri.com/library/userconf/devsummit15/papers/dev_int... · Mobile web map used in areas of intermittent or no internet](https://reader031.vdocuments.net/reader031/viewer/2022013015/5b8f651c09d3f208228c6635/html5/thumbnails/14.jpg)
Check versions of PhoneGap and Apache Cordova
![Page 15: Building Native Apps with ArcGIS API for JavaScript …proceedings.esri.com/library/userconf/devsummit15/papers/dev_int... · Mobile web map used in areas of intermittent or no internet](https://reader031.vdocuments.net/reader031/viewer/2022013015/5b8f651c09d3f208228c6635/html5/thumbnails/15.jpg)
Updating PhoneGap and Apache Cordova
![Page 16: Building Native Apps with ArcGIS API for JavaScript …proceedings.esri.com/library/userconf/devsummit15/papers/dev_int... · Mobile web map used in areas of intermittent or no internet](https://reader031.vdocuments.net/reader031/viewer/2022013015/5b8f651c09d3f208228c6635/html5/thumbnails/16.jpg)
Creating your first PhoneGap CLI project
phonegap create path/to/my-app "com.example.app" "My App"
![Page 17: Building Native Apps with ArcGIS API for JavaScript …proceedings.esri.com/library/userconf/devsummit15/papers/dev_int... · Mobile web map used in areas of intermittent or no internet](https://reader031.vdocuments.net/reader031/viewer/2022013015/5b8f651c09d3f208228c6635/html5/thumbnails/17.jpg)
Lloyd Heberlie
Hello Cordova (cont.)
![Page 18: Building Native Apps with ArcGIS API for JavaScript …proceedings.esri.com/library/userconf/devsummit15/papers/dev_int... · Mobile web map used in areas of intermittent or no internet](https://reader031.vdocuments.net/reader031/viewer/2022013015/5b8f651c09d3f208228c6635/html5/thumbnails/18.jpg)
PhoneGap: Featured Apps
![Page 19: Building Native Apps with ArcGIS API for JavaScript …proceedings.esri.com/library/userconf/devsummit15/papers/dev_int... · Mobile web map used in areas of intermittent or no internet](https://reader031.vdocuments.net/reader031/viewer/2022013015/5b8f651c09d3f208228c6635/html5/thumbnails/19.jpg)
Featured Apps: Tripcase, Untappd
![Page 20: Building Native Apps with ArcGIS API for JavaScript …proceedings.esri.com/library/userconf/devsummit15/papers/dev_int... · Mobile web map used in areas of intermittent or no internet](https://reader031.vdocuments.net/reader031/viewer/2022013015/5b8f651c09d3f208228c6635/html5/thumbnails/20.jpg)
Agenda
• Getting to know PhoneGap
• jQuery and jQuery mobile overview• jQuery and ArcGIS API for JavaScript• Putting it all together• Additional information
![Page 21: Building Native Apps with ArcGIS API for JavaScript …proceedings.esri.com/library/userconf/devsummit15/papers/dev_int... · Mobile web map used in areas of intermittent or no internet](https://reader031.vdocuments.net/reader031/viewer/2022013015/5b8f651c09d3f208228c6635/html5/thumbnails/21.jpg)
![Page 22: Building Native Apps with ArcGIS API for JavaScript …proceedings.esri.com/library/userconf/devsummit15/papers/dev_int... · Mobile web map used in areas of intermittent or no internet](https://reader031.vdocuments.net/reader031/viewer/2022013015/5b8f651c09d3f208228c6635/html5/thumbnails/22.jpg)
Theme roller
![Page 23: Building Native Apps with ArcGIS API for JavaScript …proceedings.esri.com/library/userconf/devsummit15/papers/dev_int... · Mobile web map used in areas of intermittent or no internet](https://reader031.vdocuments.net/reader031/viewer/2022013015/5b8f651c09d3f208228c6635/html5/thumbnails/23.jpg)
data-attributes
![Page 24: Building Native Apps with ArcGIS API for JavaScript …proceedings.esri.com/library/userconf/devsummit15/papers/dev_int... · Mobile web map used in areas of intermittent or no internet](https://reader031.vdocuments.net/reader031/viewer/2022013015/5b8f651c09d3f208228c6635/html5/thumbnails/24.jpg)
Selections and filtering
![Page 25: Building Native Apps with ArcGIS API for JavaScript …proceedings.esri.com/library/userconf/devsummit15/papers/dev_int... · Mobile web map used in areas of intermittent or no internet](https://reader031.vdocuments.net/reader031/viewer/2022013015/5b8f651c09d3f208228c6635/html5/thumbnails/25.jpg)
Events
![Page 26: Building Native Apps with ArcGIS API for JavaScript …proceedings.esri.com/library/userconf/devsummit15/papers/dev_int... · Mobile web map used in areas of intermittent or no internet](https://reader031.vdocuments.net/reader031/viewer/2022013015/5b8f651c09d3f208228c6635/html5/thumbnails/26.jpg)
Dynamic content
![Page 27: Building Native Apps with ArcGIS API for JavaScript …proceedings.esri.com/library/userconf/devsummit15/papers/dev_int... · Mobile web map used in areas of intermittent or no internet](https://reader031.vdocuments.net/reader031/viewer/2022013015/5b8f651c09d3f208228c6635/html5/thumbnails/27.jpg)
jQuery mobile page lifecycle
![Page 28: Building Native Apps with ArcGIS API for JavaScript …proceedings.esri.com/library/userconf/devsummit15/papers/dev_int... · Mobile web map used in areas of intermittent or no internet](https://reader031.vdocuments.net/reader031/viewer/2022013015/5b8f651c09d3f208228c6635/html5/thumbnails/28.jpg)
Application lifecycle
phone OS nativeapplication
Esrimap
Esrimap
layers
3rd party +Esri JS
![Page 29: Building Native Apps with ArcGIS API for JavaScript …proceedings.esri.com/library/userconf/devsummit15/papers/dev_int... · Mobile web map used in areas of intermittent or no internet](https://reader031.vdocuments.net/reader031/viewer/2022013015/5b8f651c09d3f208228c6635/html5/thumbnails/29.jpg)
Lloyd Heberlie
jQuery mobile lifecycle
![Page 30: Building Native Apps with ArcGIS API for JavaScript …proceedings.esri.com/library/userconf/devsummit15/papers/dev_int... · Mobile web map used in areas of intermittent or no internet](https://reader031.vdocuments.net/reader031/viewer/2022013015/5b8f651c09d3f208228c6635/html5/thumbnails/30.jpg)
LifeCycleApplication
3rd Party JS
Map
Layers
Phone OS
![Page 31: Building Native Apps with ArcGIS API for JavaScript …proceedings.esri.com/library/userconf/devsummit15/papers/dev_int... · Mobile web map used in areas of intermittent or no internet](https://reader031.vdocuments.net/reader031/viewer/2022013015/5b8f651c09d3f208228c6635/html5/thumbnails/31.jpg)
jQuery and ArcGIS API for JavaScriptAndy Gup
![Page 32: Building Native Apps with ArcGIS API for JavaScript …proceedings.esri.com/library/userconf/devsummit15/papers/dev_int... · Mobile web map used in areas of intermittent or no internet](https://reader031.vdocuments.net/reader031/viewer/2022013015/5b8f651c09d3f208228c6635/html5/thumbnails/32.jpg)
Jquery Mobile + ArcGIS
Page-based approach versus responsiveSingle page map appMultiple page map app
https://github.com/Esri/quickstart-map-phonegaphttps://github.com/Esri/jquery-mobile-map-js
![Page 33: Building Native Apps with ArcGIS API for JavaScript …proceedings.esri.com/library/userconf/devsummit15/papers/dev_int... · Mobile web map used in areas of intermittent or no internet](https://reader031.vdocuments.net/reader031/viewer/2022013015/5b8f651c09d3f208228c6635/html5/thumbnails/33.jpg)
Single Page view
Page Structure
Apply CSS, roles and themes
![Page 34: Building Native Apps with ArcGIS API for JavaScript …proceedings.esri.com/library/userconf/devsummit15/papers/dev_int... · Mobile web map used in areas of intermittent or no internet](https://reader031.vdocuments.net/reader031/viewer/2022013015/5b8f651c09d3f208228c6635/html5/thumbnails/34.jpg)
Viewport meta tag
![Page 35: Building Native Apps with ArcGIS API for JavaScript …proceedings.esri.com/library/userconf/devsummit15/papers/dev_int... · Mobile web map used in areas of intermittent or no internet](https://reader031.vdocuments.net/reader031/viewer/2022013015/5b8f651c09d3f208228c6635/html5/thumbnails/35.jpg)
Single Page Map - HTML
![Page 36: Building Native Apps with ArcGIS API for JavaScript …proceedings.esri.com/library/userconf/devsummit15/papers/dev_int... · Mobile web map used in areas of intermittent or no internet](https://reader031.vdocuments.net/reader031/viewer/2022013015/5b8f651c09d3f208228c6635/html5/thumbnails/36.jpg)
Single Page Map - HTML
![Page 37: Building Native Apps with ArcGIS API for JavaScript …proceedings.esri.com/library/userconf/devsummit15/papers/dev_int... · Mobile web map used in areas of intermittent or no internet](https://reader031.vdocuments.net/reader031/viewer/2022013015/5b8f651c09d3f208228c6635/html5/thumbnails/37.jpg)
Single Page Map - HTML
![Page 38: Building Native Apps with ArcGIS API for JavaScript …proceedings.esri.com/library/userconf/devsummit15/papers/dev_int... · Mobile web map used in areas of intermittent or no internet](https://reader031.vdocuments.net/reader031/viewer/2022013015/5b8f651c09d3f208228c6635/html5/thumbnails/38.jpg)
Single Page Map - CSS
![Page 39: Building Native Apps with ArcGIS API for JavaScript …proceedings.esri.com/library/userconf/devsummit15/papers/dev_int... · Mobile web map used in areas of intermittent or no internet](https://reader031.vdocuments.net/reader031/viewer/2022013015/5b8f651c09d3f208228c6635/html5/thumbnails/39.jpg)
Andy Gup
Single page app
![Page 40: Building Native Apps with ArcGIS API for JavaScript …proceedings.esri.com/library/userconf/devsummit15/papers/dev_int... · Mobile web map used in areas of intermittent or no internet](https://reader031.vdocuments.net/reader031/viewer/2022013015/5b8f651c09d3f208228c6635/html5/thumbnails/40.jpg)
Multi Page View
Set up additional pages
Set up page navigation
Additional CSS
![Page 41: Building Native Apps with ArcGIS API for JavaScript …proceedings.esri.com/library/userconf/devsummit15/papers/dev_int... · Mobile web map used in areas of intermittent or no internet](https://reader031.vdocuments.net/reader031/viewer/2022013015/5b8f651c09d3f208228c6635/html5/thumbnails/41.jpg)
Multi Page View
![Page 42: Building Native Apps with ArcGIS API for JavaScript …proceedings.esri.com/library/userconf/devsummit15/papers/dev_int... · Mobile web map used in areas of intermittent or no internet](https://reader031.vdocuments.net/reader031/viewer/2022013015/5b8f651c09d3f208228c6635/html5/thumbnails/42.jpg)
Multi Page View
![Page 43: Building Native Apps with ArcGIS API for JavaScript …proceedings.esri.com/library/userconf/devsummit15/papers/dev_int... · Mobile web map used in areas of intermittent or no internet](https://reader031.vdocuments.net/reader031/viewer/2022013015/5b8f651c09d3f208228c6635/html5/thumbnails/43.jpg)
Multi Page app – Page 2 HTML
![Page 44: Building Native Apps with ArcGIS API for JavaScript …proceedings.esri.com/library/userconf/devsummit15/papers/dev_int... · Mobile web map used in areas of intermittent or no internet](https://reader031.vdocuments.net/reader031/viewer/2022013015/5b8f651c09d3f208228c6635/html5/thumbnails/44.jpg)
Multi Page app – Page 2 HTML
![Page 45: Building Native Apps with ArcGIS API for JavaScript …proceedings.esri.com/library/userconf/devsummit15/papers/dev_int... · Mobile web map used in areas of intermittent or no internet](https://reader031.vdocuments.net/reader031/viewer/2022013015/5b8f651c09d3f208228c6635/html5/thumbnails/45.jpg)
Multi Page app – Page 2 HTML
![Page 46: Building Native Apps with ArcGIS API for JavaScript …proceedings.esri.com/library/userconf/devsummit15/papers/dev_int... · Mobile web map used in areas of intermittent or no internet](https://reader031.vdocuments.net/reader031/viewer/2022013015/5b8f651c09d3f208228c6635/html5/thumbnails/46.jpg)
Multi Page app – Page 2 HTML
![Page 47: Building Native Apps with ArcGIS API for JavaScript …proceedings.esri.com/library/userconf/devsummit15/papers/dev_int... · Mobile web map used in areas of intermittent or no internet](https://reader031.vdocuments.net/reader031/viewer/2022013015/5b8f651c09d3f208228c6635/html5/thumbnails/47.jpg)
Multi Page app – Page 2 CSS
![Page 48: Building Native Apps with ArcGIS API for JavaScript …proceedings.esri.com/library/userconf/devsummit15/papers/dev_int... · Mobile web map used in areas of intermittent or no internet](https://reader031.vdocuments.net/reader031/viewer/2022013015/5b8f651c09d3f208228c6635/html5/thumbnails/48.jpg)
Andy Gup
Multi-page map app
![Page 49: Building Native Apps with ArcGIS API for JavaScript …proceedings.esri.com/library/userconf/devsummit15/papers/dev_int... · Mobile web map used in areas of intermittent or no internet](https://reader031.vdocuments.net/reader031/viewer/2022013015/5b8f651c09d3f208228c6635/html5/thumbnails/49.jpg)
Page Transitions & Orientation Change
• Page and Orientation life cycle
• Map destruction and resizing
Use jQueryHelper.js!https://github.com/Esri/quickstart-map-phonegaphttps://github.com/Esri/jquery-mobile-map-js
![Page 50: Building Native Apps with ArcGIS API for JavaScript …proceedings.esri.com/library/userconf/devsummit15/papers/dev_int... · Mobile web map used in areas of intermittent or no internet](https://reader031.vdocuments.net/reader031/viewer/2022013015/5b8f651c09d3f208228c6635/html5/thumbnails/50.jpg)
Page Transitions
Page 1 Page 2
~250 ms
![Page 51: Building Native Apps with ArcGIS API for JavaScript …proceedings.esri.com/library/userconf/devsummit15/papers/dev_int... · Mobile web map used in areas of intermittent or no internet](https://reader031.vdocuments.net/reader031/viewer/2022013015/5b8f651c09d3f208228c6635/html5/thumbnails/51.jpg)
Events: leaving page
pagebeforechangepagechangepagechangefailed
http://api.jquerymobile.com/category/events/
![Page 52: Building Native Apps with ArcGIS API for JavaScript …proceedings.esri.com/library/userconf/devsummit15/papers/dev_int... · Mobile web map used in areas of intermittent or no internet](https://reader031.vdocuments.net/reader031/viewer/2022013015/5b8f651c09d3f208228c6635/html5/thumbnails/52.jpg)
Events: entering page
pagebeforeshow
pageshow
pagechangefailed
http://api.jquerymobile.com/category/events/
![Page 53: Building Native Apps with ArcGIS API for JavaScript …proceedings.esri.com/library/userconf/devsummit15/papers/dev_int... · Mobile web map used in areas of intermittent or no internet](https://reader031.vdocuments.net/reader031/viewer/2022013015/5b8f651c09d3f208228c6635/html5/thumbnails/53.jpg)
Page Transitions & Orientation Change
Page 1 Page 2 Page 2
![Page 54: Building Native Apps with ArcGIS API for JavaScript …proceedings.esri.com/library/userconf/devsummit15/papers/dev_int... · Mobile web map used in areas of intermittent or no internet](https://reader031.vdocuments.net/reader031/viewer/2022013015/5b8f651c09d3f208228c6635/html5/thumbnails/54.jpg)
The following won’t work in all use cases:
map.reposition();map.resize();
![Page 55: Building Native Apps with ArcGIS API for JavaScript …proceedings.esri.com/library/userconf/devsummit15/papers/dev_int... · Mobile web map used in areas of intermittent or no internet](https://reader031.vdocuments.net/reader031/viewer/2022013015/5b8f651c09d3f208228c6635/html5/thumbnails/55.jpg)
![Page 56: Building Native Apps with ArcGIS API for JavaScript …proceedings.esri.com/library/userconf/devsummit15/papers/dev_int... · Mobile web map used in areas of intermittent or no internet](https://reader031.vdocuments.net/reader031/viewer/2022013015/5b8f651c09d3f208228c6635/html5/thumbnails/56.jpg)
![Page 57: Building Native Apps with ArcGIS API for JavaScript …proceedings.esri.com/library/userconf/devsummit15/papers/dev_int... · Mobile web map used in areas of intermittent or no internet](https://reader031.vdocuments.net/reader031/viewer/2022013015/5b8f651c09d3f208228c6635/html5/thumbnails/57.jpg)
Use Case - Recenter the map
![Page 58: Building Native Apps with ArcGIS API for JavaScript …proceedings.esri.com/library/userconf/devsummit15/papers/dev_int... · Mobile web map used in areas of intermittent or no internet](https://reader031.vdocuments.net/reader031/viewer/2022013015/5b8f651c09d3f208228c6635/html5/thumbnails/58.jpg)
jQuery Helper library
Page rotation – landscape/portraitAuto-recenteringMultiple views
var helper = new jQueryHelper(map);
https://github.com/Esri/jquery-mobile-map-jshttps://github.com/Esri/quickstart-map-phonegap
![Page 59: Building Native Apps with ArcGIS API for JavaScript …proceedings.esri.com/library/userconf/devsummit15/papers/dev_int... · Mobile web map used in areas of intermittent or no internet](https://reader031.vdocuments.net/reader031/viewer/2022013015/5b8f651c09d3f208228c6635/html5/thumbnails/59.jpg)
Auto-recenter after orientation change
![Page 60: Building Native Apps with ArcGIS API for JavaScript …proceedings.esri.com/library/userconf/devsummit15/papers/dev_int... · Mobile web map used in areas of intermittent or no internet](https://reader031.vdocuments.net/reader031/viewer/2022013015/5b8f651c09d3f208228c6635/html5/thumbnails/60.jpg)
Multiple page app – Map Life CycleListen for “helper-map-loaded” event
![Page 61: Building Native Apps with ArcGIS API for JavaScript …proceedings.esri.com/library/userconf/devsummit15/papers/dev_int... · Mobile web map used in areas of intermittent or no internet](https://reader031.vdocuments.net/reader031/viewer/2022013015/5b8f651c09d3f208228c6635/html5/thumbnails/61.jpg)
Putting it all togetherPhoneGap + jQuery + ArcGIS
Andy Gup
![Page 62: Building Native Apps with ArcGIS API for JavaScript …proceedings.esri.com/library/userconf/devsummit15/papers/dev_int... · Mobile web map used in areas of intermittent or no internet](https://reader031.vdocuments.net/reader031/viewer/2022013015/5b8f651c09d3f208228c6635/html5/thumbnails/62.jpg)
Andy Gup
Quickstart-map-phonegap
![Page 63: Building Native Apps with ArcGIS API for JavaScript …proceedings.esri.com/library/userconf/devsummit15/papers/dev_int... · Mobile web map used in areas of intermittent or no internet](https://reader031.vdocuments.net/reader031/viewer/2022013015/5b8f651c09d3f208228c6635/html5/thumbnails/63.jpg)
JavaScript API Web Optimizer
http://jso.arcgis.comCreates a single fileCDN hosted or downloadCustom modules
Optimizer session – Thurs 10am, Primrose B!- Optimizing your JavaScript app performance
![Page 64: Building Native Apps with ArcGIS API for JavaScript …proceedings.esri.com/library/userconf/devsummit15/papers/dev_int... · Mobile web map used in areas of intermittent or no internet](https://reader031.vdocuments.net/reader031/viewer/2022013015/5b8f651c09d3f208228c6635/html5/thumbnails/64.jpg)
Andy Gup
ArcGIS Web Optimizer
jso.arcgis.com
![Page 65: Building Native Apps with ArcGIS API for JavaScript …proceedings.esri.com/library/userconf/devsummit15/papers/dev_int... · Mobile web map used in areas of intermittent or no internet](https://reader031.vdocuments.net/reader031/viewer/2022013015/5b8f651c09d3f208228c6635/html5/thumbnails/65.jpg)
Going Offline with JavaScript
Mobile web map used in areas of intermittent or no internet
Ability to reload or restart web map in areas of intermittent or no internet
Lightweight cross-browser functionality
Github.com/esri/Offline-editor-js (Experimental)
![Page 66: Building Native Apps with ArcGIS API for JavaScript …proceedings.esri.com/library/userconf/devsummit15/papers/dev_int... · Mobile web map used in areas of intermittent or no internet](https://reader031.vdocuments.net/reader031/viewer/2022013015/5b8f651c09d3f208228c6635/html5/thumbnails/66.jpg)
Want a full feature, robus offline solution?
ArcGIS Runtimes for iOS, Android, Qt and .NET!
Includes integrated support for offline editing and synchronization.
Offline routing!
Fully supports related tables, sub-types, domains and much more.
![Page 67: Building Native Apps with ArcGIS API for JavaScript …proceedings.esri.com/library/userconf/devsummit15/papers/dev_int... · Mobile web map used in areas of intermittent or no internet](https://reader031.vdocuments.net/reader031/viewer/2022013015/5b8f651c09d3f208228c6635/html5/thumbnails/67.jpg)
What does offline JavaScript mean?
Take map tiles offlineStoring/syncing feature editsLimited storing/syncing attachmentsView TPKs
These work in browser and with PhoneGap!
![Page 68: Building Native Apps with ArcGIS API for JavaScript …proceedings.esri.com/library/userconf/devsummit15/papers/dev_int... · Mobile web map used in areas of intermittent or no internet](https://reader031.vdocuments.net/reader031/viewer/2022013015/5b8f651c09d3f208228c6635/html5/thumbnails/68.jpg)
What does offline JavaScript mean?
How much storage?- Limited by the browser!- Depends on device- How many browser tabs open- ~100MB to 500MB
Runtimes can store much more data!
![Page 69: Building Native Apps with ArcGIS API for JavaScript …proceedings.esri.com/library/userconf/devsummit15/papers/dev_int... · Mobile web map used in areas of intermittent or no internet](https://reader031.vdocuments.net/reader031/viewer/2022013015/5b8f651c09d3f208228c6635/html5/thumbnails/69.jpg)
Offline Demos
![Page 70: Building Native Apps with ArcGIS API for JavaScript …proceedings.esri.com/library/userconf/devsummit15/papers/dev_int... · Mobile web map used in areas of intermittent or no internet](https://reader031.vdocuments.net/reader031/viewer/2022013015/5b8f651c09d3f208228c6635/html5/thumbnails/70.jpg)
Working with GPS
Exact same Geolocation APISame coding pattern!
May require geolocation plugin
![Page 71: Building Native Apps with ArcGIS API for JavaScript …proceedings.esri.com/library/userconf/devsummit15/papers/dev_int... · Mobile web map used in areas of intermittent or no internet](https://reader031.vdocuments.net/reader031/viewer/2022013015/5b8f651c09d3f208228c6635/html5/thumbnails/71.jpg)
$ plugman search geolocation
![Page 72: Building Native Apps with ArcGIS API for JavaScript …proceedings.esri.com/library/userconf/devsummit15/papers/dev_int... · Mobile web map used in areas of intermittent or no internet](https://reader031.vdocuments.net/reader031/viewer/2022013015/5b8f651c09d3f208228c6635/html5/thumbnails/72.jpg)
Does it use device GPS
Yes!! …but it depends.
If GPS is enabledMay also use WiFi and cell triangulation
![Page 73: Building Native Apps with ArcGIS API for JavaScript …proceedings.esri.com/library/userconf/devsummit15/papers/dev_int... · Mobile web map used in areas of intermittent or no internet](https://reader031.vdocuments.net/reader031/viewer/2022013015/5b8f651c09d3f208228c6635/html5/thumbnails/73.jpg)
Working with GPS
![Page 74: Building Native Apps with ArcGIS API for JavaScript …proceedings.esri.com/library/userconf/devsummit15/papers/dev_int... · Mobile web map used in areas of intermittent or no internet](https://reader031.vdocuments.net/reader031/viewer/2022013015/5b8f651c09d3f208228c6635/html5/thumbnails/74.jpg)
Recap!
Install Cordova command lineUse jQuery Mobile for AppStore/Google PlayOn github.com/esri > PhoneGap & jQueryWorks with GeolocationLimited offline tiles and feature support
![Page 75: Building Native Apps with ArcGIS API for JavaScript …proceedings.esri.com/library/userconf/devsummit15/papers/dev_int... · Mobile web map used in areas of intermittent or no internet](https://reader031.vdocuments.net/reader031/viewer/2022013015/5b8f651c09d3f208228c6635/html5/thumbnails/75.jpg)
Rate This Sessionwww.esri.com/RateMyDevSummitSession
![Page 76: Building Native Apps with ArcGIS API for JavaScript …proceedings.esri.com/library/userconf/devsummit15/papers/dev_int... · Mobile web map used in areas of intermittent or no internet](https://reader031.vdocuments.net/reader031/viewer/2022013015/5b8f651c09d3f208228c6635/html5/thumbnails/76.jpg)
Questions?
Andy GupDeveloper Evangelist [email protected]@agup
Lloyd HeberlieJavaScript API [email protected]@lheberlie
![Page 77: Building Native Apps with ArcGIS API for JavaScript …proceedings.esri.com/library/userconf/devsummit15/papers/dev_int... · Mobile web map used in areas of intermittent or no internet](https://reader031.vdocuments.net/reader031/viewer/2022013015/5b8f651c09d3f208228c6635/html5/thumbnails/77.jpg)