SlideShare a Scribd company logo
1 of 102
Download to read offline
Building Rich User Experiences
without
JavaScript Spaghetti
by Jared Faris
@jaredthenerd
jaredthenerd.com
About me
Traditional Web Development
Web assets are created last to glue together things.
Stakeholders, architects and developers define the
“real” application.
The application is built model first (from the DB up).
Traditional Web Development
The design is focused on making the CRUD pretty, not
usable
The design of the UI/UX happens in Photoshop... if it
happens at all.
Most of the application is just CRUD.
We have a widgets
table
We need a
widgets
screen!
Traditional Web Development
“Advanced” web developers write lots of unorganized
bits of jQuery.
Most user interactions result in lots of POSTS back
to the server.
JavaScripts are something someone download from
hotscripts.com.
We have a widgets
table
We need a
widgets
screen!
Make sure you
add a date picker
And a lighbox!
JavaScript: Not a “Real” Language
Patternless design.
Built as a glue to bind pieces together, not as a core
component of the application.
Not thought through like server-side code.
Not Real? Why?
A lot of development tools traditionally hid the JS behind
configurable controls.
Libraries like jQuery make it really easy to pile on lots of
little events.
JS used to be a tool for doing image rollovers.
Is That A Problem?
In a workflow-based application it falls apart.
For form-based apps that was mostly fine.
Customized, reusable controls and a modular
application design needs something more.
Questions So Far?
A Typical Product Lifecycle
Somewhat dramatized...
Designer Developer
We need this
feature
I got this
?
Tweaking time...
I got another
great idea
Now you tell
me
The developer bolts on some more code
And another
thing...
grrr
We don’t
‘really’
need this
Uh, yeah we
do
The developer bolts on some more code
Some time passes
‘Some time’ is defined as:
Just long enough that the developer doesn’t remember
exactly how his original code works.
I’ve got a new
feature
Angry developers
can really do this.
IT managers be
warned.
Protective Beret
More messy code
The last bug
Oh wait, one more
Finally
(14 tests ought to be enough for anybody)
The next day...
Two weeks pass.
I’ve got a new
feature
Gahh!
No developers were harmed in the making
of this dramatic reenactment.
Poor design patterns
+ crappy code
= JavaScript spaghetti
Why does this happen?
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*
* Or at least it used to
This really all boils down to one thing.
We developers suck.
Three JavaScript Principles
Push events, not state
Write small, discrete bits of code
Decouple everything
Decouple Everything
Apply your OO best practices here too.
Remove dependencies between objects.
Start thinking about UI pieces as individual JS objects.
Small Chunks Of Code
Even if you don’t test everything, learning how to
write testable code means learning
how to write better code
Put the rest of the stuff in classes that you can test.
Separate DOM dependent stuff into a single layer.
Push Events, Not State
Inform other controls that “X happened to Y”,
not “Y is in X state”
Let controls worry about their own state.
Know about the Law of Demeter.
Writing Better JavaScript
Find the tools that make your life easier.
Use the design patterns you already know.
Leverage language features whether JS has them or not.
Language Features
Keep state inside of the objects and expose methods.
Objects have state and behavior.
JavaScript loves its objects. Create them to represent
page elements.
Language “Features”
Consider using namespaces.
JavaScript Namespacing
Language “Features”
Use inheritance or faux subclassing.
Consider using namespaces.
JavaScript Prototyping
Coffeescript Classes
Language “Features”
Pass JSON around asynchronously.
Use inheritance or faux subclassing.
Consider using namespaces.
Design Patterns
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
NavControlMediator
itemSelected()
Events from some
other object
unselectAll()
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()
NavControlMediator
itemSelected()
Events from some
other object
unselectAll()
viewModel
Tools & Frameworks
Knockout
Magic.
Setup a template with some markup binding it.
Setup a JavaScript object with some KO code.
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.
Backbone
Views help you control the visual rendering.
Routers help you organize page flow.
While KO is Model < > View magic, Backbone is structure.
Models help you keep track of state.
Backbone Use Case
What about all the other
frameworks?
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.
Way Too Much Pubbing and Subbing
Service Bus
Your controls are then only coupled to a single thing.
Controls that want to communicate speak through it.
A service bus is another layer that sits outside controls.
Postal.js
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.
NavControlMediator
itemSelected()
Events from some
other object
unselectAll()
viewModel
ReportMediator
itemChanged()
unselectAll()
viewModel
Service Bus
NavControlMediator
itemSelected()
Events from some
other object
unselectAll()
viewModel
ReportMediator
itemChanged()
unselectAll()
viewModel
Service Bus
HistoryControl
Service Bus
TeamControl
Gets team changed
message, makes AJAX
call for this team’s data,
rewrites team with template
No view model
Service Bus
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.
Underscore
Underscore
Underscore w/ Coffeescript
What Else?
I don’t have a third bullet point here
Browser Debuggers
Templates
A Typical Product Lifecycle
Round Two
We need this
feature
I got a few
questions
?
Tweaking time...
I got another
great idea
Ok, Cool
And another
thing...
Done.
Two weeks pass...
I’ve got a new
feature
No worries.
Wha? Ohhhk.
A short time later...
Examples
Questions?
Special thanks to
He did the frame art
Blame me for
everything else
My Stuff
@jaredthenerd
jfaris@gmail.com
https://github.com/jaredfaris
http://jaredthenerd.com

