Concept des Layouts avec React.js

React.js est une libraire qui permet de réaliser des briques de code que l’on appelle des composants . Ces derniers sont très représentatif de la philosophie “Reactienne” quand on développe des applications avec cette dernière. En effet, l’atomisation est une notion qui semble omniprésente chez les développeurs React.js . Et aujourd’hui, je souhaiterai vous parler d’une notion qui est assez intéressante : la notion des Layouts.

Un Layout c’est quoi ? Pour faire simple, c’est une sorte de moule qui va représenter la structure de base de votre application web. Techniquement parlant, il s'agit d'un composant parent qui se contente de fournir ou de transmettre des informations à d'autres composants enfants ; il ne prend rien à l'enfant.

Mise en place du composant Layout

Je vais essayer de vous montrer une manière simple d’implémenter un Layout . Pour ce faire, il suffit de créer un composant Layout.tsx

import React from 'react';
// La localisation de vos composants dépendent de votre projet :)
import Navigation from './navigation';
import Footer from './footer';

interface LayoutProps {
	backgroundColor?: string;
	children: ReactNode;
};

const defaultProps = {
	backgroundColor: "#FFFFFF",
}

const Layout : React.FC<LayoutProps & typeof defaultProps> = (props) => {
	return (
		<div style={{backgroundColor: props.backgroundColor}}>
			<Navigation/>
			<div>
				{props.children}
			</div>
			<Footer/>
		</div>
	);
}

Layout.defaultProps = defaultProps;

export default Layout;

Voici un exemple simple d’un Layout avec typescript. On remarque tout de suite que ce layout va mettre à disposition une barre de navigation avec un footer en bas. Le children est un composant enfant qui sera wrappé par le composant Layout.

Pour utiliser ce composant, voici comment faire

import Layout from "../components/layout"

const MainScreen = () => {
	return(
		<Layout>
			<div>
				Bonjour à toi King, perdant de Zoro.
			</div>
		</Layout>
	);
}

Et voilà ! C’est aussi simple que ça 🙂

Pourquoi faire des Layout ça peut sauver des vies ?

Voici quelques avantages à utiliser les Layouts. Premièrement, cela permet :

1. Réutilisation des composants: Cela vous permet d'éviter de répéter le même code pour chaque page, ce qui contribue à rendre votre code plus propre et plus facile à maintenir.
2. Cohérence de l'interface utilisateur (UI): En utilisant le même layout pour différentes pages, vous pouvez garantir une apparence et une sensation cohérentes à travers tout votre site web ou application.
3. Séparation des préoccupations: Cela permet de séparer la logique de la mise en page de celle des composants spécifiques à la page, ce qui rend votre code plus organisé et plus facile à comprendre.
4. Efficacité du développement: Cela peut réduire le temps de développement en réutilisant les mêmes éléments d'interface utilisateur à travers votre application.
5. Simplifie le refactoring: Si vous voulez changer quelque chose dans l'en-tête ou le pied de page de votre site, par exemple, vous n'avez besoin de le faire qu'à un seul endroit.
6. Adaptabilité: Si vous utilisez des layouts réactifs, votre site web ou application sera plus facile à utiliser sur différents types de dispositifs (mobile, tablette, ordinateur).
7. Facilité de test: Les tests deviennent plus simples car vous pouvez tester le layout indépendamment des pages spécifiques.
8. Meilleur contrôle de la structure de l'application: Vous pouvez choisir quelles parties de l'application utiliseront le layout, ce qui donne une grande flexibilité.
9. Implémentation des modifications de style: Appliquer des modifications de style globales devient plus simple puisque le layout est utilisé à travers l'application.
10. Meilleure expérience utilisateur: En fournissant une interface cohérente et intuitive, les utilisateurs peuvent mieux naviguer dans votre site ou application.

Pourquoi il n’y a pas tout le monde qui fait ça ?

• Rigidité: Si chaque page de votre application a besoin d'un design très différent, utiliser le même layout pour toutes pourrait être plus restrictif qu'utile.

  Exemple : Imagine que tu dessines sur une toile déjà peinte en partie. Tu te sens limité, non ? C'est pareil avec le design de ton application. Si chaque page doit avoir un look différent, utiliser le même canevas (layout) peut être restrictif.

• Complexité supplémentaire: Cela peut ajouter une couche de complexité à votre code si votre application est assez petite et ne nécessite pas une telle structure. C'est comme construire une maison avec plusieurs étages pour une seule personne. Si ton application est petite, un layout commun peut rendre les choses plus compliquées qu'elles ne devraient l'être.

• Performance: Si le layout est très lourd, cela pourrait affecter les performances de votre application. Imagine transporter un sac à dos très lourd toute la journée. Tu te fatiguerais, non ? De même, un layout lourd pourrait ralentir ton application.

