Traditional Web DevelopmentWeb assets are created last to glue together things.Stakeholders, architects and developers define the“real” application.The application is built model first (from the DB up).
Traditional Web DevelopmentThe design is focused on making the CRUD pretty, notusableThe design of the UI/UX happens in Photoshop... if ithappens at all.Most of the application is just CRUD.
We have a widgetstableWe need awidgetsscreen!Make sure youadd a date pickerAnd a lighbox!
Not Real? Why?A lot of development tools traditionally hid the JS behindconfigurable controls.Libraries like jQuery make it really easy to pile on lots oflittle events.JS used to be a tool for doing image rollovers.
Is That A Problem?In a workflow-based application it falls apart.For form-based apps that was mostly fine.Customized, reusable controls and a modularapplication design needs something more.
This really all boils down to one thing.We developers suck.
Decouple EverythingApply your OO best practices here too.Remove dependencies between objects.Start thinking about UI pieces as individual JS objects.
Small Chunks Of CodeEven if you don’t test everything, learning how towrite testable code means learninghow to write better codePut the rest of the stuff in classes that you can test.Separate DOM dependent stuff into a single layer.
Push Events, Not StateInform other controls that “X happened to Y”,not “Y is in X state”Let controls worry about their own state.Know about the Law of Demeter.
Mediator Pattern“The essence of the Mediator Pattern is to ‘Define anobject that encapsulates how a set of objects interact.Mediator promotes loose coupling by keeping objectsfrom referring to each other explicitly, and it lets youvary their interaction independently.’”-Design Patterns: Elements of Reusable Object-Oriented Software
NavControlMediatoritemSelected()Events from someother objectunselectAll()
Observer Pattern"Define a one-to-many dependency between objects sothat when one object changes state, all its dependentsare notified and updated automatically."-Design Patterns: Elements of Reusable Object-Oriented SoftwareThink jQuery $(‘.something’).click()
NavControlMediatoritemSelected()Events from someother objectunselectAll()viewModel
A KO WarningIt’s really easy to go overboard with KO events.I prefer to use KO for the VM binding (observables andcomputeds) but rely on jQuery for events.jQuery’s .on() binding and a good understanding of‘this’ makes for much cleaner events.
BackboneViews help you control the visual rendering.Routers help you organize page flow.While KO is Model < > View magic, Backbone is structure.Models help you keep track of state.
Service Bus + Mediator• Controls no longer need to know about others.• We can remove/replace controls individually.• We can add controls that listen to the same eventswithout modifying the publisher.• We can re-use pieces more easily because they workin a standard way.
NavControlMediatoritemSelected()Events from someother objectunselectAll()viewModelReportMediatoritemChanged()unselectAll()viewModelService Bus
NavControlMediatoritemSelected()Events from someother objectunselectAll()viewModelReportMediatoritemChanged()unselectAll()viewModelService BusHistoryControl
Service BusTeamControlGets team changedmessage, makes AJAXcall for this team’s data,rewrites team with templateNo view model
TestingTry to have layers of your application’s JS that don’ttouch any HTML elements.Store data in models inside individual controls and testthat published messages change the state of thosemodels correctly.