A story on Frontend Architectures - Birth of the FE engineer

In recent discussions, we have explored various application architecture patterns, emphasizing the critical importance of isolating business logic and code within an organization. Early decisions made during application development profoundly influence future consistency and maintainability. A misstep at this stage can result in costly and time-consuming changes later in the application lifecycle. When focusing specifically on frontend architecture patterns, it becomes imperative to understand how web pages are delivered and dynamically updated for the user experience. This series will further explore application-level architectures for modern web products, including Single Page Applications (SPAs) utilizing frameworks like React, Vue, and Angular, Backend for Frontend (BFF) patterns, and server-side rendering techniques such as SSG (Static Site Generation), ISR (Incremental Static Regeneration), and SSR (Server-Side Rendering) with technologies like Next.js, Nuxt, and Astro. Other topics include frontend monoliths and microfrontend architectures. Historically, web applications were built as Multi Page Applications (MPAs), where each user interaction triggered a full page reload by fetching a new HTML document from the server. These server-controlled, thin-client applications relied minimally on JavaScript, resulting in slow and less responsive user experiences. To improve this, AJAX (Asynchronous JavaScript and XML) was introduced, enabling partial page updates without reloading the entire HTML document. AJAX brought forward the XMLHttpRequest API, facilitating asynchronous data requests and responses, thus enhancing interactivity through techniques like Promises and callbacks, which later evolved into the widely used fetch() API. However, as applications increased in complexity, the performance limitations of JavaScript engines became apparent. Heavy reliance on DOM manipulations and numerous asynchronous calls made managing frontend logic cumbersome. Addressing these challenges, Google introduced the V8 JavaScript engine, a pivotal breakthrough in web development. V8 implemented Just-In-Time (JIT) compilation, translating JavaScript into optimized native machine code instead of interpreting it line-by-line. It also incorporated advanced optimizations such as hidden classes, inline caching, and an improved garbage collector. The advent of V8 not only accelerated JavaScript execution but also fostered the creation of Node.js in 2009, which significantly expanded the JavaScript ecosystem both on the client and server sides. Complemented by innovations like client-side routing using the History API, virtual DOM implementations, component-based modularization, and bundlers, these technologies collectively enabled SPAs. SPAs deliver seamless navigation without page reloads, client-rendered user interfaces, and maintainable modular codebases. The emergence of SPAs represents a landmark moment in frontend engineering, effectively giving rise to the dedicated role of frontend engineers. They opened up possibilities for more interactive and complex web applications, fueling the popularity of dashboards and Software-as-a-Service (SaaS) platforms. This evolution also inspired the development of groundbreaking libraries and frameworks by leading technology companies. While SPAs transformed frontend development, they also set the foundation for further architectural advancements that continue to shape the future of web applications.