Design Systems and Component Based Frontend

Slide 1

Slide 1 text

Design Systems & Component Based Frontend

Slide 2

Slide 2 text

Bilal Çınarlı Frontend Architect Software Engineer @Adidas @bcinarli github.com/bcinarli bcinarli.com

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

Harmony from Intuit, GEL – Global Experience Language from BBC, Material from Google, Lightning from Salesforce, AirBNB’s Visual Language, Joystick from EA, Fluent from Microsoft, Plasma from WeWork, Polaris from Shopify, Lonely Planet, Swarm from Meetup, Canvas from Hubspot …and aDL from Adidas

Slide 5

Slide 5 text

What is a design system?

Slide 6

Slide 6 text

A collection of reusable components, guided by clear standards, that can be assembled together to build any number of applications.

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

A design system is a combination of style, components, and voice.

Slide 9

Slide 9 text

It is scalable at any level

Slide 10

Slide 10 text

Provides consistency between different pages and applications

Slide 11

Slide 11 text

With the set of rules and guides, increases the efficiency

Slide 12

Slide 12 text

Enhances the teamwork and eases the on-boarding of new members

Slide 13

Slide 13 text

http://bit.do/yarnds

Slide 14

Slide 14 text

http://bit.do/adl_

Slide 15

Slide 15 text

Components

Slide 16

Slide 16 text

Components support levels of abstraction in an application. It is layered and feature-based.

Slide 17

Slide 17 text

Individual components provide decoupling which leads to better unit testings and stability.

Slide 18

Slide 18 text

Design system and Components combine mostly in UI layer where your presentation occurs

Slide 19

Slide 19 text

Besides, components can also communicate with the data layer while rendering our content.

Slide 20

Slide 20 text

…and with the standardisation, it improves quality.

Slide 21

Slide 21 text

No content

Slide 22

Slide 22 text

How Popular Libraries Think?

Slide 23

Slide 23 text

Build encapsulated components that manage their own state, then compose them to make complex UIs.

Slide 24

Slide 24 text

Components define areas of responsibility in your UI that let you reuse these sets of UI functionality.

Slide 25

Slide 25 text

It’s an abstraction that allows us to build large-scale applications composed of small, self-contained, and often reusable components.

Slide 26

Slide 26 text

But the mainly, they should have a responsibility over a single part.

Slide 27

Slide 27 text

No content

Slide 28

Slide 28 text

How to Organise?

Slide 29

Slide 29 text

Define your folder structure based on their functionalities

Slide 30

Slide 30 text

Think of everything is sort-of a pluggable component. In most cases, when you remove it, you should expect no traces left.

Slide 31

Slide 31 text

Slide 32

Slide 32 text

…and tests are a part of your components.

Slide 33

Slide 33 text

// add test specs . !"" cart | !"" index.js | !"" test.spec.js | #"" template.pug #"" checkout !"" index.js !"" test.spec.js #"" template.pug

Slide 34

Slide 34 text

Separate config and scripts away from your components.

Slide 35

Slide 35 text

Slide 36

Slide 36 text

Keep HTML and CSS separate in your source code and never inline manually

Slide 37

Slide 37 text

// DON’T

Hello World!

// DO .content-text { margin: 10px 0; padding: 0; }

Hello World!

Slide 38

Slide 38 text

Always think about specificity in CSS, try to avoid creating specific selectors

Slide 39

Slide 39 text

// DON’T #main .article .title span { font-size: 32px; font-weight: bold; } // DO .main-article-title { font-size: 32px; font-weight: bold; }

Slide 40

Slide 40 text

Do not write the code you are going to overwrite

Slide 41

Slide 41 text

// DON’T .content { display: flex; max-width: 1280px; margin: 0 auto; } .article { width: 900px; } .supplementary { width: 380px; } @media screen and (min-width: 48.0625em) and (max-width: 64em) { .article { width: 644px; } } @media screen and (max-width: 48em) { .content { flex-direction: column; } .article, .supplementary { width: 100%; } } // DO .content { max-width: 1280px; margin: 0 auto; } @media screen and (min-width: 48.0625em) { .content { display: flex; } .article { flex: 1; } .supplementary { width: 380px; } }

Slide 42

Slide 42 text

A way to unify different frameworks?

Slide 43

Slide 43 text

Web components are a set of web platform APIs that allow you to create new custom, reusable, encapsulated HTML tags to use in web pages and web apps.

Slide 44

Slide 44 text

Custom components and widgets build on the Web Component standards, will work across modern browsers, and can be used with any JavaScript library or framework that works with HTML.

Slide 45

Slide 45 text

raised

Slide 46

Slide 46 text

class AppDrawer extends HTMLElement {...} window.customElements.define('app-drawer', AppDrawer);

Slide 47

Slide 47 text

Good part, all JS frameworks outputs to HTML. Theoretically, we can use any popular JS library to create Web Components

Slide 48

Slide 48 text

What is more?

Slide 49

Slide 49 text

Having self-contained, reusable components helps to turn you app to micro frontends

Slide 50

Slide 50 text

… that can have independent deployment, build, coding

Slide 51

Slide 51 text

… leads to autonomous teams

Slide 52

Slide 52 text

… and you can have a shell that orchestrates which micro frontend to load

Slide 53

Slide 53 text

… with the “Best Friend of Frontend"

Slide 54

Slide 54 text

Your components should not know what the dependencies are in behind the curtains you are using.