arcgis api for javascript building native apps using phonegap · 2016 esri developer...
TRANSCRIPT
![Page 1: ArcGIS API for JavaScript Building Native Apps Using PhoneGap · 2016 Esri Developer Summit--Presentation, 2016 Esri Developer Summit, ArcGIS API for JavaScript Building Native Apps](https://reader031.vdocuments.net/reader031/viewer/2022013010/5eda4734b3745412b57112eb/html5/thumbnails/1.jpg)
ArcGIS API for JavaScriptBuilding native apps using
PhoneGapAndy Gup, @agup
Lloyd Heberlie, @lheberlie
March 8–11, 2016 | Palm Springs, CA
Esri Developer Summit
![Page 2: ArcGIS API for JavaScript Building Native Apps Using PhoneGap · 2016 Esri Developer Summit--Presentation, 2016 Esri Developer Summit, ArcGIS API for JavaScript Building Native Apps](https://reader031.vdocuments.net/reader031/viewer/2022013010/5eda4734b3745412b57112eb/html5/thumbnails/2.jpg)
Agenda• Using PhoneGap• Esri PhoneGap Quickstart• jQuery overview• Putting it all together• Additional information
![Page 3: ArcGIS API for JavaScript Building Native Apps Using PhoneGap · 2016 Esri Developer Summit--Presentation, 2016 Esri Developer Summit, ArcGIS API for JavaScript Building Native Apps](https://reader031.vdocuments.net/reader031/viewer/2022013010/5eda4734b3745412b57112eb/html5/thumbnails/3.jpg)
Why PhoneGap?• Mobile cross-browser access to these and more:• SDCard• Camera• Accelerometer• Contacts• Battery status• Ability to put JavaScript app in Google Play, App Store and Windows Phone Store
![Page 4: ArcGIS API for JavaScript Building Native Apps Using PhoneGap · 2016 Esri Developer Summit--Presentation, 2016 Esri Developer Summit, ArcGIS API for JavaScript Building Native Apps](https://reader031.vdocuments.net/reader031/viewer/2022013010/5eda4734b3745412b57112eb/html5/thumbnails/4.jpg)
Lloyd Heberlie
Using PhoneGap
![Page 5: ArcGIS API for JavaScript Building Native Apps Using PhoneGap · 2016 Esri Developer Summit--Presentation, 2016 Esri Developer Summit, ArcGIS API for JavaScript Building Native Apps](https://reader031.vdocuments.net/reader031/viewer/2022013010/5eda4734b3745412b57112eb/html5/thumbnails/5.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 6: ArcGIS API for JavaScript Building Native Apps Using PhoneGap · 2016 Esri Developer Summit--Presentation, 2016 Esri Developer Summit, ArcGIS API for JavaScript Building Native Apps](https://reader031.vdocuments.net/reader031/viewer/2022013010/5eda4734b3745412b57112eb/html5/thumbnails/6.jpg)
PhoneGap architecture
PhoneGapPlugins
PhoneGap ApplicationCode
NativeApp
![Page 7: ArcGIS API for JavaScript Building Native Apps Using PhoneGap · 2016 Esri Developer Summit--Presentation, 2016 Esri Developer Summit, ArcGIS API for JavaScript Building Native Apps](https://reader031.vdocuments.net/reader031/viewer/2022013010/5eda4734b3745412b57112eb/html5/thumbnails/7.jpg)
PhoneGap Plugins
![Page 8: ArcGIS API for JavaScript Building Native Apps Using PhoneGap · 2016 Esri Developer Summit--Presentation, 2016 Esri Developer Summit, ArcGIS API for JavaScript Building Native Apps](https://reader031.vdocuments.net/reader031/viewer/2022013010/5eda4734b3745412b57112eb/html5/thumbnails/8.jpg)
PhoneGap Plugin options
![Page 9: ArcGIS API for JavaScript Building Native Apps Using PhoneGap · 2016 Esri Developer Summit--Presentation, 2016 Esri Developer Summit, ArcGIS API for JavaScript Building Native Apps](https://reader031.vdocuments.net/reader031/viewer/2022013010/5eda4734b3745412b57112eb/html5/thumbnails/9.jpg)
Setup a developer machine
Source Control
Code quality and verification
web server
![Page 10: ArcGIS API for JavaScript Building Native Apps Using PhoneGap · 2016 Esri Developer Summit--Presentation, 2016 Esri Developer Summit, ArcGIS API for JavaScript Building Native Apps](https://reader031.vdocuments.net/reader031/viewer/2022013010/5eda4734b3745412b57112eb/html5/thumbnails/10.jpg)
Preparing for PhoneGap
![Page 11: ArcGIS API for JavaScript Building Native Apps Using PhoneGap · 2016 Esri Developer Summit--Presentation, 2016 Esri Developer Summit, ArcGIS API for JavaScript Building Native Apps](https://reader031.vdocuments.net/reader031/viewer/2022013010/5eda4734b3745412b57112eb/html5/thumbnails/11.jpg)
Installing Apache Cordova
![Page 12: ArcGIS API for JavaScript Building Native Apps Using PhoneGap · 2016 Esri Developer Summit--Presentation, 2016 Esri Developer Summit, ArcGIS API for JavaScript Building Native Apps](https://reader031.vdocuments.net/reader031/viewer/2022013010/5eda4734b3745412b57112eb/html5/thumbnails/12.jpg)
Check version of Apache Cordova
![Page 13: ArcGIS API for JavaScript Building Native Apps Using PhoneGap · 2016 Esri Developer Summit--Presentation, 2016 Esri Developer Summit, ArcGIS API for JavaScript Building Native Apps](https://reader031.vdocuments.net/reader031/viewer/2022013010/5eda4734b3745412b57112eb/html5/thumbnails/13.jpg)
Updating Apache Cordova
![Page 14: ArcGIS API for JavaScript Building Native Apps Using PhoneGap · 2016 Esri Developer Summit--Presentation, 2016 Esri Developer Summit, ArcGIS API for JavaScript Building Native Apps](https://reader031.vdocuments.net/reader031/viewer/2022013010/5eda4734b3745412b57112eb/html5/thumbnails/14.jpg)
Creating your first PhoneGap CLI project
phonegap create path/to/my-app "com.example.app" "My App"
![Page 15: ArcGIS API for JavaScript Building Native Apps Using PhoneGap · 2016 Esri Developer Summit--Presentation, 2016 Esri Developer Summit, ArcGIS API for JavaScript Building Native Apps](https://reader031.vdocuments.net/reader031/viewer/2022013010/5eda4734b3745412b57112eb/html5/thumbnails/15.jpg)
Lloyd Heberlie
PhoneGap Quickstart
![Page 16: ArcGIS API for JavaScript Building Native Apps Using PhoneGap · 2016 Esri Developer Summit--Presentation, 2016 Esri Developer Summit, ArcGIS API for JavaScript Building Native Apps](https://reader031.vdocuments.net/reader031/viewer/2022013010/5eda4734b3745412b57112eb/html5/thumbnails/16.jpg)
PhoneGap Apps
![Page 17: ArcGIS API for JavaScript Building Native Apps Using PhoneGap · 2016 Esri Developer Summit--Presentation, 2016 Esri Developer Summit, ArcGIS API for JavaScript Building Native Apps](https://reader031.vdocuments.net/reader031/viewer/2022013010/5eda4734b3745412b57112eb/html5/thumbnails/17.jpg)
Featured Apps
![Page 18: ArcGIS API for JavaScript Building Native Apps Using PhoneGap · 2016 Esri Developer Summit--Presentation, 2016 Esri Developer Summit, ArcGIS API for JavaScript Building Native Apps](https://reader031.vdocuments.net/reader031/viewer/2022013010/5eda4734b3745412b57112eb/html5/thumbnails/18.jpg)
Featured Apps: Tripcase, Untappd
![Page 19: ArcGIS API for JavaScript Building Native Apps Using PhoneGap · 2016 Esri Developer Summit--Presentation, 2016 Esri Developer Summit, ArcGIS API for JavaScript Building Native Apps](https://reader031.vdocuments.net/reader031/viewer/2022013010/5eda4734b3745412b57112eb/html5/thumbnails/19.jpg)
Universal Example
![Page 20: ArcGIS API for JavaScript Building Native Apps Using PhoneGap · 2016 Esri Developer Summit--Presentation, 2016 Esri Developer Summit, ArcGIS API for JavaScript Building Native Apps](https://reader031.vdocuments.net/reader031/viewer/2022013010/5eda4734b3745412b57112eb/html5/thumbnails/20.jpg)
jQuery overviewLloyd Heberlie
![Page 21: ArcGIS API for JavaScript Building Native Apps Using PhoneGap · 2016 Esri Developer Summit--Presentation, 2016 Esri Developer Summit, ArcGIS API for JavaScript Building Native Apps](https://reader031.vdocuments.net/reader031/viewer/2022013010/5eda4734b3745412b57112eb/html5/thumbnails/21.jpg)
![Page 22: ArcGIS API for JavaScript Building Native Apps Using PhoneGap · 2016 Esri Developer Summit--Presentation, 2016 Esri Developer Summit, ArcGIS API for JavaScript Building Native Apps](https://reader031.vdocuments.net/reader031/viewer/2022013010/5eda4734b3745412b57112eb/html5/thumbnails/22.jpg)
data-attributes
![Page 23: ArcGIS API for JavaScript Building Native Apps Using PhoneGap · 2016 Esri Developer Summit--Presentation, 2016 Esri Developer Summit, ArcGIS API for JavaScript Building Native Apps](https://reader031.vdocuments.net/reader031/viewer/2022013010/5eda4734b3745412b57112eb/html5/thumbnails/23.jpg)
Selections and filtering
![Page 24: ArcGIS API for JavaScript Building Native Apps Using PhoneGap · 2016 Esri Developer Summit--Presentation, 2016 Esri Developer Summit, ArcGIS API for JavaScript Building Native Apps](https://reader031.vdocuments.net/reader031/viewer/2022013010/5eda4734b3745412b57112eb/html5/thumbnails/24.jpg)
Events
![Page 25: ArcGIS API for JavaScript Building Native Apps Using PhoneGap · 2016 Esri Developer Summit--Presentation, 2016 Esri Developer Summit, ArcGIS API for JavaScript Building Native Apps](https://reader031.vdocuments.net/reader031/viewer/2022013010/5eda4734b3745412b57112eb/html5/thumbnails/25.jpg)
Dynamic content
![Page 26: ArcGIS API for JavaScript Building Native Apps Using PhoneGap · 2016 Esri Developer Summit--Presentation, 2016 Esri Developer Summit, ArcGIS API for JavaScript Building Native Apps](https://reader031.vdocuments.net/reader031/viewer/2022013010/5eda4734b3745412b57112eb/html5/thumbnails/26.jpg)
jQuery Mobile page lifecycle
![Page 27: ArcGIS API for JavaScript Building Native Apps Using PhoneGap · 2016 Esri Developer Summit--Presentation, 2016 Esri Developer Summit, ArcGIS API for JavaScript Building Native Apps](https://reader031.vdocuments.net/reader031/viewer/2022013010/5eda4734b3745412b57112eb/html5/thumbnails/27.jpg)
Andy GupPutting it all together
![Page 28: ArcGIS API for JavaScript Building Native Apps Using PhoneGap · 2016 Esri Developer Summit--Presentation, 2016 Esri Developer Summit, ArcGIS API for JavaScript Building Native Apps](https://reader031.vdocuments.net/reader031/viewer/2022013010/5eda4734b3745412b57112eb/html5/thumbnails/28.jpg)
Cordova Life Cycle Eventsdevicereadypauseresume
https://cordova.apache.org/docs/en/latest/cordova/events/events.html
![Page 29: ArcGIS API for JavaScript Building Native Apps Using PhoneGap · 2016 Esri Developer Summit--Presentation, 2016 Esri Developer Summit, ArcGIS API for JavaScript Building Native Apps](https://reader031.vdocuments.net/reader031/viewer/2022013010/5eda4734b3745412b57112eb/html5/thumbnails/29.jpg)
deviceready
![Page 30: ArcGIS API for JavaScript Building Native Apps Using PhoneGap · 2016 Esri Developer Summit--Presentation, 2016 Esri Developer Summit, ArcGIS API for JavaScript Building Native Apps](https://reader031.vdocuments.net/reader031/viewer/2022013010/5eda4734b3745412b57112eb/html5/thumbnails/30.jpg)
![Page 31: ArcGIS API for JavaScript Building Native Apps Using PhoneGap · 2016 Esri Developer Summit--Presentation, 2016 Esri Developer Summit, ArcGIS API for JavaScript Building Native Apps](https://reader031.vdocuments.net/reader031/viewer/2022013010/5eda4734b3745412b57112eb/html5/thumbnails/31.jpg)
pause and resume
![Page 32: ArcGIS API for JavaScript Building Native Apps Using PhoneGap · 2016 Esri Developer Summit--Presentation, 2016 Esri Developer Summit, ArcGIS API for JavaScript Building Native Apps](https://reader031.vdocuments.net/reader031/viewer/2022013010/5eda4734b3745412b57112eb/html5/thumbnails/32.jpg)
UX Frameworks + Maps
Some coding considerations:Do view transitions cache pages?Does map get re-created after transition?Map widgets work portrait & landscape?Gracefully handle loss of internet?
![Page 33: ArcGIS API for JavaScript Building Native Apps Using PhoneGap · 2016 Esri Developer Summit--Presentation, 2016 Esri Developer Summit, ArcGIS API for JavaScript Building Native Apps](https://reader031.vdocuments.net/reader031/viewer/2022013010/5eda4734b3745412b57112eb/html5/thumbnails/33.jpg)
UX Frameworks
![Page 34: ArcGIS API for JavaScript Building Native Apps Using PhoneGap · 2016 Esri Developer Summit--Presentation, 2016 Esri Developer Summit, ArcGIS API for JavaScript Building Native Apps](https://reader031.vdocuments.net/reader031/viewer/2022013010/5eda4734b3745412b57112eb/html5/thumbnails/34.jpg)
View-based approach
Single page, single viewSingle page, multi-view Multi-page
![Page 35: ArcGIS API for JavaScript Building Native Apps Using PhoneGap · 2016 Esri Developer Summit--Presentation, 2016 Esri Developer Summit, ArcGIS API for JavaScript Building Native Apps](https://reader031.vdocuments.net/reader031/viewer/2022013010/5eda4734b3745412b57112eb/html5/thumbnails/35.jpg)
VIEW 1 VIEW 2
![Page 36: ArcGIS API for JavaScript Building Native Apps Using PhoneGap · 2016 Esri Developer Summit--Presentation, 2016 Esri Developer Summit, ArcGIS API for JavaScript Building Native Apps](https://reader031.vdocuments.net/reader031/viewer/2022013010/5eda4734b3745412b57112eb/html5/thumbnails/36.jpg)
View-based approach
Similar to…material design for Androidhuman interface for iOS
Compatibility with Google Play and AppStore
![Page 37: ArcGIS API for JavaScript Building Native Apps Using PhoneGap · 2016 Esri Developer Summit--Presentation, 2016 Esri Developer Summit, ArcGIS API for JavaScript Building Native Apps](https://reader031.vdocuments.net/reader031/viewer/2022013010/5eda4734b3745412b57112eb/html5/thumbnails/37.jpg)
v1.4.5 is over a year oldv1.5 beta is coming (many changes)v1.5 shares jQuery UI core
blog.jquerymobile.com
![Page 38: ArcGIS API for JavaScript Building Native Apps Using PhoneGap · 2016 Esri Developer Summit--Presentation, 2016 Esri Developer Summit, ArcGIS API for JavaScript Building Native Apps](https://reader031.vdocuments.net/reader031/viewer/2022013010/5eda4734b3745412b57112eb/html5/thumbnails/38.jpg)
quickstart-map-phonegap
• https://github.com/Esri/quickstart-map-phonegap
![Page 39: ArcGIS API for JavaScript Building Native Apps Using PhoneGap · 2016 Esri Developer Summit--Presentation, 2016 Esri Developer Summit, ArcGIS API for JavaScript Building Native Apps](https://reader031.vdocuments.net/reader031/viewer/2022013010/5eda4734b3745412b57112eb/html5/thumbnails/39.jpg)
jQuery – Single page map app
![Page 40: ArcGIS API for JavaScript Building Native Apps Using PhoneGap · 2016 Esri Developer Summit--Presentation, 2016 Esri Developer Summit, ArcGIS API for JavaScript Building Native Apps](https://reader031.vdocuments.net/reader031/viewer/2022013010/5eda4734b3745412b57112eb/html5/thumbnails/40.jpg)
jQuery – Single page map app
![Page 41: ArcGIS API for JavaScript Building Native Apps Using PhoneGap · 2016 Esri Developer Summit--Presentation, 2016 Esri Developer Summit, ArcGIS API for JavaScript Building Native Apps](https://reader031.vdocuments.net/reader031/viewer/2022013010/5eda4734b3745412b57112eb/html5/thumbnails/41.jpg)
jQuery – Single page map app
![Page 42: ArcGIS API for JavaScript Building Native Apps Using PhoneGap · 2016 Esri Developer Summit--Presentation, 2016 Esri Developer Summit, ArcGIS API for JavaScript Building Native Apps](https://reader031.vdocuments.net/reader031/viewer/2022013010/5eda4734b3745412b57112eb/html5/thumbnails/42.jpg)
Single page map CSS
![Page 44: ArcGIS API for JavaScript Building Native Apps Using PhoneGap · 2016 Esri Developer Summit--Presentation, 2016 Esri Developer Summit, ArcGIS API for JavaScript Building Native Apps](https://reader031.vdocuments.net/reader031/viewer/2022013010/5eda4734b3745412b57112eb/html5/thumbnails/44.jpg)
Geolocation with PhoneGap
HTML Geolocation API - same coding patternApproximate location Still always requires user opt-inOr, use a plugin
![Page 45: ArcGIS API for JavaScript Building Native Apps Using PhoneGap · 2016 Esri Developer Summit--Presentation, 2016 Esri Developer Summit, ArcGIS API for JavaScript Building Native Apps](https://reader031.vdocuments.net/reader031/viewer/2022013010/5eda4734b3745412b57112eb/html5/thumbnails/45.jpg)
Geolocation with PhoneGapCan allow for passive locationDoes not increase accuracyDoes not speed up acquisitions timesOutdoors – turn off WiFi!
github.com/Esri/html5-geolocation-tool-js
![Page 46: ArcGIS API for JavaScript Building Native Apps Using PhoneGap · 2016 Esri Developer Summit--Presentation, 2016 Esri Developer Summit, ArcGIS API for JavaScript Building Native Apps](https://reader031.vdocuments.net/reader031/viewer/2022013010/5eda4734b3745412b57112eb/html5/thumbnails/46.jpg)
Geolocation Native Plugins
https://cordova.apache.org/plugins/?q=geolocation
Android-only:https://www.npmjs.com/package/cordova-plugin-advanced-geolocation
![Page 47: ArcGIS API for JavaScript Building Native Apps Using PhoneGap · 2016 Esri Developer Summit--Presentation, 2016 Esri Developer Summit, ArcGIS API for JavaScript Building Native Apps](https://reader031.vdocuments.net/reader031/viewer/2022013010/5eda4734b3745412b57112eb/html5/thumbnails/47.jpg)
Performance
![Page 48: ArcGIS API for JavaScript Building Native Apps Using PhoneGap · 2016 Esri Developer Summit--Presentation, 2016 Esri Developer Summit, ArcGIS API for JavaScript Building Native Apps](https://reader031.vdocuments.net/reader031/viewer/2022013010/5eda4734b3745412b57112eb/html5/thumbnails/48.jpg)
Performance
Using CDN vs Hosting files locally- Hosted Locally – load much faster
Cross-browser issues? Consider Cross Walk
![Page 49: ArcGIS API for JavaScript Building Native Apps Using PhoneGap · 2016 Esri Developer Summit--Presentation, 2016 Esri Developer Summit, ArcGIS API for JavaScript Building Native Apps](https://reader031.vdocuments.net/reader031/viewer/2022013010/5eda4734b3745412b57112eb/html5/thumbnails/49.jpg)
Native vs JavaScriptStill using a browserPlugins run native codeBrowser performance versus device performance
![Page 50: ArcGIS API for JavaScript Building Native Apps Using PhoneGap · 2016 Esri Developer Summit--Presentation, 2016 Esri Developer Summit, ArcGIS API for JavaScript Building Native Apps](https://reader031.vdocuments.net/reader031/viewer/2022013010/5eda4734b3745412b57112eb/html5/thumbnails/50.jpg)
Security
![Page 51: ArcGIS API for JavaScript Building Native Apps Using PhoneGap · 2016 Esri Developer Summit--Presentation, 2016 Esri Developer Summit, ArcGIS API for JavaScript Building Native Apps](https://reader031.vdocuments.net/reader031/viewer/2022013010/5eda4734b3745412b57112eb/html5/thumbnails/51.jpg)
Content Security Policy (CSP)Reduces the risk of XSS
![Page 53: ArcGIS API for JavaScript Building Native Apps Using PhoneGap · 2016 Esri Developer Summit--Presentation, 2016 Esri Developer Summit, ArcGIS API for JavaScript Building Native Apps](https://reader031.vdocuments.net/reader031/viewer/2022013010/5eda4734b3745412b57112eb/html5/thumbnails/53.jpg)