Catégorie : Javascript

Comment bien découpler l’état, la logique métier et les vues en React Native
Dans 90 % des projets React Native mal architecturés, le problème vient toujours du même endroit : tout est collé dans le composant.

Photo de Markus Spiske sur Unsplash

Quand les hooks, les appels d’API, les mutations d’état et le rendu JSX cohabitent dans un même fichier, tu perds le contrôle. Le code devient impossible à tester, à maintenir, à faire évoluer. Tu veux éviter ça ? Lis ce qui suit.

Votre stack vous ralentit ?

Je vous propose un audit technique gratuit pour identifier les freins à la performance ou à la maintenabilité.

Réserver mon audit gratuit

1. Comprendre les 3 couches fondamentales

Pour bien structurer une application React Native, il faut séparer clairement :
- La vue (UI) : ce que l’utilisateur voit (composants React).
- La logique métier (Use Cases) : ce que l’application fait (règles, traitements, appels d’API).
- L’état (State Management) : ce que l’application sait (données locales ou distantes).
2. Exemple simple : la todo app mal fichue
```
❌ Ne fais surtout pas ça
const TodoScreen = () => {
  const [todos, setTodos] = useState([]);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    setLoading(true);
    fetch('https://api/todos')
      .then(res => res.json())
      .then(setTodos)
      .finally(() => setLoading(false));
  }, []);

  return (
    <View>
      {loading ? <ActivityIndicator /> : todos.map(todo => <Text>{todo.title}</Text>)}
    </View>
  );
};
```
Problèmes :
- Pas testable
- Mélange de logique métier, état et vue
- Difficulté à faire évoluer ce code (pagination, filtre, etc.)
3. 🔨 Solution : découplage intelligent

a. La Vue → composants purs

Elle ne fait que recevoir des props et déclencher des callbacks.
```
const TodoList = ({ todos, loading }) => (
  <View>
    {loading ? <ActivityIndicator /> : todos.map(todo => <Text key={todo.id}>{todo.title}</Text>)}
  </View>
);
```
b. La logique métier → use case ou hook métier
```
b. La logique métier → use case ou hook métier

// useCases/useFetchTodos.ts
export const useFetchTodos = () => {
  const [todos, setTodos] = useState([]);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    const fetchTodos = async () => {
      setLoading(true);
      const res = await fetch('https://api/todos');
      const data = await res.json();
      setTodos(data);
      setLoading(false);
    };
    fetchTodos();
  }, []);

  return { todos, loading };
};
```
c. L’état → context, Zustand, Jotai, Redux Toolkit

Ici on reste local, mais si les todos sont utilisés ailleurs, il faut extraire l’état global dans un store partagé.

4. Bonus : structuration du projet
```
/src
  /components
    TodoList.tsx        ← UI pure
  /hooks
    useFetchTodos.ts    ← logique métier
  /screens
    TodoScreen.tsx      ← composition
  /stores
    todos.store.ts      ← état global (si nécessaire)
```
Conclusion:

Tu veux scaler un projet React Native ? Alors sépare.
Si tu ne peux pas expliquer en 5 secondes où est la logique métier d’un écran, c’est que tu as échoué à architecturer ton app.

Découvrez comment utiliser l’architecture hexagonale avec ReactJS

Lire l’article
1 avril 2025

Implémentation d’une architecture hexagonale avec React et Redux

L’architecture hexagonale, également connue sous le nom de « Ports et Adaptateurs », est une approche de conception logicielle qui vise à créer des applications flexibles, maintenables et testables. Elle sépare clairement les préoccupations entre le domaine métier, l’infrastructure et l’interface utilisateur.

Dans ce tutoriel, nous allons explorer comment structurer une application React avec Redux en utilisant une architecture hexagonale. Nous prendrons l’exemple d’une gestion d’utilisateurs pour illustrer les concepts, en suivant la structure de projet détaillée ci-dessous.

Votre stack vous ralentit ?

Je vous propose un audit technique gratuit pour identifier les freins à la performance ou à la maintenabilité.

Réserver mon audit gratuit

Structure du projet

Voici la structure du projet que nous allons utiliser :

