Most 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 pattern in JavaScript to really clean up your code with or without other libraries.
6. The Problem
Designers tend to think in terms of appearance. Good
ones think about usability.
Only the very best ones think about programmability.
Developers make it worse by not thinking about design
Saturday, March 17, 12
7. A Typical Product Lifecycle
Somewhat dramatized...
Saturday, March 17, 12
22. Some time passes
‘Some time’ is defined as:
Just long enough that the developer doesn’t remember
exactly how his original code works.
Saturday, March 17, 12
34. No developers were harmed in the making
of this dramatic reenactment.
Saturday, March 17, 12
35. Additional Features + Short Sighted Architecting
= Horrible JavaScript Spaghetti
Saturday, March 17, 12
36. Why does this happen?
This is where you earn audience participation points.
Saturday, March 17, 12
37. Some Reasons
• JavaScript isn’t real code
• We don’t treat client side things as real features
• We can’t easily test it
Saturday, March 17, 12
38. This really all boils down to one thing.
We developers suck.
Saturday, March 17, 12
39. Bonus second lesson
We developers suck at interacting with designers
(or stakeholders).
Saturday, March 17, 12
40. Three JavaScript Principles
• Decouple everything
• Make it testable
• Push events, not state
Saturday, March 17, 12
41. Decouple Everything
Start thinking about UI pieces as individual JS objects.
Remove dependencies between objects.
Apply your OO best practices here too.
Saturday, March 17, 12
42. Make It Testable
Separate DOM dependent stuff into a single layer.
Put the rest of the stuff in classes that you can test.
Saturday, March 17, 12
43. 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”
Saturday, March 17, 12
45. 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
Saturday, March 17, 12
46. NavControlMediator
itemSelected()
unselectAll()
Events from some
other object
Saturday, March 17, 12
47. 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()
Saturday, March 17, 12
48. NavControlMediator
itemSelected()
viewModel
unselectAll()
Events from some
other object
Saturday, March 17, 12
50. Pub/Sub + Fairy Dust = Service Bus
Pub/Sub is great to make sure events propagate.
It stats to get brittle with lots of different controls.
Saturday, March 17, 12
51. Way Too Much Pubbing and Subbing
Saturday, March 17, 12
52. 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.
Saturday, March 17, 12
54. 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.
Saturday, March 17, 12
55. NavControlMediator
itemSelected()
viewModel
Service Bus
unselectAll()
Events from some
other object
ReportMediator
itemChanged()
viewModel
unselectAll()
Saturday, March 17, 12
56. HistoryControl
NavControlMediator
itemSelected()
viewModel
Service Bus
unselectAll()
Events from some
other object
ReportMediator
itemChanged()
viewModel
unselectAll()
Saturday, March 17, 12
