Rating: 8.1/10.
Modern Front-end Architecture: Optimize Your Front-end Development with Components, Storybook, and Mise en Place Philosophy by Ryan Lanciaux
A fairly short book about modern frontend development centered around building components. The first part of the book introduces the concept of components and the benefits of having a consistent set of reusable components. It explains how to set up Storybook, which is a tool to present and gather reusable components. Storybook allows real-time changes to components based on input fields, enabling different developers on your team to take prebuilt components from the collection and add them to pages.
Components can range from atomic elements to reusable patterns, like cards or entire pages, forming a hierarchical structure. The state design should prevent inconsistent states, such as having loading and error as distinct states instead of using flags for loading and errors separately. To avoid excessive refactoring, it’s best not to split components into smaller parts until necessary.
There are several ways to style components: using basic CSS, CSS processors like SaSS, or CSS-in-JS which keeps CSS alongside components, and also utility-first styling libraries like Tailwind. To define a theme, you create a consistent set of properties in the global scope and refer to them in components rather than using absolute values.
Unit testing: React provides a library for unit testing components that can work alongside Jest, a popular JavaScript unit test runner. With this library, you can assert the presence or absence of elements on a page, check for properties like ‘disabled,’ and simulate mouse clicks programmatically. You can then verify that expected behaviors have occurred.
It’s generally better to keep parts of a feature together, rather than separating components / reducers / styles into different folders, to prevent related code from being scattered everywhere. A component often makes an API call upon loading. To prevent the API code from affecting tests, you can use Mirage JS to mock API responses. This ensures that interactions with components in Storybook result in reasonable behaviors.
The React Router is useful for routing and switching between different components based on the URL; the Link component triggers a switch to a different route. This approach differs slightly from the Next.js pattern I’m used to, where routes are determined by the file structure. A navbar component is also placed at the top of every page, containing links to all the pages.
The Hygen tool is valuable for automatically creating boilerplate files for components, tests, styles, etc, based on templates. How it works is you declare templates that define how a new component should look, then, the next time you create a new component, you can run a command line to generate all the boilerplate code, saving you from doing it manually.
Overall, this book provides a concise overview for front-end developers on how modern websites are built. The sites they use to demonstrate component usage are fairly basic, but they’re sufficient to illustrate how the various tools come together. I’m guessing most of it would be obvious to professional front-end engineers, but as someone who is self-taught and trying to build websites, it’s useful to see an example of how the webdev tooling is supposed to fit together, without having seen similar examples before.
