building rich user experiences without javascript spaghetti
DESCRIPTION
Given at MADExpo 2012Most Javascript is written to glue code and UI together without any thought to design patterns. Over time this leads to piles of Javascript that look nothing like code you’d be proud of writing. In this talk we’ll look at the rise of software libraries (like Knockout) that can help add structure to your JS. We’ll talk about when they help your project, and when they get in the way. We’ll also look into how you can easily use the Mediator and Observer patterns in JavaScript to really clean up your code with or without other libraries. As an added bonus we’ll talk about using Message Buses to really decouple your JavaScript controls. I’ll explain how we’re using these patterns at Facio and how you can implement them in your code. At the end we'll look at some code samples and we'll talk about whatever other patterns you might be interested in doing in JavaScript.TRANSCRIPT
Building Rich User Experienceswithout
JavaScript Spaghetti
by Jared Faris@jaredthenerd
jaredthenerd.com
Friday, June 29, 12
About me
Friday, June 29, 12
Designers
Friday, June 29, 12
Developers
Friday, June 29, 12
JavaScript
Friday, June 29, 12
A Developer’s Problem
Developers are the only people in the organization that wear every single hat.
Building a great user experience is hard.
It’s even harder to build them so that they cangrow painlessly.
Friday, June 29, 12
Problem (part 2)
JavaScript lends itself very well to building really horrible code that doesn’t scale. At all. Ever.
Friday, June 29, 12
A Typical Product LifecycleSomewhat dramatized...
Friday, June 29, 12
Designer Developer
Friday, June 29, 12
We need this feature
Friday, June 29, 12
I got this
Friday, June 29, 12
?
Friday, June 29, 12
Tweaking time...
Friday, June 29, 12
I got anothergreat idea
Friday, June 29, 12
Now you tellme
Friday, June 29, 12
The developer bolts on some more code
Friday, June 29, 12
And anotherthing...
Friday, June 29, 12
grrr
Friday, June 29, 12
We don’t ‘really’
need this
Friday, June 29, 12
Uh, yeah wedo
Friday, June 29, 12
Friday, June 29, 12
The developer bolts on some more code
Friday, June 29, 12
Some time passes
‘Some time’ is defined as: Just long enough that the developer doesn’t remember
exactly how his original code works.
Friday, June 29, 12
I’ve got a new feature
Friday, June 29, 12
Angry developerscan really do this.IT managers be
warned.
Friday, June 29, 12
Protective Beret
Friday, June 29, 12
More messy code
Friday, June 29, 12
The last bug
Oh wait, one more
Friday, June 29, 12
Finally
Friday, June 29, 12
The next day...
Friday, June 29, 12
Friday, June 29, 12
Two weeks pass.
Friday, June 29, 12
I’ve got a new feature Gahh!
Friday, June 29, 12
Friday, June 29, 12
No developers were harmed in the makingof this dramatic reenactment.
Friday, June 29, 12
Additional Features + Short Sighted Architecting= Horrible JavaScript Spaghetti
Friday, June 29, 12
Why does this happen?
This is where you earn audience participation points.
Friday, June 29, 12
Some Reasons
• JavaScript isn’t real code• We don’t treat client side things as real features• We can’t easily test it• We don’t like writing it• It behaves differently in different browsers
Friday, June 29, 12
This really all boils down to one thing.
We developers suck at JavaScript.
Friday, June 29, 12
Three JavaScript Principles
• Decouple everything• Make it testable• Push events, not state
Friday, June 29, 12
Decouple Everything
Start thinking about UI pieces as individual JS objects.Remove dependencies between objects.Apply your OO best practices here too.
Friday, June 29, 12
Make It Testable
Separate DOM dependent stuff into a single layer.Put the rest of the stuff in classes that you can test.
Friday, June 29, 12
Push Events, Not State
Know about the Law of Demeter.Let controls worry about their own state.
Inform other controls that “X happened to Y”, not “Y is in X state”
Friday, June 29, 12
Some Patterns
Friday, June 29, 12
OO
• Think in terms of classes• Give behaviors to objects• Keep state inside of objects
Friday, June 29, 12
Mediator Pattern
"The essence of the Mediator Pattern is to "Define an object that encapsulates how a set of objects interact. Mediator promotes loose coupling by keeping objects from referring to each other explicitly, and it lets you
vary their interaction independently."
-Design Patterns: Elements of Reusable Object-Oriented Software
Friday, June 29, 12
NavControlMediator
itemSelected()
Events from some other object
unselectAll()
Friday, June 29, 12
Observer Pattern
"Define a one-to-many dependency between objects so that when one object changes state, all its dependents
are notified and updated automatically."
-Design Patterns: Elements of Reusable Object-Oriented Software
Think jQuery $(‘.something’).click()
Friday, June 29, 12
NavControlMediator
itemSelected()
Events from some other object
unselectAll()
viewModel
Friday, June 29, 12
Knockout.js Template Example
Friday, June 29, 12
Pub/Sub + Fairy Dust = Service Bus
Pub/Sub is great to make sure events propagate.It starts to get brittle with lots of different controls.
Friday, June 29, 12
Way Too Much Pubbing and Subbing
Friday, June 29, 12
Service Bus
A service bus is another layer that sits outside controls.Controls that want to communicate speak through it.Your controls are then only coupled to a single thing.
Friday, June 29, 12
Postal.js
Friday, June 29, 12
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 events without modifying the publisher.• We can re-use pieces more easily because they work in a standard way.
Friday, June 29, 12
NavControlMediator
itemSelected()
Events from some other object
unselectAll()
viewModel
ReportMediator
itemChanged()
unselectAll()
viewModel
Service Bus
Friday, June 29, 12
NavControlMediator
itemSelected()
Events from some other object
unselectAll()
viewModel
ReportMediator
itemChanged()
unselectAll()
viewModel
Service Bus
HistoryControl
Friday, June 29, 12
Service Bus
TeamControl
Gets team changed message, makes AJAX
call for this team’s data, rewrites team with template
No view model
Friday, June 29, 12
Service Bus
Friday, June 29, 12
Questions About Patterns?
Friday, June 29, 12
A Typical Product LifecycleRound Two
Friday, June 29, 12
We need this feature
Friday, June 29, 12
I got a fewquestions
Friday, June 29, 12
?
Friday, June 29, 12
Tweaking time...
Friday, June 29, 12
I got anothergreat idea
Friday, June 29, 12
Ok, Cool
Friday, June 29, 12
And anotherthing...
Friday, June 29, 12
Done.
Friday, June 29, 12
Two weeks pass...
Friday, June 29, 12
I’ve got a new feature
Friday, June 29, 12
No worries.
Friday, June 29, 12
Wha? Ohhhk.
Friday, June 29, 12
A short time later...
Friday, June 29, 12
Friday, June 29, 12
Special thanks to
He did the frame artBlame me for
everything else
Friday, June 29, 12
Examples
Friday, June 29, 12
A KO Warning
It’s really easy to go overboard with KO events.
I prefer to use KO for the VM binding (observables and computeds) but rely on jQuery for events.
jQuery’s .on() binding and a good understanding of ‘this’ makes for much cleaner events.
Friday, June 29, 12
Easy Testing
Try to have layers of your application’s JS that don’t touch any HTML elements.
Store data in models inside individual controls and test that published messages change the state of those
models correctly.
Friday, June 29, 12
Why Not Backbone.js?
Friday, June 29, 12
Shared Model
Friday, June 29, 12
NavControlMediator
itemSelected()
Events from some other object
unselectAll()
viewModel
ReportMediator
itemChanged()
unselectAll()
viewModel
Service Bus
Friday, June 29, 12
Tools Make This Easier
Underscore.jsCoffeescriptTemplates
Friday, June 29, 12
Knockout.js - Observer pattern (pub/sub)http://knockoutjs.com/
http://learn.knockoutjs.com/
Postal.js - Service bushttps://github.com/ifandelse/postal.js
http://freshbrewedcode.com/jimcowart/2011/12/05/client-side-messaging-with-postal-js-part-1/http://www.jaredthenerd.com/2012/01/using-postaljs-for-client-side.html
Patternshttp://arguments.callee.info/2009/05/18/javascript-design-patterns--mediator/
http://msdn.microsoft.com/en-us/magazine/hh201955.aspx (Pub/Sub)
Friday, June 29, 12
My Stuff@jaredthenerd
[email protected]://github.com/jaredfaris
http://jaredthenerd.com
Rate Mehttp://spkr8.com/t/12731
Friday, June 29, 12