Front-end Tech Stack
At Sapera, we use the latest Front-end tools to keep up-to-date with modern web technologies. Below is a diagram to outline our Front-end architecture and Design System to show each tool’s purpose and its relationship.
Global dependencies
Design System
React Styled Styled System Components A JavaScript A styling utility UI library To write CSS in JavaScript library for React
Pattern Library CSS Tokens Under the hood
We use these development dependencies to flag programming errors, add code validation to enhance writing quality and to enforce a consistent code format between developers.
Storybook Diez
To create UI To create ESLint TypeScript Prettier components in isolation design tokens Sapera Website Sapera Brand Acronyms
Analyze JavaScript Add type checking Opinionated to find problems to JavaScript code formatter CSS Cascading Style Sheets
JSON JavaScript Object Notation
MVP Minimal Viable Product Testing tools SSR Server-side Rendered Sketch Next.JS Next.JS Design software Static & SSR Static & SSR UI User Interface React app React app
Jest Cypress Labels Unit test code To validate app flow in isolation end-to-end GitHub repository MobX Playroom Designers Not required for a MVP A state Interactive live management library editor playground Workflow
Lighthouse Pa11y Does not require global dependencies To improve webpages quality For accessibility
Design System in detail
The purpose of our Design System is to create a cohesive design that reflects a common visual language with our corporate identity. The aim is to promote consistency and create a shared design vocabulary between Sapera Website, Brand and the teams. This eco-system is a comprehensive 'living document', and most importantly, it is the place for a single source of truth. Pattern Library CSS Tokens
A web interface consists of building blocks. The CSS Tokens Git Repository is to store The Pattern Library contains these blocks which styling attributes using TypeScript. we call components. Here are some examples: Here are some examples:
What are these dependendies for? enums Colors {
We use a lot of tools, and they all sound similar, it could be confusing.
Styled Components is a way to write CSS in React Components. This library injects critical CSS based on the rendered components. It creates unique class names to avoid duplicating, and overlapping MVP classes which are often an issue with traditional CSS, or other React Storybook Styled JSON TypeScript styling libraries like LESS or Sass. Components
Styled System is a CSS utility library. It has a collection of useful Storybook with React and Styled Components For a Minimal Viable Product, we only need to create functions to add styling properties to React components and allows are the core frameworks to make these components Design Tokens in a JSON format and provide one custom theming. A benefit of Styled System is to style rapidly. re-usable across projects. GitHub login for designers to change CSS attributes. Designers Storybook also acts as a ‘playground’ to preview When we want to scale, we will use Diez to extract Aren't Playroom and Storybook the same thing? each component in isolation to test its functionality. assets from Sketch into TypeScript.
ESLint, Typescript and Prettier are the required dependencies during development. non MVP Playroom Storybook Other JavaScript UI libraries, like Vue and Svelte, are Diez Sketch compatible with Storybook as well if we ever need Playroom allows users to view quick mock-ups with existing to move away from React. components in a live editor using a predefined set of viewport frames simultaneously. Diez has a cross-platform native compiler feature, Storybook's primary purpose is the create React components in so it is extensible to use with native libraries like iOS isolation for re-using. Storybook has Add On features that can and Android if needed. achieve almost the same results as Playroom. Diez supports other design softwares, like Figma and Adobe XD, if we ever move away from Sketch.
Last updated on 23rd April 2020