ArcGIS API for JavaScript -...
-
Upload
hoangkhuong -
Category
Documents
-
view
225 -
download
3
Transcript of ArcGIS API for JavaScript -...
![Page 1: ArcGIS API for JavaScript - Esriproceedings.esri.com/library/userconf/devsummit-euro15/papers/dev... · 2015 Developer Summit Europe--Presentation, 2015 Developer Summit Europe, ArcGIS](https://reader037.fdocuments.in/reader037/viewer/2022103011/5a72f6b77f8b9a93538e517f/html5/thumbnails/1.jpg)
![Page 2: ArcGIS API for JavaScript - Esriproceedings.esri.com/library/userconf/devsummit-euro15/papers/dev... · 2015 Developer Summit Europe--Presentation, 2015 Developer Summit Europe, ArcGIS](https://reader037.fdocuments.in/reader037/viewer/2022103011/5a72f6b77f8b9a93538e517f/html5/thumbnails/2.jpg)
ArcGIS API for JavaScriptTips and Tricks for Debugging Apps
Andy Gup, Esri USCédric Despierre Corporon, Esri FR
![Page 3: ArcGIS API for JavaScript - Esriproceedings.esri.com/library/userconf/devsummit-euro15/papers/dev... · 2015 Developer Summit Europe--Presentation, 2015 Developer Summit Europe, ArcGIS](https://reader037.fdocuments.in/reader037/viewer/2022103011/5a72f6b77f8b9a93538e517f/html5/thumbnails/3.jpg)
Agenda• Error prevention “tools”• Front-end debugging• Back-end debugging• Internet Resources
Demo files on GitHub : https://github.com/andygup/devsummit-berlin-2015
![Page 4: ArcGIS API for JavaScript - Esriproceedings.esri.com/library/userconf/devsummit-euro15/papers/dev... · 2015 Developer Summit Europe--Presentation, 2015 Developer Summit Europe, ArcGIS](https://reader037.fdocuments.in/reader037/viewer/2022103011/5a72f6b77f8b9a93538e517f/html5/thumbnails/4.jpg)
Debugging Patterns
![Page 5: ArcGIS API for JavaScript - Esriproceedings.esri.com/library/userconf/devsummit-euro15/papers/dev... · 2015 Developer Summit Europe--Presentation, 2015 Developer Summit Europe, ArcGIS](https://reader037.fdocuments.in/reader037/viewer/2022103011/5a72f6b77f8b9a93538e517f/html5/thumbnails/5.jpg)
Tools
![Page 6: ArcGIS API for JavaScript - Esriproceedings.esri.com/library/userconf/devsummit-euro15/papers/dev... · 2015 Developer Summit Europe--Presentation, 2015 Developer Summit Europe, ArcGIS](https://reader037.fdocuments.in/reader037/viewer/2022103011/5a72f6b77f8b9a93538e517f/html5/thumbnails/6.jpg)
Choose your Editor• There is lots of them !• Use one with plugin support
– Productivity– Errors preventions
• In a team : use the same config– http://editorconfig.org/
![Page 7: ArcGIS API for JavaScript - Esriproceedings.esri.com/library/userconf/devsummit-euro15/papers/dev... · 2015 Developer Summit Europe--Presentation, 2015 Developer Summit Europe, ArcGIS](https://reader037.fdocuments.in/reader037/viewer/2022103011/5a72f6b77f8b9a93538e517f/html5/thumbnails/7.jpg)
Code quality tools• Use a linter
– JSHint– JSLint
• Available : – As a plugin in your IDE– Or inside continuous integration
https://github.com/Esri/jsapi-resources/tree/master/jshint
![Page 8: ArcGIS API for JavaScript - Esriproceedings.esri.com/library/userconf/devsummit-euro15/papers/dev... · 2015 Developer Summit Europe--Presentation, 2015 Developer Summit Europe, ArcGIS](https://reader037.fdocuments.in/reader037/viewer/2022103011/5a72f6b77f8b9a93538e517f/html5/thumbnails/8.jpg)
Additional tools• Continuous Integration
– Automate tasks using Grunt, Gulp, etc.– Run linter, beautify, minify your code– And of course, test your code
• Esri TypeScript
![Page 9: ArcGIS API for JavaScript - Esriproceedings.esri.com/library/userconf/devsummit-euro15/papers/dev... · 2015 Developer Summit Europe--Presentation, 2015 Developer Summit Europe, ArcGIS](https://reader037.fdocuments.in/reader037/viewer/2022103011/5a72f6b77f8b9a93538e517f/html5/thumbnails/9.jpg)
Browser Developer Tools
![Page 10: ArcGIS API for JavaScript - Esriproceedings.esri.com/library/userconf/devsummit-euro15/papers/dev... · 2015 Developer Summit Europe--Presentation, 2015 Developer Summit Europe, ArcGIS](https://reader037.fdocuments.in/reader037/viewer/2022103011/5a72f6b77f8b9a93538e517f/html5/thumbnails/10.jpg)
Front-end
![Page 11: ArcGIS API for JavaScript - Esriproceedings.esri.com/library/userconf/devsummit-euro15/papers/dev... · 2015 Developer Summit Europe--Presentation, 2015 Developer Summit Europe, ArcGIS](https://reader037.fdocuments.in/reader037/viewer/2022103011/5a72f6b77f8b9a93538e517f/html5/thumbnails/11.jpg)
Common front-end errors• Page failed to load or partial loaded• Items not displaying properly• Map is missing• Features are missing• Parsing errors• Life-cycle (order of code execution)
![Page 12: ArcGIS API for JavaScript - Esriproceedings.esri.com/library/userconf/devsummit-euro15/papers/dev... · 2015 Developer Summit Europe--Presentation, 2015 Developer Summit Europe, ArcGIS](https://reader037.fdocuments.in/reader037/viewer/2022103011/5a72f6b77f8b9a93538e517f/html5/thumbnails/12.jpg)
Use a Web Server for testingUse http:// or https://IIS, Apache or similar
Don’t use filesystem accessor: file://• Direct file access – bypass web server• Web security prevents AJAX direct requests
![Page 14: ArcGIS API for JavaScript - Esriproceedings.esri.com/library/userconf/devsummit-euro15/papers/dev... · 2015 Developer Summit Europe--Presentation, 2015 Developer Summit Europe, ArcGIS](https://reader037.fdocuments.in/reader037/viewer/2022103011/5a72f6b77f8b9a93538e517f/html5/thumbnails/14.jpg)
Using file:/// for web development
DEMO
![Page 15: ArcGIS API for JavaScript - Esriproceedings.esri.com/library/userconf/devsummit-euro15/papers/dev... · 2015 Developer Summit Europe--Presentation, 2015 Developer Summit Europe, ArcGIS](https://reader037.fdocuments.in/reader037/viewer/2022103011/5a72f6b77f8b9a93538e517f/html5/thumbnails/15.jpg)
ReferenceError: require not defined
Life-cycle issues
DEMO
![Page 16: ArcGIS API for JavaScript - Esriproceedings.esri.com/library/userconf/devsummit-euro15/papers/dev... · 2015 Developer Summit Europe--Presentation, 2015 Developer Summit Europe, ArcGIS](https://reader037.fdocuments.in/reader037/viewer/2022103011/5a72f6b77f8b9a93538e517f/html5/thumbnails/16.jpg)
Missing module and/or alias
TypeError: ___ is not a function
DEMO
![Page 19: ArcGIS API for JavaScript - Esriproceedings.esri.com/library/userconf/devsummit-euro15/papers/dev... · 2015 Developer Summit Europe--Presentation, 2015 Developer Summit Europe, ArcGIS](https://reader037.fdocuments.in/reader037/viewer/2022103011/5a72f6b77f8b9a93538e517f/html5/thumbnails/19.jpg)
Device browser debuggingConnect laptop to device via USB
Chrome for AndroidSafari for iOS (works best on Mac)
![Page 20: ArcGIS API for JavaScript - Esriproceedings.esri.com/library/userconf/devsummit-euro15/papers/dev... · 2015 Developer Summit Europe--Presentation, 2015 Developer Summit Europe, ArcGIS](https://reader037.fdocuments.in/reader037/viewer/2022103011/5a72f6b77f8b9a93538e517f/html5/thumbnails/20.jpg)
Device browser debugging - Chrome
![Page 21: ArcGIS API for JavaScript - Esriproceedings.esri.com/library/userconf/devsummit-euro15/papers/dev... · 2015 Developer Summit Europe--Presentation, 2015 Developer Summit Europe, ArcGIS](https://reader037.fdocuments.in/reader037/viewer/2022103011/5a72f6b77f8b9a93538e517f/html5/thumbnails/21.jpg)
Device browser debugging - Safari
![Page 22: ArcGIS API for JavaScript - Esriproceedings.esri.com/library/userconf/devsummit-euro15/papers/dev... · 2015 Developer Summit Europe--Presentation, 2015 Developer Summit Europe, ArcGIS](https://reader037.fdocuments.in/reader037/viewer/2022103011/5a72f6b77f8b9a93538e517f/html5/thumbnails/22.jpg)
Clearing Cache“Sticky cache” means new changes don’t showKey-board ShortcutsBrowser settingsURL caching
![Page 23: ArcGIS API for JavaScript - Esriproceedings.esri.com/library/userconf/devsummit-euro15/papers/dev... · 2015 Developer Summit Europe--Presentation, 2015 Developer Summit Europe, ArcGIS](https://reader037.fdocuments.in/reader037/viewer/2022103011/5a72f6b77f8b9a93538e517f/html5/thumbnails/23.jpg)
Clearing Cache - ChromeMac Shift+Command+Delete
Windows Ctrl+Shift+Delete
![Page 24: ArcGIS API for JavaScript - Esriproceedings.esri.com/library/userconf/devsummit-euro15/papers/dev... · 2015 Developer Summit Europe--Presentation, 2015 Developer Summit Europe, ArcGIS](https://reader037.fdocuments.in/reader037/viewer/2022103011/5a72f6b77f8b9a93538e517f/html5/thumbnails/24.jpg)
Clearing Cache - Chrome
![Page 25: ArcGIS API for JavaScript - Esriproceedings.esri.com/library/userconf/devsummit-euro15/papers/dev... · 2015 Developer Summit Europe--Presentation, 2015 Developer Summit Europe, ArcGIS](https://reader037.fdocuments.in/reader037/viewer/2022103011/5a72f6b77f8b9a93538e517f/html5/thumbnails/25.jpg)
Set code breakpoints• Manually via the browser• In-line via debugger statement• Make good use of console.log()
![Page 26: ArcGIS API for JavaScript - Esriproceedings.esri.com/library/userconf/devsummit-euro15/papers/dev... · 2015 Developer Summit Europe--Presentation, 2015 Developer Summit Europe, ArcGIS](https://reader037.fdocuments.in/reader037/viewer/2022103011/5a72f6b77f8b9a93538e517f/html5/thumbnails/26.jpg)
Back-end
![Page 27: ArcGIS API for JavaScript - Esriproceedings.esri.com/library/userconf/devsummit-euro15/papers/dev... · 2015 Developer Summit Europe--Presentation, 2015 Developer Summit Europe, ArcGIS](https://reader037.fdocuments.in/reader037/viewer/2022103011/5a72f6b77f8b9a93538e517f/html5/thumbnails/27.jpg)
Common back-end errors• HTTP & REST request errors• Slow and intermittent
internet• Authorization errors• Cross domain requests errors
![Page 28: ArcGIS API for JavaScript - Esriproceedings.esri.com/library/userconf/devsummit-euro15/papers/dev... · 2015 Developer Summit Europe--Presentation, 2015 Developer Summit Europe, ArcGIS](https://reader037.fdocuments.in/reader037/viewer/2022103011/5a72f6b77f8b9a93538e517f/html5/thumbnails/28.jpg)
Debugging ProxiesDetailed HTTP inspectionShow ALL HTTP/HTTPS traffic
• Fiddler• Charles
![Page 29: ArcGIS API for JavaScript - Esriproceedings.esri.com/library/userconf/devsummit-euro15/papers/dev... · 2015 Developer Summit Europe--Presentation, 2015 Developer Summit Europe, ArcGIS](https://reader037.fdocuments.in/reader037/viewer/2022103011/5a72f6b77f8b9a93538e517f/html5/thumbnails/29.jpg)
Developer Tools – Network TabHolds a lot of valuable information:• HTTP Request header fields
– Malformed request– 500 Server error
• HTTP Response header fields and data• Statistics (times and size of data payload)
![Page 30: ArcGIS API for JavaScript - Esriproceedings.esri.com/library/userconf/devsummit-euro15/papers/dev... · 2015 Developer Summit Europe--Presentation, 2015 Developer Summit Europe, ArcGIS](https://reader037.fdocuments.in/reader037/viewer/2022103011/5a72f6b77f8b9a93538e517f/html5/thumbnails/30.jpg)
Developer Tools – Network TabHTTP status codes• 200 – Okay• 302 – Redirect • 403 – Forbidden • 404 – Not Found• 500 – Internal Server Error
![Page 31: ArcGIS API for JavaScript - Esriproceedings.esri.com/library/userconf/devsummit-euro15/papers/dev... · 2015 Developer Summit Europe--Presentation, 2015 Developer Summit Europe, ArcGIS](https://reader037.fdocuments.in/reader037/viewer/2022103011/5a72f6b77f8b9a93538e517f/html5/thumbnails/31.jpg)
ArcGIS REST API DocumentationOperator descriptionsAttribute/Value pairsRequest/ResponseJSON output
REST API Web Site
![Page 32: ArcGIS API for JavaScript - Esriproceedings.esri.com/library/userconf/devsummit-euro15/papers/dev... · 2015 Developer Summit Europe--Presentation, 2015 Developer Summit Europe, ArcGIS](https://reader037.fdocuments.in/reader037/viewer/2022103011/5a72f6b77f8b9a93538e517f/html5/thumbnails/32.jpg)
REST request – example scenario200 – OkayBUT…my code is still failing?
JavaScript?
REST API?
![Page 33: ArcGIS API for JavaScript - Esriproceedings.esri.com/library/userconf/devsummit-euro15/papers/dev... · 2015 Developer Summit Europe--Presentation, 2015 Developer Summit Europe, ArcGIS](https://reader037.fdocuments.in/reader037/viewer/2022103011/5a72f6b77f8b9a93538e517f/html5/thumbnails/33.jpg)
Cross domain requests : CORS and proxy page• Cross-Origin Resource Sharing (CORS)
– Implemented on both server side and client side– http://enable-cors.org/
• Proxy page– Allow cross domain request– Manage security (tokens)– Go over the GET URL limit length– https://github.com/Esri/resource-proxy
![Page 34: ArcGIS API for JavaScript - Esriproceedings.esri.com/library/userconf/devsummit-euro15/papers/dev... · 2015 Developer Summit Europe--Presentation, 2015 Developer Summit Europe, ArcGIS](https://reader037.fdocuments.in/reader037/viewer/2022103011/5a72f6b77f8b9a93538e517f/html5/thumbnails/34.jpg)
Localhost OAuth 400 error
![Page 35: ArcGIS API for JavaScript - Esriproceedings.esri.com/library/userconf/devsummit-euro15/papers/dev... · 2015 Developer Summit Europe--Presentation, 2015 Developer Summit Europe, ArcGIS](https://reader037.fdocuments.in/reader037/viewer/2022103011/5a72f6b77f8b9a93538e517f/html5/thumbnails/35.jpg)
Localhost OAuth 400 error
![Page 36: ArcGIS API for JavaScript - Esriproceedings.esri.com/library/userconf/devsummit-euro15/papers/dev... · 2015 Developer Summit Europe--Presentation, 2015 Developer Summit Europe, ArcGIS](https://reader037.fdocuments.in/reader037/viewer/2022103011/5a72f6b77f8b9a93538e517f/html5/thumbnails/36.jpg)
Throttling – slow network testing• Most important for mobile• But important for every
application (public app, used on remote site)
• Test it early in the app development process
![Page 37: ArcGIS API for JavaScript - Esriproceedings.esri.com/library/userconf/devsummit-euro15/papers/dev... · 2015 Developer Summit Europe--Presentation, 2015 Developer Summit Europe, ArcGIS](https://reader037.fdocuments.in/reader037/viewer/2022103011/5a72f6b77f8b9a93538e517f/html5/thumbnails/37.jpg)
Slow network troubleshooting - 1• Try to request only what you need• Simplify geometries
– In your database– Or client side using the
maxAllowableOffset parameter
• If you need geometry operations, give the new GeometryEngine a try !
![Page 38: ArcGIS API for JavaScript - Esriproceedings.esri.com/library/userconf/devsummit-euro15/papers/dev... · 2015 Developer Summit Europe--Presentation, 2015 Developer Summit Europe, ArcGIS](https://reader037.fdocuments.in/reader037/viewer/2022103011/5a72f6b77f8b9a93538e517f/html5/thumbnails/38.jpg)
Slow network troubleshooting - 2• Minimize, concatenate your .js and
.css• Use ArcGIS JavaScript Optimizer• (or build your own !)• Enable webserver gzip compression
![Page 39: ArcGIS API for JavaScript - Esriproceedings.esri.com/library/userconf/devsummit-euro15/papers/dev... · 2015 Developer Summit Europe--Presentation, 2015 Developer Summit Europe, ArcGIS](https://reader037.fdocuments.in/reader037/viewer/2022103011/5a72f6b77f8b9a93538e517f/html5/thumbnails/39.jpg)
Internet Resources• Search Engine• GeoNet• GIS StackExchange
![Page 41: ArcGIS API for JavaScript - Esriproceedings.esri.com/library/userconf/devsummit-euro15/papers/dev... · 2015 Developer Summit Europe--Presentation, 2015 Developer Summit Europe, ArcGIS](https://reader037.fdocuments.in/reader037/viewer/2022103011/5a72f6b77f8b9a93538e517f/html5/thumbnails/41.jpg)
Please Take Our Survey!
Download the Esri Events app and find your event Select the session you
attendedSelect
“User Presentation Survey”or
“Technical Workshop Survey” Complete Answersand Select “Submit”
![Page 42: ArcGIS API for JavaScript - Esriproceedings.esri.com/library/userconf/devsummit-euro15/papers/dev... · 2015 Developer Summit Europe--Presentation, 2015 Developer Summit Europe, ArcGIS](https://reader037.fdocuments.in/reader037/viewer/2022103011/5a72f6b77f8b9a93538e517f/html5/thumbnails/42.jpg)