Forem: yahyanaim

Hydration in Web Development

yahyanaim — Sat, 13 Jan 2024 16:53:54 +0000

Hydration refers to the process of attaching JavaScript behavior to HTML elements that have been rendered on the server. It is an important step in making a web page interactive and dynamic.

What's the problem that Hydration solve?

When a web page is initially rendered on the server, it is in a static HTML form. This means that the content is pre-rendered and lacks interactivity.

to provide a dynamic and interactive user experience, JavaScript frameworks and libraries are used on the client-side .

These frameworks attach event listeners to HTML elements and update component states, allowing for interactivity.

Hydration addresses the problem of reconciling the static server-rendered HTML with the dynamic behavior on the client-side.

It ensures that the interactive features and functionality of the web application are seamlessly applied to the server-rendered content without losing any previously rendered content or state.

Hydration in Practice:

Lazy-loading the JavaScript: Progressive Hydration ?!

The lazy-loading is refer to a technique used to optimize the loading and execution of JavaScript code. It involves delaying the loading of JavaScript files until they are actually needed, rather than loading them all at once during the initial page load.

Progressive hydration takes the concept of lazy-loading a step further by selectively hydrating specific JavaScript functionality as it becomes necessary.

Instead of hydrating the entire JavaScript codebase, only the components or features that the user interacts with are hydrated.

Here's an exemple to unserstand what is the lazy-loading :

In this example, we have a placeholder element (<div id="lazy-component-placeholder"></div>) that serves as a marker for the component that will be lazily loaded. Initially, only the placeholder element is rendered on the page.

When the placeholder element enters the viewport (10% of it becomes visible), the Intersection Observer triggers the handleIntersection callback.

Inside the callback, we stop observing the element, and then we dynamically create a <script> element and set its src attribute to the JavaScript file containing the lazy-loaded component. Finally, we append the <script> element to the <body> to load the JavaScript file.

By using this approach, the JavaScript file for the lazy-loaded component is only fetched and executed when it is actually needed, improving the initial page load time and overall performance.

Islands: Partial Hydration

A web page as mostly static HTML that doesn't need to be re-rendered or hydrated in the browser. Inside it there are a few places where a user can interact which we can refer to as our "Islands".

This approach called "Partial Hydration" since we only need to hydrate those islands and can skip sending the JavaScript for anything else on the page.

With islands, the web page is divided into independent sections or components, each responsible for its own hydration.

These sections, also referred to as islands, can be separate modules, widgets, or even entire sections of the page. Each island can have its own JavaScript dependencies, state management, and interactivity.

To undersatnd this approche here's an exemple :

In this example, we have a parent component (ParentComponent) that includes an island component, When the user clicks the "Show Island" button, the state isIslandVisible is set to true, and the island component is rendered.

The island component is a simple

element with a heading (<h2>) and some content (<p>).

By conditionally rendering the island component based on the isIslandVisible state, we achieve the selective hydration of the island component.

The island component is only hydrated and rendered when the user triggers it by clicking the button.

Out of Order Hydration ?!

Imagine you're developing a social media application with a feed of posts. Each post on the feed contains various components, such as the user avatar, username, post content, and comments. When a user opens the feed, they should be able to see and interact with the posts as quickly as possible.

In the hydration approach, the entire feed would be hydrated in the order it appears in the HTML structure. This means that the user would have to wait for the entire feed to be hydrated before they can start scrolling, liking posts, or leaving comments.

With out of order hydration, you can prioritize the hydration of the posts that are currently visible in the user's viewport, allowing them to immediately interact with those posts while the remaining posts are hydrated in the background.

Explaination :

The Feed component fetches the feed data from an API and renders multiple Post components based on that data.

With out of order hydration, you can modify the rendering logic in the Feed component to prioritize the hydration of posts visible in the user's viewport.

This can be achieved using techniques like code-splitting or virtualization libraries such as react-window or react-virtualized.

By prioritizing the hydration of visible posts, the initial rendering and interactivity of the feed can be significantly improved. The user will be able to scroll, like posts, and leave comments on the visible posts while the remaining posts are hydrated in the background.

As the user scrolls down the feed, additional posts outside the initial viewport can be lazily loaded and hydrated as they come into view, further optimizing the performance and resource usage of the application.

Server Components

In Server Components, component logic such as data fetching and database mutations is executed exclusively on the server. This proximity to the data source eliminates unnecessary client-server round trips, letting your app simultaneously fetch data and pre-render your components on the server.

