Tweet
Tweet

Slide 1

Slide 1 text

Reducing Complexity with a Component API Ian Feather

Slide 2

Slide 2 text

Complexity

Slide 3

Slide 3 text

High risk, high fear

Slide 4

Slide 4 text

Intertwined

Slide 5

Slide 5 text

Low reuse

Slide 6

Slide 6 text

Technical debt

Slide 7

Slide 7 text

! Complexity at " ";

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

This time we’ll nail it

Slide 10

Slide 10 text

HTML CSS JS SHARED SPECIFIC HOTELS The rebuild

Slide 11

Slide 11 text

HTML CSS JS SHARED SPECIFIC High Reuse Low Reuse HOTELS The rebuild

Slide 12

Slide 12 text

HTML CSS JS SHARED SPECIFIC High Reuse Strong Caching Low Reuse Weak Caching HOTELS The rebuild

Slide 13

Slide 13 text

HTML CSS JS SHARED SPECIFIC High Reuse Strong Caching High Risk Low Reuse Weak Caching Low Risk HOTELS The rebuild

Slide 14

Slide 14 text

HTML CSS JS SHARED SPECIFIC HOTELS PLACES SEARCH THEME High Reuse Strong Caching
 High Risk Low Reuse Weak Caching
 Low Risk The rebuild

Slide 15

Slide 15 text

HTML CSS JS SHARED SPECIFIC HOTELS PLACES SEARCH THEME High Reuse Strong Caching
 High Risk Low Reuse Weak Caching
 Low Risk The rebuild

Slide 16

Slide 16 text

HTML CSS JS SHARED SPECIFIC HOTELS PLACES SEARCH THEME High Reuse Strong Caching
 High Risk Low Reuse Weak Caching
 Low Risk The rebuild

Slide 17

Slide 17 text

This model doesn’t favour
 the front end

Slide 18

Slide 18 text

We need a different
 solution

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

It should feel as easy as
 working on a small site

Slide 21

Slide 21 text

A Style Guide would
 help, right?

Slide 22

Slide 22 text

/* Styleguide [Buttons] ! Button Button ! */ ! .btn—primary { background: blue; } ! .btn—secondary { background: red; }

Slide 23

Slide 23 text

No content

Slide 24

Slide 24 text

A Style Guide isn’t
 the mechanism

Slide 25

Slide 25 text

We need to decouple our
 UI Layer from the application

Slide 26

Slide 26 text

Component Layer & API

Slide 27

Slide 27 text

What is a component?

Slide 28

Slide 28 text

Create an API to standardise
 fetching these components

Slide 29

Slide 29 text

No content

Slide 30

Slide 30 text

= component(“form/search”, {
 label: search
 })


Slide 31

Slide 31 text

Search Search = component(“form/search”, {
 label: search
 })


Slide 32

Slide 32 text

No content

Slide 33

Slide 33 text

component(“input/search”, {
 label: search, autocomplete: true
 })

Slide 34

Slide 34 text

Search Search

component(“input/search”, {
 label: search, autocomplete: true
 })

Slide 35

Slide 35 text

No content

Slide 36

Slide 36 text

component("cards/collection_card", { 
 
 double?: true, slug: "/top-things-to-do—in-paris", title: "Top things to do in Paris", image_url: "/assets/paris.jpg"
 })

Slide 37

Slide 37 text

No content

Slide 38

Slide 38 text

No content

Slide 39

Slide 39 text

SPECIFIC Low Risk
 Low Reuse HOTELS PLACES SEARCH THEME HTML CSS JS SHARED High Risk High Reuse

Slide 40

Slide 40 text

SPECIFIC Low Risk
 Low Reuse HOTELS PLACES SEARCH THEME HTML CSS JS SHARED High Risk High Reuse Low Risk
 High Reuse Component Layer & API

Slide 41

Slide 41 text

Rizzo ! Component Layer, API 
 & Style Guide

Slide 42

Slide 42 text

Our Style Guide can be just
 another data-driven application

Slide 43

Slide 43 text

A ready-made visual 
 regression test suite

Slide 44

Slide 44 text

Enables Style Guide 
 driven development

Slide 45

Slide 45 text

No content

Slide 46

Slide 46 text

No content

Slide 47

Slide 47 text

Why would you
 want to use a
 Component API?

Slide 48

Slide 48 text

You’ll have
 happier developers

Slide 49

Slide 49 text

You’ll have
 visual consistency

Slide 50

Slide 50 text

You’ll be able to
 refactor easily

Slide 51

Slide 51 text

You won’t have to
 tweak padding values
 (as much)

Slide 52

Slide 52 text

It can feel like working
 on a small site

Slide 53

Slide 53 text

Thank you @ianfeather
 
 http://rizzo.lonelyplanet.com