0
Building Rich User Experiences                                      without                              JavaScript Spaghe...
About meSaturday, March 17, 12
JavaScriptSaturday, March 17, 12
DesignersSaturday, March 17, 12
DevelopersSaturday, March 17, 12
The Problem        Designers tend to think in terms of appearance. Good                     ones think about usability.   ...
A Typical Product Lifecycle                          Somewhat dramatized...Saturday, March 17, 12
Designer   DeveloperSaturday, March 17, 12
We need this                           featureSaturday, March 17, 12
I got thisSaturday, March 17, 12
?Saturday, March 17, 12
Tweaking time...Saturday, March 17, 12
I got another                           great ideaSaturday, March 17, 12
Now you tell                            meSaturday, March 17, 12
The developer bolts on some more codeSaturday, March 17, 12
And another                           thing...Saturday, March 17, 12
grrrSaturday, March 17, 12
We don’t                          ‘really’                         need thisSaturday, March 17, 12
Uh, yeah we                              doSaturday, March 17, 12
Saturday, March 17, 12
The developer bolts on some more codeSaturday, March 17, 12
Some time passes                                ‘Some time’ is defined as:                  Just long enough that the devel...
I’ve got a new                             featureSaturday, March 17, 12
Angry developers                         can really do this.                          IT managers be                      ...
Protective BeretSaturday, March 17, 12
More messy codeSaturday, March 17, 12
The last bug                         Oh wait, one moreSaturday, March 17, 12
FinallySaturday, 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 making                              of this dramatic reenactment.Saturday, March 17, 12
Additional Features + Short Sighted Architecting                        = Horrible JavaScript SpaghettiSaturday, March 17,...
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  ...
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 stakeho...
Three JavaScript Principles                              • Decouple everything                              • Make it test...
Decouple Everything                    Start thinking about UI pieces as individual JS objects.                           ...
Make It Testable                          Separate DOM dependent stuff into a single layer.                         Put th...
Push Events, Not State                           Know about the Law of Demeter.                       Let controls worry a...
Some PatternsSaturday, March 17, 12
Mediator Pattern                   "The essence of the Mediator Pattern is to "Define an                   object that enca...
NavControlMediator                            itemSelected()                             unselectAll()                    ...
Observer Pattern                 "Define a one-to-many dependency between objects so                  that when one object ...
NavControlMediator                            itemSelected()                            viewModel                         ...
Knockout.js Template ExampleSaturday, March 17, 12
Pub/Sub + Fairy Dust = Service Bus                           Pub/Sub is great to make sure events propagate.              ...
Way Too Much Pubbing and SubbingSaturday, March 17, 12
Service Bus                 A service bus is another layer that sits outside controls.                  Controls that want...
Postal.jsSaturday, March 17, 12
Service Bus + Mediator                • Controls no longer need to know about others.                • We can remove/repla...
NavControlMediator                          itemSelected()                          viewModel                             ...
HistoryControl                         NavControlMediator                          itemSelected()                         ...
Questions About Patterns?Saturday, March 17, 12
A Typical Product Lifecycle                              Round TwoSaturday, March 17, 12
We need this                           featureSaturday, March 17, 12
I got a few                          questionsSaturday, March 17, 12
?Saturday, March 17, 12
Tweaking time...Saturday, March 17, 12
I got another                           great ideaSaturday, March 17, 12
Ok, CoolSaturday, March 17, 12
And another                           thing...Saturday, March 17, 12
Done.Saturday, March 17, 12
Two weeks pass...Saturday, March 17, 12
I’ve got a new                             featureSaturday, 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 art                               Blame me for                 ...
Knockout.js - Observer pattern (pub/sub)                                 http://knockoutjs.com/                           ...
Upcoming SlideShare
Loading in...5
×

Building Rich User Experiences w/o JavaScript Spaghetti

3,698

