Upload
lymien
View
222
Download
0
Embed Size (px)
Citation preview
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 [email protected] @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 [email protected] @mattpriour
Patrick Arlt Portland R&D Team [email protected] @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