Trying on different design frameworks: React vs. Stencil

For the ones that don’t know what a Design System, it’s basically a way to keep the things related to your brand and “look and feel” of your company organized for the digital world. This rather is just a component library is more of a process follows 3 main principles: reusability, consistency, and portability.

I’m going to focus on the front-end development side of things for putting together your design system rather than the creative part of it.

I have taken some time during the last couple of weeks to investigate Design System implementations, then after deeper analysis, I have chosen two different stacks to share some examples:

• React + (docz | Storybook)
• Stencil

The reason that I’m looking into this topic is that I’m working on this big redesign that uses Adobe AEM but also some external services that need to be styled as well. Basically, we need a way to share different components like (Footer, Header, Buttons, etc..) with external services.

React

Github code can be found here. it was made with create-react-app, storybook, and rollup.js to build and create the different outputs for pushing the lib to the npm register.

Steps to publish a lib to npm:

• Run npm login and follow the steps to login with your npm account (has to be registered beforehand at npm.js)
• Change project name in package.json to how you want the package to be called and set the version (I guess 0.0.1 will do for a start).
• Remember to work on the readme.md file to make sure others understand your outstanding work.
• Run npm publish to get it up and running.
• Whenever you add anything more, always up the version afterward before re-running the npm publish command. If you’re new to versioning, it might be good to Google the three numbers and their meaning before. :)

You can see the example of using the npm ni-react lib here.

Stencil

Github code can be found here. The code was created with the stencil CLI (command line interface).

and selecting the collection of web components:

I took the react components and move them to custom elements. It was my first time doing stencil and I’m really happy about the experience of using JSX, TS, etc. to create Standard Web Components.

You can see the example of using the npm ni-stencil lib here.

Conclusion

After playing around with these two options I decided to go with Stencil. The reason is related to external services that don’t know anything about Bundlers or npm. On the other hand with Stencil, I can add a <link> tag to my npm Library and load only the components that I need.

If you want to move a React Component to a Web Components here is a small example:

Let me know if you find a better way to ship Web components with react. Good Resource: (All the Ways to Make a Web Component)

Thanks to Luis Angel Rodríguez for taking the time and review the post.