
Next.js est un framework React qui permet de créer des sites internet et des applications web. Il est très utilisé dans le monde du développement web, que ce soit pour des projets personnels ou professionnels. De nombreuses startups l'utilisent pour créer une application ou un SaaS. Malheureusement, trop de projets sont lancés sur de mauvaises bases, ce qui engendrent des régressions à chaque mise à jour et des coûts de développement de plus en plus élevés au fil du temps.

Dans cet article, nous allons découvrir comment configurer un projet Next.js pour démarrer sur de bonnes bases. Nous allons utiliser différentes librairies comme ESLint, Prettier, Jest, TailwindCSS, husky et lint-staged.

En plus de la configuration des librairies, nous allons voir comment versionner notre projet avec GitHub. Enfin, nous allons mettre en place une CI grâce aux GitHub Actions et déployer notre projet sur Vercel.


## Création du projet Next.js

Pour commencer, nous allons créer notre projet Next.js avec la dernière version disponible. Pour cela, ouvrez un terminal et exécutez la commande suivante :

```bash
npx create-next-app@latest
```
Durant la création du projet, vous allez devoir renseigner plusieurs informations comme le nom du projet, l'utilisation ou non de Typescript, etc. Je vous conseille de répondre oui à la plupart des questions, notamment pour la création du dossier src. Lors du développement de votre projet, vous gagnerez du temps de configuration et de recherche en séparant les fichiers de configuration et votre code.

## Développer correctement avec Typescript

Depuis quelque temps, Next.js est installé et configuré avec Typescript et TailwindCSS. La configuration de Typescript se trouve dans le fichier tsconfig.json. En fonction de vos préférences et de votre projet, vous pouvez modifier cette configuration.

## Styliser son application avec TailwindCSS

La configuration de TailwindCSS se trouve dans le fichier tailwind.config.js. Vous pouvez être amené à la modifier pour modifier votre thème (par exemple pour changer la couleur principale de votre site, créer des animations, etc.). Vous pouvez également installer des plugins pour ajouter des fonctionnalités à TailwindCSS.

## Améliorer la lisibilité de son code

Avoir un code lisible et correctement structuré est important pour la maintenabilité d'un projet. Pour cela, nous allons utiliser ESLint qui est installé par défaut sur un nouveau projet Next.js. Cette librairie permet de détecter des erreurs dans le code et de les corriger automatiquement lorsque c'est possible.

En plus de cette librairie, nous allons utiliser Prettier, un formateur de code. Prettier permet de bien structuré le code et de le rendre plus lisible. Il est possible de configurer Prettier pour qu'il s'adapte à vos préférences.

Pour utiliser ces deux librairies, nous allons installer Prettier et le plugin ESLint pour Prettier. Pour cela, exécutez la commande suivante :
```bash
yarn add -D prettier eslint-plugin-prettier
```

Une fois la librairie installée, créez un fichier .prettierrc à la racine de votre projet. C'est dans ce fichier que vous allez configurer Prettier. Voici un exemple de configuration :
```json
{
    "semi": false,
    "singleQuote": false,
    "tabWidth": 4,
    "useTabs": true
}
```

Pour que Prettier puisse fonctionner avec ESLint, vous devez utiliser le plugin ESLint eslint-plugin-prettier que nous avons installé en même temps que Prettier. Pour cela, ajoutez le plugin dans le fichier .eslintrc.json :
```json
{
    "extends": [
        "next/core-web-vitals",
        "prettier"
    ]
}
```

En plus de la commande yarn lint, vous pouvez créer une nouvelle commande yarn format pour formatter manuellement tous les fichiers Typescript & Javascript dans le dossier src de votre code. Pour cela, il suffit de modifier votre fichier package.json :
```json
{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "format": "prettier --write 'src/**/*.{tsx,ts,jsx,js}'"
  }
}
```

Pour éviter de devoir à penser à linter et formatter son code régulièrement, il existe Husky et lint-staged qui font se travail automatiquement avant chaque commit. Pour cela, installez les deux librairies avec la commande suivante :
```bash
yarn add -D husky lint-staged
```

Puis exécutez la commande suivante pour initialiser Husky :
```bash
npx husky-init
```

Ajoutez ensuite cette configuration dans votre fichier package.json :
```json
{
    "lint-staged": {
        "src/**/*.{js,jsx,ts,tsx,json}": [
            "npx prettier --write",
            "npx eslint --fix"
        ]
    }
}
```

Désormais, avant chaque commit votre code sera linter et formatter.

## Tester son application avec Jest

Pour tester votre code, vous pouvez utiliser le framework Jest. Pour cela, installez Jest avec la commande suivante :
```bash
yarn add -D jest @types/jest ts-jest
```

Une fois Jest installé, nous allons utiliser la librairie ts-jest pour configurer Jest avec Typescript, notamment pour utiliser les alias. Pour cela, créez un fichier jest.config.ts à la racine de votre projet :
```ts
import { pathsToModuleNameMapper } from "ts-jest"
import { compilerOptions } from "./tsconfig.json"
import type { JestConfigWithTsJest } from "ts-jest"

const jestConfig: JestConfigWithTsJest = {
	roots: ["<rootDir>"],
	preset: "ts-jest",
	testEnvironment: "node",
	modulePaths: ["<rootDir>"],
	moduleNameMapper: pathsToModuleNameMapper(compilerOptions.paths, {
		prefix: "<rootDir>/",
	}),
	transform: {
		"^.+\\.(ts|tsx)?$": "ts-jest",
	},
}
export default jestConfig
```

Vous pouvez désormais écrire des tests en Typescript dans votre projet avec Jest 🎉

## Implémenter une CI/CD avec GitHub

GitHub est une plateforme permettant de versionner son projet en ligne. Elle propose également la possibilité d'intégrer une CI/CD à son projet grâce aux Github Actions.

