Advanced JavaScript. Gary Sheppard & James Tedrick

Size: px

Start display at page:

Download "Advanced JavaScript. Gary Sheppard & James Tedrick"

Barnaby McDonald
6 years ago
Views:

1 Advanced JavaScript Gary Sheppard & James Tedrick

2 HTML 5 Working with jquery Modules, Dijits & AMD Cross-Domain

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

5 What works? Features in various stages of development Browser support differs

6 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)

7 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>)

8 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()

9 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

10 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)

11 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>

12 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)

13 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

14 Mobile Web App

15 JavaScript challenges Not compiled Limited support in non-js IDEs Large projects become unwieldy

16 JavaScript challenges Working with JavaScript/HTML Dressing an octopus Source:

17 JavaScript challenges One solution: JavaScript frameworks (Dojo, jquery, others)

18 jquery Percentage of popular sites using jquery Source: BuiltWith

19 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

20 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.

21 Learning jquery (tutorials) (tutorials) (tips blog)

22 Demo: jquery tutorial and ArcGIS

23 jquery/arcgis tips jquery UI widgets Test in target browsers and devices Test on Web server Use compact build of ArcGIS API if possible

24 Dijits & Modules James Tedrick

25 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();

26 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);

27 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

28 Dijit lifecycle 1. constructor 2. postmixinproperties 3. buildrendering 4. postcreate 5. startup 6. destroy normally called by program creating widget

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

30 Dijit

31 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 functionscoped variables

32 Require Import modules require( [ dijit/layout/bordercontainer, esri.map, dojo/domready! ], function(bordercontainer, Map){ var bc = new BorderContainer( ) var map = new esri.map( ); });

33 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>], )

34 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

35 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>

36 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

37 AMD Loading

38 The problem with cross-domain access Facebook cookie: 0x deadbeef7199

39 The problem with cross-domain access Facebook cookie: 0x deadbeef7199

40 Same origin policy Policy: XmlHttpRequest only to same domain as page Enforcement: browser Exception: server can allow other domains

41 Dealing with the same origin policy Server-side proxy Cross-origin resource sharing (CORS)

42 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

43 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

44 CORS and ArcGIS JavaScript API uses Dojo xhrget/xhrpost - Subject to same origin policy ArcGIS for Server enables CORS for all domains by default

45 Demo: Controlling CORS in ArcGIS for Server

46 Getting help: ArcGIS Resource Center

47 ArcGIS API for JavaScript

48 Tuesday Evening Reception Smithsonian American Art Museum and National Portrait Gallery 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

49 Wednesday Closing Session Closing and Hosted Lunch 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.

50 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

51 Thank You Please complete a session evaluation form. #FedGIS

Introduction to JavaScript. Evan Caldwell & James Tedrick

Introduction to JavaScript. Evan Caldwell & James Tedrick Introduction to JavaScript Evan Caldwell & James Tedrick Agenda Getting Started - Meet the Esri API for JavaScript! - Meet Dojo! - Tools of the trade My First App JS API fundamentals How JS apps work Where