# Table of contents - Brief History - System Architectures - Monolithic - Microservices - Serverless - Architectural Patterns - MVC(S) - MVVM - Flux - Frontend Architectures - Single Page Applications (Client-Side Rendering) - Server-Side Rendering - Static-Site Generators - Progressive Web Apps # Brief History Early 1990s: In the early days of the web, websites consisted primarily of static HTML pages. Each page was a separate stored HTML file, and served when requested. Mid 1990s: Common Gateway Interface (CGI), allowed web servers to execute programs (often written in Perl or C), generating HTML on the fly. This was the birth of server-side web programming. Late 1990s: Languages like PHP, ASP, & JSP allowed devs to embed code into HTML, making it easier to create dynamic websites & leading to CMS & e-commerce platforms. Early 2000s: The concept of web applications emerged, mimicking desktop apps. Devs began separating concerns into tiers: presentation tier (UI), application tier (business logic), data tier (database). Model-View-Controller (MVC) was adapted for web applications. Mid 2000s: AJAX and Web 2.0 allowed parts of a web page to be updated via async comms with server, leading to more responsive web applications. 2010s: Single page applications and client-side frameworks like AngularJS, React, and Vue.js shifted much of the app logic to the client, with the server reduced to an API endpoint. Node.js allowed JavaScript to be used server-side. 2010s-present: Microservices and serverless architectures decomposed applications into smaller, more manageable and scaleable parts. # System Architectures System architectures describe how entire systems are structured and deployed, beyond the level of a single application or service. Differs from architectural patterns (MVC, MVVM, etc.) ##### Monolithic Architecture - Entire app is built as a single unit. - Simpler to develop and deploy for smaller architectures. - Can become complex and harder to maintain as the app grows. ##### Microservices Architecture - App is divided into small, independent services. - Each service can be developed, deployed, and scaled independently. - Increases complexity but offers better scalability and flexibility. ##### Serverless Architecture - Relies on cloud providers to manage server infrastructure. - Developers focus solely on writing function-level code. - Can be very cost effective and scalable but may lead to vendor lock-in. # Architectural Patterns - Architectural patterns focus on the organization and structure of code within an application or service. - Can be applied whether the system is monolithic, microservices, or serverless. - Primarily affects how devs structure and write their code. | Architecture | Components | Pros | Cons | | ------------ | ---------------------------------- | ----------------------------------------- | ---------------------------------- | | MVC | Model, View, Controller | Clear separation of concerns, scalable | Can become complex with large apps | | MVCS | Model, View, Controller, Service | Reusable services, separation of concerns | More layers can add complexity | | MVVM | Model, View, ViewModel | Two-way data binding, testable | Can be complex to implement | | Flux | Actions, Dispatcher, Stores, Views | Unidirectional data flow, easy to debug | Boilerplate code, learning curve | # Frontend Architectures Frontend architectures define how the UI and client-side logic of a web app are structured and delivered to the user. | Architecture | Overview | Pros | Cons | | ------------------------ | -------------------------------------------------------------------------------------------------------------- | --------------------------------------- | -------------------------------------------------------- | | Single Page Applications | Single HTML page dynamically updated. Client-side rendered. (React, Angular, Vue.js) | Smooth UX, reduced server load. | Initial load can be slow, SEO challenges. | | Server-Side Rendering | Full HTML page generated on server. Can be combined with SPAs. | Better initial load time, improved SEO. | Higher server load, potentially slower page transitions. | | Static Site Generators | Generates static HTML files at build time. Often used for blogs or documentation. (Hugo, Gatsby) | Fast loading, great SEO, cheap. | Not suitable for dynamic content. | | Progressive Web Apps | Web apps that use modern web capabilities for app-like UX. Has offline mode, push notifs, home screen install. | Works across all devices, no app store. | Limited access to native device features. | See [[Server-side rendering vs Client-side rendering]]