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

Description

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 Structure an application as a series of componentsBuild a component library that others in an organization can leverageEnsure quality and accessibility at a component level rather than a page or app levelTest code in a way that gives the maximum amount of confidence while providing an excellent developer experienceAutomate repeatable tasks 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.  Table of Contents About the Author About the Technical Reviewer Acknowledgments Chapter 1: The Mise en Place Philosophy Software Is Different, Right? Good Software What Does This Have to Do with Software? Components Meetings Don’t Ensure Success The Workspace Storybook Key Takeaways Chapter 2: Configuring Our Workspace System Requirements Installing Node.js Version Managers Windows Installation Instructions Confirming Node Version Removing Existing Node.js Installations (Windows) Install nvm-windows Installing Node.js (Windows) Mac/Linux Installation Instructions Verify Version Manager Installation (Mac/Linux) Install Node.js (Mac/Linux) Leveraging Node.js Built-In Utilities Creating Our React Application Running the Application Adding Our Workspace Storybook Installing Storybook Key Takeaways Chapter 3: Our First Storybook Stories Our First Storybook Stories StoriesOf Component Story Format Component Code Storybook Add-ons Story Variants When Should We Create a Story vs. a Knob? Key Takeaways Chapter 4: Creating Reusable Components What Makes a Good Component? It All Comes Down to Purpose Additional Components When Should We Abstract Components? Component States How Should We Arrange Our Components? Classifying Component Types Key Takeaways Chapter 5: Styling CSS Benefits of CSS Drawbacks of CSS Preprocessors Benefits of Preprocessors Drawbacks of Preprocessors CSS-in-JS Benefits of CSS-in-JS Drawbacks of CSS-in-JS Utility-First Styling Libraries Benefits of Utility-First Libraries Drawbacks of Utility-First Libraries How to Choose a Styling Solution Building a Theme Key Takeaways Chapter 6: Ensuring the Quality of Our Components Unit Tests Testing React Components Testing Alongside Storybook Key Takeaways Chapter 7: Interacting with API Data Some Main Considerations Feature-Based Development Loading Data Container/Presentational Components Mock Data Wrapping Up Chapter 8: Building Our Application Navigating Between Pages Routing Updating Our Application to Use Routes Navigation Wrapping Up Chapter 9: Automating Repetitive Tasks Our Own CLI A Brief Example Building Some Generators for Our Project Adding Additional Variables to Our Generator Wrapping Up Chapter 10: Communicating Our Components Documenting Our Components More Advanced Documentation MDX Sharing Our Workspace Wrapping Up Index