app/                # Application : spécifique à React et Redux
  components/
  features/
    user/
      userSlice.ts
      userSelectors.ts
      userThunks.ts
      userHooks.ts
      pages/
        UserList.tsx
        UserDetail.tsx
        UserForm.tsx
  layout/
    FullPage.tsx
    Dashboard.tsx
  routes/
    userRoutes.ts
  store/
    index.ts
domain/             # Métier : types et interfaces métiers
  entities/
    User.ts
  ports/
    UserRepository.ts
  services/
    UserService.ts
infrastructure/     # Adapteurs : API, stockage, etc.
  api/
    userApi.ts
  storage/
    userStorage.ts
styles/
utils/

Domaine (`domain/`)

Le domaine contient la logique métier pure de votre application. Il est indépendant de l’interface utilisateur et de l’infrastructure.

1. Entités (`entities/`)

domain/entities/User.ts

export interface User {
  id: string;
  name: string;
  email: string;
  role: string;
}

2. Ports (`ports/`)

Les ports sont des interfaces qui définissent comment le domaine interagit avec l’extérieur.

domain/ports/UserRepository.ts

import { User } from '../entities/User';

export interface UserRepository {
  getUsers(): Promise<User[]>;
  getUserById(id: string): Promise<User | null>;
  createUser(user: User): Promise<User>;
  updateUser(user: User): Promise<User>;
  deleteUser(id: string): Promise<void>;
}

3. Services (`services/`)

Les services contiennent la logique métier et utilisent les ports pour accéder aux données.

domain/services/UserService.ts

import { User } from '../entities/User';
import { UserRepository } from '../ports/UserRepository';

export class UserService {
  constructor(private userRepository: UserRepository) {}

  async getAllUsers(): Promise<User[]> {
    // Logique métier supplémentaire si nécessaire
    return await this.userRepository.getUsers();
  }

  async getUserById(id: string): Promise<User | null> {
    // Logique métier supplémentaire si nécessaire
    return await this.userRepository.getUserById(id);
  }

  async createUser(user: User): Promise<User> {
    // Exemple de validation métier
    if (!user.email.includes('@')) {
      throw new Error('Email invalide');
    }
    return await this.userRepository.createUser(user);
  }

  async updateUser(user: User): Promise<User> {
    // Logique métier pour la mise à jour
    return await this.userRepository.updateUser(user);
  }

  async deleteUser(id: string): Promise<void> {
    // Logique métier pour la suppression
    return await this.userRepository.deleteUser(id);
  }
}

Infrastructure (`infrastructure/`)

L’infrastructure contient les implémentations concrètes des ports définis dans le domaine.

1. API (`api/`)

infrastructure/api/userApi.ts

import axios from 'axios';
import { User } from '../../domain/entities/User';
import { UserRepository } from '../../domain/ports/UserRepository';

export class UserApi implements UserRepository {
  private apiUrl = '/api/users';

  async getUsers(): Promise<User[]> {
    const response = await axios.get<User[]>(this.apiUrl);
    return response.data;
  }

  async getUserById(id: string): Promise<User | null> {
    const response = await axios.get<User>(`${this.apiUrl}/${id}`);
    return response.data;
  }

  async createUser(user: User): Promise<User> {
    const response = await axios.post<User>(this.apiUrl, user);
    return response.data;
  }

  async updateUser(user: User): Promise<User> {
    const response = await axios.put<User>(`${this.apiUrl}/${user.id}`, user);
    return response.data;
  }

  async deleteUser(id: string): Promise<void> {
    await axios.delete(`${this.apiUrl}/${id}`);
  }
}

2. Stockage (`storage/`)

Optionnellement, vous pouvez implémenter un stockage local.

infrastructure/storage/userStorage.ts

import { User } from '../../domain/entities/User';
import { UserRepository } from '../../domain/ports/UserRepository';

export class UserStorage implements UserRepository {
  private storageKey = 'users';

  async getUsers(): Promise<User[]> {
    const data = localStorage.getItem(this.storageKey);
    return data ? JSON.parse(data) : [];
  }

  async getUserById(id: string): Promise<User | null> {
    const users = await this.getUsers();
    return users.find(user => user.id === id) || null;
  }

  async createUser(user: User): Promise<User> {
    const users = await this.getUsers();
    users.push(user);
    localStorage.setItem(this.storageKey, JSON.stringify(users));
    return user;
  }

