Tuesday, August 31, 2021

Component Driven ClojureScript with Storybook

Component Driven?

Start small. Develop components in isolation. Don’t forget to pause & reflect on the code you’ve written. Can it be split into several small components?

✨ When you’re ready, combine your components to create features.

✨ Add the features to a view.

✨ Add the view to your app.

You can read more about Component Driven User Interfaces here.


I’ve just begun to use Storybook and currently learning about it. What I especially like so far, is that the tool encourages you to write UI components that are independent … and functional?

This makes it possible to develop user interfaces in isolation. Just pass data and actions as parameters into your components. Keep it simple. This way of working reminds me a lot of Polylith, an architecture I have used in backend focused Clojure projects and that I enjoy a lot.

ClojureScript & Storybook?

You will find a fully working example in this repo. I have added Storybook to a ClojureScript web app, using shadow-cljs, with additional npm scripts located in package.json.

Update: a new version of shadow-cljs supports ns-regexp for the npm-module target. No need to manually add new stories!

The code in my GitHub repo is a continuation of the work I’ve described in an earlier post, about combining shadow-cljs with Webpack and AWS Amplify.

The Clojure Interactive REPL and Storybook working well together.

No JavaScript quirks?

Well, yeah some. The JavaScript ecosystem is evolving fast, tools are updated with breaking changes and sometimes that causes compatibility issues. In this case it is Storybook and Webpack 5. But I have solved it with a few extra rows of configuration. Don’t worry.

An example of a Storybook story written in ClojureScript

Have a look at the fully working example at GitHub.

Many thanks to Shaolang Ai, that wrote this blog post about shadow-cljs and Storybook that I’ve learned a lot from.

Top photo by Etienne Girardet on Unsplash


David Vujic said...

Update: the example repo is updated with a configuration that will make Storybook watch & parse files way faster.

More importantly, also solves a nasty memory leak that was caused by unnecessary Webpack/Babel compilation made by Storybook. The ClojureScript code is already compiled to vanilla JavaScript without any need for Babel.

Unknown said...

Thanks for a great post. Working with Storybook in ClojureScript has almost become pleasant ��

I still need to figure out how I should approach getting Storybook to pickup Tailwind classes that are solely used in stories (and not in the actual application). Is that something you've encountered?

David Vujic said...

Thank you!

I haven't done that much work with Tailwind yet. If you haven't already looked into it, maybe the ClojureScript & Tailwind examples here could help? It is made by Jacek Schae: https://github.com/jacekschae/shadow-cljs-tailwindcss