Building Web Applications – A brief history of web pages – dojo Toolkit

View Github Repository Open presentation in a new window

tedrick

See all presentation from tedrick

Building Web Applications – A brief history of web pages – dojo Toolkit

0 0

introJSpresentation

Introduction to JavaScript Presentation for DC DevSummit 2014

On Github tedrick / introJSpresentation

Building Web Applications

James Tedrick & Evan Caldwell

A brief history of web pages

Web pages started out with only text, images, and links

Using web servers to run applications and JavaScript to provide minimal interactivity in a browser, we could develop applications

Application work: Server > Desktop

Modern web applications now use JavaScript in the browser to provide most functionality.

Application work: Server < Desktop

Getting Started

https://developers.arcgis.com/javascript/

The Anatomy of a web application

  • HTML: document structure
  • CSS: document style
  • JavaScript: Application functionality
  • Web servers (via JS): document data

What can you do with the JS API?

  • Create Interactive maps
  • Use ArcGIS Online Resources (Content, Basemaps, Services)
    • Load maps from ArcGIS Online
    • Find Addresses
    • Calculate a route
  • Run your own tasks
  • Load data from ArcGIS Server

dojo Toolkit

http://dojotoolkit.org
  • Esri JS API is built on top of the Dojo Toolkit
  • Dojo is a set of tools to make it easier to build complex applications using JavaScript
  • Automates common JavaScript tasks & workflows
  • Provides user interface (layout structure, graphs, form items)
  • Dojo is organized in modules to make it easy to load

Loading modules

Load modules using the require method:
require(["esri/Map"],   function(Map){     var map = new Map();   } );
First is the list of modules you're using, then a function that uses the modules as parameters

Dijits

User Interface (UI) components
  • Layout: Containers, Tabs, Accordions
  • App control: Menus, Dialogs
  • Forms: Validating text box, Dropdowns, Rich Text
  • Data Display: Charts, Grids, Gauges

Inside the JS API

  • Map - with controls, infoWindow (pop-up), graphics layer & map layers
  • Map Layers
    • Map Service Layers - images of maps (entire area or cached tiles)
    • Graphics / Feature Layers - vectors & attributes (manipulate in app)
  • Tasks - Query, Locator, Geoprocessing, Geometry

Esri Dijits - Map UI

  • Geolocation
  • Geocoder
  • Directions
  • Printing
  • Identity Manager
  • Legend / Scalebar
  • Measurement
  • Basemap Gallery
  • GeoEnrichment
  • Histogram
  • Swipe

Bring your own framework!

  • The JS API also plays well with other frameworks (jQuery, Sencha, …)
  • Esri provides a compact build of the API, minimizes the amount of Dojo loaded
  • Recommended design philosophy: separate Esri/Dojo code from other framework code to enhance maintainability

Developing Applications

Coding Tools

Debug environment - Your Browser

  • Javascript console
  • Network traffic inspector
  • Live access to the loaded document

How apps work - AJAX

  • Web pages load data from servers on demand without reloading the page
  • Event driven: your application doesn't wait for the data to load
  • Callback - a function that runs when the response from the web server is received
  • Some restrictions...

Proxies & CORS

  • Normally, web pages can't receive data from another domain (cross domain)
  • You see it as stuff not loading with Permission Denied errors
  • Ways to get around that:

Demo: Loading a map from ArcGIS Online

What's coming?

HTML5: greater functionality

Application functionality

  • File API - upload files into the browser
  • Cross-Origin Resource Sharing (CORS) - mashups w/o proxies
  • Web Sockets - live communication to/from server
  • Web Workers - client-side processing off-page

CSS3 (What you've been seeing)

  • Animations (slide transitions)
  • 2D/3D Rotation/Transformation (slide transitions)
  • Gradients (this background)
  • Web fonts (not installed on viewer's computer)

Graphics Capabilities

  • Canvas - in-page editable images
  • SVG - standardized vectors
  • WebGL - 3D display (CityEngine Viewer)

Mobile apps

  • Geolocation - where are you?
  • Web Storage - offline storage
  • Touch Events - use your fingers
Note: Not all browsers are created equal

(IE 8, I'm looking at you)

▶ IE 8: Standard for most federal agencies, possibly with FF 17/24 ESR alternative ◀

Web App Builder

JS API updates

  • Widget Development & Refinement
  • Improved popups (Layouts, Related Features)
  • Web map capabilies (manipulation, writing)

Making Complex Visualizations Easier

  • Scale-dependent renderers
  • Better client-side vector display using HTML5
  • Client-side heat maps (raster interpolation)
  • Client-side binning (statistics, clustering

Questions?

Resources

ArcGIS JS Documentation

GitHub repos: