Working with JavaScript App Frameworks and ArcGIS API for JavaScript
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
Template
Application State -> Route
Route
uses notifies
input
Input to User Intent -> View/Template
Update Domain Objects -> Controller
sends event 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 [email protected] @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/ds14frameworks-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 [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
Matt Priour
Mike Juniper
Fred Aubry
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
Template
Application State -> Route
Route
uses notifies
input
Input to User Intent -> View/Template
Update Domain Objects -> Controller
sends event 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 [email protected] @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/ds14frameworks-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 [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
Matt Priour
Mike Juniper
Fred Aubry
