import { Head, Notes } from 'mdx-deck'
export { default as theme } from './theme'
<title>How a 16th Century French Mathematician Helped Build a Design System</title>import { Credentials } from './components/Credentials'
Introduce yourself and the topic Mention how it helped your team to build a design system for a large e-commerce platform.--- # What is a design system? # 🤔 To start with, briefly touch on what a design system is. Ask who has heard of Design Systems before Ask if there is anyone who worked in a ds project before --- import { ImageContainer } from './components/ImageContainer' import { DS } from './components/DS' Systematic approach to product development. Tools, guidelines, shared principles and code Enables teams to work more efficiently and build consistent products in collaboration rather than in silos. A single source of truth for all of the product teams.
Material Design by Google. Shopify - Polaris, Github - Primer, IBM - Carbon --- Design system typically has different parts to it. Design language represents the overall visual design of a digital product. This defines characteristics such as typography, colors, icons, spacing and so on. It is maintained as Design Tokens in code. Design kit: A library of shared styles, symbols or components that can be used by product teams to design or prototype new experiences. Symbols maps to JavaScript components from the component library. The mapping might not always be a direct one but they always need to be kept in sync. Component library is a set of JavaScript components that are version controlled and can be composed to build applications and products. Developer Sandbox: a tool for Design system developers. Is used to develop and visualize components in isolation, document use cases and write tests without having to run the entire application. Documentation: guidelines on how to consume the Design System, design language, design and dev considerations and detailed documentation for each component. --- # Component Variation # Rendering Tie Ds to component variation rendering Now that we've covered Design system specifics, you might be wondering how does component variation relates to all of that. --- Zooming into component library. It includes all of the components like buttons input fields etc In the process of building a component library, you'd want to visualize how the growing number of components look in their different states and variations in the dev environment. This Helps developers building high quality UI that meets the requirements Helps with testing
Talk about button component's different variations, different props it takes in Normally Manual rendering, Go to the next slide to show that in code
import { CodeSurfer } from "mdx-deck-code-surfer" import dracula from "prism-react-renderer/themes/dracula"
<CodeSurfer title="Button" code={require("!raw-loader!./ButtonContainer.js").default} theme={dracula} lang="javascript" size="large" showNumbers={false} dark={false} steps={[ {}, // First step should be an overview of the snippet { lines: [2, 3, 4], notes: "3 variations being primary" }, { lines: [14, 15, 16], notes: "Secondary" }, { lines: [26, 27, 28], notes: "Transactional" }, { range: [5, 7], notes: "Every button can also take an icon" }, { tokens: { 5: [5, 6, 7, 8, 9] }, notes: "Every button can also take an icon" }, { range: [8, 10], notes: "Or a prop that makes it a smaller version of it"}, { range: [11, 13], notes: "A button can also be a small button and display an icon"}, {} ]} />
This can quickly get out of hand. There’s probably a big maintenance overhead associated with writing all the components manually, too. What happens if you have to update a prop? You'd need to update every instance manually. Sounds tedious. What if there’s a way to achieve the same result faster and by writing less code? --- A French mathematician named Rene Descartes comes to our rescue all the way from the 16. century! He developed Cartesian product concept. --- ## Cartesian Product In the context of Math, Cartesian product is an operation that returns a product from multiple sets. The end result will include every possible combination of the values that exist within each set. --- Apply the same concept to the component props. --- # Cartesian Component # 📐 It uses the same concept to generate and render the component for every possible combination of its properties that are passed in. This way you'd get your component displayed in its different variations without having to manually write it once for every possible combination of its props values. ---<CodeSurfer title="Button Cartesian" code={require("!raw-loader!./ButtonCartesian.js").default} theme={dracula} lang="javascript" size="large" showNumbers={false} dark={false} steps={[ {}, // First step should be an overview of the snippet { range: [3, 10] }, { lines: [5], }, { lines: [6], }, { range: [7, 10] }, { lines: [4], }, ]} />
Let’s see how that looks in the case of our Button component. Cartesian component takes in Button component and its props values as arrays and renders the component for every combination of these different property values. It achieves this by taking cartesian product of prop arrays under the hood. Reduces the lines of codes, makes it so easy to update any prop value. One cool thing about using cartesian component is that: It shows you all the combinations of the props even the ones that you might not thinking to combine if you were to write them manually Mention about the container that'll get wrapped around every rendered component. Here, the container adds a list of props and their values for every variation of the component. --- ---  I've recorded this quick gif to demonstrate how easy it is to render the new component variations when a new prop is introduced Let’s say I want to see how my buttons look when they are in the disabled state: All I need to do is to add that prop to the button cartesian component along with the values I want it to take. And then, boom I see how my button looks in disabled state in combination with other prop values --- --- # Cartesian Component in Testing # 🔎 --- Used to automate snapshot testing --- Axe to automate accessibility testing. Automates the process of writing test cases for accesibility tests. --- ## Cartesian Product + Component = 🎩❤️💪🏻🙆🏻♀ Mention why cartesian component is cool: Improves developers workflow, instant feedback, lightweight - just a component - doesn't include extra dependencies or configuration, being able to see all the components and variations at the same, whether things are broken or not, good for QA --- ## Useful Links