advanced javascript -...

Advanced JavaScript Gary Sheppard & James Tedrick

• HTML 5 • Working with jQuery • Modules, Dijits & AMD • Cross-Domain

• Video Playback • Canvas (2D graphics) • Geolocation API • Web Storage • Drag & Drop • Web Workers • ApplicationCache (offline use) • CSS 3 & more!

What works?

• Features in various stages of development • Browser support differs • http://caniuse.com

http://caniuse.com/

Geolocation

• Work with device’s geolocation capability - GPS - WiFi/cell tower triangulation - IP address lookup

• Geolocation dependent on user permission

if (navigator.geolocation) {

navigator.geolocation.getCurrentPosition(callback)

}

Web Storage

• Key/Value local storage in browser • localstorage – persistent • sessionStorage – per browser window • Not enormous: 2.5 MB – 10 MB per origin, depending on browser (Chrome 2.5MB, IE 10MB)

• Values must be strings (serialize arrays/objects)

localstorage.setItem(<key>, <value>) localstorage.getItem(<key>)

Web Workers

• Multiprocessing in the browser • Separate script that runs in a new thread • Does not have direct access to DOM – pass messages to/from browser

var worker = new Worker(<script.js>);

worker.postMessage(“Message”);

worker.onmessage = <callback f() to process message>

worker.terminate()

Drag & Drop

• Move objects within a web page • Move documents into a web page • ondrag, ondrop, associated events • File upload: event.dataTransfer.getData(“text”) • Will normally need to call event.preventDefault() in ondrop event handlers to prevent browsers from doing normal behavior

Application Cache

• Specify the files needed to use the web page offline; files get persistently cached by browser

• manifest tag in html element <html manifest=“my.appcache”>

• Some issues - Must modify the application cache file when

