COMPONENT DRIVEN DEVELOPMENTCreating the UI components in the clever way

BARTEK IGIELSKI Lead Front-end Developer @ SNOW.DOG

Core team member @ Vue Storefront Founder of Frontools / SASS Blank / Alpaca

twitter @igloczek facebook /iglodottech

#Reacticon@igloczek

Component-Driven Development (CDD) is a development methodology that anchors the

build process around components.

#Reacticon@igloczek

It is a process that builds UIs from the “bottom up” by starting at the level of components and ending

at the level of pages or screens.

BENEFITS

#Reacticon@igloczek

• Focus on one thing at a time

• Live documentation

• Components library

• Simpler environment

• Parallel development

• Visual testing

• Faster feedback

• Working without backend

STORYBOOK

#Reacticon@igloczek

Storybook is framework / library agnostic

React Storybook -> Storybook

#Reacticon@igloczek

#Reacticon@igloczek

Storybook is a UI development environment that will help you visualise different states of

UI components and develop them interactively.

#Reacticon@igloczek

Storybook runs outside of your app, so you are developing UI components in isolation.

#Reacticon@igloczek

HOW TO

CREATE STORIES

#Reacticon@igloczek

Story should represent a single state of one of your components, be like a visual test case.

#Reacticon@igloczek

import { storiesOf } from '@storybook/vue'

import App from '../components/01-globals/app/App.vue' import Icon from '../components/01-globals/icon/Icon.vue'

storiesOf('Global/Icon', module) .add('Default', () => ({ components: { App, Icon }, template: ` <app> <icon icon="arrow-down" /> </app> `, }))

#Reacticon@igloczek

Technically story is a function… …so sky is the limit

Fake data? Fetch them from reqres.in Static data? Import a local file

Requests mocking? axios-mock-adapter is waiting GraphQL mocking? Apollo server supports it

MORE FEATURES

#Reacticon@igloczek

Storybook is extendable using addons

https://storybook.js.org/addons/addon-gallery/

https://storybook.js.org/basics/live-examples/

#Reacticon@igloczek

You can also build a static version of your storybook and deploy it anywhere you want.

TESTING

#Reacticon@igloczek

Reasons for Testing • To find bugs • To make sure things won’t break between

new code commits • To keep tests as living documentations

#Reacticon@igloczek

Structural testing Check if the structure of UI and how it’s laid

out, for example check if the form have inputs, labels, submit buttons etc.

#Reacticon@igloczek

Interaction testing Check if the UI responds to actions in the

predictable way, for example check if form will display status message after submitting it.

#Reacticon@igloczek

CSS / Style / Visual testing This is a pretty complex subject and usually

should be done by comparing images of rendered components.

ANNOUNCEMENTS

#Reacticon@igloczek

Components based Magento 2 theme v1.0.0 release - 15 October 2018

https://github.com/snowdogapps/magento2-alpaca-theme

https://github.com/SnowdogApps/magento2-alpaca-components

Components demo - https://bit.ly/2O5L6dA

#Reacticon@igloczek

Vue Storefront theme based on Alpaca Soon!

https://github.com/SnowdogApps/alpaca-storybook

THANK YOU!