Upload
jared-faris
View
3.663
Download
1
Tags:
Embed Size (px)
DESCRIPTION
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.
Citation preview
Building Rich User Experienceswithout
JavaScript Spaghetti
by Jared Faris@jaredthenerd
Saturday, March 17, 12
About me
Saturday, March 17, 12
JavaScript
Saturday, March 17, 12
Designers
Saturday, March 17, 12
Developers
Saturday, March 17, 12
The Problem
Developers make it worse by not thinking about design
Designers tend to think in terms of appearance. Good ones think about usability.
Only the very best ones think about programmability.
Saturday, March 17, 12
A Typical Product LifecycleSomewhat dramatized...
Saturday, March 17, 12
Designer Developer
Saturday, March 17, 12
We need this feature
Saturday, March 17, 12
I got this
Saturday, March 17, 12
?
Saturday, March 17, 12
Tweaking time...
Saturday, March 17, 12
I got anothergreat idea
Saturday, March 17, 12
Now you tellme
Saturday, March 17, 12
The developer bolts on some more code
Saturday, March 17, 12
And anotherthing...
Saturday, March 17, 12
grrr
Saturday, March 17, 12
We don’t ‘really’
need this
Saturday, March 17, 12
Uh, yeah wedo
Saturday, March 17, 12
Saturday, March 17, 12
The developer bolts on some more code
Saturday, March 17, 12
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
I’ve got a new feature
Saturday, March 17, 12
Angry developerscan really do this.IT managers be
warned.
Saturday, March 17, 12
Protective Beret
Saturday, March 17, 12
More messy code
Saturday, March 17, 12
The last bug
Oh wait, one more
Saturday, March 17, 12
Finally
Saturday, March 17, 12
The next day...
Saturday, March 17, 12
Saturday, March 17, 12
Two weeks pass.
Saturday, March 17, 12
I’ve got a new feature Gahh!
Saturday, March 17, 12
Saturday, March 17, 12
No developers were harmed in the makingof this dramatic reenactment.
Saturday, March 17, 12
Additional Features + Short Sighted Architecting= Horrible JavaScript Spaghetti
Saturday, March 17, 12
Why does this happen?
This is where you earn audience participation points.
Saturday, March 17, 12
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
This really all boils down to one thing.
We developers suck.
Saturday, March 17, 12
Bonus second lesson
We developers suck at interacting with designers(or stakeholders).
Saturday, March 17, 12
Three JavaScript Principles
• Decouple everything• Make it testable• Push events, not state
Saturday, March 17, 12
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
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
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
Some Patterns
Saturday, March 17, 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
Saturday, March 17, 12
NavControlMediator
itemSelected()
Events from some other object
unselectAll()
Saturday, March 17, 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()
Saturday, March 17, 12
NavControlMediator
itemSelected()
Events from some other object
unselectAll()
viewModel
Saturday, March 17, 12
Knockout.js Template Example
Saturday, March 17, 12
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
Way Too Much Pubbing and Subbing
Saturday, March 17, 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.
Saturday, March 17, 12
Postal.js
Saturday, March 17, 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.
Saturday, March 17, 12
NavControlMediator
itemSelected()
Events from some other object
unselectAll()
viewModel
ReportMediator
itemChanged()
unselectAll()
viewModel
Service Bus
Saturday, March 17, 12
NavControlMediator
itemSelected()
Events from some other object
unselectAll()
viewModel
ReportMediator
itemChanged()
unselectAll()
viewModel
Service Bus
HistoryControl
Saturday, March 17, 12
Questions About Patterns?
Saturday, March 17, 12
A Typical Product LifecycleRound Two
Saturday, March 17, 12
We need this feature
Saturday, March 17, 12
I got a fewquestions
Saturday, March 17, 12
?
Saturday, March 17, 12
Tweaking time...
Saturday, March 17, 12
I got anothergreat idea
Saturday, March 17, 12
Ok, Cool
Saturday, March 17, 12
And anotherthing...
Saturday, March 17, 12
Done.
Saturday, March 17, 12
Two weeks pass...
Saturday, March 17, 12
I’ve got a new feature
Saturday, March 17, 12
No worries.
Saturday, March 17, 12
Wha? Ohhhk.
Saturday, March 17, 12
A short time later...
Saturday, March 17, 12
Saturday, March 17, 12
Special thanks to
He did the frame artBlame me for
everything else
Saturday, March 17, 12
Knockout.js - Observer pattern (pub/sub)http://knockoutjs.com/
Postal.js - Service bushttps://github.com/ifandelse/postal.js
My Stuff@jaredthenerd
[email protected]://github.com/jaredfaris
http://jaredthenerd.com
Saturday, March 17, 12