USCG JavaScript Workshop


Tom Wayson

 ESRI Professional Services


twayson@esri.com
@tomwayson on GitHub and Twitter

About Me

Web Application Developer, Database Services

Clients: NASA,  State of Oregon, Becks Hybrids, Utilities
ArcGIS Online apps and templates


14 yrs as Web GIS Developer & Consultant

Clients: Electric utilities, local government
Technology: JavaScript, ASP.Net, Oracle Spatial 


// I <3 JavaScript


Today (8/6/2014)

  • Our approach to JavaScript app development
  • What JavaScript topics do you want cover?
  • Requirements and gap analysis
  • JavaScript prototyping and deep dive
  • Analysis of alternatives document
  • Anything I missed?

To JavaScript, or Not...

...that is the question


JavaScript is not the best solution for:


  • Offline, and in particular disconnected editing
  • Taking advantage of device's special capabilities
  • Working with local data (on disk)
  • 3D and other intensive rendering tasks (yet)
  • Computationally intensive work w/ millions of records
  • No in house experience with, or interest in the language

To JavaScript, or Not...

...that is the question


JavaScript is a good solution for:


  • Pretty much everything else

So, You've Chosen JS...

Questions for new JavaScript app development:
  • Kitchen sink?
    • Web AppBuilder
  • Focussed app?
    • Is there a template that is a good match?
  • Browser support? mobile/touch support needed?
    • Web AppBuilder or Bootstrap templates
  • How important is UI/UX design?
  • What in house capabilities does the client have?
  • What environment will app be integrated into? 

Templates and Samples


Templates

Most are on GitHub now http://esri.github.io/

Typically very specific, but some are more generic:

Templates and Samples


Samples


Useful to establish capabilities, and identify gaps.

Samples are for reference, not for copying code.

Keep a list of links to relevant samples in a wiki or spreadsheet 

The Problems with JavaScript

Browser/mobile/touch differences.
Anything goes. No (obvious) right way.
Easy to do it "wrong" (for a long time).
 
Need framework(s) to mitigate above issues, but...
There's dozens of frameworks. Which is best?

Esri Uses Dojo


The Good Parts

  • Asynchronous Module Definition (AMD)
  • Classes and mixins
  • Widgets and d eclarative syntax
  • i18n

... And the Not So Good Parts

The Bad 

  • Not prescriptive enough on app architecture
  • CDN hosted build (very difficult to optimize)
  • Too big a framework, both:
    • when downloading at runtime
    • and evolves slower than others


The Ugly

  • Dijit layout, styles, form controls

Suggested Implementations

  • Web AppBuilder
    • adds the prescriptive structure for complex apps
    • responsive design
  • Dojo-Bootstrap-Map template
    • only uses the good parts of Dojo
    • replaces bad parts w/ Bootstrap (also responsive)
  • Backbone + jQuery + Bootstrap
    • only use Esri/Dojo for mapping
    • app structure conforms to modern best practices
  • Esri-leaflet
    • a "Nojo" solution for lightweight apps only

JavaScript Topics


JSAPI Tour
Specific functionality (StreamLayer)
Writing your own widgets/classes
Commonly used app templates
Tooling (IDE, static analysis, etc)
Application frameworks (Dojo, Bootstrap, Backbone, etc)
Automated Testing
 

Esri JS Resources

Esri JS Resources (cont)