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

@wesruv

Lullabot

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

Maybe?

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

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

storybook.gif