Published on

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.

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,698
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
24
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "Building Rich User Experiences w/o JavaScript Spaghetti"

  1. 1. Building Rich User Experiences without JavaScript Spaghetti by Jared Faris @jaredthenerdSaturday, March 17, 12
  2. 2. About meSaturday, March 17, 12
  3. 3. JavaScriptSaturday, March 17, 12
  4. 4. DesignersSaturday, March 17, 12
  5. 5. DevelopersSaturday, March 17, 12
  6. 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 designSaturday, March 17, 12
  7. 7. A Typical Product Lifecycle Somewhat dramatized...Saturday, March 17, 12
  8. 8. Designer DeveloperSaturday, March 17, 12
  9. 9. We need this featureSaturday, March 17, 12
  10. 10. I got thisSaturday, March 17, 12
  11. 11. ?Saturday, March 17, 12
  12. 12. Tweaking time...Saturday, March 17, 12
  13. 13. I got another great ideaSaturday, March 17, 12
  14. 14. Now you tell meSaturday, March 17, 12
  15. 15. The developer bolts on some more codeSaturday, March 17, 12
  16. 16. And another thing...Saturday, March 17, 12
  17. 17. grrrSaturday, March 17, 12
  18. 18. We don’t ‘really’ need thisSaturday, March 17, 12
  19. 19. Uh, yeah we doSaturday, March 17, 12
  20. 20. Saturday, March 17, 12
  21. 21. The developer bolts on some more codeSaturday, March 17, 12
  22. 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
  23. 23. I’ve got a new featureSaturday, March 17, 12
  24. 24. Angry developers can really do this. IT managers be warned.Saturday, March 17, 12
  25. 25. Protective BeretSaturday, March 17, 12
  26. 26. More messy codeSaturday, March 17, 12
  27. 27. The last bug Oh wait, one moreSaturday, March 17, 12
  28. 28. FinallySaturday, March 17, 12
  29. 29. The next day...Saturday, March 17, 12
  30. 30. Saturday, March 17, 12
  31. 31. Two weeks pass.Saturday, March 17, 12
  32. 32. I’ve got a new feature Gahh!Saturday, March 17, 12
  33. 33. Saturday, March 17, 12
  34. 34. No developers were harmed in the making of this dramatic reenactment.Saturday, March 17, 12
  35. 35. Additional Features + Short Sighted Architecting = Horrible JavaScript SpaghettiSaturday, March 17, 12
  36. 36. Why does this happen? This is where you earn audience participation points.Saturday, March 17, 12
  37. 37. Some Reasons • JavaScript isn’t real code • We don’t treat client side things as real features • We can’t easily test itSaturday, March 17, 12
  38. 38. This really all boils down to one thing. We developers suck.Saturday, March 17, 12
  39. 39. Bonus second lesson We developers suck at interacting with designers (or stakeholders).Saturday, March 17, 12
  40. 40. Three JavaScript Principles • Decouple everything • Make it testable • Push events, not stateSaturday, March 17, 12
  41. 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. 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. 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
  44. 44. Some PatternsSaturday, March 17, 12
  45. 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 SoftwareSaturday, March 17, 12
  46. 46. NavControlMediator itemSelected() unselectAll() Events from some other objectSaturday, March 17, 12
  47. 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. 48. NavControlMediator itemSelected() viewModel unselectAll() Events from some other objectSaturday, March 17, 12
  49. 49. Knockout.js Template ExampleSaturday, March 17, 12
  50. 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. 51. Way Too Much Pubbing and SubbingSaturday, March 17, 12
  52. 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
  53. 53. Postal.jsSaturday, March 17, 12
  54. 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. 55. NavControlMediator itemSelected() viewModel Service Bus unselectAll() Events from some other object ReportMediator itemChanged() viewModel unselectAll()Saturday, March 17, 12
  56. 56. HistoryControl NavControlMediator itemSelected() viewModel Service Bus unselectAll() Events from some other object ReportMediator itemChanged() viewModel unselectAll()Saturday, March 17, 12
  57. 57. Questions About Patterns?Saturday, March 17, 12
  58. 58. A Typical Product Lifecycle Round TwoSaturday, March 17, 12
  59. 59. We need this featureSaturday, March 17, 12
  60. 60. I got a few questionsSaturday, March 17, 12
  61. 61. ?Saturday, March 17, 12
  62. 62. Tweaking time...Saturday, March 17, 12
  63. 63. I got another great ideaSaturday, March 17, 12
  64. 64. Ok, CoolSaturday, March 17, 12
  65. 65. And another thing...Saturday, March 17, 12
  66. 66. Done.Saturday, March 17, 12
  67. 67. Two weeks pass...Saturday, March 17, 12
  68. 68. I’ve got a new featureSaturday, March 17, 12
  69. 69. No worries.Saturday, March 17, 12
  70. 70. Wha? Ohhhk.Saturday, March 17, 12
  71. 71. A short time later...Saturday, March 17, 12
  72. 72. Saturday, March 17, 12
  73. 73. Special thanks to He did the frame art Blame me for everything elseSaturday, March 17, 12
  74. 74. Knockout.js - Observer pattern (pub/sub) http://knockoutjs.com/ Postal.js - Service bus https://github.com/ifandelse/postal.js My Stuff @jaredthenerd jfaris@gmail.com https://github.com/jaredfaris http://jaredthenerd.comSaturday, March 17, 12
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×