updating any resource to recache it. Use a comment line (#) with date to update

- Some browsers limit total size (5MB)

Application Cache file

CACHE MANIFEST

/app.js

<Other files to cache>

NETWORK

serversideProcess.php

<Resources never cached/ use * for wildcard>

FALLBACK:

/tiles/ noTile.jpg

<Resources matching this path get this resource>

CSS 3

• Better application design - Screen size based design (responsive design) - Rounded Corners (border-radius) - Drop Shadows (box-shadow & text-shadow) - Web fonts (@font-face definition) - Multi-column text layout (column-count)

• Animation & transitions with events • Filters- alter the image of a layer (filter) http://odoe.net/blog/?p=322

http://odoe.net/blog/?p=322

CSS3 caveats

• Browsers are continually adding features and proposing them for CSS

• Mixed implementations across browsers • Often need to use browser-specific CSS properties (column-count example): - IE: not supported - Firefox: -moz-columncount - Chrome/Safari: -webkit-columncount - Opera: column-count

Mobile Web App

JavaScript challenges

• Not compiled • Limited support in non-JS IDEs • Large projects become unwieldy


Working with JavaScript/HTML ≈

Dressing an octopus

Source: http://en.wikipedia.org/wiki/File:Octopus2.jpg


One solution:

JavaScript frameworks (Dojo, jQuery, others)

jQuery

Percentage of popular sites using jQuery Source: BuiltWith

Why jQuery?

jQuery helps you do all of this… • Handling events • Making Ajax calls • Creating great UI elements • Traversing and manipulating the HTML DOM

- (When I was your age, we called this DHTML) …all at the same time …without a big JavaScript mess

jQuery visual elements

Two different UI libraries: • jQuery UI • jQuery Mobile (based on jQuery UI) Both are compatible with ArcGIS Tip: on any given page, use one or the other.

Learning jQuery

• http://learn.jquery.com/ (tutorials) • http://www.w3schools.com/jquery (tutorials) • http://www.learningjquery.com/ (tips blog)

http://learn.jquery.com/

http://www.w3schools.com/jquery

http://www.learningjquery.com/

http://learn.jquery.com

http://resources.arcgis.com

Demo: jQuery tutorial and ArcGIS

http://learn.jquery.com/

http://resources.arcgis.com/

http://resources.arcgis.com/

jQuery/ArcGIS tips

• jQuery UI widgets • Test in target browsers and devices • Test on Web server • Use compact build of ArcGIS API if possible

James Tedrick

Dijits & Modules

Modules

• Containerize code for reusability, management • Limits global variables, potential namespace collision var app = { settings: { mapDOMnode: ‘mapdiv’, }, init: function() { app.map = new esri.Map(app.settings.mapDOMnode); … } }; app.init();

Modules

Dojo (& the Esri JS API) makes extensive use of modules dojo.require(dijit.layout.BorderContainer);

dojo.require(dijit.layout.ContentPane);

dojo.require(esri.map);

dojo.require(esri.tasks.query);

Dijits- UI Modules

• User Interface Elements - Layout - Form Items - Dialogs/Popup Menus

• Some graphical elements are also in developmental dojox namespace - Charts/Gauges - Mobile user interface

Dijit lifecycle

1. constructor 2. postMixInProperties 3. buildRendering 4. postCreate

5. startup 6. destroy

normally called by program creating widget

Templated Dijits

• Template html fragment contains layout • Code in js file • Accompanying assets (images, css) • Uses dijit._TemplatedMixin module to load HTML template

Asynchronous Module Definition (AMD)

• Reduce load time of page by loading scripts only when needed

• Clarifies module names by allowing the programmer to assign modules to function-scoped variables

Require – Import modules

require(

[“dijit/layout/BorderContainer”,

“esri.Map”,

“dojo/domReady!”],

function(BorderContainer, Map){

var bc = new BorderContainer(…)

var map = new esri.Map(…);

});

Special ‘Modules’

• Dojo/domReady! – special module that waits until the DOM is ready to resolve (replaces dojo.ready)

• Dojo/has – browser functionality testing require([dojo/has!<feature>?<YesModule>:<NoModule>], …)

• Dojo/text – Load text from file (HTML templates) require([dojo/text!<path to template>], …)

Defining Modules

• Define (Module Name, [dependencies], function) • Module Name – optional; encourages to leave anonymous to allow for loading applications to name

• Dependencies – same as in require • Function – returns module code as an object

Define – create modules

define(“myApp”, [“dojo/_base/declare”, “dijit/Layout/BorderContainer”, “esri/Map], function(declare, BorderContainer, Map) { return declare([BorderContainer, Map], {

<module code here>

<Reminder: constructor property inits>

});

});

Esri JS API & AMD

• Currently, some Esri modules are AMD compatible

• Working to migrate all modules to AMD over the next few versions

• Will continue to support dojo.require loading method

AMD Loading

The problem with cross-domain access Facebook cookie: 0x4598324759deadbeef7199…

Same origin policy

• Policy: XmlHttpRequest only to same domain as page

• Enforcement: browser • Exception: server can allow other domains

Dealing with the same origin policy

• Server-side proxy • Cross-origin resource sharing (CORS)

Server-side proxy

• Your page can’t make the request to their server • So your page makes the request to your server • And your server makes the request to their server

• Safe: your server doesn’t have their server’s cookies

Cross-origin resource sharing (CORS)

• Their server includes a header: Access-Control-Allow-Origin: * Access-Control-Allow-Origin: bobsclarinets.com timsenglishhorns.com katestubas.com

• Same concept: - crossdomain.xml for Flash - clientaccesspolicy.xml for Silverlight

CORS and ArcGIS

• JavaScript API uses Dojo xhrGet/xhrPost - Subject to same origin policy

• ArcGIS for Server enables CORS for all domains by default

Demo: Controlling CORS in ArcGIS for Server

Getting help: ArcGIS Resource Center

http://resources.arcgis.com

ArcGIS API for JavaScript

http://esriurl.com/js

6:30 PM–9:30 PM • Walking distance from convention center

• Conference Badge needed for reception

• Coat check available in courtyard

• Serving hot hors d’oeuvres and beverages

Smithsonian American Art Museum and National Portrait Gallery

Tuesday Evening Reception

11:30 AM–1:30 PM • Ballrooms A–C, Third Level

• Join conference attendees for lunch and closing session

• Closing Speaker Todd Park, U.S. CTO

• Wrap-up and request for feedback with Jack Dangermond.

Closing and Hosted Lunch

Wednesday Closing Session

Upcoming Events esri.com/events

Date Event Location

March 21, 2013 MeetUp – ArcGIS Platform Washington, DC

April 18, 2013 MeetUp – Location Analytics Washington, DC

March 23–26, 2013 Esri Partner Conference Palm Springs, CA

March 25–28, 2013 Esri Developer Summit Palm Springs, CA

July 6–9, 2013 Esri National Security Summit San Diego, CA

July 8–12, 2013 Esri International User Conference San Diego, CA

Thank You Please complete a session evaluation form.

#FedGIS

advanced javascript -...

Documents