$30 off During Our Annual Pro Sale. View Details »

Enemy Of The State

Enemy Of The State

Building front end JavaScript applications can be hard. In part, because they are just giant balls of events and state. And just like every problem in programming the more of something you have, the harder it becomes to manage. In this talk we are going to take a critical look at some of the patterns we see being applied in frameworks like ember, and backbone to see if the give us ways of handling state and state transition in a scaleable, maintainable fashion. and then take a look at some tactics you can use to help you better embrace both state and events, without sacrificing clarity in your architecture.

Amy Palamountain

April 10, 2014
Tweet

More Decks by Amy Palamountain

Other Decks in Programming

Transcript

  1. matches a pattern Router has action invoked Controller look up

    and update Model snapshot returned View
  2. ! ! /** Models **/ Animal = Backbone.Model.extend({}); PartyAnimals =

    Backbone.Collection.extend({ model: Animal }); ! /** View /Controller / Worlds most poorly named object **/ PartyAnimalView = Backbone.View.extend({ ! template: "#party-animal-template", render: function(){ var html = $(this.template).tmpl(this.collection); $(this.el).html(html);
  3. ! ! AppRouter = Backbone.Router.extend({ ! routes: { '#/party': 'startTheParty',

    '#/party/uninvite/:animal': 'revokePartyRights' }, revokePartyRights: function(animal){ model = partyAnimalCollection.find(animal); model.destroy(); $("#animal-party").remove(); }, ! startTheParty: function(animal){ var view = new PartyView({ collection : partyAnimalCollection }); partyAnimalCollection.fetch(); view.render(); } ! }); !
  4. ! ! AppRouter = Backbone.Router.extend({ ! routes: { '#/party': 'startTheParty',

    '#/party/uninvite/:animal': 'revokePartyRights' }, revokePartyRights: function(animal){ model = partyAnimalCollection.find(animal); model.destroy(); $("#animal-party").remove(); }, ! startTheParty: function(animal){ var view = new PartyView({ collection : partyAnimalCollection }); partyAnimalCollection.fetch(); view.render(); } ! }); !
  5. ! /** Models **/ Animal = Backbone.Model.extend({}); PartyAnimals = Backbone.Collection.extend({

    model: Animal }); ! ! /** View /Controller / Worlds most poorly named object **/ PartyAnimalView = Backbone.View.extend({ ! el: "#animal-party", template: "#party-animal-template",
  6. models Syncs state, Transition state. Raises events views Handles model

    events Handles DOM events templates HTML rendered by the view
  7. controller Initialises models and views keeps track of their placement

    within a given container models Syncs state, Transition state. Raises events views Handles model events Handles DOM events templates HTML rendered by the view
  8. The secret to building large apps is never build large

    apps. Break your application into small pieces. Then, assemble those testable, bite-sized pieces into your big application ” “ Justin Meyer, author JavaScriptMVC
  9. ! ! ! ! ! var rm = new Marionette.RegionManager();

    ! var region = rm.addRegion("foo", “#bar”); ! var regions = rm.addRegions({ mainContent: "#mainContent", sideBar: “#sideBar" }); ! regions.mainContent.show(myView);
  10. ! ! ! ! ! var composer = new LayoutComposer();

    ! var region = composer.addRegion(“mainContent", “#mainContent"); ! var composer = rm.addRegions({ mainContent: "#mainContent", sideBar: “#sideBar" }); ! composer.mainContent.show(suchModule); ! // region.show() function // will supply the module with the el to render to
  11. layout composer Initialises models and views keeps track of their

    placement within a given container module A strand alone component
  12. ! ! ! ! ! ! module.exports = Dispatcher =

    (function() { ! Dispatcher.extend = Backbone.Model.extend; ! _.extend(Dispatcher.prototype, EventBroker); ! Dispatcher.prototype.previousRoute = null; ! Dispatcher.prototype.currentModules = null; ! Dispatcher.prototype.currentRoute = null; ! Dispatcher.prototype.initialize = function(options) {
  13. layout composer Initialises models and views keeps track of their

    placement within a given container module A strand alone component dispatcher Loads new modules disposes of old
  14. layout composer Initialises models and views keeps track of their

    placement within a given container module A strand alone component dispatcher Loads new modules disposes of old router Mediates address bar events