Building a Theming System with React

Slide 1

Slide 1 text

BUILDING A THEMING SYSTEM WITH REACT

Slide 2

Slide 2 text

MATTEO RONCHI @CEF62 GITHUB/CEF62 SENIOR SOFTWARE ENGINEER AT WORKWAVE FEVR COMMUNITY LEADER

Slide 3

Slide 3 text

TODAY'S WEB IS ALL ABOUT COMPONENT-BASED ARCHITECTURES

Slide 4

Slide 4 text

WHY COMPONENTS?

Slide 5

Slide 5 text

> Modular > Scalable > Extensible > Reusable > Encapsulated

Slide 6

Slide 6 text

COMPONENTIZATION ENABLES HIGHER ORDER COMPONENTS

Slide 7

Slide 7 text

HOCS ALLOW ABSTRACTION OF REUSABLE AUGMENTATIONS

Slide 8

Slide 8 text

MANY WAYS TO STYLE COMPONENTS

Slide 9

Slide 9 text

PLAIN CSS

Slide 10

Slide 10 text

Web pages load Cascading Style Sheets to learn how to render HTML elements .red-button { color: red; } Red

Slide 11

Slide 11 text

CSS-Modules

Slide 12

Slide 12 text

Allow per-component css rules greatly improving components portability .redButton { color: red; } import css from './styles.css' const comp = () => Red Red

Slide 13

Slide 13 text

Inline Styles

Slide 14

Slide 14 text

Component styling without using CSS Making it really easy to dynamically change the visual output based on a component's state const redButton { color: 'red' } const comp = () => Red

Slide 15

Slide 15 text

Runtime Generated CSS

Slide 16

Slide 16 text

In recent years CSS-in-JS continued to grow and evolve. The current state of the art is expressed by libraries as > Styled Components > Aphrodite > Styletron > Glamour

Slide 17

Slide 17 text

Those libraries dynamically define CSS rules using Javascript, JSON or CSS syntaxes. Generated CSS classes are injected at runtime into the web page.

Slide 18

Slide 18 text

COMPONENTS THEMING

Slide 19

Slide 19 text

In UI development theming is the definition of reusable sets of visual styles, aiming to create consistency across views

Slide 20

Slide 20 text

UI Theming can be done in so many different ways mostly depending on per-project requirements

Slide 21

Slide 21 text

COLOR PALETTES THE SIMPLEST WAY TO KEEP CONSISTENCY ACROSS VIEWS AND COMPONENTS

Slide 22

Slide 22 text

@nice-blue: #5B83AD; @light-blue: #98C7F9; @small: 0.6rem; @big: 1.3rem; #header { color: @light-blue; font-size: @big; } #footer { color: @nice-blue; font-size: @small; }

Slide 23

Slide 23 text

PROPS DRIVEN STYLES GREATER CUSTOMIZATION AND EASE TO CREATE DYNAMIC STYLES DEFINITION

Slide 24

Slide 24 text

const theme = { niceBlue: '#5B83AD', lightBlue: '#98C7F9', small: '0.6rem', normal: '1rem', } const bgStyle = (props) => props.isFooter ? props.theme.lightBlue : props.theme.niceBlue const fontStyle = (props) => props.isFooter ? props.theme.small : props.theme.normal // styled-components const Button = styled.div` backgroundColor: ${bgStyle}; border: 2px solid ${fontStyle}; `

Slide 25

Slide 25 text

Color Palettes and Props Driven Styles are great but we - at WorkWave - looked for something different

Slide 26

Slide 26 text

> change the whole theme at runtime > support WYSIWYG > decouple component UI definition from UI styling > easy implementable theme variations

Slide 27

Slide 27 text

> support theme variations per-component branches > be agnostic on how to create the final output > support component-based and atomic-css approaches

Slide 28

Slide 28 text

WORKWAVE THEME-MANAGER

Slide 29

Slide 29 text

The Theme-Manager is responsible for sharing themes It's possible to subscribe to be notified of theme changes, enabling a set of components to update consistently in a easy and transparent way

Slide 30

Slide 30 text

A THEME DEFINES TWO MAIN FIELDS: styles a map of categories. Each category is a map of css classes in Javascript notation presets a map of presets, each preset is used to programmatically override the main theme definition