More Related Content

What's hot

Best Practice-React
Best Practice-ReactBest Practice-React
Best Practice-React
Yang Yang
 
jQuery UI & Mobile - The Great Merger
jQuery UI & Mobile - The Great MergerjQuery UI & Mobile - The Great Merger
jQuery UI & Mobile - The Great Merger
scottgonzalez
 
Intro to React - Featuring Modern JavaScript
Intro to React - Featuring Modern JavaScriptIntro to React - Featuring Modern JavaScript
Intro to React - Featuring Modern JavaScript
jasonsich
 
Automation with Selenium Presented by Quontra Solutions
Automation with Selenium Presented by Quontra SolutionsAutomation with Selenium Presented by Quontra Solutions
Automation with Selenium Presented by Quontra Solutions
Quontra Solutions
 

What's hot (20)

Backbone.js versus AngularJS
Backbone.js versus AngularJSBackbone.js versus AngularJS
Backbone.js versus AngularJS
 
Backbone And Marionette : Take Over The World
Backbone And Marionette : Take Over The WorldBackbone And Marionette : Take Over The World
Backbone And Marionette : Take Over The World
 
React introduction
React introductionReact introduction
React introduction
 
React Walk-Thru - Santa Cruz JS, May 2015
React Walk-Thru - Santa Cruz JS, May 2015React Walk-Thru - Santa Cruz JS, May 2015
React Walk-Thru - Santa Cruz JS, May 2015
 
learning react
learning reactlearning react
learning react
 
React js - The Core Concepts
React js - The Core ConceptsReact js - The Core Concepts
React js - The Core Concepts
 
Internal workshop react-js-mruiz
Internal workshop react-js-mruizInternal workshop react-js-mruiz
Internal workshop react-js-mruiz
 
Best Practice-React
Best Practice-ReactBest Practice-React
Best Practice-React
 
jQuery Keynote - Fall 2010
jQuery Keynote - Fall 2010jQuery Keynote - Fall 2010
jQuery Keynote - Fall 2010
 
Setting up Page Object Model in Automation Framework
Setting up Page Object Model in Automation FrameworkSetting up Page Object Model in Automation Framework
Setting up Page Object Model in Automation Framework
 
Angularjs Basics
Angularjs BasicsAngularjs Basics
Angularjs Basics
 
Quick start with AngularJS
Quick start with AngularJSQuick start with AngularJS
Quick start with AngularJS
 
