DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for Redwood's Revenge Walkthrough PT I, Storybook
Noah Hein
Noah Hein

Posted on • Updated on

Redwood's Revenge Walkthrough PT I, Storybook

Redwood is a full-stack framework that combines many of our favorite JavaScript libraries into a fully integrated development experience that allows you to optimize for productivity and scalability.
It's catch phrase is:

Bringing full-stack to the jamstack

I want to take you along my journey learning RedwoodJS, starting with part II of the tutorial on the official website.

# Prerequisites

There is nothing too complicated about Redwood if you are already familiar with the underlying technologies and is even a good way to learn some of them, however where I will be starting this blog won't make much sense if you haven't read my friend Anthony's RedwoodJS Series.

# Beginning

Alright, so you have done some reading, gotten through the first portion of the redwood tutorial, and have yourself a nice blog site to call your very own. If you are following the PT II tutorial they say you can continue with your repo from the first portion of the tutorial; however you would be unable to follow along 1-for-1. I used the new repo, however you may find the additional work you do in keeping parity with the tutorial leads you to learn more than you otherwise would.

# Storybook

This piece of tech was completely new to me going into this tutorial; if I am being honest I was rather skeptical of how exactly it was going to be useful. After using it in just the brief time that I have, I can not imagine going back to doing something else. Simply put, if you are using reusable components in your UI that have props passed into them, storybook gives you a incredible developer workflow.

Pieces of tech like this aren't normally of great value to a newer developer such as myself, as learning to actually integrate it into my workflow takes even longer than my potential productivity gains. My projects tend to be smaller in scope, so I would have traditionally viewed this as more of an "enterprise" tool. However, Redwood gives this tooling and integration with your project for the low configuration cost of......Free! It Just Works β„’. If you have picked up on ANYTHING in the Redwood philosophy, it should be that adding new technologies to your project does not need to be so painful.

With no prior experience to Storybook or any similar tech, I was able to quickly get productive with it. I understood what its' purpose was, how to use it, and how to navigate the docs to dig deeper if I needed to. It felt almost like a form of testing, but instead of testing code, it tested design. I could quickly slap code together to see how things looked. The real kicker for me was that all of it would be based off of data that had the same shape I would be using.

This portion of the data was a big selling point for me. All of the other stuff is non-trivial, and I don't want to discount how great all of it is. That being said, having redwood create a file for me that would allow me to mock the data without actually making a graphql call was mind blowing to me. I adjusted my SomeCell.mock.js, and then with no other code changes Story Book would display new data.

Story book seemed good, but the Redwood functionality sprinkled on top pushed it over the edge for me. When I am building an mvp, I like to do my UI portion first, and then build out my queries for my use-cases.
This usually involves a bit of breaking, fixing, and re-breaking my frontend as I fully integrate my api into my UI. Storybook with Redwood fixes all of that.

# Lessons Learned

Storybook is good. Storybook with RedwoodJS is AMAZING. If you have not given it a whirl before, the tutorial is a great place to get a feel for how it feels to build out a redwood application. In addition, if you don't have figurative streaks of grey in your programming beard, Redwood is an excellent way to learn some of the proper development workflows that not only keep you productive, but keep your code hygienic.

Really, try it out.

Seriously.

Alt Text

# Conclusion

I know I did not go over individual lines of code, but I really want to have this series be my impressions of the tutorial, as it is excellently written by Rob Cameron on the core Redwood team. I haven't found myself needing to go elsewhere to figure out why something isn't working. I would be foolish however to not tell you where to go should you come into a problem that you can't fix on your own!
The community around this project is truly like none other, and you could not ask for a friendlier bunch of folks. You can catch people over on the community forums. There is also a discord if you want to pop in and say hi, or if you have a quick question you need help with.

Top comments (2)

Collapse
 
cannikin profile image
Rob Cameron

I wrote that tutorial! I’m glad you found it so useful. :) Storybook really is like having a superpower, isn’t it?

Collapse
 
nheindev profile image
Noah Hein Author

I updated it to link to your twitter! I had suspicions you were the main driver behind it, but wasn't sure if you were sole author or not.

🌚 Browsing with dark mode makes you a better developer.

It's a scientific fact.