Development philosophy

 UI 

App

          vs

• Apis
• Business logic
• State management
• Routing
• Unit testing
• E2E testing
• ...

UI

• HTML, CSS
• Framework / Stencil
• Components
• Accessibility & SEO
• Visual Regression
• Unit testing
• ...

UI Development

source: https://designerup.co/blog/content/images/2020/05/cover_design_system-2.jpg

What's a design system?

Component libraries

How?

"We’re not designing pages, we’re designing systems of components."

— Stephen Hay

Rabo Global Sites

App

SFC

Chromatic

Chromatic workflow

Component Isolation

​​"Build components without starting a complex dev setup, force certain data into your database, or navigate around your application"

Stories

• Each possible state of a component is put in a story.
• A story is supported by addons (a11y, device resolutions, performance, color blindness simulator etc)
• Component documentation

Dos

• React (HTML/CSS/TS)
• Component isolation
• Component library

Don'ts

• State-management
• Business logic
• Backend communication

Atomic design

Whiteboard/Demo

Profile

• Frontend developer
• React Experience
• Affinity HTML/CSS

Chromatic

DOCS

Whiteboard/Demo

Profile

• Designer
• Dedicated visual reviewer
• Prevents visual bugs instead of finding them in PROD

DOCS

Whiteboard/Demo

Profile

• Software developer
• React Experience
• Affinity state-management / complex logic

Frontend architecture

App

Frontenders

+

Designers

Chromatic

Software Engineers

• Routing
• SSR
• State-management

• E2E flows

• Atomic design

• Visual regression

SFC

App.tsx

Page.tsx

Page.tsx

Template.tsx

Organism.tsx

Molecule.tsx

Atom.tsx

Chromatic

SFC

Client

SSR/Client

API

{

  itemsWithPrices: [..., ..., ...]

}

items: {

  byId: {

    'id1': { ... },

    'id2': { ... },

    'id3': { ... }

  },

  allIds: [

    'id1',

    'id2',

    'id3'

  ]

}

selectItemsWithPrices

UI

App

Data

App data should be stored normalized.

prices: {

  byId: {

    'id1': { ... },

    'id2': { ... },

    'id3': { ... }

  },

  allIds: [

    'id1',

    'id2',

    'id3'

  ]

}

UI state should be derived from App state via pure Selector functions

Title Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi nec metus justo. Aliquam erat volutpat.

Micro frontend architecture

(use-case dependent)

Advantages

• Small maintainable apps
• Separate deployables (Next.js)
• Codesharing lib
• Monorepo for 1 application
• Not a Google-like monorepo

Disadvantages

• Codesharing with other apps (like RBO) via NPM
• Not inline with current monorepo strategy (good thing)

Shift left

Shallow & Deep testing 

Profile

• Developer
• Writes tests together with code

Critical E2E flows

Profile

• Developer
• Helps identifying critical user flows
• Writes tests

Profile

• Stakeholder BA/PO
• Helps identifying critical user flows