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!

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.

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

Practical Software Architecture Solutions from the Legendary Robert C. Martin (“Uncle Bob”) By applying universal rules of software architecture, you can dramatically improve developer productivity throughout the life of any software system. Now, building upon the success of his best-selling books Clean Code and The Clean Coder, legendary software craftsman Robert C. Martin (“Uncle Bob”) reveals those rules and helps you apply them. Martin’s Clean Architecture doesn’t merely present options. Drawing on over a half-century of experience in software environments of every imaginable type, Martin tells you what choices to make and why they are critical to your success. As you’ve come to expect from Uncle Bob, this book is packed with direct, no-nonsense solutions for the real challenges you’ll face–the ones that will make or break your projects. Learn what software architects need to achieve–and core disciplines and practices for achieving it Master essential software design principles for addressing function, component separation, and data management See how programming paradigms impose discipline by restricting what developers can do Understand what’s critically important and what’s merely a “detail” Implement optimal, high-level structures for web, database, thick-client, console, and embedded applications Define appropriate boundaries and layers, and organize components and services See why designs and architectures go wrong, and how to prevent (or fix) these failures Clean Architecture is essential reading for every current or aspiring software architect, systems analyst, system designer, and software manager–and for every programmer who must execute someone else’s designs. Register your product for convenient access to downloads, updates, and/or corrections as they become available.

Learn how to use reactive architectures on the front-end. There are many technologies using a reactive approach on the back end, but this book teaches you how the reactive manifesto can be used to benefit your front-end programming as well. You will discover what reactive programming is, what the current front-end ecosystem looks like, and how to use a range of frameworks and libraries. You will also apply specific reactive architectures in your own projects. Each concept is taught with a mix of technical explanations and real-world code implementations. The future of front-end programming and architecture is reactive – don’t get left behind: Add Front-End Reactive Architectures to your library today. What You'll Learn Understand when and why you should use a reactive architecture Apply a specific reactive architecture in a project Manage different reactive architectures Who This Book Is For Mid-senior front-end developers, tech leads, and solutions architects

Explore an alternative method of front-end application development without using frameworks or third-party libraries. This book provides you with the required skills and freedom to consider a “no framework” approach when choosing a technology for creating a new project. You’ll work through the most important issues in a clear and sensible way, using practical methods and tools to gain an understanding of non-functional requirements. This book answers questions on important topics such as state management, making a routing system, creating a REST client using fetch, and reveals the trade-offs and risks associated with choosing the wrong framework or tool for your project, as well as providing sustainable, functional alternatives. Frameworkless Front-End Development breaks down the concept of technical debt and the ways in which a framework can impact the lifespan of a project. Along with gaining a comprehensive and clear guide on coding effectively from scratch without frameworks, you will also learn some principles of technical decision-making. WHAT YOU'LL LEARN: Review how DOM manipulation worksManage the state of a front-end application with different patternsSafely migrate existing applications to a new framework or to frameworkless codeUse decision-making tools such as a Framework Compass Chart and an Architectural ClashSee how the choice of frameworks can affect the ‘health’ and lifespan of a codebase WHO IS THIS BOOK FOR: JavaScript developers; technical managers responsible for helping teams choose technology stacks for new projects; consultants intending to refactor existing JavaScript front-end codebases

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