  async updateUser(user: User): Promise<User> {
    let users = await this.getUsers();
    users = users.map(u => (u.id === user.id ? user : u));
    localStorage.setItem(this.storageKey, JSON.stringify(users));
    return user;
  }

  async deleteUser(id: string): Promise<void> {
    let users = await this.getUsers();
    users = users.filter(u => u.id !== id);
    localStorage.setItem(this.storageKey, JSON.stringify(users));
  }
}

Application (`app/`)

L’application gère l’interface utilisateur avec React et la gestion d’état avec Redux.

1. Store Redux (`store/`)

app/store/index.ts

import { configureStore } from '@reduxjs/toolkit';
import userReducer from '../features/user/userSlice';

export const store = configureStore({
  reducer: {
    user: userReducer,
    // Autres reducers...
  },
});

export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;

app/store/hooks.ts

import { TypedUseSelectorHook, useDispatch, useSelector } from 'react-redux';
import type { RootState, AppDispatch } from './index';

// Utilisez ces hooks personnalisés dans votre application
export const useAppDispatch = () => useDispatch<AppDispatch>();
export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;

2. Features (`features/`)

Nous allons maintenant détailler la partie features/user/.

a. Slice utilisateur (`userSlice.ts`)

app/features/user/userSlice.ts

import { createSlice } from '@reduxjs/toolkit';
import { User } from '../../domain/entities/User';
import { fetchUsers, fetchUserById, createUser, updateUser, deleteUser } from './userThunks';

interface UserState {
  users: User[];
  selectedUser: User | null;
  loading: boolean;
  error: string | null;
}

const initialState: UserState = {
  users: [],
  selectedUser: null,
  loading: false,
  error: null,
};

const userSlice = createSlice({
  name: 'user',
  initialState,
  reducers: {
    clearSelectedUser(state) {
      state.selectedUser = null;
    },
  },
  extraReducers: builder => {
    builder
      // fetchUsers
      .addCase(fetchUsers.pending, state => {
        state.loading = true;
        state.error = null;
      })
      .addCase(fetchUsers.fulfilled, (state, action) => {
        state.loading = false;
        state.users = action.payload;
      })
      .addCase(fetchUsers.rejected, (state, action) => {
        state.loading = false;
        state.error = action.error.message || 'Erreur lors du chargement des utilisateurs';
      })
      // fetchUserById
      .addCase(fetchUserById.pending, state => {
        state.loading = true;
        state.error = null;
      })
      .addCase(fetchUserById.fulfilled, (state, action) => {
        state.loading = false;
        state.selectedUser = action.payload;
      })
      .addCase(fetchUserById.rejected, (state, action) => {
        state.loading = false;
        state.error = action.error.message || "Erreur lors du chargement de l'utilisateur";
      })
      // createUser
      .addCase(createUser.fulfilled, (state, action) => {
        state.users.push(action.payload);
      })
      // updateUser
      .addCase(updateUser.fulfilled, (state, action) => {
        const index = state.users.findIndex(u => u.id === action.payload.id);
        if (index !== -1) {
          state.users[index] = action.payload;
        }
      })
      // deleteUser
      .addCase(deleteUser.fulfilled, (state, action) => {
        state.users = state.users.filter(u => u.id !== action.payload);
      });
  },
});

export const { clearSelectedUser } = userSlice.actions;
export default userSlice.reducer;

b. Thunks (`userThunks.ts`)

Modification importante : Les thunks utilisent maintenant les services du domaine au lieu d’accéder directement à l’API.

app/features/user/userThunks.ts

import { createAsyncThunk } from '@reduxjs/toolkit';
import { User } from '../../domain/entities/User';
import { UserService } from '../../domain/services/UserService';
import { UserApi } from '../../infrastructure/api/userApi';

// Instanciez le service avec l'implémentation du repository
const userRepository = new UserApi();
const userService = new UserService(userRepository);

export const fetchUsers = createAsyncThunk('user/fetchUsers', async () => {
  return await userService.getAllUsers();
});

export const fetchUserById = createAsyncThunk('user/fetchUserById', async (id: string) => {
  return await userService.getUserById(id);
});

export const createUser = createAsyncThunk('user/createUser', async (user: User) => {
  return await userService.createUser(user);
});

export const updateUser = createAsyncThunk('user/updateUser', async (user: User) => {
  return await userService.updateUser(user);
});