jQuery UI & Mobile - The Great Merger
jQuery UI & Mobile - The Great MergerjQuery UI & Mobile - The Great Merger
jQuery UI & Mobile - The Great Merger
 
Intro to React - Featuring Modern JavaScript
Intro to React - Featuring Modern JavaScriptIntro to React - Featuring Modern JavaScript
Intro to React - Featuring Modern JavaScript
 
ReactJS
ReactJSReactJS
ReactJS
 
Automation with Selenium Presented by Quontra Solutions
Automation with Selenium Presented by Quontra SolutionsAutomation with Selenium Presented by Quontra Solutions
Automation with Selenium Presented by Quontra Solutions
 
Deep dive into AngularJs for Beginners
Deep dive into AngularJs for BeginnersDeep dive into AngularJs for Beginners
Deep dive into AngularJs for Beginners
 
Getting Started with React-Nathan Smith
Getting Started with React-Nathan SmithGetting Started with React-Nathan Smith
Getting Started with React-Nathan Smith
 
Angular JS, A dive to concepts
Angular JS, A dive to conceptsAngular JS, A dive to concepts
Angular JS, A dive to concepts
 
Introduction to ReactJS
Introduction to ReactJSIntroduction to ReactJS
Introduction to ReactJS
 

Viewers also liked

Sapri democratica visione
Sapri democratica visioneSapri democratica visione
Sapri democratica visione
Biagio Lauria
 
Tom butler bowdon_-_50_knig_i_velikih_idej__www.freemba.ru_
Tom butler bowdon_-_50_knig_i_velikih_idej__www.freemba.ru_Tom butler bowdon_-_50_knig_i_velikih_idej__www.freemba.ru_
Tom butler bowdon_-_50_knig_i_velikih_idej__www.freemba.ru_
anmarketers
 
Com score ars when advertising goes digital
Com score ars   when advertising goes digitalCom score ars   when advertising goes digital
Com score ars when advertising goes digital
DigitalReport
 
Dossier cicle superior
Dossier cicle superiorDossier cicle superior
Dossier cicle superior
david
 

Viewers also liked (20)

Klasseledelse
KlasseledelseKlasseledelse
Klasseledelse
 
Klasseledelse
KlasseledelseKlasseledelse
Klasseledelse
 
Jurnal digital
Jurnal digitalJurnal digital
Jurnal digital
 
19.10.2011 ajujaht keynote, raido pikkar
19.10.2011 ajujaht keynote, raido pikkar 19.10.2011 ajujaht keynote, raido pikkar
19.10.2011 ajujaht keynote, raido pikkar
 
Use all the buzzwords
Use all the buzzwordsUse all the buzzwords
Use all the buzzwords
 
Being a gentlemen with girls "the definitive way to express yourself and trea...
Being a gentlemen with girls "the definitive way to express yourself and trea...Being a gentlemen with girls "the definitive way to express yourself and trea...
Being a gentlemen with girls "the definitive way to express yourself and trea...
 
Sapri democratica visione
Sapri democratica visioneSapri democratica visione
Sapri democratica visione
 
Tom butler bowdon_-_50_knig_i_velikih_idej__www.freemba.ru_
Tom butler bowdon_-_50_knig_i_velikih_idej__www.freemba.ru_Tom butler bowdon_-_50_knig_i_velikih_idej__www.freemba.ru_
Tom butler bowdon_-_50_knig_i_velikih_idej__www.freemba.ru_
 
Pavasaris
PavasarisPavasaris
Pavasaris
 
Infrastructure investment brochure
Infrastructure investment brochureInfrastructure investment brochure
Infrastructure investment brochure
 
Ņukšu pagasts – mūsu mājas_MD
Ņukšu pagasts – mūsu mājas_MDŅukšu pagasts – mūsu mājas_MD
Ņukšu pagasts – mūsu mājas_MD
 
