building rich user experiences without javascript spaghetti

Building Rich User Experienceswithout

JavaScript Spaghetti

by Jared Faris@jaredthenerd

jaredthenerd.com

Friday, June 29, 12

About me

Friday, June 29, 12

Designers

Friday, June 29, 12

Developers

Friday, June 29, 12

JavaScript

Friday, June 29, 12

A Developer’s Problem

Developers are the only people in the organization that wear every single hat.

Building a great user experience is hard.

It’s even harder to build them so that they cangrow painlessly.

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

Friday, June 29, 12

Designer Developer

Friday, June 29, 12

We need this feature

Friday, June 29, 12

I got this

Friday, June 29, 12

?

Friday, June 29, 12

Tweaking time...

Friday, June 29, 12

I got anothergreat idea

Friday, June 29, 12

Now you tellme

Friday, June 29, 12

The developer bolts on some more code

Friday, June 29, 12

And anotherthing...

Friday, June 29, 12

grrr

Friday, June 29, 12

We don’t ‘really’

need this

Friday, June 29, 12

Uh, yeah wedo

Friday, June 29, 12

Friday, June 29, 12

The developer bolts on some more code

Friday, 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 feature

Friday, June 29, 12

Angry developerscan really do this.IT managers be

warned.

Friday, June 29, 12

Protective Beret

Friday, June 29, 12

More messy code

Friday, June 29, 12

The last bug

Oh wait, one more

Friday, June 29, 12

Finally

Friday, 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 makingof this dramatic reenactment.

Friday, June 29, 12

Additional Features + Short Sighted Architecting= Horrible JavaScript Spaghetti

Friday, 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 browsers

Friday, 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 state

Friday, 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 Patterns

Friday, June 29, 12

OO

• Think in terms of classes• Give behaviors to objects• Keep state inside of objects

Friday, 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 Software

Friday, June 29, 12

NavControlMediator

itemSelected()

Events from some other object

unselectAll()

Friday, 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()

Events from some other object

unselectAll()

viewModel

Friday, June 29, 12

Knockout.js Template Example

Friday, 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 Subbing

Friday, 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.js

Friday, 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()

Events from some other object

unselectAll()

viewModel

ReportMediator

itemChanged()

unselectAll()

viewModel

Service Bus

Friday, June 29, 12

NavControlMediator

itemSelected()

Events from some other object

unselectAll()

viewModel

ReportMediator

itemChanged()

unselectAll()

viewModel

Service Bus

HistoryControl

Friday, June 29, 12

Service Bus

TeamControl

Gets team changed message, makes AJAX

call for this team’s data, rewrites team with template

No view model

Friday, June 29, 12

Service Bus

Friday, June 29, 12

Questions About Patterns?

Friday, June 29, 12

A Typical Product LifecycleRound Two

Friday, June 29, 12

We need this feature

Friday, June 29, 12

I got a fewquestions

Friday, June 29, 12

?

Friday, June 29, 12

Tweaking time...

Friday, June 29, 12

I got anothergreat idea

Friday, June 29, 12

Ok, Cool

Friday, June 29, 12

And anotherthing...

Friday, June 29, 12

Done.

Friday, June 29, 12

Two weeks pass...

Friday, June 29, 12

I’ve got a new feature

Friday, 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 artBlame me for

everything else

Friday, June 29, 12

Examples

Friday, 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 Model

Friday, June 29, 12

NavControlMediator

itemSelected()

Events from some other object

unselectAll()

viewModel

ReportMediator

itemChanged()

unselectAll()

viewModel

Service Bus

Friday, June 29, 12

Tools Make This Easier

Underscore.jsCoffeescriptTemplates

Friday, June 29, 12

Knockout.js - Observer pattern (pub/sub)http://knockoutjs.com/

http://learn.knockoutjs.com/

Postal.js - Service bushttps://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

Patternshttp://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

My Stuff@jaredthenerd

jfaris@gmail.comhttps://github.com/jaredfaris

http://jaredthenerd.com

Rate Mehttp://spkr8.com/t/12731

Friday, June 29, 12