Unblocking The Main Thread Solving ANRs and Frozen Frames
Getting Started with the ArcGIS API for JavaScript, Esri, Julie Powell, Antoon Uijtdehaag
1. European Developer Summit
Rotterdam, Nov. 9, 2012
Getting Started with the ArcGIS API
for JavaScript
Julie Powell, Antoon Uijtdehaag
2. Agenda
• Overview
• Best Practices
- Maximizing Performance
- Building expressive web applications with the latest features
• HTML5
• Tips & Tricks
• What’s next?
• Resources
3. ArcGIS for Server Is a Platform for Web GIS
• Comprehensive GIS Accessible from the Web, Desktop,
and Mobile
Open
• Server Oriented Desktop Web Mobile
APIs
Architecture OGC
USE
KML
Applications
SOAP
(clients)
• Enabling Web GIS SQL
• Rich Application
Clients
• High Performance and SERVE
scalable Enabled ArcGIS for
System Server
• Interoperable (Services)
• Dissemination and
collaboration
AUTHOR
ArcGIS Desktop
4. ArcGIS for Server Services
Map (including WMS, WMTS)
• View or query a 2D map on the server
Globe
• View or query a 3D globe on the server
Geocode
• Perform address matching on the server
Geodata
• Perform data replication, extraction, or query
Geoprocessing
• Run a tool or model on the server and get results
Image
• Provide access to raster data though a Web service
5. ArcGIS JavaScript APIs – Why JavaScript?
It’s your future ;-)
• Lightweight web GIS
• Pervasive
• Cross-platform, cross-browser, plugin-less
• JS Frameworks abstract away the browser complexity
- YUI, Dojo, EXTJS, jQuery
• IDE’s are getting better. Aptana, Notepad ++, Visual
Studio
6. JavaScript Considerations
• Can be a longer development cycle
• Mobile: limitations with interacting with device,
using local storage
• Performance Limitations
7. Race for the fastest browser – HTML5
• JavaScript Engine
- Just in time compilation to byte code
- Faster property access
- Efficient garbage collection
• Graphics engine improvements
• DOM improvements
• CSS3
8. What can you do with the API?
• Interactive maps
• ArcGIS Online basemaps
• Execute a task
• Find an address
19. Working with ArcGIS Online
Replace map with web map
Using ArcGIS Online Templates
Demo
20. Maximizing Performance
• Tiled layers vs. Dynamic
• Feature Services
- With power comes responsibility
- Generalizing geometries
• Balancing what you bring client side
- Image vs. features
- Calculating statistics
• Viewing performance stats
22. Query Statistics
• Calculate statistics server-side
- DB does the heavy lifting
• Large # features: Only send statistic results to client
• Types of calculations
24. Agenda
• Overview
• Best Practices
- Maximizing Performance
- Building expressive web applications with the latest features
• HTML5
• Tips & Tricks
• What’s next?
• Resources
25. HTML5: 5 Facts
1. It’s not one big thing
2. You don’t need to throw anything away
3. It’s easy to get started
4. It already works
5. It’s here to stay
• MARK PILGRIM, Dive into HTML5
28. HTML5 components in (or soon to be in) the JSAPI
Cross Origin Resource
Canvas (pixel control CSS3 Transitions Sharing
and android graphics)
High performance browsers!
CPU Intensive Operations
(asynch data processing,
client geometric operations)
CSS 3D Transforms
29. Example: Store Bookmarks Locally
• Try to store bookmark in
local storage.
• If not supported: Cookie
32. Agenda
• Overview
• Best Practices
- Maximizing Performance
- Building expressive web applications with the latest features
• HTML5
• Tips & Tricks
• What’s next?
• Resources
41. What if I don’t want to use Dojo?
• Compatability with other JavaScript frameworks, for
example:
- jQuery
- ExtJS
- Multiple versions of Dojo
- Leaflet
42. Where to get help…
• Getting Started
• Working with Dojo
43. Agenda
• Overview
• Best Practices
- Maximizing Performance
- Building expressive web applications with the latest features
• HTML5
• Tips & Tricks
• What’s next?
• Resources
44. ArcGIS API for JavaScript Roadmap
• Simplified API
• New Widgets such as Placefinder widget
• Dojo 1.8
• More build profiles
• AMD compliance
• Full touch support IE 10
Research
• Web Workers
• Socket Connections
• CityEngine WebScenes
51. Proxy
esri.request proxy
ArcGIS Server
Your code
Browser Web Server Remote Server
52. CORS
esri.request
ArcGIS Server
Your code
Browser Remote Server
Notas del editor
Derek covers brief overview of the api
JS is one of (or the) most used programming language in the worldPure client-side developmentMultiple js frameworks (dojo, yui) abstract away complexity**IDE is not even needed – you can start simple, only need a webserver & text editor like notepad.
- Mobile: Advantage: Runs on every device (browser) Disadvantage: Limited local data, no camera, less accuracy - GPS, limited native interface design.- Silverlight/Flex: Advantage JS: No plugin, runs on every OS, browser, Disadvantage: Enterprise applications with larger scope, issues between browsers. Performance limitations with rendering a large data on the client side.
It is a client for working with the ArcGIS Server REST API and ArcGIS Online meaning that it provides an easy way to use web services from ArcGIS Server and/or ArcGIS Online.The API has matured over its many releases and new functionality is continually added. In its current state, the API includes classes to add basemaps(cached, raster) and other layer types(vector), tasks to geocode, query and execute complex geoprocessing models, among others and widgets to provide common features such as configurable popups, map elements like a legend or scale bar and facilitate more complex operations like editing spatial data in a browser. Client to the ArcGIS Server REST API and ArcGIS OnlineFunctionality:Basemaps and Operational LayersTasksWidgets
Simple and powerful core api
Not just the building blocks, but functionality specific widgets which can be configured out of the box.Used in application viewers and arcgis online.
http://maqetta.org/Online IDE – cloud 9 - https://c9.io/JS fiddler - http://jsfiddle.net/
Recommended: Use Esri’s CDN hosted versionHigh availabilityBrowser cacheSupports httpsFreeAlternative: download and host yourselfMore controlMore effort
Demo creating a simple web map No dojo just htmlResource Center: SamplesTiledMapService & feature serviceLink to the REST EndpointCSS claro.css and esri.css (html5 transforms?)What is in the esri.css? What is it for?Link to JS API
Derek covers brief overview of the api
Demo creating a simple web map No dojo just html The getting started map – with a feature layer, then she replaced it with a web map (and you get all the other functionality)
-> Link to Blog entry: http://blogs.esri.com/esri/arcgis/2011/06/13/feature-layers-can-generalize-geometries-on-the-fly/
(1) Building Interactive apps & Performance Optimization (10 Minutes) JULIEInteractive maps: selection mode vs. snapshot vs. on demandQuery statisticsTiled basemaps, get tiles from anywherehttp://help.arcgis.com/en/webapi/javascript/arcgis/samples/layers_webtiled_many/index.html Typical scenario was: Bringing all features to the client - feature limit and slower rendering.Example based on EU population data (Data & Maps DVD: Is there a service available?? - Counties and Regions) -> Firefox & Firebug
Derek covers brief overview of the api
1. HTML5 is not one big thing; it is a collection of individual features. So you can’t detect “HTML5 support,” because that doesn’t make any sense. But you can detect support for individual features, like canvas, video, or geolocation. You can use this the DOM APIs to detect support for various things; example: for <video>… different video formats, play a video, pause, mute audio, track how much of the video has been downloaded, and everything else you need to build a rich user experience around the <video> tag itself.MODERNIZR, AN HTML5 DETECTION LIBRARY2. Backwards-compatible w/HTML4. Can even use HTML5 features and if not available can default to the “old way.”3. Upgrade by changing doctype.4. HTML5 is still under specification, and is currently in the Working Draft stage in the W3C, but many aspects of HTML5 are now stable and can be implemented in browsers. Firefox, Safari, Chrome, Opera, and mobile browsers already support canvas, video , geolocation , local storage ,and more.
Modernizer – check compatibility, falling backScalable Vector Graphics (SVG) is a new graphics file format and Web development language based on XML. SVG enables Web developers and designers to create dynamically generated, high-quality graphics from real-time data with precise structural and visual control. With this powerful new technology, SVG developers can create a new generation of Web applications based on data-driven, interactive, and personalized graphics.
Cover html 5 and provide intro to the HTML5 demos chris put together. we’ll cover the mobile stuff in the mobile session.
http://help.arcgis.com/EN/webapi/javThis sample extends the tiled map service layer and demonstrates how to store and retrieve tiles from local storage. When this application loads it checks to see if the tiles are in local storage, if not a web worker is spawned to retrieve the current tiles. Web workers are javascript files that run in a separate thread and communicate via messages. In this example, the web worker requests tiles and stores them in local storage. ascript/arcgis/demos/exp/exp_webstorage.html
Derek covers brief overview of the api
Formatjavascript using a code beautifier to make it easier to read and understand.
JSLint is a tool created by Douglas Crockford that allows you to check your code for errors and problems. JSHint does the same thing but is a bit more flexible in the options provided. Helps you quickly find issues in your code. For example, in this error report we can see that the first error tells us that we forgot to declare the map variable and the second line shows we have a missing semicolon.
Many development environments have plug-ins that enable the use of the tools within the development environment. For example JSHint is available as a plug-in for many dev environments.
Debuggers – firebug, chrome,ie 9 debugging tools Network tab (view requests)Breakpoint and watch ResourcesCome to our session
Content provides such as Esri, Google and Bing Maps have standardized their services on the Web Mercator Coordinate System. Many times you want to add data to the map perhaps a user-generated location where the location is specified in latitude/longitude. In this case Esri provides client-side helper methods to convert from web mercator to geographic and back.
In this case Esri provides client-side helper methods to convert from web mercator to geographic and back.
Map.extent.tojsonConsoleShow how you can use the console to get the extent of the map where you want to center it.
Widgets are all localized. Show a sample with another locale (changing the browser locale). Templates too…OvLegendScalebarMeasurementBookmark Gauge
Widgets: Common map elements like a legend or scale bar as well as web specific things like map popups, an overview map, attribute inspector and many others.
Derek covers brief overview of the api
Like all Esri products, there is a resource center for the API. We’ve set up a shortlink you can use to get there. There you’ll find API class documentation, our conceptual help which contains more detailed documents on everything from best practices for working map graphics to how to write your own classes. There are also links to “What’s New” documents for each release of the API as well as system requirements.The resource center also includes over 200 samples which can be used as a starting point for apps that you build. The samples provide a great way to see what’s possible “out of the box” and how to use specific functionality. Finally, we also host a user forum specifically for the API. API ReferenceConceptual HelpSystem requirementsWalkthroughsBest practicesSamplesUser forum
Layers: Traditional tiled and dynamic with more control over dynamic layers with 10.1. The API also provides classes to add WMS, WMTS, KML and other layer types to a map. You can also build your own custom layers.Add web tiled layer
An easy way to view your JS apps is to double-click the file in windows explorer which opens the app in a browser using file://. While this approach may work in many situations a better approach is to setup a web server. A Web server is a computer program that delivers content (web pages) , using HTTP over the web. Demo running sample from IIS.