Pour créer un répertoire, rendez-vous sur le lien suivant et remplissez les différentes informations de votre projet : [https://github.com/new](https://github.com/new)

Vous pouvez ensuite créer un fichier .github/workflows/main.yml à la racine de votre projet. Ce fichier va définir une GitHub Action, c'est un script qui pourra s'exécuter à chaque push, pull request et merge sur votre projet. Voici un exemple de GitHub Action :
```yml
name: Main GitHub Actions

on:
  push:
    branches: [ main ]
  pull_request:
    branches: [ main ]

jobs:
  test-job:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v4

      - name: Use Node 18.17.x
        uses: actions/setup-node@v3
        with:
          node-version: '18.17.x'

      - name: Install dependencies
        run: yarn install

      - name: Compile TypeScript
        run: tsc

      - name: Run tests
        run: jest
```

Cette GitHub Action va s'exécuter à chaque push sur la branche main et sur chaque pull request qui pointe sur la branche main. Elle va simplement installer les dépendances de notre projet et compiler Typescript puis exécuter les tests du projet avec Jest.

## Déployer son projet en ligne avec Vercel

Maintenant que nous avons un projet créé, linté et formaté, avec du style, testé et versionné, il ne reste plus qu'à le mettre en ligne ! Pour cela, nous allons utiliser Vercel, une plateforme de déploiement qui permet de déployer différents types de projets, mais surtout des projets Next.js car ce sont les créateurs de ce framework. En choissant Vercel, vous aller pouvoir profiter de toutes les fonctionnalités de Next.js comme le préchargement des pages, le préchargement des images, l'ISR, etc.

Pour déployer un projet sur Vercel, rien de plus simple, il suffit d'aller sur cette page : [https://vercel.com/new](https://vercel.com/new) et de suivre les instructions. Vous pouvez également utiliser l'interface en ligne de commande Vercel pour déployer votre projet.

Une fois connecté, vous pouvez choisir le projet que vous souhaitez déployer. Si vous avez déjà un projet sur GitHub, vous pouvez le sélectionner. Sinon, vous pouvez créer un nouveau projet.

Et voilà ! À chaque push sur votre branche git principale, un déploiement s'effectuera sur Vercel. Par défault Vercel créé un environnement pour chaque Pull Request que vous créez sur GitHub. Cette fonctionnalité peut être pratique lorsque vous souhaitez tester ou faire tester vos changements à des personnes de votre équipe.

J'espère que cet article vous sera utile pour démarrer votre projet Next.js sur de bonnes bases. Si vous avez une question ou besoin d'un accompagnement pour démarrer votre projet, nous pouvons en discuter : [discutons de votre projet](https://calendly.com/dimitir-dumont/discutons-de-votre-projet).

Si vous souhaitez découvrir comment architecturer votre projet Next.js, je vous invite à lire mon article sur l'architecture hexagonale en front-end : [Architecture hexagonale en front-end](/blog/hexagonal-architecture-front-end).


L'objectif de ce guide est de vous expliquer comment configurer un projet Next.js avec ESLint, Prettier et Typescript et déployé sur Vercel avec GitHub.

Tutoriel pour configurer et déployer un projet Next.js


J’ai commencé à créer mon premier SaaS cet été : **Hexaloc**. C’est une application qui a pour but de faciliter la gestion de ses investissements immobiliers locatifs. Au départ l’application a été créée pour répondre à un besoin que j’avais, puis en la partageant sur LinkedIn, plusieurs personnes m’ont contacté pour demander de nouvelles fonctionnalités ainsi que pour savoir si je pouvais documenter la création de cette application.

C’est pour cette raison que j’ai décidé d’écrire une suite d’articles et de posts LinkedIn afin de documenter le développement du SaaS **Hexaloc**. Le contenu sera autant destiné aux développeurs qu’aux entrepreneurs souhaitant lancer leur SaaS. Je vais vous partager à la fois le code, les stratégies marketing, les outils utilisés et les personnes qui auront un rôle dans ce projet.

Si vous souhaitez essayer l’application, vous pouvez cliquer sur ce lien : [https://hexaloc.vercel.app](https://hexaloc.vercel.app)

![Capture d'écran de la landing page du SaaS Hexaloc](/blog/creating-saas-as-developer/hexaloc-screenshot-landing-page.png)

## Présentation de l'application

**Hexaloc** est une application qui permet aux investisseurs immobiliers de gérer leurs locations afin de gagner du temps. Il existe déjà quelques applications, mais elles ont plusieurs défauts : une tarification trop élevée ou pas compréhensible, une interface qui n’est pas moderne et agréable à utiliser, des fonctionnalités compliquées à utiliser.

L’application **Hexaloc** veut répondre à ces problèmes : elle doit être simple d’utilisation, agréable visuellement et avoir une tarification compréhensible et juste.

Elle est disponible sur tous les appareils car c’est une application web. Elle peut être installée sur les smartphones grâce au système de « PWA ».

Ce SaaS est au stade de PoC, la fonctionnalité principale est la génération de quittance de loyer avec un aperçu en temps réel. En plus de ça, l’utilisateur peut signer directement sur l’application et envoyer la quittance par mail depuis l’application. Au moment où j’écris cet article l’application est disponible gratuitement et sans inscription.


## Pourquoi avoir créé cette application ?

Étant développeur freelance et investisseur, j’ai commencé l’investissement immobilier locatif cette année avec ma conjointe. Nos locataires nous demandait régulièrement une quittance de loyer. Pour créer ces quittances, nous avons commencé par utiliser un simple Google Doc qu’on éditait chaque mois. Ensuite, on téléchargeait le fichier en PDF, on le signait sur mon Macbook, on l’envoyait par mail puis on le sauvegardait dans un dossier sur notre disque dur externe.

Même si ce n’est pas une tâche très complexe, ma conjointe trouvait ça pénible et chronophage. J’ai essayé de trouver des applications me permettant de créer nos quittances de loyer, mais à chaque fois, il y avait toujours les mêmes problèmes : les applications sont payantes et je trouve les tarifs trop excessifs et les interfaces de ces applications ne sont pas agréables.

En tant que développeur, je me suis dit que je pourrais créer une application pour répondre à ce besoin afin de gagner du temps et rendre plus agréable cette tâche, c’est ainsi qu’est né le SaaS **🏠 Hexaloc**.

Après chaque utilisation, j’ai ajouté des fonctionnalités supplémentaires pour gagner encore plus de temps. L’objectif de cette application est de réellement faciliter la gestion des investissements immobiliers aux investisseurs.

Au-delà de l’aspect entrepreneurial et de résoudre les problèmes cités dans cet article, c’est également une occasion de pouvoir acquérir de nouvelles compétences en étant à la place de mes clients pour une fois. En dehors de l’aspect technique, j’apprends à prioriser les fonctionnalités à développer en fonction des coûts et des retours des utilisateurs. J’apprends aussi à vendre l’application et à travailler sur des stratégies marketing. Tous ces nouveaux challenges me permettent d’être encore plus efficace lors de mes missions en tant que développeur freelance pour mes clients.

![Fonctionnalités disponibles sur Hexaloc](/blog/creating-saas-as-developer/hexaloc-features-landing-page.png)

## Les raisons de la création d'un SaaS

Les SaaS (Software as a Service) sont des applications disponibles sur internet contrairement aux applications classiques qu’il faut télécharger sur son ordinateur ou sur son réseau professionnel. Les SaaS ont plusieurs avantages pour leurs utilisateurs. Ces applications sont constamment à jour, elles sont utilisables depuis n’importe quel appareil avec internet et la tarification est adaptée aux besoins de ses utilisateurs.

Étant développeur, j’ai plusieurs avantages à créer un SaaS plutôt qu’une application classique. Tout d’abord, je n’ai pas besoin de créer une application pour chaque système d’exploitation (Windows, Mac, Linux, iOS, Android). Ensuite, je n’ai pas besoin de gérer les mises à jour de l’application sur les appareils de mes utilisateurs. Enfin, je peux facilement ajouter de nouvelles fonctionnalités et les déployer en continu.

## Outils et stratégies pour la création du SaaS

J’ai commencé à développer ce projet en auto-financement grâce à mon activité de développeur freelance. Mais en réalité, je n’ai pas encore dépensé un seul centime pour ce projet ! J’utilise des outils dans leur version gratuite qui suffisent pour l’état actuel du projet.

Étant développeur, j'ai pu développer tout seul le projet. Cependant, j’ai quand même eu un coup de main de la part de Baptiste Drillien, un ami développeur front-end freelance qui m’a aidé sur la partie UI/UX du projet. C’est d’ailleurs grâce à lui que l’application est aussi agréable à utiliser !

Concernant les technologies, le projet est développé en Typescript avec Nextjs (React) et TailwindCSS. J’utilise d’autres librairies que je vais détailler dans les prochains articles.

Pour l’hébergement, j'ai fait le choix d’utiliser Vercel avec un déploiement en continu. Le code est hébergé sur GitHub dans un dépôt privé.

Pour la gestion de projet, je n’ai pas encore d’outils spécifiques si ce n’est l’application Notes d’Apple. Je suis partisan d’utiliser les outils et les process adaptés à nos besoins. Je n’ai pas besoin de Jira pour gérer un projet qui en phase MVP et où je suis seul pour l’instant.

Si cette application vous intéresse, que vous souhaitez découvrir comment créer un SaaS ou que vous souhaitez découvrir des guides sur des aspects techniques, je vous invite à suivre mon contenu sur ce blog et sur LinkedIn.

Pour essayer l'application, rendez-vous sur ce lien : [https://hexaloc.vercel.app](https://hexaloc.vercel.app).

À bientôt pour de nouveaux articles ! 👋



Cet été j'ai décidé de créer mon 1er SaaS en tant que développeur freelance : Hexaloc. C'est une application qui facilite la gestion des investissements immobiliers locatifs.

Création d'un SaaS en tant que développeur


L'inversion de dépendances et l'injection de dépendances sont des concepts fondamentaux en développement logiciel qui permettent d'améliorer la modularité, la maintenabilité et la testabilité des applications. Bien que souvent associés aux projets back-end, ces principes ont également une grande importance dans le contexte des projets front-end.

Dans cet article, nous allons découvrir ce que sont l'inversion et l'injection de dépendances et comment les appliquer efficacement dans vos projets front-end avec des exemples en utilisant TypeScript, React.js et Next.js.

Si vous souhaitez approfondir davantage ces concepts, vous pouvez lire l'article que j’ai écrit au sujet de l’architecture hexagonale en front-end (ou clean architecture) en cliquant sur ce lien : [voir l'article sur l'architecture hexagonale en front-end](/blog/hexagonal-architecture-front-end).

## Comprendre l'inversion de dépendances

L'inversion de dépendances est un principe clé du développement logiciel qui consiste à inverser le flux de contrôle au sein d'une application. Au lieu d'une structure où les modules de bas niveau dépendent des modules de haut niveau, l'inversion de dépendances préconise que les modules de bas niveau soient indépendants et que les dépendances soient fournies de l'extérieur.

Dans le contexte front-end, cela signifie que les composants ne devraient pas dépendre directement de services externes, mais plutôt de dépendre des interfaces (ou types) que nous définissons selon nos besoins. Cela améliore la flexibilité de l'application et facilite les tests en permettant de substituer facilement des dépendances réelles par des dépendances simulées lors des tests.

Ce schéma illustre les propos de cet article ainsi que le principe d'inversion de dépendances en front-end avec React ou Nextjs :
![Schéma inversion de dépendances en front-end](/blog/dependency-inversion-front-end/dependency-inversion-front-end.png)

## Les avantages de l'inversion de dépendances
1. **Modularité accrue :** Les modules deviennent plus indépendants et peuvent être réutilisés dans différents contextes.
2. **Facilité de test :** Le code métier ne dépend plus des dépendances externes, nous pouvons simuler rapidement et facilement ces dépendances.
3. **Facilité de maintenance :** Les changements dans une dépendance sont limités à un seul endroit, ce qui réduit les risques d'effets domino.
4. **Couplage réduit :** Les dépendances ne sont pas directement intégrées dans le code, ce qui réduit le couplage entre les différentes parties de l'application.

## Appliquer l'inversion de dépendances avec TypeScript, React.js et Next.js
Maintenant que nous avons vu la partie théorique de l'inversion et de l'injection de dépendances en front-end, nous allons voir comment l'appliquer dans un projet front-end en utilisant TypeScript, React.js et Next.js.

TypeScript offre un fort typage qui peut être utilisé pour définir des interfaces claires et précises pour les dépendances. Vous pouvez utiliser des interfaces ou des types. Définir des interfaces pour les dépendances facilite la substitution de dépendances réelles par des dépendances simulées lors des tests.

Pour le projet d'exemple, nous allons développer une fonctionnalité qui permet de se connecter.

### Exemple sans inversion de dépendances
Afin de comprendre pourquoi l'inversion de dépendances est importante en front-end, voici un exemple de code que vous pouvez retrouver dans la plupart des projets :
```tsx
import { AuthService } from "../auth.service.ts"

const LoginPage: React.FC<{ authService: AuthService }> = ({ authService }) => {
  const [email, setEmail] = useState('')
  const [password, setPassword] = useState('')

  const handleLogin = () => {
	  fetch("https://api.com/login", {
		  method: "POST",
		  headers: {
			  "Content-Type": "application/json",
		  },
		  body: JSON.stringify({ email, password }),
	  })
      .then(response => {
          if (!response.ok) {
              throw new Error("Login failed");
          }
          const user = response.json()
          console.log('Login successful! User:', user)
      })
      .catch(error => {
          console.error("Login error:", error);
          throw error
      })
  }

  return (
    <div>
      <h2>Login Page</h2>
      <input type="email" placeholder="Email" value={email} onChange={e => setEmail(e.target.value)} />
      <input type="password" placeholder="Password" value={password} onChange={e => setPassword(e.target.value)} />
      <button onClick={handleLogin}>Login</button>
    </div>
  )
}

export default LoginPage
```

Dans cet exemple, la requête HTTP à l'API qui permet à l'utilisateur de se connecter se trouve directement dans un composant React. Le problème avec cette pratique, est que nous ne pouvons pas facilement tester ce composant. En effet, nous ne pouvons pas simuler la requête HTTP pour tester le comportement du composant dans différents cas de figure (par exemple, si la requête échoue).

De même, notre composant React, c'est-à-dire notre interface utilisateur, est directement liée à la requête API. Si nous souhaitons changer l'API pour se connecter, nous devons modifier notre composant React. Cela peut être problématique si nous avons plusieurs composants qui dépendent de cette API.

Il y a également un autre problème, si nous souhaitons ajouter une nouvelle fonctionnalité qui nécessite une connexion, nous devons réécrire le code de connexion dans chaque composant. Cela peut rapidement devenir problématique si nous avons plusieurs composants qui nécessitent une connexion.

Enfin, notre interface utilisateur (les composants React) contient de la logique métier, ce qui n'est pas une bonne pratique. En effet, notre composant React doit uniquement se concentrer sur l'interface utilisateur et ne doit pas contenir de la logique métier. Cela rend notre composant plus difficile à maintenir et à tester.

### Exemple avec inversion de dépendances
Pour éviter tous ces problèmes, nous pouvons mettre en place l'inversion de dépendances. Pour commencer, nous allons créer une interface pour le service d'authentification :
```typescript
export type AuthService = {
  login(email: string, password: string): Promise<User>
  logout(): Promise<void>
}
```

Ensuite, nous pouvons implémenter cette interface pour réaliser notre appel API :
```typescript
import { AuthService } from "../auth.service.ts"

export const AuthApi: AuthService = {
  login: (email, password) => {
    return fetch("https://api.com/login", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({ email, password }),
    })
    .then(response => {
      if (!response.ok) {
        throw new Error("Login failed");
      }
      return response.json()
    })
    .catch(error => {
      console.error("Login error:", error);
      throw error
    })
  },
  logout: () => {
    return fetch("https://api.com/logout", {
      method: "POST",
    })
    .then(response => {
      if (!response.ok) {
        throw new Error("Logout failed")
      }
    })
    .catch(error => {
      console.error("Logout error:", error)
      throw error
    })
  }
}
```

Ainsi, pour réaliser l'appel API, il suffit d’utiliser l’interface dans votre code. Cela évite à vos composants de dépendre des librairies ou des services externes. Voici un exemple de composant React qui utilise l’interface définie plus haut pour l’inversion de dépendances :
```tsx
import { AuthService } from "../auth.service.ts"

const LoginPage: React.FC<{ authService: AuthService }> = ({ authService }) => {
  const [email, setEmail] = useState('')
  const [password, setPassword] = useState('')

  const handleLogin = async () => {
    try {
      const user = await authService.login(email, password);
      console.log('Login successful! User:', user)
    } catch (error) {
      console.error('Login error:', error)
    }
  }

  return (
    <div>
      <h2>Login Page</h2>
      <input type="email" placeholder="Email" value={email} onChange={e => setEmail(e.target.value)} />
      <input type="password" placeholder="Password" value={password} onChange={e => setPassword(e.target.value)} />
      <button onClick={handleLogin}>Login</button>
    </div>
  )
}

export default LoginPage
```

Pour simplifier votre code, vous pouvez créer un type qui regroupe toutes les interfaces :
```typescript
import { AuthService } from "../auth.service.ts"

export type Dependencies = {
   authService: AuthService
}
```

Ensuite, en fonction du contexte de votre code (si vous êtes dans la partie client, dans la partie serveur ou dans les tests, etc.) vous pouvez créer un objet qui regroupe toutes les implémentations de vos interfaces :
```typescript
import { Dependencies } from "../dependencies.ts"
import { AuthApi } from "../auth.api.ts"

export const dependencies: Dependencies = {
   authService: AuthApi
}
```

Ainsi, il ne vous reste plus qu’à appeler vos dépendances grâce à cet objet dans le contexte que vous souhaitez. Dans le cadre d’un projet React en front-end, vous avez plusieurs solutions possibles :

### Appeler directement vos implémentations des dépendances dans votre code, par exemple dans un composant React
```tsx
import { dependencies } from "../dependencies.ts"

const LoginPage = () => {
  const [email, setEmail] = useState('')
  const [password, setPassword] = useState('')

  const handleLogin = async () => {
    try {
      const user = await dependencies.authService.login(email, password);
      console.log('Login successful! User:', user)
    } catch (error) {
      console.error('Login error:', error)
    }
  }

  return (
    <div>
      <h2>Login Page</h2>
      <input type="email" placeholder="Email" value={email} onChange={e => setEmail(e.target.value)} />
      <input type="password" placeholder="Password" value={password} onChange={e => setPassword(e.target.value)} />
      <button onClick={handleLogin}>Login</button>
    </div>
  )
}

export default LoginPage
```

### Créer un contexte et un provider pour permettre à tous les composants d’accéder aux dépendances
1. Création du contexte React
```tsx
// dependencies.context.ts
import React, { createContext, useContext } from 'react'
import { AuthService } from "../auth.service.ts"

// Créez le contexte des dépendances
const DependenciesContext = createContext<Dependencies | null>(null)

// Créez un hook pour utiliser les dépendances dans vos composants
export const useDependencies = () => {
  const context = useContext(DependencyContext)
  if (!context) {
    throw new Error('useDependencies must be used within a DependencyContextProvider');
  }
  return context
}

// Composant Provider pour envelopper votre application avec les dépendances
export const DependenciesContextProvider: React.FC<Dependencies> = ({ children, ...dependencies }) => {
  return <DependencyContext.Provider value={dependencies}>{children}</DependencyContext.Provider>
}
```

2. Implémentation du contexte dans l'application
```tsx
// _app.ts
import React from 'react'
import { DependenciesContextProvider } from '../dependencies.context.ts'
import { dependencies } from '../dependencies.ts'

const MyApp = ({ Component, pageProps }) => {
  return (
    <DependencyContextProvider {...dependencies}>
      <Component {...pageProps} />
    </DependencyContextProvider>
  )
}

export default MyApp
```

3. Utilisation du contexte dans vos composants pour accéder aux dépendances
```tsx
// pages/login.ts
import React, { useState } from 'react'
import { useDependencies } from '../DependenciesContext'

const LoginPage = () => {
  const [email, setEmail] = useState('')
  const [password, setPassword] = useState('')

  const { authService } = useDependencies()

  const handleLogin = async () => {
    try {
      const user = await authService.login(email, password)
      console.log('Login successful! User:', user)
    } catch (error) {
      console.error('Login error:', error)
    }
  };

  return (
    <div>
      <h2>Login Page</h2>
      <input type="email" placeholder="Email" value={email} onChange={e => setEmail(e.target.value)} />
      <input type="password" placeholder="Password" value={password} onChange={e => setPassword(e.target.value)} />
      <button onClick={handleLogin}>Login</button>
    </div>
  )
}

export default LoginPage
```

### Si vous utilisez redux dans votre projet React, vous pouvez utiliser les middlewares comme redux thunk pour injecter vos dépendances

Avec redux toolkit et redux thunk, il faut utiliser la fonction getDefaultMiddleware et utiliser la clé extraArgument de l'objet thunk pour passer les dépendances aux thunks :
```typescript
// store.ts
import { dependencies } from '../dependencies.ts'

const store = configureStore({
  reducer: rootReducer,
  middleware: getDefaultMiddleware =>
    getDefaultMiddleware({
      thunk: {
        extraArgument: dependencies
      }
    })
})
```

Ainsi, vous pouvez accéder aux dépendances injectées depuis vos thunks :
```typescript
// login.thunk.ts
export const login =
  (username, password) => async (dispatch, getState, { authService }) => {
    const response = await authService.login(username, password)
    dispatch(login(response))
  }
```

## Conclusion
L'inversion et l'injection de dépendances sont des pratiques qui apportent de nombreux avantages aux projets de développement. En appliquant ces principes à l'aide de TypeScript, React.js et Next.js dans les projets front-end, cela vous permet de créer des applications modulaires, facilement testables et évolutives.

En réduisant le couplage avec les librairies et les services externes, ces approches améliorent la qualité du code et facilitent la maintenance à long terme. Ces pratiques sont d’ailleurs au cœur de l’architecture hexagonale (clean architecture). Si vous souhaitez en savoir plus à ce sujet, je vous invite à consulter l’article que j’ai écrit à ce sujet en cliquant sur ce lien : [voir l'article sur l'architecture hexagonale en front-end](/blog/hexagonal-architecture-front-end).


Qu'est-ce que l'inversion et l'injection de dépendances et pourquoi l'utiliser en front-end ? Explications et exemple concret d'un projet front-end en React.js et Next.js

Inversion de dépendances en front-end


Dans cet article nous allons découvrir l’architecture hexagonale et comprendre pourquoi il est intéressant de l’utiliser en front-end. Cet article s’appuie sur un projet que j’ai créé en React & Next.js afin de vous fournir un exemple concret. Le projet est disponible sur Github, le lien se trouve à la fin de l'article. Une version de cet article avec Redux sera bientôt disponible.

L'architecture hexagonale se base sur le concept d'inversion de dépendances. Si vous ne connaissez pas ce concept, je vous invite à lire l'article que j'ai écrit à ce sujet avant de lire celui-ci : [voir l'article sur l'inversion de dépendances](/blog/dependency-inversion-front-end).

![Présentation de l'architecture hexagonale](/blog/hexagonal-architecture-front-end/diagramme-architecture-hexagonale.png)



## Qu’est-ce que l’architecture hexagonale ?

### 1. Définition
   C’est une architecture de code basée sur l’utilisation de ports, d’adaptateurs et de l'inversion de dépendances. Le but est d’avoir une application faiblement couplée aux dépendances externes comme une base de données, une API, un framework ou encore une librairie.

Pour simplifier ces termes, le but est d’avoir une interface, c’est-à-dire un contrat, qui définit comment une action va envoyer et recevoir des informations à des services externes comme une base de données, une API, une librairie ou autre.

### 2. Les différentes parties
#### a. Use case
Un use case définit une action de l’utilisateur. L’objectif est de ne pas utiliser de librairies ou de frameworks ici car le but est de ne pas coupler la logique à ces outils.

En front-end, un use case peut être une fonction ou une classe. Plus spécifiquement dans un projet React, redux peut être une exception et être considéré comme les uses cases. Dans ce cas, les actions sont les use cases, le state est le modèle et les sélecteurs sont utilisés pour mapper les données entre différents modèles.

#### b. Port primaire
Ce sont les contrats situés entre les use cases et les adaptateurs primaires. Ils peuvent être représentés par des interfaces. En général, le use case est aussi considéré comme port primaire, ainsi il n’y a pas besoin de créer d’interface pour cela.

#### c. Adaptateur primaire
L’adaptateur primaire est l’élément qui dialogue avec le domaine. Son rôle est de déclencher des use-cases. Par exemple en front, les adaptateurs peuvent être des composants React qui déclenchent des actions redux ou de simples fonctions du domaine.

#### d. Port secondaire
Le port secondaire est l’interface qui définit le contrat entre les uses cases et les adaptateurs secondaires. Cette interface est utilisée par les use-cases pour faire appel à des services externes implémentés par les adaptateurs secondaires. C’est ici que nous retrouvons surtout le principe d’inversion de dépendances.

Pour gagner en flexibilité, vous pouvez également utiliser de l’injection de dépendances afin d’éviter de devoir déclarer votre implémentation de ce contrat à chaque utilisation de use-cases. Pour cela, en front, les middlewares comme redux-thunk ou redux-observable permettent de le faire via des arguments passés à la configuration de votre store redux. Si vous n’utilisez pas redux, vous pouvez utiliser InversifyJS.

#### e. Adaptateur secondaire
L’adaptateur secondaire est l’implémentation du port secondaire. Ils sont appelés indirectement par les use-cases. Par exemple, en front-end, ils peuvent être représentés par des classes ou des fonctions qui effectuent des requêtes HTTP, qui accèdent à une base de données côté client, etc.

## Pourquoi utiliser l’architecture hexagonale en front-end ?
### 1. Ne plus être dépendant des librairies et frameworks
   Grâce à l'architecture hexagonale, la logique de votre projet front-end n'est plus dépendante des librairies et frameworks comme React, Vue ou encore Next.js.

Ce qui implique que si l'un de ces outils n'est plus maintenu ou ne vous convient plus, vous pouvez changer de librairie ou de framework sans avoir à re-développer tout le projet. Il faudra uniquement modifier la partie visuelle du projet.

### 2. Pouvoir tester facilement et efficacement un projet front-end
   Grâce à l'inversion de dépendances et au fait que votre domaine doit être indépendant, vous n'avez plus besoin de rendre vos composants, de "mocker" vos requêtes HTTP, etc.

Vous avez uniquement besoin d'utiliser une fausse implémentation de votre service externe comme l'API dans vos tests. Ainsi, vos tests se découpent en trois grandes catégories :
- **les tests unitaires** : ils servent à tester votre domaine
- **les tests d'intégrations** : ils testent vos implémentations externes
- **les tests de bout en bout** : ils sont utiles pour tester l'intégralité de votre application en même temps

### 3. Avoir le même core pour une app mobile et une app web
   Ce point rejoint le premier point expliqué précédemment. Étant donné que votre logique est indépendante des frameworks et librairies utilisés, vous pouvez avoir le même code pour la logique de vos applications.

### 4. Développer le front-end sans le back-end
   Grâce à l'inversion de dépendances représenté par le port secondaire, vous pouvez développer le front-end d'une application sans le back-end.

Pour cela, il suffit de procéder de la même manière que pour les tests en utilisant une fausse implémentation.

Cette méthode est pratique dans le cas où vous souhaitez développer une fonctionnalité pour la faire tester à quelques utilisateurs. Elle est également utile dans le cas où les développeurs back-end n'ont pas encore pû développer l'API.

### 5. Développer le front-end sans réseau
   Ce point rejoint le point précédent, grâce à l'inversion de dépendances vous pouvez utiliser une fausse implémentation qui simule le back-end ou l'accès à des services externes. Ainsi, vous n'avez pas besoin d'accès internet pour développer le front-end.

## Exemple d'un projet front-end avec une architecture hexagonale en React & Next.js
Au début de cet article, je vous ai présenté un diagramme pour visualiser l'architecture hexagonale. Je vous en propose un nouveau mais avec des termes liés au front-end.

![Présentation de l'architecture hexagonale en front-end](/blog/hexagonal-architecture-front-end/diagramme-architecture-hexagonale-front-end.png)

Maintenant que nous avons vu ce qu'est l'architecture hexagonale et quels sont les intérêts de l'utiliser, nous allons voir comment s'en servir dans un projet front-end, en React et Next.js.

Pour cela, j'ai choisi un sujet simple et connu : une todo list. Le projet est disponible sur Github en cliquant sur ce lien : [voir le projet](https://github.com/dimitridumont/clean-architecture-front-end).

Dans cet article, nous allons nous focaliser sur une fonctionnalité du projet : la récupération de la liste des tâches. Nous allons commencer par développer l'un des adaptateurs primaires, qui est un composant React.

### 1. Création de l'adaptateur primaire
   ![Présentation d'un adaptateur primaire de l'architecture hexagonale en front-end](/blog/hexagonal-architecture-front-end/todolist-component.png)
   Dans ce composant, nous récupérons simplement une liste de tâches via un use case _getTodos_ en lui passant l'implémentation du port secondaire _TodosOutput_. Une fois la liste des tâches récupérée, nous la stockons dans notre state React en utilisant un mapper afin de s'assurer que l'objet récupéré correspond au modèle que nous utilisons dans notre composant.

### 2. Création du use case
   ![Présentation d'un use case de l'architecture hexagonale en front-end](/blog/hexagonal-architecture-front-end/todolist-use-case.png)
   
Le use case utilisé pour récupérer la liste des tâches est représenté par une fonction. Elle prend en paramètre le port secondaire _TodosOutput_ afin de l'utiliser pour récupérer la liste de tâches. Comme vous le voyez, notre use case (domaine) n'a aucune connaissance de la manière dont il récupère les données. Il utilise simplement le port secondaire, qui est une interface, pour récupérer ces données.

### 3. Création du port secondaire
![Présentation d'un port secondaire de l'architecture hexagonale en front-end](/blog/hexagonal-architecture-front-end/todolist-secondary-port.png)

   Ici nous créons notre port secondaire utilisé par le use case. C'est une interface Typescript qui sert à établir un contrat.

### 4. Création de l'adaptateur secondaire
![Présentation d'un adaptateur secondaire de l'architecture hexagonale en front-end](/blog/hexagonal-architecture-front-end/todolist-secondary-adapter.png)
   
Comme vous pouvez le voir, la classe _TodosLocalStorage_ représente l'adaptateur secondaire, qui implémente l'interface _TodosOutput_, le port secondaire. Ici nous utilisons le localStorage pour stocker et récupérer les données, nous aurions aussi pû utiliser des requêtes HTTP pour accéder à une API ou une base de données côté client.

Tout l'intérêt de l'architecture hexagonale est justement d'avoir plusieurs implémentations ou de les changer selon les services utilisés sans avoir besoin de modifier notre core.

### 5. Exemple de deux tests unitaires
![Présentation de tests unitaires avec l'architecture hexagonale en front-end](/blog/hexagonal-architecture-front-end/todolist-unit-tests.png)

Voici un exemple de quelques tests unitaires. Comme je l'ai expliqué au début de cet article, les tests unitaires ont pour objectif de tester le core de l'application, la logique.

Ainsi, notre test utilise le use case _getTodos_ en lui passant cette fois-ci un adaptateur secondaire différent : _TodosInMemory_. Cet adaptateur est une autre implémentation du port secondaire _TodosOutput_. C'est une classe qui implémente l'interface _TodosOutput_.

Les tests sont assez simples, ils exécutent et récupèrent les données renvoyées par le use case _getTodos_ et les comparent à de fausses données attendues.

### 6. Création d'un autre adaptateur secondaire pour les tests unitaires
![Présentation d'un adaptateur secondaire utilisé pour les tests avec l'architecture hexagonale en front-end](/blog/hexagonal-architecture-front-end/todolist-secondary-adapter-in-memory.png)

   Voici l'adaptateur secondaire utilisé pour les tests unitaires précédents.

## Conclusion
Pour conclure, l'architecture hexagonale est un outil permettant d'organiser son code de manière à ce que la logique de votre projet soit indépendante des outils externes.

Elle est tout aussi importante en front-end afin de pouvoir être indépendant des librairies et frameworks qui évoluent régulièrement et rapidement. Elle vous permet de tester correctement et facilement votre application, en plus de pouvoir faire évoluer les services externes utilisés rapidement. Il faut voir cela comme des plugins qui doivent respecter des règles pour être utilisés par notre application.

Si cet article vous a aidé à mieux comprendre l'architecture hexagonale et à savoir comment l'utiliser en front-end, n'hésitez pas à le partager à vos collègues.

Lien du projet sur Github : [https://github.com/dimitridumont/clean-architecture-front-end](https://github.com/dimitridumont/clean-architecture-front-end)


Qu'est-ce que l'architecture hexagonale et pourquoi l'utiliser en front-end ? Explications et exemple concret d'un projet front-end en React.js et Next.js

Architecture hexagonale en front-end

Dans cet article je vais vous partager mon expérience lors de l’achat de ma résidence principale avec ma compagne en ayant dans le couple un CDD et une micro-entreprise.

Si vous aussi vous êtes dans une situation similaire, cet article peut vous apporter quelques astuces et conseils pratiques pour l’obtention de votre prêt immobilier ! Je ne suis en aucun expert ou banquier. L’objectif est simplement de vous partager notre expérience.

## Contexte
Lors du premier confinement avec ma compagne nous avons décidé de commencer à rechercher une maison pour acquérir notre résidence principale. Nous avions à ce moment 21 et 22 ans. Ma compagne venait d’obtenir un CDD en tant qu’aide soignante (contrat d’1 mois renouvelable) et pour ma situation j’entamais la troisième année de ma micro-entreprise.

Nos critères et le secteur dans lequel nous recherchions notre résidence principale étaient assez complexes : nous recherchions une maison de 100m carré minimum, avec un garage et/ou un sous-sol, avec du charme et un peu de terrain, dans un village précis.

Une fois les critères établis, nous avons commencé à nous documenter sur l’achat immobilier, que ce soit dans notre entourage mais aussi sur internet grâce aux vidéos, articles et podcasts sur le sujet.

C’est à ce stade que j’ai compris que ça serait compliqué d’obtenir un emprunt à deux avec une micro-entreprise d’à peine 3 ans d’activité et un CDD. Nous avons quand même voulu tenter le coup et pour cela nous avons essayé de mettre toutes les chances de notre côté.

## Conditions pour obtenir un prêt
Avant d’obtenir un prêt immobilier il faut comprendre comment les banques acceptent de donner un prêt. Un prêt immobilier, en fonction de votre projet, est un prêt financier assez important qui engage sur le long terme. Pour être concret, notre achat était de 190 000€ (sans les frais de notaires et de dossiers). Pour nos projets et notre style de vie, nous souhaitions emprunter sur le long terme, c'est-à-dire 25 ans.

Donc nous devions trouver une banque qui aurait confiance en notre capacité de remboursement pour nous prêter un certain montant sur 25 ans avec notre situation.

Le fait d’avoir un CDD et une micro-entreprise n’enchante pas les banques et les assurances car comparé au CDI, ces contrats et situations ne sont pas forcément stables.

En ayant connaissance de cette situation, il fallait donc qu’on gagne la confiance des banques en leur montrant qu’on avait une situation stable et qu’on serait capable de rembourser l’emprunt sans problèmes.

## Préparation du projet
Pour commencer les banques regardent les comptes courants afin de voir l’argent que vous gagnez et ce que vous dépensez. Avec ma compagne nous avons toujours fait attention à avoir un train de vie qui corresponde à nos revenus. Nous n’avons jamais eu de découverts et n’avons jamais fait des crédits ou d’emprunts.

Ensuite, en sachant que les banques aurez peu confiance en notre capacité de remboursement et en notre situation, nous avons épargné le plus possible. Cela permet de démontrer au banque que malgré votre contrat ou votre micro-entreprise, votre situation est pérenne et qu’en plus de vivre normalement, vous pouvez même mettre de l’argent de côté. Cet argent de côté nous a permis d’avoir un apport de 10% (en 2021) tout en gardant en plus une épargne. Ainsi les frais de notaires et de dossiers étaient réglés grâce à cet apport. C’est un point que les banques apprécient.

Enfin, nous avons préparé notre projet que nous allions présenter aux banques. Pour cela nous avons regroupé sous format numérique et papier tous les documents obligatoires pour une demande de prêt (fiches de paie, relevés de comptes bancaires, impôts sur le revenu, etc.). Tous ces documents étaient correctement nommés et rangés pour faciliter leur utilisation par les banquiers.

Étant micro-entrepreneur et développeur freelance, il était important que les banques comprennent un minimum mon activité. Pour cela j’ai préparé différents documents pour expliquer mon travail de développeur, comment j’obtenais mes clients, l’évolution et le suivi de mon activité en termes de finances, etc. Lorsque nous avons présenté notre projet à notre banquière, elle n’avait quasiment rien à préparer de plus (venant de notre part).

Je pense que les banques n’accordent pas forcément la même confiance à toutes les activités. Le développement web étant une activité recherchée, je pense que cela a joué favorablement en notre faveur.

Tous ces points ont montré notre sérieux et nous ont permis d’être crédible auprès des banques.

Ainsi, nous n'avons eu besoin que d’une seule banque pour obtenir le prêt que nous souhaitions avec un taux intéressant. Nous avons eu plusieurs échanges, notamment pour expliquer mon activité, mais tout s’est plutôt bien passé. Nous avons réussi à avoir le prêt à 22 et 23 ans, en étant en CDD & micro-entrepreneur.

## Résumé
Pour résumer, il faut que vous arriviez à démontrer votre stabilité financière et votre capacité d’emprunt auprès des banques.

Pour cela, voici ce que nous avons fait :
- avoir un train de vie en adéquation avec nos revenus : ne jamais être à découvert
- nous n’avions pas d’emprunt en cours
- nous avons constitué une épargne (10% du montant de l’emprunt et plus)
- nous avons préparé à l’avance tous les documents nécessaires pour la demande de prêt, avec en plus une présentation de mon activité de freelance

J’espère que cet article vous aidera à obtenir votre prêt si vous êtes dans cette situation, n’hésitez pas à le partager. Si vous avez d’autres conseils ou des remarques, n’hésitez pas à me les envoyer pour que je puisse alimenter cet article.


Comment obtenir un prêt lorsqu'on est freelance, micro-entrepreneur ou en CDD ? Je vous partage mon expérience en tant que freelance lors de l'achat de ma résidence principale.

Obtenir un prêt en tant que freelance


Bonjour, je suis Dimitri Dumont, développeur front-end freelance. Je suis passionné par les notions qui tournent autour du “software craftsmanship”.

J’ai récemment acheté le livre **Clean Code — A Handbook of Agile Software Craftsmanship** de Robert C. Martin (ou Uncle Bob). J’ai décidé de partager mes notes personnelles prises durant sa lecture.

![Livre Clean code de Robert C. Martin](/blog/livre-clean-code.jpeg)

Si vous souhaitez lire la première partie, qui est l’introduction de la notion de “clean code”, vous pouvez la retrouver ici : [cliquez-ici](/blogecrire-code-de-qualite-1)

## Utilisez des noms significatifs
L’objectif de cette deuxième partie est de comprendre pourquoi il faut utiliser des noms significatifs et comment le faire.
En tant que développeur, nous nommons constamment des variables, des fonctions, des classes, des objets, etc. Étant donné que nous le faisons très souvent et dans chaque projet, il est important de faire attention aux noms que nous utilisons.

## Conseil n°1 : utilisez des noms qui révèlent l’intention
Pour commencer, il faut savoir que choisir un bon nom pour une variable, une classe ou tout autre élément dans un programme prend du temps.
Il ne faut donc pas avoir peur de renommer vos variables durant votre projet lorsque vous en trouvez des meilleurs. Avec les IDE, vous pouvez très facilement renommer une variable sans vous soucier de son utilisation, l’IDE se chargera de la renommer lors de ses importations et de ses utilisations.

L’une des premières règles sur le nommage, c’est que le nom doit révéler ce que fait une fonction ou à quoi sert une variable.

Prenons un exemple, si vous souhaitez avoir une variable qui correspond à un utilisateur :

`let u;`

Maintenant, renommons cette variable pour qu’on puisse comprendre plus facilement son usage :

`let user;`

Ainsi, lorsque vous reviendrez sur cette partie de code ou lorsqu’un autre développeur travaillera dessus, il ne perdra pas de temps à comprendre cette variable.

## Conseil n°2 : évitez la désinformation
Qu’est-ce que la déformation ? Imaginons que vous souhaitez déclarer une variable qui représente un groupe d’utilisateurs, il peut être tentant de nommer cette variable userList. Le problème ici, c’est qu’en utilisant le mot List vous pouvez laisser croire que cette variable est une liste au sens développement. On peut donc supposer que cette variable est un tableau par exemple, alors qu’au final, elle peut très bien être un objet qui contient des utilisateurs.

La solution est d’utiliser un nom qui n’a pas de signification sur son type : _userGroup_ ou _users_.

Dans le livre, Robert C. Martin prend aussi l’exemple du 0. En fonction des polices utilisées par votre IDE, le zéro peut être interprété comme un o.
La solution est tout simplement de renommer la variable 0 en zero.

## Conseil n°3 : distinguez correctement vos noms
Vous ne devez pas avoir des noms qui se ressemblent. Par exemple pour des fonctions, évitez ça : _getActiveCustomer()_, _getActiveCustomers()_, _getCustomerData()_
N’utilisez pas des termes techniques : _variable, table, list, etc_.

## Conseil n°4 : utilisez des noms prononçables
Les noms que vous choisissez dans vos programmes seront prononcés régulièrement, que ce soit par vous ou par vos collègues. Utilisez donc des noms facilement prononçables comme _meetingDate, meetingCustomer_ plutôt que _mDt, mCtm_.

## Conseil n°5 : les noms doivent être facilement trouvables
Les noms qui sont composés d’uniquement un caractère, comme par exemple i, u et 0 sont difficilement trouvables au milieu du code.
Uncle Bob conseille d’utiliser ce type de nom (un seul caractère) uniquement dans les petites méthodes. Vous pouvez garder par exemple le caractère i pour représenter l’index dans une boucle. Mais excepté ce cas précis, évitez les noms composés d’un seul caractère.

## Conseil n°6 : n’utilisez pas des noms incompréhensibles
Il est inutile de perdre du temps à comprendre le nom de la variable, d’une fonction ou d’une classe. Choisissez des noms explicites et simples.

## Conseil n°7 : n’utilisez pas de types dans les noms
Uncle Bob nomme le fait de nommer un élément dans le code avec son type, par exemple _addressString_ comme dangereux pour la lecture, pour changer le nom plus tard et pour changer tout simplement l’élément.

Si vous développez en JavaScript par exemple, il peut être intéressant d’utiliser TypeScript pour typer vos objets et vos variables afin d’éviter ce genre de noms.

## Conseil n°8 : utilisez des noms que d’autres personnes connaissent
Lorsque vous travaillez sur un projet, il est intéressant d’utiliser les mêmes termes et mots que les autres. Cela évitera aux autres développeurs de perdre du temps à essayer de comprendre le nom de chaque élément dans le code et ainsi de leur utilité.
Vous pouvez pour cela, utilisez les termes du secteur du projet. Par exemple, si vous travaillez sur une application de gestion de rendez-vous, vous pouvez utiliser les termes suivants : _meeting, appointment, contributor_.

## Conseil n°9 : nom des classes
Les noms des objets et des classes doivent être des noms ou des groupes de noms.
Exemple : _User, Customer, Meeting, Account, Car_.

## Conseil n°10 : nom des fonctions
Les noms des fonctions doivent contenir un verbe.
Exemple : _getActiveUsers(), deleteArticle(), updateAddress()_.

## Conseil n°11 : choisissez un mot par concept
Lorsque vous choisissiez un mot pour un concept. Si par exemple pour récupérer des utilisateurs vous choisissiez le mot get pour la fonction _getUsers()_, n’utilisez pas le mot _retrieve_ ou _fetch_ dans d’autres noms.

## Conseil n°12 : n’utilisez pas deux mêmes noms pour deux choses différentes
Si vous devez utiliser le même mot pour deux éléments différents, alors choisissez deux mots différents car ce ne sont pas les mêmes éléments.

## Conclusion
Pour conclure sur cette deuxième partie, qui correspond au deuxième chapitre du livre **Clean Code — A Handbook of Agile Software Craftsmanship** de Robert C. Martin, le choix des noms que vous utilisez dans votre code est très important.

Plus un nom sera simple, explicite et réfléchi, plus vous gagnerez du temps à vous relire et à comprendre l’utilité d’une fonction, d’une variable ou d’une classe.

_L’une des différences entre un développeur intelligent et un développeur professionnel c’est que le professionnel comprend que la clarté est maitresse. Les professionnels utilisent leurs forces pour écrire du code de qualité que les autres peuvent comprendre.
Robert C. Martin — A Handbook for Agile Software Craftsmanship_


Pourquoi et comment écrire du code de qualité (clean code) en tant que développeur ? Cet article vous introduit la notion de clean code - partie 2

Clean code, écrire du code de qualité - Partie 2


Bonjour, je suis Dimitri Dumont, développeur front-end freelance. Je suis passionné par les notions qui tournent autour du “software craftsmanship”.

J’ai récemment acheté le livre Clean Code — A Handbook of Agile Software Craftsmanship de Robert C. Martin (ou Uncle Bob). J’ai décidé de partager mes notes personnelles prises durant sa lecture.

Si vous souhaitez lire la deuxième partie qui porte sur le nommage, vous pouvez la retrouver en cliquant sur ce lien : [cliquez-ici](/blogecrire-code-de-qualite-2)

## Quel est le but de cette série d’articles ?
Il est intéressant de prendre des notes lorsque nous lisons un livre. Cela permet de mieux retenir les notions abordées et de les approfondir.

Ce livre est destiné aux développeurs qui souhaitent s’améliorer. Il aborde le sujet de “clean code”, qui est une notion importante dans notre métier de développeur. Ainsi, le but de cet article est de vous partager mes notes personnelles concernant le premier chapitre de ce livre. Chaque article de cette série vous permettra de découvrir les notions que je trouve importantes. Si le sujet vous intéresse vraiment, vous pourrez acheter le livre et le lire.

Enfin, un autre objectif de cet article, est de proposer du contenu sur la thématique de “clean code” en français.

Clean Code : écrire du code de qualité — Partie 2 Pourquoi et comment écrire du code de qualité (clean code) en tant que développeur ? Quelle est l’importance des noms…

## Le code existera toujours
Le code représente les détails des fonctionnalités d’un système. Malgré les progrès du no-code, les avancés technologiques et techniques sur les langages, contrairement à ce que certaines personnes disent, nous aurons toujours besoin de développeurs pour créer des systèmes, des applications ainsi que des sites internet. Il est donc nécessaire de porter une attention au code produit.

## Le code de mauvaise qualité
Un code de mauvaise qualité est un code développé sans discipline. Nous avons tous écrit du code de mauvaise qualité un jour. On reconnaît ce genre de code au fait de ne pas le comprendre et de ne pas pouvoir y toucher sans avoir peur de tout casser.

La raison la plus récurrente est que le développeur se dépêche de terminer une fonctionnalité ou un projet. Ainsi, il développe rapidement sans discipline pour finir à temps. Il ne prend pas le temps de nettoyer son code produit dans l’urgence. Il se dit qu’il le fera plus tard, que pour le moment il faut se dépêcher de terminer les fonctionnalités qu’il a promis de faire. Il ne reviendra jamais dessus pour faire du refactoring.

Le problème avec le fait de produire du code de mauvaise qualité, c’est que pour le maintenir ou ajouter une nouvelle fonctionnalité, cela devient très compliqué et demande de plus en plus de temps.

Au début de chaque projet, il est facile et rapide de créer et de modifier des fonctionnalités. Mais au fur et à mesure du développement, sans discipline et en voulant aller vite, cela devient de plus en plus compliqué. Il faut alors de plus en plus de temps pour développer le projet.

Ce qui est problématique, c’est que si les développeurs manquent de plus en plus de temps pour développer les nouvelles fonctionnalités, ils créaient de plus en plus de code mauvais. C’est une boucle dangereuse qui fait diminuer la productivité au fil du temps.

![Graphique de la productivité au fil du temps dans un projet mal codé](/blog/productivity-time.png)

## Vous êtes responsable de votre travail
Certains développeurs pensent qu’ils sont obligés de produire du code de mauvaise qualité car leur manager, leur client ou tout autre personne leur demande de respecter les délais. Ainsi, ils se contraignent parfois eux-mêmes à travailler rapidement sans porter une attention à leur travail.

Vous avez certainement déjà entendu ou même dit :

- “pas besoin de faire des tests, ça prend du temps, ça va ralentir l’avancée du projet”
- “c’est bon, ça fonctionne, c’est le principal. Je vais refactor plus tard, pour le moment, il faut livrer.”

Ce type de remarques est généralement dites soit par des personnes qui n’ont pas connaissances des effets à ne pas produire du code de qualité, soit par des développeurs pour qui manquent de compétences (ou qui n’ont pas envie de travailler correctement, par fainéantise).

Le but d’un développeur n’est pas uniquement de créer une fonctionnalité et qu’elle soit fonctionnelle. C’est aussi de la rendre facilement maintenable et évolutive.

Si le problème ne vient pas de vous en tant que développeur, mais d’une personne externe qui vous dirige. Elle qu’elle vous oblige à ne pas travailler correctement, rappelez-vous que vous êtes le professionnel. C’est donc vous qui savez comment aller vite en produisant un code solide et durable.

Pour cela, il existe plusieurs solutions, en voici deux :
- vous pouvez échanger avec cette personne, si elle est compréhensive et que vous démontrez les avantages de faire correctement votre travail, il comprendra et vous laissera faire
- si elle est totalement contre le fait de travailler avec les bonnes pratiques, alors ne lui en parler pas. Ne dites pas que vous faites des tests, du refactoring, etc. Etant donné que vous ne perdrez pas du temps et que vous en gagnerez, cette personne ne se souciera pas de la manière dont vous travaillez

## Les refontes
Parfois, certains développeurs proposent de réaliser une refonte du projet. Le problème avec cette pratique, c’est que sans discipline, le résultat sera exactement le même que le projet initial.

Vous n’êtes pas obliger de reprendre le projet à zéro, ou d’effectuer des grandes phases de refactoring. Par exemple, lorsque vous devez ajouter une nouvelle fonctionnalité, ou lorsque vous devez en modifier une, vous pouvez commencer par modifier les noms des variables qui ne sont pas définies correctement ou par améliorer une condition if sur le code où vous allez intervenir.

## Définition du “clean code”
Un code de bonne qualité est un code qui a été développé par des développeurs soucieux de leur travail.

Il est facilement compréhensible grâce au choix du nom des variables, des fonctions, des classes, etc. Vous devez comprendre ce qu‘il fait rapidement.

Ce code doit être correctement organisé grâce au formatage, aux différents design patterns et à son architecture.

Il ne contient pas de duplication, il est facilement testable et a peu de dépendances.

## Conclusion
Pour conclure, croire que se dépêcher et qu’écrire du code sans discipline vous aidera à aller plus vite est une erreur. Car comme nous l’avons vu, c’est une boucle qui diminue votre productivité au fil du temps et fait perdre de l’argent au client.

Dans les prochains articles, nous verrons comment écrire du “clean code”.

Si vous souhaitez lire la prochaine partie qui porte sur le nommage, vous pouvez la retrouver ici : [cliquez-ici](/blogecrire-code-de-qualite-2)


Pourquoi et comment écrire du code de qualité (clean code) en tant que développeur ? Cet article vous introduit la notion de clean code - partie 1

Développeur front-end freelance 👋

J'accompagne les start-ups et leurs équipes à créer des projets dans de meilleures conditions grâce aux bonnes pratiques de développement.

Tutoriel pour configurer et déployer un projet Next.jsPopulaire 🚀️

Création d'un SaaS en tant que développeur

Inversion de dépendances en front-endPopulaire 🚀️

Architecture hexagonale en front-endPopulaire 🚀️

Obtenir un prêt en tant que freelance

Clean code, écrire du code de qualité - Partie 2

Clean code, écrire du code de qualité - Partie 1