In this post join me as I will try out Ladle, a Storybook alternative based on Vite technology, and see if the time has come for Storybook to step down and give its crown to Ladle as the industry’s component catalog leader.
I read about Ladle in the recent React Status issue, and obviously found it very interesting, for I believe that component catalogs are an essential part of developing custom components. The better and faster they are, the greater the positive impact it will have on your DX.
Ladle claims that using their solution in a project which already has Storybook enabled for it should be seamless, which is a brave claim to make given the current times complex stacks. You know that this is not always the case and when these claims face reality many things go wrong or become extra complicated.
So how about you lay back and let me dig the first trenches for ya ;)
My @pedalboardr/components package currently has Storybook enabled for it and it works well and the stories are even integrated with Cypress for E2E tests. I would like to keep that intact but enjoy the promise for better performance which Ladle allows. I will consider any smallest change in the Stories code, in order to make Ladle work, a “deal breaker”.
CD-ing to my component package and running yarn storybook I get my 'ol Storybook opened in the browser with a single Pagination component:
Nothing new here, let’s start with Ladle docs.
We install Ladle with yarn add -D @ladle/react which is supposed to be the only package needed in order for this to work. The docs do not mention the “-D” param but I think you would like to add it, if your component catalog only serves the dev mode.
The docs claim that Ladle looks for stories with this pattern: src/**/*.stories.{js,jsx,ts,tsx}, so I assume that my stories will be found.
For craftsmanship sake, I will add a new script to my package.json that will launch Ladle, right after the storybook one:
"scripts": {
"test": "jest",
"lint": "eslint ./src",
"storybook": "start-storybook -p 6006",
"ladle": "ladle serve",
"build-storybook": "build-storybook",
"cy:open": "cypress open-ct",
"cy:run": "cypress run-ct"
},
Time to try it out
yarn ladle
Holy heavens! 😳
That was blazing fast. No Webpack bundling, it just popped up in my browser. Wait… I gotta check that again and get some numbers here, running each one 3 times to get a certain average:
Storybook launch took an avg. of 10s
Ladle launch took an avg. of 3s
7s difference. Very impressive!
Below you can see how it looks. A lot less flashy than Storybook, but we don’t really care about the bling-bling wrapping our stage. I’m interested in this catalog displaying my components fast with all the required functionality.
So we know that it is blazing fast in launching. Let's see how its hot module reload reacts to changes in the component - Same here, while Storybook’s Webpack takes around 150ms for the simplest change, it seems that Ladle does that instantly, in a snap!
The “knobs” are working as expected (though the ones in this case are very basic), but I notice that when I click the story on the right panel the component disappears 😦 A bug?
Perhaps this is due to the fact that I have just a single story? Let’s try adding another story and see if that still happens…
Hmmm.
Storybook added the new story right away but Ladle appears to ignore it. I will try to re-launch it and sure enough the new story appears. Clicking on the stories on the right panel now works as expected, but…
I notice that changes to the actual story are not reflected in Ladle immediately and require a page refresh. The console spits out that Vite HMR received a “hot update” but nothing happens. Strange. Storybook on the other hand reloads as expected.
Unless I’m doing something wrong here, this is a bug that should be taken care of by the Ladle team as soon as they can. Seems that there is an issue already on the matter.
Yes, I think that this covers the basics for now, but I have to admit - Ladle is not quite there yet…
I’m sure that there are more features that Ladle offers, but at this point in time I feel it’s not quite there in the basic features I would like my component catalog to support (story hot reloading is an example for an essential one).
Having said that, this project looks very promising and I will keep a close eye on it for I believe the issues I’m currently experiencing will be resolved soon and the speed improvement here is something we cannot ignore.
As always, if you have any comments or suggestions on how this can be done better, be sure to share with the rest of us.
Hey! If you liked what you've just read check out @mattibarzeev on Twitter 🍻
Photo by Caroline Attwood on Unsplash
Top comments (5)
Awesome article Matti!
I wonder how hard it is for storybook to create a setup using vite instead of webpack...
Not hard as Storybook already has a vite builder that you can switch from webpack: github.com/eirslett/storybook-buil...
Lots of people have lack of awareness about it (op included), so when seeing Ladle it seems very appealing, but then you lose the entire ecosystem around Storybook and it's functionality. The vite builder gives you best of both worlds.
Thanks for the input! it does look like Ladle still needs more justifications, but there is another area which I did not cover, that is the whole additionl api and metadata capabilities it comes with.
There is already something like that: github.com/vitebook/vitebook
Thx mate. I understand that it is very much possible. Only thing I'm not too keen about is having yet another configuration.