Imagine what a large-scale web project would look like if frontend development were not treated as an add-on, but as an equal partner with backend development and content strategy. This practical book takes experienced web developers through the new discipline of frontend architecture, including the latest tools, standards, and best practices that have elevated frontend web development to an entirely new level. Using real-world examples, case studies, and practical tips and tricks throughout, author Micah Godbolt introduces you to the four pillars of frontend architecture. He also provides compelling arguments for developers who want to embrace the mantle of frontend architect and fight to make it a first-class citizen in their next project. The four pillars include: Code: how to approach the HTML, CSS, and JavaScript of a design system Process: tools and processes for creating an efficient and error-proof workflow Testing: creating a stable foundation on which to build your site Documentation: tools for writing documentation while the work is in progress

Imagine what a large-scale web project would look like if frontend development were not treated as an add-on, but as an equal partner with backend development and content strategy. This practical book takes experienced web developers through the new discipline of frontend architecture, including the latest tools, standards, and best practices that have elevated frontend web development to an entirely new level. Using real-world examples, case studies, and practical tips and tricks throughout, author Micah Godbolt introduces you to the four pillars of frontend architecture. He also provides compelling arguments for developers who want to embrace the mantle of frontend architect and fight to make it a first-class citizen in their next project. The four pillars include: Code: how to approach the HTML, CSS, and JavaScript of a design system Process: tools and processes for creating an efficient and error-proof workflow Testing: creating a stable foundation on which to build your site Documentation: tools for writing documentation while the work is in progress

What's the answer to today's increasingly complex web applications? Micro-frontends. Inspired by the microservices model, this approach lets you break interfaces into separate features managed by different teams of developers. With this practical guide, Luca Mezzalira shows software architects, tech leads, and software developers how to build and deliver artifacts atomically rather than use a big bang deployment. You'll learn how micro-frontends enable your team to choose any library or framework. This gives your organization technical flexibility and allows you to hire and retain a broad spectrum of talent. Micro-frontends also support distributed or colocated teams more efficiently. Pick up this book and learn how to get started with this technological breakthrough right away. Explore available frontend development architectures Learn how microservice principles apply to frontend development Understand the four pillars for creating a successful micro-frontend architecture Examine the benefits and pitfalls of existing micro-frontend architectures Learn principles and best practices for creating successful automation strategies Discover patterns for integrating micro-frontend architectures using microservices or a monolith API layer

Micro Frontends in Action teaches you to apply the microservices approach to the frontend. Summary Browser-based software can quickly become complex and difficult to maintain, especially when it’s implemented as a large single-page application. By adopting the micro frontends approach and designing your web apps as systems of features, you can deliver faster feature development, easier upgrades, and pick and choose the technology you use in your stack. Micro Frontends in Action is your guide to simplifying unwieldy frontends by composing them from small, well-defined units. Purchase of the print book includes a free eBook in PDF, Kindle, and ePub formats from Manning Publications. About the Technology Micro frontends deliver the same flexibility and maintainability to browser-based applications that microservices provide for backend systems. You design your project as a set of standalone components that include their own interfaces, logic, and storage. Then you develop these mini-applications independently and compose them in the browser. About the Book Micro Frontends in Action teaches you to apply the microservices approach to the frontend. You’ll start with the core micro frontend design ideas. Then, you’ll build an e-commerce application, working through practical issues like server-side and client-side composition, routing, and maintaining a consistent look and feel. Finally, you’ll explore team workflow patterns that maximize the benefit of developing application components independently. What’s Inside - Create a unified frontend from independent applications - Combine JavaScript code from multiple frameworks - Browser and server-side composition and routing - Implement effective dev teams and project workflow About the Reader For web developers, software architects, and team leaders. About the Author Michael Geers is a software developer specializing in building user interfaces. Table of Contents PART 1 - GETTING STARTED WITH MICRO FRONTENDS 1 What are micro frontends? 2 My first micro frontends project PART 2 - ROUTING, COMPOSITION, AND COMMUNICATION 3 Composition with Ajax and server-side routing 4 Server-side composition 5 Client-side composition 6 Communication patterns 7 Client-side routing and the application shell 8 Composition and universal rendering 9 Which architecture fits my project? PART 3 - HOW TO BE FAST, CONSISTENT, AND EFFECTIVE 10 Asset loading 11 Performance is key 12 User interface and design system 13 Teams and boundaries 14 Migration, local development, and testing

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.

Front-end development has become too big, too important, too complex and too expensive to be treated as a mere sub-part of the web development pipeline. In order to break free from survival mode and move toward "continuous innovation", robust methodological principles for Front-end Architecture are needed. Simply choosing a tech stack and configuring a dev environment is not enough anymore. So how should Professional Front-end Architecture work look like?PROFESSIONAL FRONT-END ARCHITECTURE offers a curated list of foundational principles selected explicitly for front-end architecture, aiming to help architects and those vested with architectural responsibilities do excellent professional work. It presents a proposal for the role and the field of front-end architecture based on a higher level of abstraction than is currently understood. It will review its importance, tasks, traps, pitfalls, best practices, the problems it solves, the business value it adds, and its trade secrets, as well as how to run successful front-end projects and front-end shops.If you are a front-end architect seeking a continued education, a developer aiming to become a front-end architect, a manager or engineer looking for formal preparation in performing architectural work, a manager needing guidance in hiring and monitoring the work of architects, a recruiter wanting a better understanding of the field, or a person with influence over architectural decisions... then this book is for you!