React Cosmos – Build UIs at Scale
reactcosmos.org
reactcosmos.org
Yes, Cosmos is very similar to Storybook. It's also older, and I'm only saying this because I'm tired of getting asked how does it differ. Both projects provide an isolated component environment to help tackle complexity in single page apps. The difference boils down to setup compatibility and personal taste.
I'm not gonna lie, some of the comments are tough to process, but what can you do. I still appreciate all feedback and as usual I'll try to incorporate it as best as I can.
Cosmos looks awesome. Thank you for all your hard work. I've been using Storybook for a while, but I'll give Cosmos a try on my next project.
As someone who is currently learning React coming from a Rails background, the communities and their sensibilities couldn't be more different:
Rails: readability, simplicity, stability, "convention over configuration"
JS: the opposite
JS is a horrible kludge that malignantly outgrew its original purpose. Incidentally, it's also the programming language sites happen to use to become unusable and abuse the user, but we'd be in the same boat if they used Python or whatever else, so the hate for JS that comes out of that is unfair.
I know your take is balanced but others in HN loveeee to hate JS just because they think its what they are supposed to do.
I don't have a horse in this race though. I don't use Javascript or C++ in any meaningful capacity these days.
I do find some of the documentation/presentation à little bit confusing. I gather that when it says "fixture" - that means scaffolding to render a given component. When it says "visual tdd" - it does not mean to imply repeatable, automated red-green tests, but rather that it provides a sort of wysiwyg - or rather - wyciwys (what you code is what you see).
It's a band aid on the fact that we should be able to just draw widgets in a rich editor, but are stuck using text (code) to implement them?
(I don't mean band aid in a bad way for the project - it's just were we're at with web ux/ui. It's a bit like having postscript, but no wysiwyg dtp program to go with it).
I can assure you I care a lot more about delivering value than hype. I spent countless hours (from my personal time) over the last 6 years on making React Cosmos easy to use and compatible with as many codebase configurations as possible, and maybe two weeks on the website.
The project README explains what the project does and what it doesn't: https://github.com/react-cosmos/react-cosmos/blob/main/READM...
There is an open thread about website feedback, and I agree I could've done a better job and there is still room for improvement: https://github.com/react-cosmos/react-cosmos/issues/1111
Us HN folks can appear a bit grumpy at times ;)
I've got some ideas how your website could be improved... I'll have a look at the open thread.
I think the biggest single improvement you should make is adding a paragraph above the fold that describes in as plain terms as possible what your project does, and the problems it solves. Most of your bullet points on the website describe your project as being different or better than something - but the reader has no reference for what that baseline something is.
For example, “Don’t settle for localhost:3000” - this doesn’t give me any information about what the project does, or why it’s better.
Your README is much better than the website! Here’s how I’d summarize the bullet points at the top of the README into a paragraph you can put above the fold on your site:
React Cosmos is a component development, test, and preview environment separate from your application. Iterate on individual components in isolation. Build a library of test component props & states that you can run visual regression tests against. Cosmos is flexible enough for use with different bundlers and build systems.
I do agree that some things are buried. The docs didn’t lead me to the information I needed as quickly as I think they could have for example.
Overall I’m excited to give this a shot. It seems like a great tool.
The workflow is all the jank that comes with HMR, or worse, reloading entire pages to see changes.
The port number isn’t a specific thing so much as an allusion to the workflow most people use. You’re focused on a single component quite often, but working with it in an entire page served through your entire app server. It’s overkill and slower than necessary, and sometimes comes with all kinds of state frustrations outside of the scope of your component.
Changing the port doesn’t inherently change the workflow, it’s just calling out which port most of us use for that workflow and suggesting to investigate what could be better than that workflow.
They’ve made some changes to the page now, so hopefully this isn’t a source of confusion anymore.
- GitHub star count in huge text at the top, seeking validation?
- Doesn't explain what the heck the project does, but "React Cosmos 5 in 21 tweets" ... I have to read a thread of tweets to understand what this is for?
- "Don't settle for localhost:3000" okay, demean the way that tons of us develop web based applications currently
The docs tell you to open it on port 5000, which is a higher number, so it's obviously better.
Jokes aside, it did take me a long time to figure out what the product was, and I'm still not sure I fully understand. At the moment I just feel a bit overwhelmed by buzzwords, and I don't see how this would benefit my development experience.
No offense to the product creator though, I'm sure it's a great tool.
Even that wasn't high level enough but their twitter headline is: "A tool for ambitious UI developers"
So piecing it all together I'd guess that it's an online IDE that combines some clever stuff with components :shrug:
Great explanation thanks
Your landing page is beautiful, but it does a poor job explaining itself.
Pretty accurate. Cosmos is an isolated component environment. You can load components separately for regular development, as well as for automated visual regression testing.
> What else does this do? What problem does it solve? How does it solve that? Saying it solves "Reusable components" is pretty generic, could use some expansion on how it actually helps in this regard.
I get that it's confusing, but the landing page literally addresses this:
- "Develop one component at a time. Isolate the UI you're working on and iterate quickly. Reloading your whole app on every change is slowing you down!"
- "Bookmark component states, from blank states to edge cases. Your component library keeps you organized and provides a solid foundation of test cases."
Scroll down and it goes into more detail in 6 concise paragraphs.
> The live demo doesn't really work on mobile
That's true. But you can't really develop React apps on mobile either. React Cosmos is desktop dev tool that you run locally as part of your codebase.
Right next to the demo, however, there's a link to a 21-tweet thread with specific functionality, code examples and visuals included: https://twitter.com/ReactCosmos/status/1189127279533793281
I will 100% be trying out cosmos the next time I need to develop a React component, but Twitter is an awful way of sharing large amounts of info and if I have to leave your website to go to twitter to find out what your product is and how to use it, something isn't right.
Either way, I understand it's OSS and your time is valuable, so thanks for this!
I definitely see a future where the IDE has much more awareness of your development environment, this is a step in that direction at least for React.
Game developers get a lot of these benefits from their IDE typically having more tools than webdevs with a text editor. Hoping to see more of this in the future!
I'm using Storybook with React-Native, and it does feel like I'm developing web components, and then trying to use them in an app later, but that's my only real complaint with Storybook.
If I understand correctly, as opposed to loading your components in isolation in Storybook, you're providing them with a context similar to the actual app they're going to exist in?
https://storybook.js.org/docs/react/essentials/toolbars-and-...
> Dan Abramov
Is this just a general quote from Dan, or is it about this product specifically?