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.

B83d5b590577969ee79a5ad845411a7d?s=128

Amy Palamountain

April 10, 2014
Tweet

Transcript

  1. 2.
  2. 3.
  3. 4.
  4. 5.
  5. 15.
  6. 30.

    matches a pattern Router has action invoked Controller look up

    and update Model snapshot returned View
  7. 45.

    ! ! /** 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);
  8. 47.

    ! ! 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(); } ! }); !
  9. 48.

    ! ! 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(); } ! }); !
  10. 57.

    ! /** 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",
  11. 64.

    models Syncs state, Transition state. Raises events views Handles model

    events Handles DOM events templates HTML rendered by the view
  12. 65.

    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
  13. 67.

    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
  14. 68.
  15. 71.

    ! ! ! ! ! var rm = new Marionette.RegionManager();

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

    ! ! ! ! ! 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
  17. 73.

    layout composer Initialises models and views keeps track of their

    placement within a given container module A strand alone component
  18. 76.

    ! ! ! ! ! ! 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) {
  19. 77.

    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
  20. 78.

    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