Com score ars when advertising goes digital
Com score ars   when advertising goes digitalCom score ars   when advertising goes digital
Com score ars when advertising goes digital
 
Standup meets startup concept
Standup meets startup conceptStandup meets startup concept
Standup meets startup concept
 
Building Rich User Experiences Without JavaScript Spaghetti
Building Rich User Experiences Without JavaScript SpaghettiBuilding Rich User Experiences Without JavaScript Spaghetti
Building Rich User Experiences Without JavaScript Spaghetti
 
The Spork / Platypus Average: Content strategy at Red Gate Software
The Spork / Platypus Average: Content strategy at Red Gate SoftwareThe Spork / Platypus Average: Content strategy at Red Gate Software
The Spork / Platypus Average: Content strategy at Red Gate Software
 
SeedForum Tallinn keynote 05.03.13
SeedForum Tallinn keynote 05.03.13 SeedForum Tallinn keynote 05.03.13
SeedForum Tallinn keynote 05.03.13
 
De Beemster
De BeemsterDe Beemster
De Beemster
 
Push the boundaries of your Business Model& introduction to PM
Push the boundaries of your Business Model& introduction to PM Push the boundaries of your Business Model& introduction to PM
Push the boundaries of your Business Model& introduction to PM
 
Pel eksamen høst 2010
Pel eksamen høst 2010Pel eksamen høst 2010
Pel eksamen høst 2010
 
Dossier cicle superior
Dossier cicle superiorDossier cicle superior
Dossier cicle superior
 

Similar to Javascript spaghetti stirtrek_5_17

React.js - and how it changed our thinking about UI
React.js - and how it changed our thinking about UIReact.js - and how it changed our thinking about UI
React.js - and how it changed our thinking about UI
Marcin Grzywaczewski
 
Intro to BackboneJS + Intermediate Javascript
Intro to BackboneJS + Intermediate JavascriptIntro to BackboneJS + Intermediate Javascript
Intro to BackboneJS + Intermediate Javascript
Andrew Lovett-Barron
 
Basics java scripts
Basics java scriptsBasics java scripts
Basics java scripts
ch samaram
 
Welcome to React & Flux !
Welcome to React & Flux !Welcome to React & Flux !
Welcome to React & Flux !
Ritesh Kumar
 
Maintainable Javascript carsonified
Maintainable Javascript carsonifiedMaintainable Javascript carsonified
Maintainable Javascript carsonified
Christian Heilmann
 

Similar to Javascript spaghetti stirtrek_5_17 (20)

React.js - and how it changed our thinking about UI
React.js - and how it changed our thinking about UIReact.js - and how it changed our thinking about UI
React.js - and how it changed our thinking about UI
 
Full Stack React Workshop [CSSC x GDSC]
Full Stack React Workshop [CSSC x GDSC]Full Stack React Workshop [CSSC x GDSC]
Full Stack React Workshop [CSSC x GDSC]
 
Fewd week4 slides
Fewd week4 slidesFewd week4 slides
Fewd week4 slides
 
Intro to BackboneJS + Intermediate Javascript
Intro to BackboneJS + Intermediate JavascriptIntro to BackboneJS + Intermediate Javascript
Intro to BackboneJS + Intermediate Javascript
 
React Workshop
React WorkshopReact Workshop
React Workshop
 
Basics java scripts
Basics java scriptsBasics java scripts
Basics java scripts
 
Powerful tools for building web solutions
Powerful tools for building web solutionsPowerful tools for building web solutions
Powerful tools for building web solutions
 
Techpaathshala ReactJS .pdf
Techpaathshala ReactJS .pdfTechpaathshala ReactJS .pdf
Techpaathshala ReactJS .pdf
 
Drupal 7 ci and testing
Drupal 7 ci and testingDrupal 7 ci and testing
Drupal 7 ci and testing
 
