Machb Frontend

Overview

Is the web an architecture? Does the fact that your system is delivered on the web dictate the architecture of your system? Of course not! The web is a delivery mechanism—an IO device—and your application architecture should treat it as such. The fact that your application is delivered over the web is a detail and should not dominate your system structure. Indeed, the decision that your application will be delivered over the web is one that you should defer. Your system architecture should be as ignorant as possible about how it will be delivered.

— ©Robert C. Martin

The most popular language for frontend development is JavaScript. It is the essential language used to create interactive and dynamic experiences on the web. Virtually all websites use some form of JavaScript, making it the lingua franca of the frontend. Key Reasons for JavaScript's Popularity in Frontend Development:

Frameworks and Libraries: JavaScript is known for its powerful frameworks and libraries which simplify and enhance UI development. Some of the most popular ones include: - React.js - AngularJS - Vue.js

The frontend is a detail, but it is a big detail. In fact, the frontend is a separate application with its own architecture.

This project uses typescript and follows the principles of Clean Architecture and is based on the code described in the article: "Moving Away from React and Vue.js".

In addition to different frameworks, there are different front-end rendering methods, which involve different approaches to processing and displaying web content. Choosing the right rendering method can have a significant impact on the performance, search engine optimization (SEO), and user experience of a web application. Here is a quick overview of the main rendering methods used in front-end development: Client-side rendering (CSR):

  1. Client-Side Rendering (CSR):
  2. All rendering occurs in the browser through JavaScript. The server sends over a minimal HTML document with linked JavaScript files, which, when executed, fetches data (usually via API) and generates HTML content dynamically.

  3. Typically used by JavaScript-heavy sites and Single Page Applications (SPAs) like those made with Angular, React, or Vue.js.

  4. Server-Side Rendering (SSR):

  5. The browser receives complete HTML content for each page from the server. This method can provide quicker First Contentful Paint (FCP) and is beneficial for SEO because search engines crawl the fully rendered HTML for content.

  6. Commonly implemented in modern frameworks like Next.js for React and Nuxt.js for Vue, which provide built-in SSR capabilities.

  7. Static Site Generation (SSG):

  8. Pre-renders HTML at build time rather than on each user request, making the site very fast as the HTML is ready to be served immediately. Ideal for content that doesn't change often.

  9. Popular frameworks include Gatsby for React, Hugo, Jekyll, and Next.js configured for static output.

  10. Incremental Static Regeneration (ISR):

  11. A relatively new feature available in Next.js that allows for static pages to be updated after they’re built. Pages are re-rendered in the background at configurable intervals or on-demand, permitting up-to-date content without a full rebuild or server load of traditional SSR.

  12. Ideal for sites with content that changes periodically but doesn't require instant updates.

  13. Dynamic Rendering:

  14. A technique in which a server delivers different content based on the user-agent making the request. Useful for offering fully rendered pages to bots for SEO while serving a more interactive, script-heavy version to actual users.

  15. This method can be set up using puppeteer and dedicated services like Rendertron.

  16. Progressive Web Apps (PWA):

  17. Combines features offered in modern browsers with the benefits of mobile experience to act like native apps. PWAs can load interactive content quickly, work offline, and load only the necessary resources.

  18. An enhanced experience can be crafted using service workers and Cache API for managing how content is cached and served.

  19. Hybrid Rendering:

  20. A blend of SSR and CSR, where critical content is rendered from the server and additional content is rendered from the client as needed. This can aid in faster initial load times while keeping the interactivity of an SPA.

  21. This approach is becoming more popular as frameworks support mixed modes more natively.

  22. Pre-rendering:

  23. Similar to SSG, but typically focuses on rendering specific routes or pages in advance rather than the entire website, often used for marketing pages or landing pages within dynamic applications.

Each rendering technique has its own strengths and weaknesses and is chosen based on the specific needs of the project, such as speed, SEO, interactivity, and the frequency of content updates. Understanding these can help in picking the appropriate strategy to achieve both a great user experience and optimal performance.

Project Structure

License

Apache-2.0

References