export const deleteUser = createAsyncThunk('user/deleteUser', async (id: string) => {
  await userService.deleteUser(id);
  return id;
});

c. Sélecteurs (`userSelectors.ts`)

Les sélecteurs permettent d’accéder facilement aux données du store.

app/features/user/userSelectors.ts

import { RootState } from '../../store';

export const selectUsers = (state: RootState) => state.user.users;
export const selectSelectedUser = (state: RootState) => state.user.selectedUser;
export const selectUserLoading = (state: RootState) => state.user.loading;
export const selectUserError = (state: RootState) => state.user.error;

d. Hooks (`userHooks.ts`)

Les hooks personnalisés facilitent la réutilisation de la logique dans les composants.

app/features/user/userHooks.ts

import { useAppDispatch, useAppSelector } from '../../store/hooks';
import { useEffect } from 'react';
import {
  fetchUsers,
  fetchUserById,
  createUser,
  updateUser,
  deleteUser,
} from './userThunks';
import {
  selectUsers,
  selectSelectedUser,
  selectUserLoading,
  selectUserError,
} from './userSelectors';

export const useUsers = () => {
  const dispatch = useAppDispatch();
  const users = useAppSelector(selectUsers);
  const loading = useAppSelector(selectUserLoading);
  const error = useAppSelector(selectUserError);

  useEffect(() => {
    dispatch(fetchUsers());
  }, [dispatch]);

  return { users, loading, error };
};

export const useUser = (id: string) => {
  const dispatch = useAppDispatch();
  const user = useAppSelector(selectSelectedUser);
  const loading = useAppSelector(selectUserLoading);
  const error = useAppSelector(selectUserError);

  useEffect(() => {
    dispatch(fetchUserById(id));
  }, [dispatch, id]);

  return { user, loading, error };
};

export const useCreateUser = () => {
  const dispatch = useAppDispatch();
  return (user: User) => dispatch(createUser(user));
};

export const useUpdateUser = () => {
  const dispatch = useAppDispatch();
  return (user: User) => dispatch(updateUser(user));
};

export const useDeleteUser = () => {
  const dispatch = useAppDispatch();
  return (id: string) => dispatch(deleteUser(id));
};

e. Pages (`pages/`)

`UserList.tsx`

app/features/user/pages/UserList.tsx

import React from 'react';
import { useUsers, useDeleteUser } from '../userHooks';
import { Link } from 'react-router-dom';

