Working with JavaScript App Frameworks and ... - Amazon S3 · 2014 International Developer Summit...

Working with JavaScript App Frameworks and

ArcGIS API for JavaScript

Derek Swingley Mike Juniper

Matt Priour Fred Aubry

• Views react to changes on models/collections

• RESTful JSON interface

Pros: • Provides structure* • Separation of concerns (testability, maintainability)* • No more hanging state on the DOM ($(…).data(…))* • Huge community • Simple, flexible, lightweight • Lots of plugins available

marzbars/4315696107 * Thus improving testability and maintainability!

Cons: • Lots of boilerplate* • No view binding by default*

blade_dancer/3563118741

* Mitigated by plugins!

https://github.com/mjuniper/backbone-demo-ds2014

Frederic Aubry Operations Dashboard Developer

esri JavaScript API and ember.js

ember.js

• ember.js is an MVC JavaScript framework (http://www.emberjs.com)

• Highly inspired by Cocoa MVC from Apple (http://developer.apple.com/library/mac/documentation/general/conceptual/devpedia-cocoacore/MVC.html)

UI View Controller Model

input notifies updates

draws notifies notifies

Route

Route

sends event

sends event

Bootstrap Objects -> Route

Draw initial UI -> Template

Template

uses

Input to User Intent -> View/Template

Application State -> Route

Update Domain Objects -> Controller

Notify UI of changes -> Data Binding

Update UI -> View/Template

Demos

• Demo 1 - Rewritten the “Gas price data by state mashup” sample with ember.js - Code can be accessed on http://github.com/ffaubry/data-gas-prices-ember

• Demo 2

- Share implementations and designs by using ember.js web components - http://jsbin.com/fuhix/6/edit

ember.js and dojo being good friends

• No issue with AMD and build… If you do it right • Use view.didInsertElement to bootstrap dojo/dijit instances • Use view.willRemoveElement to destroy dijit instances • BorderContainer and other dijit layout classes require a bit more plumbing

Map View

Child View

Parent View

From developer to developers

• MVC is essential for ambitious apps • Search for UX patterns when you write your app => Components • Encapsulate your styles => Component • AMD is good if you use a build system

Matt Priour JS API Core Development Team mpriour@esri.com @mattpriour

Esri JS API and AngularJS Using Frameworks with the JS API

What is AngularJS ?

A markup-centric MVW framework

http://angularjs.org/#todo-html

http://angularjs.org/#todo-js

It’s not cluttered. It’s working.

Self contained logic can be wrapped in a

“directive”

http://mpriour.github.io/ds14-frameworks-angular/app/

Show the Code

index.html

Load the libraries and the initialization scripts

index.html

Show the Code

ß setup.js

init.js à

Wrap Angular Code in dojo-AMD

index.html

Application specific logic goes in the controllers

‘extent= . . . . .’ -- or --

‘center = . .’ and ‘zoom’ = .

index.html

Layer options and event handlers

Next Steps • Make application parts more modular

• Don’t include large objects in $scope, like

Map or FeatureLayer

• Make better use of template expressions.

• Towards an angular based esri js api component library.

Learning More Angular.org – http://angular.org - http://docs.angular.org YouTube - https://www.youtube.com/user/angularjs Map, FeatureLayer and Setup/Init taken directly from Patrick Arlt https://github.com/patrickarlt/dev-summit-talk-angular-js/ Egghead.io - https://egghead.io/ Just Try It. Actually doing it is the best way to learn !

Matt Priour JS API Core Development Team mpriour@esri.com @mattpriour

Patrick Arlt Portland R&D Team parlt@esri.com @patrickarlt

• Templates* • Shadow DOM* • Custom elements* • Packaging*

* Web Components!

Pros: • Everything is an element! • It’s the way the web is headed? • Works today in ‘evergreen

browsers’

evanhahn/4991130110

Cons: • Everything is an element! • Not production ready • Evolving standards

quinnanya/4894977089

https://github.com/mjuniper/polymer-demo-ds2014

Summary

Backbone: simple, lightweight, flexible,

community…boilerplate, no data binding à Marionette?

Angular: markup-centric, MV “watcher”, directives,

community/videos/egghead… JS in my markup, seems

complicated/magical

Summary

Ember: MVVM, data binding, leaning toward web

components, templating, routes + controllers

Polymer / web-components: not-MVC, future, markup,

performance … future (templates, shadow DOM, custom

elements, packaging)

Get the code…

https://github.com/mjuniper/backbone-demo-ds2014

https://github.com/mpriour/ds14-frameworks-angular

https://github.com/ffaubry/data-gas-prices-ember

https://github.com/mjuniper/polymer-demo-ds2014

Bonus: https://github.com/mjuniper/polymer-sandbox

Session survey: http://esriurl.com/7517

Derek Swingley Mike Juniper

Matt Priour Fred Aubry