• Problèmes de style: Si vous n'êtes pas prudent, vous pouvez vous retrouver avec des problèmes de style qui se propagent à toutes vos pages à cause du layout commun. Pour être un peu plus explicite, c’est comme si tu mettais par inadvertance une chaussette dont l’odeur en fait frissonner les plus fort dans un bac à linge propre. Tout tes vêtements qui sentaient le lait de coco se retrouveraient à être juste bon à relaver.

• Dépendances excessives: Les modifications du layout peuvent affecter de nombreuses parties de votre application si beaucoup de composants en dépendent. C'est comme si tout le monde dépendait de toi pour faire la cuisine. Si tu changes d'avis, cela peut affecter tout le monde. De même, les modifications du layout peuvent affecter de nombreuses parties de ton application.

• Mauvaise utilisation des props: Vous pourriez finir par passer trop de props à travers votre arbre de composants si vous n'êtes pas prudent. Imagine que tu doives transporter des boîtes de l'entrepôt au camion, mais que tu essayes de toutes les porter en même temps. C'est comme passer trop de props dans ton arbre de composants.

• Problèmes de maintenance: Si votre layout devient trop complexe, il pourrait être difficile à maintenir. C'est comme essayer de réparer une voiture très complexe. Si ton layout devient trop compliqué, il pourrait être difficile à entretenir.

• Temps de chargement: Si le layout inclut des ressources lourdes, il pourrait augmenter le temps de chargement de votre application. C'est comme essayer de charger une remorque très lourde sur un camion. Si ton layout inclut des éléments lourds, cela pourrait augmenter le temps de chargement de ton application.

• Difficulté de test: Si le layout inclut des composants de complexité élevée, cela pourrait rendre les tests plus difficiles. C'est comme essayer de résoudre un casse-tête très complexe. Si ton layout inclut des composants très compliqués, cela pourrait rendre les tests plus difficiles.

Bonus: ajout d’un système d’authentification pour le mettre dans ton layout

Admettons que nous un avons un hook d’authentification dans notre application. Il serait donc totalement possible de faire quelque chose comme ceci :

On crée un fichier authContext.ts

import { createContext, useContext } from 'react';

interface AuthContextInterface {
  isAuthenticated: boolean;
  login: () => void;
  logout: () => void;
}

// initial context with default values
export const AuthContext = createContext<AuthContextInterface>({
  isAuthenticated: false,
  login: () => {},
  logout: () => {},
});

export function useAuth() {
  return useContext(AuthContext);
}

Ici, je suis en train de créer un contexte pour l’authentification, (malheureusement pour toi, je ne vais pas rappeler ce qu’est un contexte en React.js, mais si tu ne connais pas ce principe, je t’invite à aller lire la documentation !).

On va ensuite créer notre provider.

import { useState, useEffect } from 'react';
import { AuthContext } from './authContext';

export function AuthProvider({ children }) {
  const [isAuthenticated, setIsAuthenticated] = useState(false);

  useEffect(() => {
    // récupérer l'état d'authentification du stockage local ou d'une API au démarrage
    const token = window.localStorage.getItem('token');
    if (token) {
      setIsAuthenticated(true);
    }
  }, []);

  const login = () => {
    // La on a une fonction d'authentification qui sera, je l'espère plus complète 
		// pour ton projet ;)
    window.localStorage.setItem('token', 'dummy_token');
    setIsAuthenticated(true);
  };

  const logout = () => {
    // Ici pareil pour le login
    window.localStorage.removeItem('token');
    setIsAuthenticated(false);
  };

  return (
    <AuthContext.Provider value={{ isAuthenticated, login, logout }}>
      {children}
    </AuthContext.Provider>
  );
}

Enfin, dans notre Layout, nous pouvons ajouter notre contexte

import React from 'react';
// La localisation de vos composants dépendent de votre projet :)
import Navigation from './navigation';
import Footer from './footer';

import { useAuth } from './authContext';
import { AuthProvider } from './AuthProvider';

interface LayoutProps {
	backgroundColor?: string;
	children: ReactNode;
};

const defaultProps = {
	backgroundColor: "#FFFFFF",
}

const LayoutWithAuth : React.FC<LayoutProps & typeof defaultProps> = (props) => {
	const auth = useAuth();

	return (
		<AuthProvider>
			{
			auth.isAuthenticated ? (
					<div style={{backgroundColor: props.backgroundColor}}>
						<Navigation/>
						<div>
							{props.children}
						</div>
						<Footer/>
					</div>
				) : (<div>Sorry you are not authenticated</div>)
			}
		</AuthProvider>
	);
}

Layout.defaultProps = defaultProps;

export default Layout;

Et voilà ! Dans votre nouveau LayoutWithAuth vous avez maintenant le système d’authentification qui est implémenté avec beaucoup de simplicité 🙂