MODERN FRONT-END ARCHITECTURE : optimize your front-end development with components, storybook,... and mise en place philosophy

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 components Build a component library that others in an organization can leverage Ensure quality and accessibility at a component level rather than a page or app level Test code in a way that gives the maximum amount of confidence while providing an excellent developer experience Automate 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 5 About the Author 9 About the Technical Reviewer 10 Acknowledgments 11 Chapter 1: The Mise en Place Philosophy 12 Software Is Different, Right? 13 Good Software 13 What Does This Have to Do with Software? 15 Components 16 Meetings Don’t Ensure Success 18 The Workspace 19 Storybook 20 Key Takeaways 21 Chapter 2: Configuring Our Workspace 23 System Requirements 23 Installing Node.js 24 Version Managers 24 Windows Installation Instructions 25 Confirming Node Version 26 Removing Existing Node.js Installations (Windows) 26 Install nvm-windows 27 Installing Node.js (Windows) 28 Mac/Linux Installation Instructions 30 Verify Version Manager Installation (Mac/Linux) 30 Install Node.js (Mac/Linux) 31 Leveraging Node.js Built-In Utilities 31 Creating Our React Application 32 Running the Application 33 Adding Our Workspace 34 Storybook 34 Installing Storybook 35 Key Takeaways 36 Chapter 3: Our First Storybook Stories 38 Our First Storybook Stories 41 StoriesOf 42 Component Story Format 43 Component Code 44 Storybook Add-ons 48 Story Variants 51 When Should We Create a Story vs. a Knob? 53 Key Takeaways 53 Chapter 4: Creating Reusable Components 55 What Makes a Good Component? 55 It All Comes Down to Purpose 55 Additional Components 57 When Should We Abstract Components? 59 Component States 59 How Should We Arrange Our Components? 62 Classifying Component Types 62 Key Takeaways 65 Chapter 5: Styling 66 CSS 67 Benefits of CSS 68 Drawbacks of CSS 68 Preprocessors 69 Benefits of Preprocessors 70 Drawbacks of Preprocessors 71 CSS-in-JS 71 Benefits of CSS-in-JS 74 Drawbacks of CSS-in-JS 74 Utility-First Styling Libraries 74 Benefits of Utility-First Libraries 75 Drawbacks of Utility-First Libraries 75 How to Choose a Styling Solution 75 Building a Theme 76 Key Takeaways 79 Chapter 6: Ensuring the Quality of Our Components 80 Unit Tests 80 Testing React Components 83 Testing Alongside Storybook 87 Key Takeaways 89 Chapter 7: Interacting with API Data 90 Some Main Considerations 91 Feature-Based Development 92 Loading Data 94 Container/Presentational Components 98 Mock Data 98 Wrapping Up 100 Chapter 8: Building Our Application 101 Navigating Between Pages 101 Routing 104 Updating Our Application to Use Routes 105 Navigation 110 Wrapping Up 112 Chapter 9: Automating Repetitive Tasks 113 Our Own CLI 114 A Brief Example 115 Building Some Generators for Our Project 117 Adding Additional Variables to Our Generator 120 Wrapping Up 122 Chapter 10: Communicating Our Components 123 Documenting Our Components 123 More Advanced Documentation 127 MDX 128 Sharing Our Workspace 130 Wrapping Up 130 Index 131 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. You will: Structure an application as a series of components Build a component library that others in an organization can leverage Ensure quality and accessibility at a component level rather than a page or app level Test code in a way that gives the maximum amount of confidence while providing an excellent developer experience Automate repeatable tasks