Pattern libraries through trial and error

Brought to you by Varya Stepanova from SC5, 26th October 2016

Me

Now

Senior Software Specialist at SC5 (Helsinki)

Before

TMG (Amsterdam, the Netherlands)
Yandex (Moscow, Russia)

Area of expertise

Components for web: pattern libraries, SGDD, BEM, React.

The dream development

only lazy programmers will want to write the kind of tools that might replace them in the end

Philipp Lenssen

Interface of blocks

Unified interface

= stable result

Code reusing

= less work to do

Yandex

2008 — 2014

The blocks

Lego

Version migration

Library@N -> Library@N+1

Rename classes
Change HTML
Fix JavaScript

1 website
20 basic components

Requirements

Update 200+ websites
100+ common components, + custom components
Do it yesterday
Try not to make enimies

Tree of blocks

Stable abstract tree HTML representation

Stable abstract tree	HTML representation
page header logo search sidebar menu main	`<div class="page"> <div class="header"> <div class="header__logo"> <logo class="logo"><img src=.../></logo> </div> <div class="header__middle"> <form class="search"> <span class="search__input"> <label class="input__hint input__hint--size--s"></label> <span class="input__box"> <input class="input__control"/> </span> </span> <span class="search__button> <button role="button" class="button"> Search </button> </span> </form> </div> </div> ... </div>`

page
- header
  - logo
  - search
- sidebar
  - menu
- main

<div class="page">
  <div class="header">
    <div class="header__logo">
      <logo class="logo"><img src=.../></logo>
    </div>
    <div class="header__middle">
      <form class="search">
        <span class="search__input">
          <label class="input__hint input__hint--size--s"></label>
          <span class="input__box">
            <input class="input__control"/>
          </span>
        </span>
        <span class="search__button>
          <button role="button" class="button">
            Search
          </button>
        </span>
      </form>
    </div>
  </div>
  ...
</div>

Pattern library

Docs for components

Upgrade-button

To do the same

Stricktly follow

Methodology, File structure, Building tools

Repeat by

libraries: bem-core, bem-components, bem-mvc, …
Copy and modify the config

Think Program different

SC5

2014 — now

Going over the test

Human’s problems

Do not solve
technical problems.

Help people!

Think in modules

Living styleguides

code-generated examples
live updates
component-focused development

Develop “styleguide first”

SC5 Styleguide

Informative and easily navigable live style guide which renders every component separately.

npm install sc5-styleguide

SC5 Styleguide

styleguide.sc5.io

Example: varya.me/styleguide

Version migration?

What is the problem?

Something is broken.

Something is broken.
I do not know what and where.

Visual tests

npm install sc5-styleguide-visualtest

Spot the difference

> gulp test:visual

Human’s version: example

No closed source

Open code - open process

Start in open source
Feature is more than code
Enjoy the community

Community

World

Thank you

Varya Stepanova

mail@varya.me
@varya_en