here's an exemple :

Here, we are able to asynchronously fetch data from an external source and pre-render the content entirely on the server. The generated HTML template is then seamlessly streamed into the client-side React tree. Server Components can also import Client Components as seen with the AddPostButton import above.

Using Server Components offers many performance benefits because they never re-render, resulting in faster page loading times. Unlike in rendering techniques like SSR and SSG, the HTML generated by RSCs is not hydrated on the server and no JS is shipped to the client. This significantly increases page load time and reduces the total JavaScript bundle size.

Conclusion:

The field of optimizing SPA is constantly evolving, with new techniques emerging regularly. The truth is, the best solution often involves combining different approaches.

Imagine a scenario where we have a compiler that generates sub-component islands, supports lazy loading and code-splitting, incorporates out of order hydration, and includes server components for server-side rendering. This combination could offer significant benefits.

On one hand, this approach could greatly improve performance, reduce payload size, and enhance interactivity. The compiler would enable efficient code-splitting and lazy loading, while out of order hydration would prioritize critical components. Server components would further optimize performance by rendering on the server.

In conclusion, while the ideal solution varies depending on project requirements, ongoing research and development aim to provide more efficient and user-friendly web experiences.

This revised version maintains the key points while reducing the length and simplifying the language.

Devops Vs Agile :

yahyanaim — Mon, 09 Oct 2023 16:28:10 +0000

Agile et DevOps sont deux pratiques courantes utilisées dans le développement logiciel moderne. La méthodologie agile a commencé à gagner beaucoup d'adhésion au début des années 2000. Au départ, elle a complètement transformé la façon dont les équipes travaillaient sur les logiciels et autres produits, et a été largement adoptée comme nouvelle norme industrielle.
Elle n'a pas perdu de faveur auprès des équipes de développement logiciel, mais certaines entreprises ont commencé à remarquer une séparation entre les développeurs et les processus et exigences de l'équipe des opérations.
Les développeurs écrivent le logiciel tandis que les équipes des opérations déploient et gèrent les produits logiciels. La méthodologie DevOps est née du besoin d'aligner les équipes de développement et d'opérations. Est-ce qu'elle remplace l'agile ? Ou est-ce que les deux travaillent de concert ?
Il y a de nombreuses similitudes et de nombreuses différences entre les deux, et il n'est pas toujours clair s'ils travaillent ensemble ou si chaque entreprise doit choisir une approche. Examinons de plus près DevOps vs Agile pour découvrir quelle approche conduit à une plus grande efficacité et à des résultats plus fiables.

**
**
DevOps est une pratique de développement logiciel axée sur la création de valeur en resserrant les liens entre les personnes, les processus et la technologie.
L'objectif est d'aider à combler le fossé entre les développeurs de logiciels et les opérations, plutôt que d'avoir des équipes de développement qui écrivent des applications pour les remettre à une équipe d'opérations complètement séparée qui les déploie et les gère sans avoir aucune idée de leur mode de développement.
Dans le cadre de DevOps, les équipes de développement et d'opérations travaillent ensemble tout au long du développement, du déploiement et de la gestion continue.
Dans de nombreuses situations, DevOps nécessite la collaboration des équipes de développement, des opérations informatiques, de l'ingénierie qualité et de la sécurité. Cela aide à créer plus d'efficacité dans l'ensemble du processus de lancement d'un nouveau produit, d'une version ou d'une mise à jour.
L'approche DevOps valorise la stabilité et la cohérence, et accorde une grande importance à l'amélioration et à l'optimisation des processus. Elle aide les entreprises à augmenter leur efficacité, à tirer parti des processus programmables et à mettre en place davantage d'automatisation.
Contrairement à l'agile, qui est une méthodologie réservée aux équipes de développement, DevOps est pluridisciplinaire. Il implique le développement, les opérations et l'assurance qualité, en connectant de manière transparente tous les domaines de la production logicielle.
Le résultat est une intégration continue, une livraison continue et un déploiement continu, sans aucun écart.