"Crafting a Third-Party Banking Library with Web Components and React", Germa...
"Crafting a Third-Party Banking Library with Web Components and React", Germa..."Crafting a Third-Party Banking Library with Web Components and React", Germa...
"Crafting a Third-Party Banking Library with Web Components and React", Germa...
 
Rethinking Best Practices
Rethinking Best PracticesRethinking Best Practices
Rethinking Best Practices
 
Welcome to React & Flux !
Welcome to React & Flux !Welcome to React & Flux !
Welcome to React & Flux !
 
Maintainable Javascript carsonified
Maintainable Javascript carsonifiedMaintainable Javascript carsonified
Maintainable Javascript carsonified
 
7 Tools To Make React Development Faster and More Efficient
7 Tools To Make React Development Faster and More Efficient7 Tools To Make React Development Faster and More Efficient
7 Tools To Make React Development Faster and More Efficient
 
Web Development with Delphi and React - ITDevCon 2016
Web Development with Delphi and React - ITDevCon 2016Web Development with Delphi and React - ITDevCon 2016
Web Development with Delphi and React - ITDevCon 2016
 
Ionic framework one day training
Ionic framework one day trainingIonic framework one day training
Ionic framework one day training
 
React.js at Cortex
React.js at CortexReact.js at Cortex
React.js at Cortex
 
Introduction to React JS.pptx
Introduction to React JS.pptxIntroduction to React JS.pptx
Introduction to React JS.pptx
 
Backbone/Marionette introduction
Backbone/Marionette introductionBackbone/Marionette introduction
Backbone/Marionette introduction
 
Node.js and MongoDB from scratch, fully explained and tested
Node.js and MongoDB from scratch, fully explained and tested Node.js and MongoDB from scratch, fully explained and tested
Node.js and MongoDB from scratch, fully explained and tested
 

Recently uploaded

Future Visions: Predictions to Guide and Time Tech Innovation, Peter Udo Diehl
Future Visions: Predictions to Guide and Time Tech Innovation, Peter Udo DiehlFuture Visions: Predictions to Guide and Time Tech Innovation, Peter Udo Diehl
Future Visions: Predictions to Guide and Time Tech Innovation, Peter Udo Diehl
Peter Udo Diehl
 

Recently uploaded (20)

SOQL 201 for Admins & Developers: Slice & Dice Your Org’s Data With Aggregate...
SOQL 201 for Admins & Developers: Slice & Dice Your Org’s Data With Aggregate...SOQL 201 for Admins & Developers: Slice & Dice Your Org’s Data With Aggregate...
SOQL 201 for Admins & Developers: Slice & Dice Your Org’s Data With Aggregate...
 
Future Visions: Predictions to Guide and Time Tech Innovation, Peter Udo Diehl
Future Visions: Predictions to Guide and Time Tech Innovation, Peter Udo DiehlFuture Visions: Predictions to Guide and Time Tech Innovation, Peter Udo Diehl
Future Visions: Predictions to Guide and Time Tech Innovation, Peter Udo Diehl
 
IESVE for Early Stage Design and Planning
IESVE for Early Stage Design and PlanningIESVE for Early Stage Design and Planning
IESVE for Early Stage Design and Planning
 
WSO2CONMay2024OpenSourceConferenceDebrief.pptx
WSO2CONMay2024OpenSourceConferenceDebrief.pptxWSO2CONMay2024OpenSourceConferenceDebrief.pptx
WSO2CONMay2024OpenSourceConferenceDebrief.pptx
 
Connecting the Dots in Product Design at KAYAK
Connecting the Dots in Product Design at KAYAKConnecting the Dots in Product Design at KAYAK
Connecting the Dots in Product Design at KAYAK
 
Syngulon - Selection technology May 2024.pdf
Syngulon - Selection technology May 2024.pdfSyngulon - Selection technology May 2024.pdf
Syngulon - Selection technology May 2024.pdf
 
