1 of 26

Let’s Build & Publish our own

React Component Library 🤩📚⚛

Soham S. Shah

10/07/2021

React.js Bangalore Meetup #14

@reactify_in

2 of 26

What are we gonna talk about today? 🤔

  • WHAT are Design Systems?
  • WHY we need Design Systems?
  • HOW can we implement them?

​

  • WHAT is Storybook and WHY shall one consider it?
  • HOW to use Storybook?

​

  • WHAT is Rollup?
  • WHY Rollup?
  • HOW to Rollup?

​

​

​

  • Some Open Source Stalking
  • Some tips from the experts

​

3 of 26

About me 👨‍💻

  • Full Stack Developer neoGrad, @neogcamp Cohort
  • Ex- Full Stack Developer Intern, @Quicko
  • Open Source Contributor 💘
  • Maintaining RottenScripts, with an aim to make open-source a cake walk for everyone
  • Mentor, GSSoC’21
  • I love cosmos, philosophy and memes 😁

​

And I go by one simple principle:

“If you can’t meme it, then you don’t understand it right” ~ Anonymous

Github: @sohamsshah

Twitter: @sohamsshah_

​

4 of 26

Before moving ahead 🚶‍♂️...

Presenting What-Why-How Principle to 🚀 the learning curve 📈!

​

WHAT ignites🔥 curiosity,

WHY brings purpose & firmness to pursue consistent learning 🤓

HOW is the essentially the process of exploration & engineering 🔧 a product, skill or basically anything that you are WHAT-ing and WHY-ing about!

​

So, Let’s Get Started 🎈

5 of 26

Excited?

6 of 26

Design Systems: THE WHAT

A design system is a collection of reusable components, guided by clear standards, that can be assembled together to build any number of applications.

Some Popular Design Systems:

7 of 26

Design Systems consist of:

  • Brand - Icons, Logo, Colors, Themes etc.
  • Design Patterns and Principles
  • Design Guidelines and Tools
  • Component Library/ UI Kit (not necessarily Open Source)
  • Detailed Documentation for the designers, product managers and developers

8 of 26

Design Systems: THE WHY

  • Agile Development
  • Platforms are Expanding
  • Rising importance of attractive frontend
  • Centralized Knowledge base
  • Cross Platform Consistency
  • Component Reusability
  • Clarity
  • Better collaboration amongst Product, Design and Developer Teams

9 of 26

  • “A Developer and a Designer can never be friends” ~ Anonymous

​

​

​

​

​

​

10 of 26

Design Systems: THE HOW

  • Developers get served 🥘 with Design Patterns, Principles and all designs that are needed by the Designers and Product Managers to convert abstract, unreal and unexpected figma pieces into Reality via coding 💻
  • For us, it’s dumb to write/copy-paste the same CSS for across multiple apps and then fix them in production when the client gives us the excel sheet of UI changes 🤣
  • For that we need to setup a central UI store 🏪 that can be a single source of truth for all our apps and products!
  • Then we choose our Framework, Component Library, CSS styling approaches etc.

11 of 26

But what about...

  • When there are multiple apps relying on same design system; how to share the components amongst each other?
  • Documentation of the components
  • Designers and Product Team to perform Manual Testing (to check for accessibility, consistency etc.) and provide feedbacks, where shall they head to?
  • Any Major Design Pattern changes in a longer run? How would the developers at the organization will reflect towards that decision?

12 of 26

Introducing StoryBook 📗: THE WHAT and THE WHY

  • Most widely used UI Component Development Tool 🛠
  • Used by IBM, Github, Microsoft, Adobe and literally everyone is using Storybook for supersonic ⚡ component development, documentation and testing -all streamlined 🎃
  • makes documentation cake-walk.
  • super easy to manual test the components by altering different states, user stories, scenarios, automated accessibility tips, different screen-size toggles, deploying and what not.
  • Amazing Community
  • “Storybook has almost became a Monopoly in its game” ~ Anonymous

13 of 26

Storybook is used by:

  • Github
  • GitLab
  • Airbnb
  • Microsoft
  • IBM
  • Atlassian
  • Adobe
  • Coursera
  • Auth0
  • Atlassian
  • Shopify
  • Audi 🚗

And many others!

14 of 26

StoryBook : THE HOW

15 of 26

