Building Rich User Experiences w/o JavaScript Spaghetti
-
Upload
jared-faris -
Category
Technology
-
view
3.663 -
download
1
description
Transcript of Building Rich User Experiences w/o JavaScript Spaghetti
![Page 1: Building Rich User Experiences w/o JavaScript Spaghetti](https://reader034.fdocuments.in/reader034/viewer/2022042814/5555bef1d8b42a52568b5368/html5/thumbnails/1.jpg)
Building Rich User Experienceswithout
JavaScript Spaghetti
by Jared Faris@jaredthenerd
Saturday, March 17, 12
![Page 2: Building Rich User Experiences w/o JavaScript Spaghetti](https://reader034.fdocuments.in/reader034/viewer/2022042814/5555bef1d8b42a52568b5368/html5/thumbnails/2.jpg)
About me
Saturday, March 17, 12
![Page 3: Building Rich User Experiences w/o JavaScript Spaghetti](https://reader034.fdocuments.in/reader034/viewer/2022042814/5555bef1d8b42a52568b5368/html5/thumbnails/3.jpg)
JavaScript
Saturday, March 17, 12
![Page 4: Building Rich User Experiences w/o JavaScript Spaghetti](https://reader034.fdocuments.in/reader034/viewer/2022042814/5555bef1d8b42a52568b5368/html5/thumbnails/4.jpg)
Designers
Saturday, March 17, 12
![Page 5: Building Rich User Experiences w/o JavaScript Spaghetti](https://reader034.fdocuments.in/reader034/viewer/2022042814/5555bef1d8b42a52568b5368/html5/thumbnails/5.jpg)
Developers
Saturday, March 17, 12
![Page 6: Building Rich User Experiences w/o JavaScript Spaghetti](https://reader034.fdocuments.in/reader034/viewer/2022042814/5555bef1d8b42a52568b5368/html5/thumbnails/6.jpg)
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
![Page 7: Building Rich User Experiences w/o JavaScript Spaghetti](https://reader034.fdocuments.in/reader034/viewer/2022042814/5555bef1d8b42a52568b5368/html5/thumbnails/7.jpg)
A Typical Product LifecycleSomewhat dramatized...
Saturday, March 17, 12
![Page 8: Building Rich User Experiences w/o JavaScript Spaghetti](https://reader034.fdocuments.in/reader034/viewer/2022042814/5555bef1d8b42a52568b5368/html5/thumbnails/8.jpg)
Designer Developer
Saturday, March 17, 12
![Page 9: Building Rich User Experiences w/o JavaScript Spaghetti](https://reader034.fdocuments.in/reader034/viewer/2022042814/5555bef1d8b42a52568b5368/html5/thumbnails/9.jpg)
We need this feature
Saturday, March 17, 12
![Page 10: Building Rich User Experiences w/o JavaScript Spaghetti](https://reader034.fdocuments.in/reader034/viewer/2022042814/5555bef1d8b42a52568b5368/html5/thumbnails/10.jpg)
I got this
Saturday, March 17, 12
![Page 11: Building Rich User Experiences w/o JavaScript Spaghetti](https://reader034.fdocuments.in/reader034/viewer/2022042814/5555bef1d8b42a52568b5368/html5/thumbnails/11.jpg)
?
Saturday, March 17, 12
![Page 12: Building Rich User Experiences w/o JavaScript Spaghetti](https://reader034.fdocuments.in/reader034/viewer/2022042814/5555bef1d8b42a52568b5368/html5/thumbnails/12.jpg)
Tweaking time...
Saturday, March 17, 12
![Page 13: Building Rich User Experiences w/o JavaScript Spaghetti](https://reader034.fdocuments.in/reader034/viewer/2022042814/5555bef1d8b42a52568b5368/html5/thumbnails/13.jpg)
I got anothergreat idea
Saturday, March 17, 12
![Page 14: Building Rich User Experiences w/o JavaScript Spaghetti](https://reader034.fdocuments.in/reader034/viewer/2022042814/5555bef1d8b42a52568b5368/html5/thumbnails/14.jpg)
Now you tellme
Saturday, March 17, 12
![Page 15: Building Rich User Experiences w/o JavaScript Spaghetti](https://reader034.fdocuments.in/reader034/viewer/2022042814/5555bef1d8b42a52568b5368/html5/thumbnails/15.jpg)
The developer bolts on some more code
Saturday, March 17, 12
![Page 16: Building Rich User Experiences w/o JavaScript Spaghetti](https://reader034.fdocuments.in/reader034/viewer/2022042814/5555bef1d8b42a52568b5368/html5/thumbnails/16.jpg)
And anotherthing...
Saturday, March 17, 12
![Page 17: Building Rich User Experiences w/o JavaScript Spaghetti](https://reader034.fdocuments.in/reader034/viewer/2022042814/5555bef1d8b42a52568b5368/html5/thumbnails/17.jpg)
grrr
Saturday, March 17, 12
![Page 18: Building Rich User Experiences w/o JavaScript Spaghetti](https://reader034.fdocuments.in/reader034/viewer/2022042814/5555bef1d8b42a52568b5368/html5/thumbnails/18.jpg)
We don’t ‘really’
need this
Saturday, March 17, 12
![Page 19: Building Rich User Experiences w/o JavaScript Spaghetti](https://reader034.fdocuments.in/reader034/viewer/2022042814/5555bef1d8b42a52568b5368/html5/thumbnails/19.jpg)
Uh, yeah wedo
Saturday, March 17, 12
![Page 20: Building Rich User Experiences w/o JavaScript Spaghetti](https://reader034.fdocuments.in/reader034/viewer/2022042814/5555bef1d8b42a52568b5368/html5/thumbnails/20.jpg)
Saturday, March 17, 12
![Page 21: Building Rich User Experiences w/o JavaScript Spaghetti](https://reader034.fdocuments.in/reader034/viewer/2022042814/5555bef1d8b42a52568b5368/html5/thumbnails/21.jpg)
The developer bolts on some more code
Saturday, March 17, 12
![Page 22: Building Rich User Experiences w/o JavaScript Spaghetti](https://reader034.fdocuments.in/reader034/viewer/2022042814/5555bef1d8b42a52568b5368/html5/thumbnails/22.jpg)
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
![Page 23: Building Rich User Experiences w/o JavaScript Spaghetti](https://reader034.fdocuments.in/reader034/viewer/2022042814/5555bef1d8b42a52568b5368/html5/thumbnails/23.jpg)
I’ve got a new feature
Saturday, March 17, 12
![Page 24: Building Rich User Experiences w/o JavaScript Spaghetti](https://reader034.fdocuments.in/reader034/viewer/2022042814/5555bef1d8b42a52568b5368/html5/thumbnails/24.jpg)
Angry developerscan really do this.IT managers be
warned.
Saturday, March 17, 12
![Page 25: Building Rich User Experiences w/o JavaScript Spaghetti](https://reader034.fdocuments.in/reader034/viewer/2022042814/5555bef1d8b42a52568b5368/html5/thumbnails/25.jpg)
Protective Beret
Saturday, March 17, 12
![Page 26: Building Rich User Experiences w/o JavaScript Spaghetti](https://reader034.fdocuments.in/reader034/viewer/2022042814/5555bef1d8b42a52568b5368/html5/thumbnails/26.jpg)
More messy code
Saturday, March 17, 12
![Page 27: Building Rich User Experiences w/o JavaScript Spaghetti](https://reader034.fdocuments.in/reader034/viewer/2022042814/5555bef1d8b42a52568b5368/html5/thumbnails/27.jpg)
The last bug
Oh wait, one more
Saturday, March 17, 12
![Page 28: Building Rich User Experiences w/o JavaScript Spaghetti](https://reader034.fdocuments.in/reader034/viewer/2022042814/5555bef1d8b42a52568b5368/html5/thumbnails/28.jpg)
Finally
Saturday, March 17, 12
![Page 29: Building Rich User Experiences w/o JavaScript Spaghetti](https://reader034.fdocuments.in/reader034/viewer/2022042814/5555bef1d8b42a52568b5368/html5/thumbnails/29.jpg)
The next day...
Saturday, March 17, 12
![Page 30: Building Rich User Experiences w/o JavaScript Spaghetti](https://reader034.fdocuments.in/reader034/viewer/2022042814/5555bef1d8b42a52568b5368/html5/thumbnails/30.jpg)
Saturday, March 17, 12
![Page 31: Building Rich User Experiences w/o JavaScript Spaghetti](https://reader034.fdocuments.in/reader034/viewer/2022042814/5555bef1d8b42a52568b5368/html5/thumbnails/31.jpg)
Two weeks pass.
Saturday, March 17, 12
![Page 32: Building Rich User Experiences w/o JavaScript Spaghetti](https://reader034.fdocuments.in/reader034/viewer/2022042814/5555bef1d8b42a52568b5368/html5/thumbnails/32.jpg)
I’ve got a new feature Gahh!
Saturday, March 17, 12
![Page 33: Building Rich User Experiences w/o JavaScript Spaghetti](https://reader034.fdocuments.in/reader034/viewer/2022042814/5555bef1d8b42a52568b5368/html5/thumbnails/33.jpg)
Saturday, March 17, 12
![Page 34: Building Rich User Experiences w/o JavaScript Spaghetti](https://reader034.fdocuments.in/reader034/viewer/2022042814/5555bef1d8b42a52568b5368/html5/thumbnails/34.jpg)
No developers were harmed in the makingof this dramatic reenactment.
Saturday, March 17, 12
![Page 35: Building Rich User Experiences w/o JavaScript Spaghetti](https://reader034.fdocuments.in/reader034/viewer/2022042814/5555bef1d8b42a52568b5368/html5/thumbnails/35.jpg)
Additional Features + Short Sighted Architecting= Horrible JavaScript Spaghetti
Saturday, March 17, 12
![Page 36: Building Rich User Experiences w/o JavaScript Spaghetti](https://reader034.fdocuments.in/reader034/viewer/2022042814/5555bef1d8b42a52568b5368/html5/thumbnails/36.jpg)
Why does this happen?
This is where you earn audience participation points.
Saturday, March 17, 12
![Page 37: Building Rich User Experiences w/o JavaScript Spaghetti](https://reader034.fdocuments.in/reader034/viewer/2022042814/5555bef1d8b42a52568b5368/html5/thumbnails/37.jpg)
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
![Page 38: Building Rich User Experiences w/o JavaScript Spaghetti](https://reader034.fdocuments.in/reader034/viewer/2022042814/5555bef1d8b42a52568b5368/html5/thumbnails/38.jpg)
This really all boils down to one thing.
We developers suck.
Saturday, March 17, 12
![Page 39: Building Rich User Experiences w/o JavaScript Spaghetti](https://reader034.fdocuments.in/reader034/viewer/2022042814/5555bef1d8b42a52568b5368/html5/thumbnails/39.jpg)
Bonus second lesson
We developers suck at interacting with designers(or stakeholders).
Saturday, March 17, 12
![Page 40: Building Rich User Experiences w/o JavaScript Spaghetti](https://reader034.fdocuments.in/reader034/viewer/2022042814/5555bef1d8b42a52568b5368/html5/thumbnails/40.jpg)
Three JavaScript Principles
• Decouple everything• Make it testable• Push events, not state
Saturday, March 17, 12
![Page 41: Building Rich User Experiences w/o JavaScript Spaghetti](https://reader034.fdocuments.in/reader034/viewer/2022042814/5555bef1d8b42a52568b5368/html5/thumbnails/41.jpg)
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
![Page 42: Building Rich User Experiences w/o JavaScript Spaghetti](https://reader034.fdocuments.in/reader034/viewer/2022042814/5555bef1d8b42a52568b5368/html5/thumbnails/42.jpg)
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
![Page 43: Building Rich User Experiences w/o JavaScript Spaghetti](https://reader034.fdocuments.in/reader034/viewer/2022042814/5555bef1d8b42a52568b5368/html5/thumbnails/43.jpg)
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
![Page 44: Building Rich User Experiences w/o JavaScript Spaghetti](https://reader034.fdocuments.in/reader034/viewer/2022042814/5555bef1d8b42a52568b5368/html5/thumbnails/44.jpg)
Some Patterns
Saturday, March 17, 12
![Page 45: Building Rich User Experiences w/o JavaScript Spaghetti](https://reader034.fdocuments.in/reader034/viewer/2022042814/5555bef1d8b42a52568b5368/html5/thumbnails/45.jpg)
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
![Page 46: Building Rich User Experiences w/o JavaScript Spaghetti](https://reader034.fdocuments.in/reader034/viewer/2022042814/5555bef1d8b42a52568b5368/html5/thumbnails/46.jpg)
NavControlMediator
itemSelected()
Events from some other object
unselectAll()
Saturday, March 17, 12
![Page 47: Building Rich User Experiences w/o JavaScript Spaghetti](https://reader034.fdocuments.in/reader034/viewer/2022042814/5555bef1d8b42a52568b5368/html5/thumbnails/47.jpg)
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
![Page 48: Building Rich User Experiences w/o JavaScript Spaghetti](https://reader034.fdocuments.in/reader034/viewer/2022042814/5555bef1d8b42a52568b5368/html5/thumbnails/48.jpg)
NavControlMediator
itemSelected()
Events from some other object
unselectAll()
viewModel
Saturday, March 17, 12
![Page 49: Building Rich User Experiences w/o JavaScript Spaghetti](https://reader034.fdocuments.in/reader034/viewer/2022042814/5555bef1d8b42a52568b5368/html5/thumbnails/49.jpg)
Knockout.js Template Example
Saturday, March 17, 12
![Page 50: Building Rich User Experiences w/o JavaScript Spaghetti](https://reader034.fdocuments.in/reader034/viewer/2022042814/5555bef1d8b42a52568b5368/html5/thumbnails/50.jpg)
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
![Page 51: Building Rich User Experiences w/o JavaScript Spaghetti](https://reader034.fdocuments.in/reader034/viewer/2022042814/5555bef1d8b42a52568b5368/html5/thumbnails/51.jpg)
Way Too Much Pubbing and Subbing
Saturday, March 17, 12
![Page 52: Building Rich User Experiences w/o JavaScript Spaghetti](https://reader034.fdocuments.in/reader034/viewer/2022042814/5555bef1d8b42a52568b5368/html5/thumbnails/52.jpg)
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
![Page 53: Building Rich User Experiences w/o JavaScript Spaghetti](https://reader034.fdocuments.in/reader034/viewer/2022042814/5555bef1d8b42a52568b5368/html5/thumbnails/53.jpg)
Postal.js
Saturday, March 17, 12
![Page 54: Building Rich User Experiences w/o JavaScript Spaghetti](https://reader034.fdocuments.in/reader034/viewer/2022042814/5555bef1d8b42a52568b5368/html5/thumbnails/54.jpg)
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
![Page 55: Building Rich User Experiences w/o JavaScript Spaghetti](https://reader034.fdocuments.in/reader034/viewer/2022042814/5555bef1d8b42a52568b5368/html5/thumbnails/55.jpg)
NavControlMediator
itemSelected()
Events from some other object
unselectAll()
viewModel
ReportMediator
itemChanged()
unselectAll()
viewModel
Service Bus
Saturday, March 17, 12
![Page 56: Building Rich User Experiences w/o JavaScript Spaghetti](https://reader034.fdocuments.in/reader034/viewer/2022042814/5555bef1d8b42a52568b5368/html5/thumbnails/56.jpg)
NavControlMediator
itemSelected()
Events from some other object
unselectAll()
viewModel
ReportMediator
itemChanged()
unselectAll()
viewModel
Service Bus
HistoryControl
Saturday, March 17, 12
![Page 57: Building Rich User Experiences w/o JavaScript Spaghetti](https://reader034.fdocuments.in/reader034/viewer/2022042814/5555bef1d8b42a52568b5368/html5/thumbnails/57.jpg)
Questions About Patterns?
Saturday, March 17, 12
![Page 58: Building Rich User Experiences w/o JavaScript Spaghetti](https://reader034.fdocuments.in/reader034/viewer/2022042814/5555bef1d8b42a52568b5368/html5/thumbnails/58.jpg)
A Typical Product LifecycleRound Two
Saturday, March 17, 12
![Page 59: Building Rich User Experiences w/o JavaScript Spaghetti](https://reader034.fdocuments.in/reader034/viewer/2022042814/5555bef1d8b42a52568b5368/html5/thumbnails/59.jpg)
We need this feature
Saturday, March 17, 12
![Page 60: Building Rich User Experiences w/o JavaScript Spaghetti](https://reader034.fdocuments.in/reader034/viewer/2022042814/5555bef1d8b42a52568b5368/html5/thumbnails/60.jpg)
I got a fewquestions
Saturday, March 17, 12
![Page 61: Building Rich User Experiences w/o JavaScript Spaghetti](https://reader034.fdocuments.in/reader034/viewer/2022042814/5555bef1d8b42a52568b5368/html5/thumbnails/61.jpg)
?
Saturday, March 17, 12
![Page 62: Building Rich User Experiences w/o JavaScript Spaghetti](https://reader034.fdocuments.in/reader034/viewer/2022042814/5555bef1d8b42a52568b5368/html5/thumbnails/62.jpg)
Tweaking time...
Saturday, March 17, 12
![Page 63: Building Rich User Experiences w/o JavaScript Spaghetti](https://reader034.fdocuments.in/reader034/viewer/2022042814/5555bef1d8b42a52568b5368/html5/thumbnails/63.jpg)
I got anothergreat idea
Saturday, March 17, 12
![Page 64: Building Rich User Experiences w/o JavaScript Spaghetti](https://reader034.fdocuments.in/reader034/viewer/2022042814/5555bef1d8b42a52568b5368/html5/thumbnails/64.jpg)
Ok, Cool
Saturday, March 17, 12
![Page 65: Building Rich User Experiences w/o JavaScript Spaghetti](https://reader034.fdocuments.in/reader034/viewer/2022042814/5555bef1d8b42a52568b5368/html5/thumbnails/65.jpg)
And anotherthing...
Saturday, March 17, 12
![Page 66: Building Rich User Experiences w/o JavaScript Spaghetti](https://reader034.fdocuments.in/reader034/viewer/2022042814/5555bef1d8b42a52568b5368/html5/thumbnails/66.jpg)
Done.
Saturday, March 17, 12
![Page 67: Building Rich User Experiences w/o JavaScript Spaghetti](https://reader034.fdocuments.in/reader034/viewer/2022042814/5555bef1d8b42a52568b5368/html5/thumbnails/67.jpg)
Two weeks pass...
Saturday, March 17, 12
![Page 68: Building Rich User Experiences w/o JavaScript Spaghetti](https://reader034.fdocuments.in/reader034/viewer/2022042814/5555bef1d8b42a52568b5368/html5/thumbnails/68.jpg)
I’ve got a new feature
Saturday, March 17, 12
![Page 69: Building Rich User Experiences w/o JavaScript Spaghetti](https://reader034.fdocuments.in/reader034/viewer/2022042814/5555bef1d8b42a52568b5368/html5/thumbnails/69.jpg)
No worries.
Saturday, March 17, 12
![Page 70: Building Rich User Experiences w/o JavaScript Spaghetti](https://reader034.fdocuments.in/reader034/viewer/2022042814/5555bef1d8b42a52568b5368/html5/thumbnails/70.jpg)
Wha? Ohhhk.
Saturday, March 17, 12
![Page 71: Building Rich User Experiences w/o JavaScript Spaghetti](https://reader034.fdocuments.in/reader034/viewer/2022042814/5555bef1d8b42a52568b5368/html5/thumbnails/71.jpg)
A short time later...
Saturday, March 17, 12
![Page 72: Building Rich User Experiences w/o JavaScript Spaghetti](https://reader034.fdocuments.in/reader034/viewer/2022042814/5555bef1d8b42a52568b5368/html5/thumbnails/72.jpg)
Saturday, March 17, 12
![Page 73: Building Rich User Experiences w/o JavaScript Spaghetti](https://reader034.fdocuments.in/reader034/viewer/2022042814/5555bef1d8b42a52568b5368/html5/thumbnails/73.jpg)
Special thanks to
He did the frame artBlame me for
everything else
Saturday, March 17, 12
![Page 74: Building Rich User Experiences w/o JavaScript Spaghetti](https://reader034.fdocuments.in/reader034/viewer/2022042814/5555bef1d8b42a52568b5368/html5/thumbnails/74.jpg)
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