UiPath Test Automation using UiPath Test Suite series, part 1
UiPath Test Automation using UiPath Test Suite series, part 1UiPath Test Automation using UiPath Test Suite series, part 1
UiPath Test Automation using UiPath Test Suite series, part 1
 
A Business-Centric Approach to Design System Strategy
A Business-Centric Approach to Design System StrategyA Business-Centric Approach to Design System Strategy
A Business-Centric Approach to Design System Strategy
 
AI presentation and introduction - Retrieval Augmented Generation RAG 101
AI presentation and introduction - Retrieval Augmented Generation RAG 101AI presentation and introduction - Retrieval Augmented Generation RAG 101
AI presentation and introduction - Retrieval Augmented Generation RAG 101
 
Simplified FDO Manufacturing Flow with TPMs _ Liam at Infineon.pdf
Simplified FDO Manufacturing Flow with TPMs _ Liam at Infineon.pdfSimplified FDO Manufacturing Flow with TPMs _ Liam at Infineon.pdf
Simplified FDO Manufacturing Flow with TPMs _ Liam at Infineon.pdf
 
IoT Analytics Company Presentation May 2024
IoT Analytics Company Presentation May 2024IoT Analytics Company Presentation May 2024
IoT Analytics Company Presentation May 2024
 
FDO for Camera, Sensor and Networking Device – Commercial Solutions from VinC...
FDO for Camera, Sensor and Networking Device – Commercial Solutions from VinC...FDO for Camera, Sensor and Networking Device – Commercial Solutions from VinC...
FDO for Camera, Sensor and Networking Device – Commercial Solutions from VinC...
 
THE BEST IPTV in GERMANY for 2024: IPTVreel
THE BEST IPTV in  GERMANY for 2024: IPTVreelTHE BEST IPTV in  GERMANY for 2024: IPTVreel
THE BEST IPTV in GERMANY for 2024: IPTVreel
 
Custom Approval Process: A New Perspective, Pavel Hrbacek & Anindya Halder
Custom Approval Process: A New Perspective, Pavel Hrbacek & Anindya HalderCustom Approval Process: A New Perspective, Pavel Hrbacek & Anindya Halder
Custom Approval Process: A New Perspective, Pavel Hrbacek & Anindya Halder
 
Extensible Python: Robustness through Addition - PyCon 2024
Extensible Python: Robustness through Addition - PyCon 2024Extensible Python: Robustness through Addition - PyCon 2024
Extensible Python: Robustness through Addition - PyCon 2024
 
The Value of Certifying Products for FDO _ Paul at FIDO Alliance.pdf
The Value of Certifying Products for FDO _ Paul at FIDO Alliance.pdfThe Value of Certifying Products for FDO _ Paul at FIDO Alliance.pdf
The Value of Certifying Products for FDO _ Paul at FIDO Alliance.pdf
 
AI revolution and Salesforce, Jiří Karpíšek
AI revolution and Salesforce, Jiří KarpíšekAI revolution and Salesforce, Jiří Karpíšek
AI revolution and Salesforce, Jiří Karpíšek
 
Measures in SQL (a talk at SF Distributed Systems meetup, 2024-05-22)
Measures in SQL (a talk at SF Distributed Systems meetup, 2024-05-22)Measures in SQL (a talk at SF Distributed Systems meetup, 2024-05-22)
Measures in SQL (a talk at SF Distributed Systems meetup, 2024-05-22)
 
Strategic AI Integration in Engineering Teams
Strategic AI Integration in Engineering TeamsStrategic AI Integration in Engineering Teams
Strategic AI Integration in Engineering Teams
 
Salesforce Adoption – Metrics, Methods, and Motivation, Antone Kom
Salesforce Adoption – Metrics, Methods, and Motivation, Antone KomSalesforce Adoption – Metrics, Methods, and Motivation, Antone Kom
Salesforce Adoption – Metrics, Methods, and Motivation, Antone Kom
 

Javascript spaghetti stirtrek_5_17