const UserList: React.FC = () => {
  const { users, loading, error } = useUsers();
  const deleteUser = useDeleteUser();

  if (loading) return <p>Chargement...</p>;
  if (error) return <p>Erreur : {error}</p>;

  return (
    <div>
      <h1>Liste des utilisateurs</h1>
      <Link to="/users/new">Créer un nouvel utilisateur</Link>
      <ul>
        {users.map(user => (
          <li key={user.id}>
            <Link to={`/users/${user.id}`}>{user.name}</Link> ({user.email}) - {user.role}
            <button onClick={() => deleteUser(user.id)}>Supprimer</button>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default UserList;

`UserDetail.tsx`

app/features/user/pages/UserDetail.tsx

import React from 'react';
import { useParams, Link } from 'react-router-dom';
import { useUser } from '../userHooks';

const UserDetail: React.FC = () => {
  const { id } = useParams<{ id: string }>();
  const { user, loading, error } = useUser(id!);

  if (loading) return <p>Chargement...</p>;
  if (error) return <p>Erreur : {error}</p>;
  if (!user) return <p>Utilisateur non trouvé</p>;

  return (
    <div>
      <h1>Détails de l'utilisateur</h1>
      <p>Nom : {user.name}</p>
      <p>Email : {user.email}</p>
      <p>Rôle : {user.role}</p>
      <Link to={`/users/${user.id}/edit`}>Modifier</Link>
    </div>
  );
};

export default UserDetail;

`UserForm.tsx`

app/features/user/pages/UserForm.tsx

import React, { useEffect } from 'react';
import { useForm } from 'react-hook-form';
import { User } from '../../../domain/entities/User';
import { useCreateUser, useUpdateUser, useUser } from '../userHooks';
import { useNavigate, useParams } from 'react-router-dom';

const UserForm: React.FC = () => {
  const { id } = useParams<{ id: string }>();
  const isEditMode = Boolean(id);
  const { register, handleSubmit, reset } = useForm<User>();
  const createUser = useCreateUser();
  const updateUser = useUpdateUser();
  const navigate = useNavigate();
  const { user } = useUser(id!);

  useEffect(() => {
    if (isEditMode && user) {
      reset(user);
    }
  }, [isEditMode, user, reset]);

  const onSubmit = async (data: User) => {
    if (isEditMode) {
      await updateUser({ ...data, id: id! });
    } else {
      await createUser(data);
    }
    navigate('/users');
  };

  return (
    <div>
      <h1>{isEditMode ? 'Modifier' : 'Créer'} un utilisateur</h1>
      <form onSubmit={handleSubmit(onSubmit)}>
        <div>
          <label>Nom</label>
          <input {...register('name', { required: true })} />
        </div>
        <div>
          <label>Email</label>
          <input {...register('email', { required: true })} />
        </div>
        <div>
          <label>Rôle</label>
          <input {...register('role', { required: true })} />
        </div>
        <button type="submit">{isEditMode ? 'Mettre à jour' : 'Créer'}</button>
      </form>
    </div>
  );
};

export default UserForm;

3. Routes (`routes/`)

app/routes/userRoutes.ts

import React from 'react';
import { Route, Routes } from 'react-router-dom';
import UserList from '../features/user/pages/UserList';
import UserDetail from '../features/user/pages/UserDetail';
import UserForm from '../features/user/pages/UserForm';

const UserRoutes: React.FC = () => (
  <Routes>
    <Route path="/users" element={<UserList />} />
    <Route path="/users/new" element={<UserForm />} />
    <Route path="/users/:id/edit" element={<UserForm />} />
    <Route path="/users/:id" element={<UserDetail />} />
  </Routes>
);

export default UserRoutes;

4. Layout (`layout/`)

app/layout/FullPage.tsx

import React from 'react';

const FullPageLayout: React.FC = ({ children }) => {
  return (
    <div className="full-page-layout">
      {children}
    </div>
  );
};

export default FullPageLayout;

app/layout/Dashboard.tsx

import React from 'react';
import { Link, Outlet } from 'react-router-dom';

const DashboardLayout: React.FC = () => {
  return (
    <div className="dashboard-layout">
      <nav>
        <ul>
          <li><Link to="/users">Utilisateurs</Link></li>
          {/* Autres liens de navigation */}
        </ul>
      </nav>
      <main>
        <Outlet />
      </main>
    </div>
  );
};

export default DashboardLayout;

5. Point d’entrée principal

app/App.tsx

import React from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import DashboardLayout from './layout/Dashboard';
import FullPageLayout from './layout/FullPage';
import UserRoutes from './routes/userRoutes';

const App: React.FC = () => {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<DashboardLayout />}>
          {/* Routes principales */}
          <Route path="users/*" element={<UserRoutes />} />
        </Route>
        {/* Routes avec un autre layout */}
        <Route path="/login" element={<FullPageLayout>{/* Composant de connexion */}</FullPageLayout>} />
      </Routes>
    </Router>
  );
};

export default App;

Styles (`styles/`)

Le dossier styles/ contient vos fichiers CSS ou SCSS pour styliser votre application.

Utils (`utils/`)

Le dossier utils/ contient des fonctions utilitaires réutilisables dans votre application.

Conclusion

En adoptant une architecture hexagonale dans votre application React avec Redux, vous bénéficiez d’une séparation claire des responsabilités :

Domaine : Contient la logique métier pure et est indépendant des frameworks et bibliothèques.
Infrastructure : Gère les détails techniques comme les appels API et le stockage.
Application : Gère l’interface utilisateur et l’état de l’application.

En modifiant les thunks pour qu’ils utilisent les services du domaine plutôt que d’accéder directement à l’infrastructure, vous respectez pleinement les principes de l’architecture hexagonale. Cela permet de garder votre couche d’application indépendante des détails techniques de l’infrastructure.

Cette architecture facilite la maintenance, les tests et l’évolutivité de votre application.

Ressources supplémentaires

Vous pouvez consulter ma proposition d’archi hexagonal en Golang

4 octobre 2024

Demystifying Javascript: A dive into its history and construction

JavaScript, often misunderstood and sometimes underestimated, is a cornerstone of modern web development. Despite its ubiquitous presence and essential role in the tech landscape, many developers and tech enthusiasts only scratch the surface of its rich history and intricate construction. In this blog post, we will demystify JavaScript by exploring its origins, evolution, and core characteristics.

The birth of JavaScript

via GIPHY

JavaScript was created in 1995 by Brendan Eich while he was working at Netscape Communications. Initially developed in just ten days, JavaScript was designed to enable web pages to become interactive. Originally called Mocha, then LiveScript, it was finally named JavaScript to capitalize on the popularity of Java, despite having little in common with it. This rapid development and rebranding laid the foundation for what would become a pivotal technology in the web’s evolution.

Early challenges and standardization

In its early days, JavaScript faced significant challenges, including inconsistent browser support and performance issues. These hurdles led to the formation of the ECMA International committee in 1997, which standardized JavaScript as ECMAScript. The standardization efforts aimed to ensure consistent behavior across different web browsers, leading to the first official release, ECMAScript 1, in 1997. This move was crucial for the language’s stability and widespread adoption.

Key features and characteristics

Photo de Patrick sur Unsplash

JavaScript is known for its versatility and unique features. It supports multiple programming paradigms, including imperative, functional, and event-driven programming. One of its standout features is its asynchronous nature, which allows developers to handle events and perform tasks without blocking the main thread. This is particularly important for creating responsive and efficient web applications. Additionally, JavaScript’s prototype-based inheritance and first-class functions contribute to its flexibility and power.

Misconceptions and criticisms

via GIPHY

Despite its strengths, JavaScript has faced criticism and misconceptions over the years. Early versions of the language were often dismissed as « toy » languages due to their perceived simplicity and performance limitations. However, modern advancements, such as Just-In-Time (JIT) compilation and the introduction of powerful frameworks and libraries, have significantly enhanced JavaScript’s capabilities. Today, it’s a robust and mature language that powers complex applications and systems.

The evolution continues

Photo de Johannes Plenio sur Unsplash

JavaScript’s evolution is ongoing, with new features and improvements being added regularly. The ECMAScript standards body continues to refine and expand the language, with recent updates introducing features like async/await, modules, and optional chaining. These enhancements not only make JavaScript more powerful but also more accessible and enjoyable for developers. The language’s continuous evolution ensures that it remains at the forefront of web development.

JavaScript’s journey from a hastily developed scripting language to a cornerstone of web development is a testament to its resilience and adaptability. By understanding its history, key features, and ongoing evolution, we can better appreciate its pivotal role in the tech world. JavaScript is more than just a language; it’s a driving force behind the interactive, dynamic experiences that define the modern web.

To deeply understand Javascript, you could read these posts Evolution and Revolution: How JavaScript Shapes the Future of Web Development and JavaScript: The Hidden Engine Behind Technological Innovation

27 mai 2024
Javascript est un langage incompris.

Javascript est un langage incompris. Tant tôt aimé, souvent détesté, il reste le langage qui fait vivre le web.

Javascript est souvent considéré comme le moteur indispensable qui fait fonctionner le Web. Pourtant, malgré son rôle crucial dans le développement web, il est un langage très incompris. Certaines personnes l’adorent pour sa flexibilité et sa polyvalence, alors que d’autres le critiquent pour ses incohérences et ses complications. Dans ce blog, nous allons explorer pourquoi Javascript demeure un pilier essentiel du développement web, tout en soulevant les raisons de ses critiques et de ses louanges.

1. Flexibilité et dynamisme

Photo de Tikkho Maciel sur Unsplash

Javascript est extrêmement flexible. Il permet aux développeurs de créer des interactions complexes sur les pages web en quelques lignes de code. Prenez l’exemple des frameworks populaires comme React ou Angular, qui utilisent Javascript pour construire des interfaces utilisateur dynamiques et réactives. Cette capacité à s’adapter et à répondre instantanément aux actions des utilisateurs est ce qui rend les sites modernes si engageants et interactifs.

2. L’universalité

Photo de Firmbee.com sur Unsplash

Javascript est le seul langage de programmation qui s’exécute nativement dans les navigateurs web. Cela signifie que presque chaque appareil avec un navigateur internet peut exécuter Javascript sans avoir besoin d’installations supplémentaires. De plus, avec l’avènement de Node.js, Javascript s’est étendu au développement back-end, permettant aux développeurs d’utiliser un langage unique à travers la pile complète de développement, le développeur Fullstack Javascript. Cette ubiquité simplifie la formation des développeurs et l’interopérabilité des applications.

3. La communauté Javascript et les ressources

Photo de Hannah Busing sur Unsplash

Javascript bénéficie d’une des plus grandes communautés de développeurs au monde. Le nombre impressionnant de frameworks, bibliothèques et outils disponibles est un témoignage de la vitalité de cette communauté. Cette richesse de ressources signifie que les développeurs peuvent souvent trouver une solution, une bibliothèque ou un plugin prêt à l’emploi pour presque n’importe quel problème qu’ils peuvent rencontrer, accélérant le développement et la rénovation technologique.

4. Incohérences et difficultés

Photo de Michał Parzuchowski sur Unsplash

Malgré ses forces, Javascript n’est pas sans failles. Le langage a été critiqué pour ses incohérences, comme les façons parfois déroutantes dont il gère la coercition de types ou son modèle d’asynchronisme. Ces aspects peuvent rendre le débogage et le test des applications Javascript frustrants, même pour des développeurs expérimentés. Ceci est souvent source de réticence pour ceux qui sont habitués à des langages plus structurés comme Java ou C#

5. Performances et optimisation

Photo de NASA sur Unsplash

Javascript a fait d’énormes progrès en termes de performances avec l’introduction de moteurs Javascript modernes comme V8 (utilisé dans Chrome et Node.js). Cependant, la gestion de la mémoire et les performances peuvent toujours poser problème, surtout dans les applications complexes. Les développeurs doivent souvent recourir à des techniques spécifiques pour optimiser leur code, ce qui peut augmenter la complexité des projets.

Bien que contesté, Javascript fait partie du paysage du développement, et ce, pour durer.

Javascript reste un pilier du développement web moderne, indissociable de l’expérience utilisateur interactive que nous attendons aujourd’hui des applications web. Malgré ses défis et les critiques qu’il peut essuyer, son évolution continue, portée par une communauté dynamique et innovante, prouve qu’il est bien plus qu’un simple langage de programmation. Comprendre et utiliser efficacement Javascript est essentiel pour tout développeur web aspirant à créer des applications modernes et performantes. Il est indéniable que JS est un langage vivant et évolutif, et c’est peut-être là, dans cette capacité à se réinventer constamment, que réside le vrai génie de ce langage.

A propos de l’auteur:

TECHER Jean Sébastien dit JS

Tech lead / Fullstack developer

https://www.linkedin.com/in/jean-sebastien-techer

6 mai 2024

Catégorie : Javascript

Comment bien découpler l’état, la logique métier et les vues en React Native

1. Comprendre les 3 couches fondamentales

2. Exemple simple : la todo app mal fichue

3. 🔨 Solution : découplage intelligent

a. La Vue → composants purs

b. La logique métier → use case ou hook métier

c. L’état → context, Zustand, Jotai, Redux Toolkit

4. Bonus : structuration du projet

Conclusion:

Implémentation d’une architecture hexagonale avec React et Redux

Structure du projet

Domaine (domain/)

1. Entités (entities/)

2. Ports (ports/)

3. Services (services/)

Infrastructure (infrastructure/)

1. API (api/)

2. Stockage (storage/)

Application (app/)

1. Store Redux (store/)

2. Features (features/)

a. Slice utilisateur (userSlice.ts)

b. Thunks (userThunks.ts)

c. Sélecteurs (userSelectors.ts)

d. Hooks (userHooks.ts)

e. Pages (pages/)

UserList.tsx

UserDetail.tsx

UserForm.tsx

3. Routes (routes/)

4. Layout (layout/)

5. Point d’entrée principal

Styles (styles/)

Utils (utils/)

Conclusion

Ressources supplémentaires

Demystifying Javascript: A dive into its history and construction

The birth of JavaScript

Early challenges and standardization

Key features and characteristics

Misconceptions and criticisms

The evolution continues

Javascript est un langage incompris.

1. Flexibilité et dynamisme

2. L’universalité

3. La communauté Javascript et les ressources

4. Incohérences et difficultés

5. Performances et optimisation