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 [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/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 [email protected] @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 .