Pro-tip: Press space bar to progress and it won't skip any slides

Designing for Decoupled

About Me...

Wes Ruvalcaba

  • Senior Front End Dev at Lullabot
  • Was a Designer for 7 years
  • Worked in React and Vue.js projects



We'll go over

  • What's Different with Decoupled
  • Component Based Design in JS Frameworks
  • Words of Warning
  • Storybook (JS Framework Styleguide)

What's the difference?

Designing for Traditional web delivery
vs JS Frameworks

You have to use components.

They're alive!

Component lifecycle

Components can have state

For example, if I had this notification bar

Markup and Styles will have to be written from scratch

CSS in Javascript


Big Differences with CSS and CSS in JS

  • Variables are easy to share between JS and CSS
  • Makes state-ful component styling a lot easier
  • Logic is easier to write than Sass/Less/Stylus
  • Very little inheritance in browser

Dynamic content & behavior (aka AJAX) is a first class citizen

Component Based Design

for Javascript Frameworks notifications example

Atomic Design from Brad Frost: Atom, Molecule, Organism, Template, Page

Plan for what usages are allowed

Words of Warning...

Coulda, shoulda is still in effect

Keep your components consistent as much as possible

Heavy things are still heavy

Because things can be loaded dynamically, doesn't mean they should

Try to avoid jarring changes when the app downloads...

Component lifecycle

Styleguides ...err Storybook

... it's the only decoupled one I can speak to