DEV Community: Muhi Masri

4 Effective Tools for Building a React Design System

Muhi Masri — Fri, 06 Aug 2021 23:30:36 +0000

NOTE: A newer and updated version of this article is available on my site https://muhimasri.com/blogs/4-effective-tools-for-building-a-react-design-system/

Introduction:

Building a design system is a progressive and abstractive approach to maintaining a consistent and cost-efficient components library that follows a specific styling guide and is sharable across multiple products. A design system has always been associated with designers but now it’s becoming critical for frontend developers to understand it from the technology perspective.

In this article, I will share some of the tools I used to successfully build a design system in React. Of course, before building the library, we require the designer’s expertise to develop the brand’s look and feel, user experience, style guide, etc.

create-react-library:

One of the essential parts of providing a design system library is to be able to have an independent React components solution that can be published and used by other projects.

create-react-library is a CLI for creating reusable React libraries using Rollup and create-react-app. All you need to do is a simple global installation npm install -g create-react-library, then create-react-library, followed by few questions about your package and you have it all! A Boilerplate project for publishing React components.

src folder is where you develop and export components.
example folder is for testing your components.

Material-UI:

Material-UI can serve as a powerful base layer for your design system and can be easily customized to meet your component’s requirements.

Advantages of using Material UI over building components from scratch:

Built-in functionalities that will take a while to build from scratch, e.g. Dialogs, Autocomplete, Trees, Tables…
Material is not only a library but a design system guide that helps you follow best design practices
Responsive components that work on different devices
Supported by Google

Material uses JSS at its core – a high-performance JavaScript to CSS compiler which works at runtime and server-side. This works great for isolating components and creating dynamic CSS. If you’d like to learn more, I wrote an article on how to create custom dynamic styling for a Material Button using JSS.

Storybook:

Storybook is a great tool for documenting, showcasing, and testing components with designers, managers, and developers. It allows you to create a story for each component that showcases different variants, behaviors, and features of your component.

Designers can provide feedback and updates while developers can test and learn how to work with your components.

Besides documentation, it has plenty of other useful features and plugins such as:

Unit test functionality
Accessibility testing
Visual test appearance

Style Dictionary and Design Tokens:

Design tokens are defined as all the values needed to construct and maintain a design system — spacing, color, typography, border, shadow, etc.

Style Dictionary enables you to create and organize all Design Tokens as variables in a JSON format and automatically transform it into any format like JS, SASS, XML (for Android), etc.

It is a powerful tool for both designers and developers. As a designer, you control all the design system values to ensure consistency, and as a developer, you don’t need to create and structure style variables for every project that follows the same style guide. As soon as there is a design update, the designer will change the value and it will reflect on all platforms. Awesome!

Takeaway:

A design system is a hot topic and an integral part of many companies. Following the best practices to building a design system will ensure scalable and cost-efficient products.

I hope this article was helpful and if you have any questions, please leave a comment below.

Bye for now!

For more related articles, you can visit my site or subscribe here to receive the latest Frontend Development articles.

Why I Chose Preact for my Latest Project

Muhi Masri — Mon, 03 May 2021 22:03:04 +0000

As part of my ongoing consultation, architecture, and development work with JavaScript applications, I’ve recently started a new project that required me to re-evaluate the typical options that I usually go for (Angular, React, or Vue).

Here are some of the project’s requirements:

Web Components support
Progressive Web App
Server-Side rendering
JSX-like syntax and functional components
Size and performance

While, to some extent, this is all achievable by most of the popular JavaScript frameworks, Preact fully met the criteria without any hurdles and workarounds.

Let’s dig a bit deeper into some of Preact’s features that I put together from research and hands-on experience:

Web Components Support:

Unlike React, Preact uses the browser’s native addEventListener for handling events internally so it can listen to native DOM events dispatched from Custom Elements. Also, it has a special approach to know when to pass data to Custom Elements as either properties or attributes.

Here is an example from Preact official site:

If you prefer using the same library for both your Web Components and Preact components, then you can use preact-custom-element to turn any Preact component into a Web Component!

JSX and HTM:

JSX allows us to write HTML elements in JavaScript. This is very useful if you want to leverage JavaScript syntax within your templates.

Preact supports JSX out of the box but also encourages to use HTM as an alternative. HTM is a JSX-like syntax but does not require an extra build step because it uses JavaScript’s Tagged Templates Literals to bind data and properties to the template. Awesome!

React compatibility:

One of the biggest advantages of using React is its vast community, support, and libraries. Preact’s syntax is nearly identical to React and by adding a simple preact/compact layer, it allows you to use any React library and fully leverage its ecosystem. Also, it supports Hooks API using preact/hooks.

Progressive Web Apps (PWA):

PWS is a design pattern that is typically used to provide a native like-app user experience.

Preact CLI bundles your code into a highly optimized Progressive Web App with a 100 Lighthouse score. Here are some of the features that Preact CLI provides out of the box:

Code-splitting for your URL routes
Automatically generates and installs a ServiceWorker
Generates HTTP2/Push headers based on the URL

Server-Side Rendering:

Server-Side Rendering (SSR) allows you to render your application on the server as HTML string which then can be sent to the client-side. This design pattern usually improves performance and SEO.

SSR is automatically enabled with preact-cli. Here is an example from Preact official site:

Size and performance:

Although most modern JavaScript libraries and frameworks focus on performance, size, efficiency, etc. It’s worth mentioning that Preact had the smallest bundle size and fastest loading time compared to React, Vue, and Angular.

Note: this comparison was not conducted on a large-scale enterprise application. If performance and size is the main requirement for your next JavaScript project, please make sure to do enough research and testing and don’t just rely on this article.

Other cool features:

Native support for ES Modules
Helpful warnings and errors by importing preact/debug
Powerful and easy to use CLI

Final Thoughts:

Working with Preact surpassed the expectations and was very satisfying but as usual, each project has its requirements and Preact might not be the optimum solution for you and your team.

I hope this article was helpful and if you have any questions, please leave a comment below.

Bye for now!

For more related articles, you can visit my site or signup for the latest articles and updates.

The post Why I Chose Preact for my Latest Project appeared first on Muhi Masri.(https://muhimasri.com).