Working with JavaScript App Frameworks and ArcGIS API for JavaScript
Derek Swingley Matt Priour Mike Juniper 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
* Thus improving testability and maintainability! marzbars/4315696107 Cons: • Lots of boilerplate* • No view binding by default*
* Mitigated by plugins!
blade_dancer/3563118741 https://github.com/mjuniper/backbone-demo-ds2014 esri JavaScript API and ember.js Frederic Aubry Operations Dashboard Developer 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)
Bootstrap Objects -> Route Route Draw initial UI -> Template
sends event Input to User Intent -> View/Template
Template Route Application State -> Route
uses sends event Update Domain Objects -> Controller input notifies updates Notify UI of changes -> Data Binding
UI draws View notifies Controller notifies Model 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
Map View 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
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
Esri JS API and AngularJS Using Frameworks with the JS API
Matt Priour JS API Core Development Team
@mattpriour 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 Application specific logic goes in the controllers
index.html ‘extent= . . . . .’ -- or -- ‘center = . .’ and ‘zoom’ = .
Layer options and event handlers
index.html 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 [email protected]
@mattpriour
Patrick Arlt Portland R&D Team
@patrickarlt • Templates*
• Shadow DOM* * Web Components! • Custom elements* • Packaging* 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 Matt Priour Mike Juniper Fred Aubry