Modern Front-end Architecture: Optimize Your Front-end Development with Components, Storybook, and Mise en Place Philosophy

by Ryan Lanciaux

Learn how to build front-end applications that can help you ship applications faster with fewer defects. Many software projects fail because they are not planned well, or lack organization. Applying strategies from other industries can help you create better software. This book explores the “mise en place” technique from cooking and reveals how you can apply it to the art of creating software. In many professional kitchens, the work of preparing a meal is divided and performed in workstations to help create the whole. You'll review the philosophy behind this and see how to leverage this approach in your code. You'll also learn to visualize your applications as a series of components and build parts of your application in isolation - just like a professional chef crafting each part of the meal. The book describes to how to structure your code base for reuse, and how to communicate the code’s intent to other developers. You’ll develop your components in isolation and test these building blocks for quality at a granular level. Then compose these components as building blocks in increasingly complicated features. Finally, you’ll apply some strategies not directly related to code to ensure maximum quality and efficiency. With Modern Front-end Architecture , developers of all levels will learn strategies that they and their teams can leverage to be more productive.
What You'll Learn Who This Book Is For Front end developers looking to maximize their code for reuse, quality, and shipping features quickly. Experienced developers will pick up new techniques that they can apply to their code base. Less experienced developers will be able to start applications off on the right foot.

144 pages, Paperback

Published February 5, 2021

Reviews

[Rocko Bauman · Rating 3 out of 5]

Very boring

[Matt Light · Rating 4 out of 5]

This book does not talk about how to come up with a frontend architecture but rather proposes a very specific architecture with React, Storybook, Hygen, Jest, etc. The author does give reasons for his decisions and evolution as the book goes on. The book was well written and I recommend it if you’re looking for a template to build up a design system component library.

[Diogo · Rating 3 out of 5]

It's useful, but talks more about storybook tool than about architecture.

[Martin · Rating 3 out of 5]

Interesting if you want to learn more about Storybooks. A lot of the API's have changed or are even deprecated, like knobs -> use controls. Some things like adding the miragejs server to storybook and the app could've been better explained. Since you have 2 apps basically in this. You have the storybook runtime and the regular create react app runtime. So if you need the server and just follow the docs of miragejs, you will not be able to find the solution. Hint: use the 'preview.js' file to add the centralized server to make it work for storybook.

Also the mdx approach was only scratched and would've been nicer to see more of a comparison as it is quite being used in the industry. Although I also find it more of a 'if you need to explain it, it's not that good'.

You will learn some things about a setup, but will need to google a lot to get updates. I would use the official docs to get started. The testing section is also a bit different nowadays. It is good and easy to get started, but might frustrate as you will need to look up some basic setup steps again. The underlying API of Server is still there, even when using 'createServer' which is newer. Falls back to 'new Server(..)'.

Definitely learned a bit about the tool and some new tools like hygen and miragejs. So gave it 3 stars as the author knows what he is talking about. Only a shame the technology changed so quickly.

[Mahdi · Rating 4 out of 5]

Architecture is more than what this book offers but I liked using the combination of Storybook, Jest and Hygen to create a maintainable React application.