Slide 31

Slide 31 text

const source = { // Main theme styles: { Button: { button: { backgroundColor: 'lightpink', color: 'blue', padding: '0.6em', fontWeight: 800, }, }, }, presets: { // dark style variation dark: { Button: { button: { backgroundColor: 'violet', color: 'white', }, }, }, }, } const appTheme = theme(source)

Slide 32

Slide 32 text

const source = { // Main theme styles: { colors: { normal: { color: 'blue' }, confirm: { color: 'red' }, }, backgrounds: { normal: { backgroundColor: 'lightpink' }, confirm: { backgroundColor: 'lightgreen' }, }, }, presets: { // dark style variation dark: { colors: { normal: { color: 'white' }, confirm: { color: 'yellow' }, }, backgrounds: { normal: { backgroundColor: 'violet' }, confirm: { backgroundColor: 'darkgreen' }, }, }. }, } const appTheme = theme(source)

Slide 33

Slide 33 text

A Themed Component expects to receive a map of css classes as a prop Knowing how to apply those css classes to its internal implementation.

Slide 34

Slide 34 text

REACT BINDINGS

Slide 35

Slide 35 text

Slide 36

Slide 36 text

Makes available a theme-Manager instance to every descendant A theme-Manager instance can also be passed as a prop to every themed component

Slide 37

Slide 37 text

connectTheme()

Slide 38

Slide 38 text

A HoC connecting a React component to a themeManager instance connectTheme(config, mapThemeToProps, options)(DecoratedComponent)

Slide 39

Slide 39 text

A themed component declares which theme categories it's interested in, and a map-Theme-To-Props function const config = { types: ['Header'] } const mapThemeToProps = ({ Header: { wrapper, label } }) => ({ wrapper, label }) const themedHeader = connectTheme(config, mapThemeToProps)(Header)

Slide 40

Slide 40 text

The decorated component will receive a css prop containing all generated css classes const Header = ({ css, title }) =>

{title}

Slide 41

Slide 41 text

mapThemeToProps is where you are in control mapThemeToProps(theme, props) -> composed styles

Slide 42

Slide 42 text

const mapThemeToProps = (theme) => { const { colors, backgrounds } = theme return { wrapper: { ...backgrounds.normal }, normalBtn: { ...colors.normal, ...backgrounds.normal }, confirmBtn: { ...colors.confirm, ...backgrounds.confirm }, } } const DecoratedComponent = ({ css }) =>

Do Something Are You Sure?

Slide 43

Slide 43 text

const mapThemeToProps = (theme, props) => { const { colors, backgrounds, disabled } = theme const { canConfirm } = props const normalDisabled = canConfirm ? disabled.normal : {} const confirmDisabled = canConfirm ? disabled.normal : {} return { wrapper: { ...backgrounds.normal }, normalBtn: { ...colors.normal, ...backgrounds.normal, ...normalDisabled }, confirmBtn: { ...colors.confirm, ...backgrounds.confirm, ...confirmDisabled }, } } const DecoratedComponent = ({ css }) =>

Do Something Are You Sure?

Slide 44

Slide 44 text

The decorated component's interaction with the theme is customizable using the theme-Params prop

Slide 45

Slide 45 text

preset: a theme preset to be applied to the component branch. theme-Name: changes the active theme for the component branch. overrides: a local overrides to the style object passed to the map-Theme-To-Props.

Slide 46

Slide 46 text

const themeParams = { preset: 'dark', overrides: { colors: { normal: { color: 'white', fontWeight: 'bold', }, }, backgrounds: { normal: { backgroundColor: 'black', }, }, } } const Comp = () =>

Slide 47

Slide 47 text

PLUGIN BASED OUTPUT ENGINE

Slide 48

Slide 48 text

The map of styles returned by map-Theme-To-Props is passed through a compiler We use aphrodite to generate CSS but the engine is configurable on per-component basis

Slide 49

Slide 49 text

Performances Matters Every themed component uses memoization and strict equality checks to ensure the compiler is invoked as little as possible

Slide 50

Slide 50 text

Room for improvements The code boilerplate required to create reusable variations of a themed component feels excessive Declaration of expected theme categories could be more flexible