Building Rich User Experiences Without JavaScript Spaghetti
Upcoming SlideShare
Loading in...5
×
 

Building Rich User Experiences Without JavaScript Spaghetti

on

  • 2,503 views

Given at MADExpo 2012...

Given at MADExpo 2012

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 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.

Statistics

Views

Total Views
2,503
Views on SlideShare
2,474
Embed Views
29

Actions

Likes
2
Downloads
44
Comments
0

2 Embeds 29

http://eventifier.co 16
http://www.linkedin.com 13

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Building Rich User Experiences Without JavaScript Spaghetti Building Rich User Experiences Without JavaScript Spaghetti Presentation Transcript

  • Building Rich User Experiences without JavaScript Spaghetti by Jared Faris @jaredthenerd jaredthenerd.comFriday, June 29, 12
  • About meFriday, June 29, 12
  • DesignersFriday, June 29, 12
  • DevelopersFriday, June 29, 12
  • JavaScriptFriday, June 29, 12
  • A Developer’s Problem Building a great user experience is hard. It’s even harder to build them so that they can grow painlessly. Developers are the only people in the organization that wear every single hat.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 Lifecycle Somewhat dramatized...Friday, June 29, 12
  • Designer DeveloperFriday, June 29, 12
  • We need this featureFriday, June 29, 12
  • I got thisFriday, June 29, 12
  • ?Friday, June 29, 12
  • Tweaking time...Friday, June 29, 12
  • I got another great ideaFriday, June 29, 12
  • Now you tell meFriday, June 29, 12
  • The developer bolts on some more codeFriday, June 29, 12
  • And another thing...Friday, June 29, 12
  • grrrFriday, June 29, 12
  • We don’t ‘really’ need thisFriday, June 29, 12
  • Uh, yeah we doFriday, June 29, 12
  • Friday, June 29, 12
  • The developer bolts on some more codeFriday, 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 featureFriday, June 29, 12
  • Angry developers can really do this. IT managers be warned.Friday, June 29, 12
  • Protective BeretFriday, June 29, 12
  • More messy codeFriday, June 29, 12
  • The last bug Oh wait, one moreFriday, June 29, 12
  • FinallyFriday, 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 making of this dramatic reenactment.Friday, June 29, 12
  • Additional Features + Short Sighted Architecting = Horrible JavaScript SpaghettiFriday, 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 browsersFriday, 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 stateFriday, 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 PatternsFriday, June 29, 12
  • OO • Think in terms of classes • Give behaviors to objects • Keep state inside of objectsFriday, 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 SoftwareFriday, June 29, 12
  • NavControlMediator itemSelected() unselectAll() Events from some other objectFriday, 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() viewModel unselectAll() Events from some other objectFriday, June 29, 12
  • Knockout.js Template ExampleFriday, 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 SubbingFriday, 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.jsFriday, 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() viewModel Service Bus unselectAll() Events from some other object ReportMediator itemChanged() viewModel unselectAll()Friday, June 29, 12
  • HistoryControl NavControlMediator itemSelected() viewModel Service Bus unselectAll() Events from some other object ReportMediator itemChanged() viewModel unselectAll()Friday, June 29, 12
  • Service Bus TeamControl No view model Gets team changed message, makes AJAX call for this team’s data, rewrites team with templateFriday, June 29, 12
  • Service BusFriday, June 29, 12
  • Questions About Patterns?Friday, June 29, 12
  • A Typical Product Lifecycle Round TwoFriday, June 29, 12
  • We need this featureFriday, June 29, 12
  • I got a few questionsFriday, June 29, 12
  • ?Friday, June 29, 12
  • Tweaking time...Friday, June 29, 12
  • I got another great ideaFriday, June 29, 12
  • Ok, CoolFriday, June 29, 12
  • And another thing...Friday, June 29, 12
  • Done.Friday, June 29, 12
  • Two weeks pass...Friday, June 29, 12
  • I’ve got a new featureFriday, 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 art Blame me for everything elseFriday, June 29, 12
  • ExamplesFriday, 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 ModelFriday, June 29, 12
  • NavControlMediator itemSelected() viewModel Service Bus unselectAll() Events from some other object ReportMediator itemChanged() viewModel unselectAll()Friday, June 29, 12
  • Tools Make This Easier Underscore.js Coffeescript TemplatesFriday, June 29, 12
  • Knockout.js - Observer pattern (pub/sub) http://knockoutjs.com/ http://learn.knockoutjs.com/ Postal.js - Service bus https://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 Patterns http://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
  • Rate Me http://spkr8.com/t/12731 My Stuff @jaredthenerd jfaris@gmail.com https://github.com/jaredfaris http://jaredthenerd.comFriday, June 29, 12