Qu'est-ce que l'agile ?
L'agile est une approche itérative du développement logiciel basée sur le Manifeste Agile. Elle est centrée sur la collaboration, les retours des clients et la réalisation de livraisons de produits rapides et efficaces.
Elle est apparue au début des années 2000 et a aidé les équipes de développement à faire face aux conditions changeantes du marché et aux besoins de leurs clients.
Les fondamentaux de l'agile reposent sur l'effort de créer un prototype fonctionnel ou une version en cours de développement, en tenant compte des besoins et des exigences en constante évolution. Elle est liée à la production lean et implique une étroite collaboration entre les parties prenantes et les développeurs.
Le travail se fait par petites étapes, avec des corrections constantes en cours de route. L'un des principaux avantages de l'agile est que si les clients ne sont pas satisfaits d'un produit logiciel, des modifications peuvent être mises en oeuvre en temps réel .
Sachant que les besoins des clients peuvent changer à tout moment, l'agile aide les entreprises à rester adaptables et à suivre les besoins et les attentes des clients.
C'était une amélioration bienvenue par rapport à la méthodologie en cascade, car elle permet des modifications continues tout au long du processus de développement, ce qui conduit à une sortie de produit plus rapide.
Le processus agile est spécifique aux développeurs et à leur capacité à terminer rapidement et efficacement un projet. À chaque nouvelle itération, le produit logiciel est remis à différentes équipes pour la livraison, le déploiement et la maintenance continue.

DevOps vs Agile : Similarités et différences
L'adoption des pratiques agile et DevOps dans le développement logiciel est source de confusion pour de nombreuses entreprises. La première étape pour réduire cette confusion consiste à comprendre les différences entre les deux méthodologies et le rôle qu'elles jouent chacune.

Principales différences entre DevOps et Agile :


- DevOps réunit deux équipes indépendantes afin de permettre des livraisons logicielles plus rapides, tandis que l'agile rassemble de plus petites équipes pour collaborer et répondre en temps réel aux besoins des clients. 
- DevOps se concentre sur les tests et les livraisons constantes, tandis que l'agile vise à faciliter les changements continus.
- Les membres de l'équipe DevOps ont des compétences diverses, tandis que les équipes agiles ont des compétences similaires.
- DevOps utilise des principes de "shift-left" et de "shift-right", tandis que l'agile se concentre principalement sur le "shift-left".
- DevOps met davantage l'accent sur les opérations et la préparation commerciale, tandis que l'agile se concentre sur la préparation fonctionnelle.
- DevOps vise à respecter les délais et les objectifs des nouvelles versions, tandis que l'agile travaille par "sprints" pour publier un produit dès qu'il est fonctionnel.
- Dans DevOps, les retours proviennent de l'équipe interne, tandis que dans l'agile, ils proviennent du client.
- Les membres de l'équipe DevOps ont des compétences et des rôles spécifiques, tandis que dans l'agile, chaque membre de l'équipe peut effectuer les tâches nécessaires pour le projet. 
- DevOps accorde une grande importance à l'automatisation, tandis que l'agile ne met pas autant l'accent sur l'automatisation. 
- DevOps comble le fossé entre le développement et les opérations.
- L'agile comble le fossé entre les besoins des clients et l'équipe de développement. 
- Le développement, les tests et la mise en oeuvre sont également importants dans DevOps, tandis que le développement de logiciels est la seule priorité dans l'agile.
- Puppet, Chef, TeamCity, OpenStack et AWS sont des outils DevOps populaires, tandis que JIRA, Bugzilla et kanban sont des outils agiles populaires.

DevOps et Agile ensemble
L'agile et DevOps ne sont pas des méthodologies de développement logiciel mutuellement exclusives. En fait, il y a de nombreux avantages à fusionner l'agile et DevOps. Les deux offrent une structure et un cadre qui peuvent fonctionner ensemble pour accélérer la livraison de logiciels.
L'agile est efficace pour organiser le travail, avec des méthodes comme Scrum ou Kanban, et DevOps contribue à construire un processus de livraison de logiciels plus cohérent et fiable.
DevOps est presque comme un élément manquant de l'agile. Il prend la philosophie et les valeurs de l'approche agile et les étend au processus d'opérations.
Sans DevOps, l'agile ne peut pas être pleinement mis en oeuvre, et sans Agile, DevOps ne peut pas être pleinement réalisé non plus. Par exemple, le Manifeste Agile fait référence à des principes de DevOps, tels que l'intégration et la livraison continues.
En fin de compte, l'agile et DevOps ont le même objectif : publier de meilleurs logiciels plus rapidement. Les deux pratiques sont maintenant si largement acceptées qu'il est rare de trouver des entreprises de développement logiciel qui n'utilisent qu'une seule des deux méthodologies.