StoryBook Essential Pointers

  • .storybook/main.js -> controls the behavior of storybook server
  • .storybook/preview.js -> controls how stories are rendered
  • .storybook/manager.js -> controls the behavior of storybook UI

​

  • Story Parameters, Decorators, Loaders, Naming Hierarchy
  • Writing Docs with MDX
  • Publish Storybook!
  • Add-ons for accessibility, story-shots (snapshot testing with jest), etc.

16 of 26

Rollup.js : THE WHAT

  • Rollup.js is module Bundler for JavaScript that compiles our code for the Browser to understand.
  • Rollup.js is a popular choice because of its minified bundle size, allows you to write your code using the new module system, and will then compile it back down to existing supported formats such as CommonJS modules, AMD modules, etc.
  • Rollup is a bit ESM focussed and due to the static import-export syntax it handles bundling like a charm and provides various features such as tree-shaking and flat-bundling.

17 of 26

Rollup.js : THE WHY

  • We generally write code with the latest JS syntax for wonderful DX but probably we have a trade-off with the fact that:

“Browsers don’t understand”.

  • So, we might need to transpile the code (using Babel), bundle the code (using Webpack, Rollup etc.) and essentially take steps in order to convert the code in such a way that Browser understands and can execute.
  • Here for component lib, we are writing React Components in ES6 format. So we need to transpile to browser understandable-code and also bundle it in order to make our components run in client’s browser.

18 of 26

19 of 26

We got Supplies 🔫: THE HOW

Rollup.js has got awesome plugins for probably everything that we want!

  • For transpiling our modern ES6 code, we don’t necessarily need to Babel Config. @rollup/plugin-babel handles that for us!
  • To make Rollup aware of any third party Dependencies in node_modules we can use @rollup/node-resolve
  • Exclude Redundant Peer Dependencies from the bundle, we can use rollup-plugin-peer-deps-external
  • To import and handle CSS, we use rollup-plugin-postcss
  • rollup-plugin-terser to minify our code as an enhancement

20 of 26

Some Open Source Component Libraries

​

Open-Source Stalking is addictive, isn’t it 😉?

21 of 26

Some Tips 📝from some of the -

OG Open-Sourcers and Product Devs 🤩

“If you are building a component library, make sure you add all the must-have components to it before even thinking to add some out-of-the-box features. Also, to get good contributions to your project, the ultimate hack is by making product that people love to use. If they use it, then they are more likely to contribute! And keep trying different stuff, and even fail. You never know when will one of your side-hustle might shine up!”

​

~ Kushagra Gor, Creator of CSSBattle & HintCSS (8.1K ⭐)

22 of 26

“Even before you start coding, think about the scope of your library; what it will include and what not. Make Abstractions but not even too much that user loses control over the library. Consider Bundle Size, Upgradability, best practices etc. Listen to product feedbacks, but also try not to please everybody; keep vision of the product in mind. And yes, being a lot on twitter is definitely a good idea 😉!”

~ Jonny Burger, Creator of remotion.dev (7.8K ⭐)

“Document and keep the README up to date that clearly mentions the intent of the project. Not just that, also mention what it does not, so limiting the scope. Be clear with instructions for starters and most importantly, be kind and transparent.”

~ Schalk Neethling, Core Maintainer of MozDevNet (Official MDN Docs)

23 of 26

“Every OSS Project solves a problem that reappears in different projects. I treat it like a Startup🔥. I try to look at a problem that is Generic Enough so that it can impact wider spectrum of developers. Public work, showcasing on different platforms helps a lot to show the credibility and also makes you responsible and serious about your project. Building a discord community, being active on Twitter helps a lot! And yes, don’t hesitate of ask for help to the people of the community!”

~Sanket Sahu, Co-founder, Geeky-Ants & Creator of NativeBase (15.4K ⭐)

”Don’t think what a community can do for you, Think what you can do for the community.”

~Tanay Pratap, Senior Software Engineer, Microsoft &

Creator of India’s biggest Programming Community

24 of 26

So what’s stopping you from building your first 10K+ starer library?

25 of 26

Special Thanks 🤩

​

​

@neogcamp and @tanaypratap for the amazing mentorship and community 💖 and helping me learn fascinating stuff about full stack web and eventually making me fall in love with it 💻

26 of 26

THANK YOU!