DEV Community: oussama

Spring Boot : Quand @Transactional décide de ruiner votre journée

oussama — Sun, 19 Apr 2026 17:10:58 +0000

**Le Scénario Classique

Le Développeur : "J’ai bien fait tous mes save(), tout est en base de** données, je peux partir en pause."
Spring Framework : "C'est ce que tu crois. Une RuntimeException vient de surgir à la dernière ligne... Rollback général pour tout le monde !"

L'approche sans @Transactional : Le Far West C'est le mode par défaut si vous oubliez l'annotation.

Le comportement : Chaque opération est atomique et immédiate.

Le point positif : Vos données sont sauvegardées instantanément quoi qu'il arrive.

Le point négatif : Bonne chance pour gérer la cohérence. Si votre processus plante au milieu, vous vous retrouvez avec une base de données "en morceaux" (un utilisateur créé mais sans son profil associé, par exemple).

L'approche avec @Transactional : Le Parent Strict C'est la configuration standard pour sécuriser vos processus métier.

Le comportement : C'est le pacte du "Tout ou Rien".

Le point positif : La cohérence est absolue. On ne laisse jamais de données orphelines.

Le point négatif : C'est frustrant. Une seule petite erreur de validation à la toute fin du processus déclenche le protocole nucléaire : Spring efface absolument toute votre progression depuis le début de la méthode.

Le Plot Twist : REQUIRES_NEW entre dans le chat Parfois, vous avez besoin de flexibilité au sein d'une grande transaction.

Java @Transactional(propagation = Propagation.REQUIRES_NEW) public void saveIndependentData(Data data) { repository.save(data); }
Le comportement : Chaque sauvegarde s'exécute dans sa propre petite bulle indépendante.

Le résultat : Une erreur survient sur un élément spécifique ? Ce n'est plus un désastre global. Le fautif est ignoré, mais tout le reste de votre travail survit et reste bien au chaud dans la base de données.

Moralité technique

@Transactional classique agit comme un parent strict : si un seul enfant fait une bêtise, tout le groupe est privé de dessert.

REQUIRES_NEW agit comme un parent cool : il laisse chacun assumer ses erreurs sans gâcher la journée des autres.

Le conseil du jour :

Ne laissez pas une exception isolée effacer des heures de traitement de données. Apprenez à isoler vos transactions stratégiques pour garder votre base propre et votre santé mentale intacte.

Architecture des applications web modernes

oussama — Fri, 04 Jul 2025 18:57:02 +0000

L’architecture d’une application web ne se résume plus à un simple client-serveur. Aujourd’hui, les applications modernes doivent être scalables, modulaires, rapides et résilientes. Voici un guide clair et structuré sur les principes clés, les composants essentiels, et les bonnes pratiques d’architecture web

1. Les couches fondamentales d’une application web

Client (Front-end) ⇄ API Gateway ⇄ Back-end ⇄ Services ⇄ Base de données

Une application web moderne est généralement organisée en plusieurs couches distinctes :
Front-end (UI)

Frameworks : React, Vue, Svelte, etc.
Rendu : Client-Side, Server-Side (Next.js, Nuxt), Static
Consomme les données via API REST ou GraphQL

Back-end (API)

Langages : Node.js, Go, Python, Java, etc.
Architecture : Monolithique, Microservices, Serverless
Gère : authentification, logique métier, accès aux données

Base de données

SQL : PostgreSQL, MySQL
NoSQL : MongoDB, Redis, Firebase
Edge DB ou graph DB selon les cas d’usage

2.Choix de l’architecture front-end

`> Single Page Application (SPA)

Application chargée une fois, le reste en JS (ex : React)
Rapide côté UX, mais lourd côté SEO si non SSR`

`> > Server-Side Rendering (SSR)

Pages générées sur le serveur à chaque requête
Excellent pour le SEO et le TTFB (Time to First Byte)`

`> Static Site Generation (SSG)

Pages générées au build (Next.js, Astro)
Ultra performant, mais moins dynamique
`

on parle de rendement hybride : utiliser SSR + ISR + SSG dans un seul projet (ex : Next.js, Nuxt 3)

3. API : REST, GraphQL ou tRPC ?

Type        Avantages                           Idéal pour
REST        Simple, stateless                   API classiques, CRUD
GraphQL     Flexible, typé, -de fetching   Frontends complexes tRPC
End-to-end  typesafe (TS)              Projets TypeScript fullstack           
                                                     (Next.js)

4. Architecture du back-end

🧱 Monolithe:Tout dans un seul codebase

Simple pour démarrer, difficile à scaler

🔗 Microservices:Services découplés, communiquent via API, events

Scalabilité, maintenabilité → plus complexe

☁️ Serverless (FaaS):Fonctions déployées individuellement

Parfait pour les workloads imprévisibles

Exemples : AWS Lambda, Vercel Functions, Netlify Functions

5. Outillage DevOps & CI/CD

Intégration continue :
GitHub Actions, GitLab CI, CircleCI

Tests automatisés + build + lint + déploiement

Déploiement continu :
Vercel, Netlify, Render, Fly.io

Docker, Kubernetes pour les apps complexes

Observabilité :
Monitoring : Datadog, Sentry, LogRocket

Logs & métriques : Grafana, Prometheus, ELK

6. Sécurité moderne

Authentification : JWT, OAuth2, Auth0, Clerk, Supabase Auth
Stockage : chiffrement des données sensibles
Sécurité API : rate limiting, CORS, validation stricte des entrées

7. Scalabilité & performances

CDN pour les assets statiques (Cloudflare, Fastly)
Edge functions pour rapprocher le traitement de l’utilisateur
Caching : côté client, serveur, base de données
Load balancer : répartir le trafic entre les serveurs

Exemple d’architecture Next.js moderne

txt

/next-app
  /pages
  /components
  /api               ← API route (serverless)
  /lib               ← fonctions utilitaires
  /hooks
  /middleware        ← auth, logs, etc.
  /public
  /styles

Pages SSR + Pages statiques + API intégrée
Déploiement serverless sur Vercel
Stockage DB sur Supabase / PlanetScale

Conclusion

L’architecture d'une application web moderne repose sur :

Une séparation claire des responsabilités

L’usage de services adaptés à chaque couche

Une scalabilité horizontale

Un équilibre entre performances, sécurité et simplicité

Astuces pour améliorer votre workflow de développement

oussama — Fri, 04 Jul 2025 18:42:04 +0000

Un bon workflow de développement ne se limite pas à écrire du code : il englobe votre environnement, vos outils, vos habitudes, et la manière dont vous collaborez avec les autres. Voici une sélection d’astuces pratiques pour améliorer considérablement votre quotidien de développeur.

1. Utilisez un terminal puissant et personnalisable

Un terminal bien configuré = un gain de temps énorme.

🖥️ Outils recommandés :

iTerm2, Hyper, ou Alacritty (Mac/Linux)
Windows Terminal (Windows)

Ajoutez des extensions :

       1. plugins Git, syntax highlighting
       2. Prompt intelligent : Starship, Powerlevel10k

2. Automatisez les tâches répétitives

Évitez de faire manuellement ce qui peut être scripté :

Utilisez des scripts NPM, Bash, ou Makefile pour :

Lancer les tests

Build/déploiement

Nettoyer un environnement

Exemple :

bash

# package.json
"scripts": {
  "start": "vite",
  "test": "vitest run",
  "clean": "rm -rf dist && rm -rf .next"
}

3. Intégrez des tests (unitaires, E2E, CI)

Tests unitaires : avec Vitest, Jest

Tests E2E : avec Cypress ou Playwright

CI/CD : GitHub Actions, GitLab CI, CircleCI

Intégrez les tests dans vos PR pour détecter les erreurs avant merge.

4. Structurez bien vos projets

Une structure claire évite la confusion à long terme :

bash
/src
  /features
  /components
  /hooks
  /utils
  /types
/tests

Architecture modulaire par domaine
Créez des composants réutilisables et testables

5. Automatisez le lint et le format

Gardez votre code propre sans y penser :

ESLint + Prettier

Husky pour les hooks Git (pré-commit, etc.)

Lint-staged pour ne tester que les fichiers modifiés

bash

# Exemple .husky/pre-commit
npx lint-staged

6. Utilisez un monorepo avec des outils modernes

Si vous gérez plusieurs packages ou projets :

Outils recommandés :

Nx
Turborepo
Lerna (moins utilisé aujourd’hui)
Un monorepo permet une gestion unifiée des dépendances, scripts, CI.

7. Adoptez la gestion du temps et du focus

Technique Pomodoro : 25min de focus, 5min de pause

Apps utiles :

Raycast, Alfred (macOS)
Toggl, Forest, RescueTime

🧘‍♂️ Coupez les notifications, utilisez un casque, restez concentré.

8. Extensions VS Code incontournables

ESLint
Prettier
GitLens
Tailwind CSS IntelliSense
Path Intellisense
Error Lens

9. Refactorisez régulièrement

Supprimez le code mort

Externalisez les fonctions utilitaires

Gardez des fichiers de taille raisonnable

Commentez utilement (et pas trop)

Refactoriser, ce n’est pas perdre du temps : c’est économiser du temps plus tard.

10. Restez à jour

Lisez 15 min de documentation par jour

Suivez des comptes Twitter/X, YouTube, newsletters :

JavaScript Weekly

Frontend Focus

YouTube : Fireship, ThePrimeagen, Web Dev Simplified

En résumé:

Astuce                              Bénéfice
Terminal bien configuré          +Productivité                        
Automatisation des tâches        + Rapidité
Structure claire                 + Maintenabilité
Tests et CI                      + Fiabilité
Extensions/VS Code               + Efficacité
Refactoring régulier             + Qualité du code

📱 Développement mobile avec React Native

oussama — Fri, 04 Jul 2025 18:20:15 +0000

React Native est l’un des frameworks les plus populaires pour développer des applications mobiles cross-platform. Utilisant JavaScript (ou TypeScript), il permet de partager une grande partie du code entre iOS et Android tout en offrant des performances quasi natives.

Dans cet article, nous vous proposons un guide pratique et moderne pour concevoir des apps mobiles performantes avec React Native.

1. Pourquoi choisir React Native ?

🔁 Code partagé entre iOS/Android (jusqu'à 90 %) 📦 Écosystème mature et très actif ⚡ Performances proches du natif avec le moteur Hermes 🎯 Intégration facile avec des services natifs via des bridges
`

2. Mise en place du projet

Installation de base :

bash

npx react-native init MonApp
cd MonApp
npx react-native run-android # ou run-ios

Ou avec Expo pour un démarrage plus rapide :

bash
npx create-expo-app mon-app
cd mon-app
npx expo start

Expo est idéal pour les prototypes ou MVPs. Pour un contrôle natif complet, passez au bare workflow.

3. Architecture recommandée

Structure modulaire inspirée du Clean Architecture :

bash

/src
  /features
    /auth
    /profile
  /components
  /services
  /navigation
  /hooks
  /utils

Utilisez React Navigation pour gérer les écrans.

Stockez l’état global avec Zustand, Redux Toolkit ou Jotai.

4. Bonnes pratiques de développement

Utilisez TypeScript:
embed Typage strict = plus de sécurité + meilleure DX (Developer Experience)
Code réutilisable:
Créez des composants génériques : Button, Input, Card, etc.
Testez votre code:
Tests unitaires : jest, @testing-library/react-native

Tests end-to-end : detox

Mode sombre et accessibilité Gérez les thèmes avec react-native-paper ou styled-components

Assurez l’accessibilité avec accessible={true}, accessibilityLabel.

5. Optimiser les performances

Activez Hermes (moteur JS natif performant)

json

// android/app/build.gradle
enableHermes: true

Utilisez FlatList de manière optimisée

tsx

<FlatList
  data={items}
  renderItem={renderItem}
  keyExtractor={item => item.id}
  removeClippedSubviews={true}
/>

Memoization
Utilisez React.memo, useCallback, useMemo pour éviter les rerenders inutiles.

Chargement conditionnel
N'affichez que ce qui est nécessaire à l’écran (lazy rendering des écrans).

6. Packages incontournables

Fonctionnalité Package recommandé
Navigation react-navigation
Formulaires react-hook-form, formik
State global zustand, redux-toolkit
API REST axios, react-query
Thèmes react-native-paper, styled-components
Authentification react-native-firebase, expo-auth-session
Géolocalisation react-native-geolocation-service

7. Build, test & déploiement

Android : générez un APK ou AAB via Gradle

iOS : utilisez Xcode + certificat Apple

CI/CD : utilisez EAS (Expo Application Services), Bitrise, ou Fastlane

8. Expo vs React Native "pur"

Critère Expo React Native CLI
Simplicité ⭐⭐⭐⭐ ⭐⭐
Personnalisation native 🚫 limitée ✅ totale
Taille de l'app 📦 plus grande 📦 optimisée
Dev rapide ⚡ idéal pour MVP 🛠️ projets sur mesure

9. Déploiement sur les stores

Google Play Store → via Android App Bundle (AAB)

Apple App Store → via Xcode + TestFlight

Générez des icônes, splash screens, certificats automatiquement avec Expo ou react-native-splash-screen

En résumé
Créer une application mobile performante avec React Native en 2024, c’est :

Adopter TypeScript, Hermes, et une architecture modulaire

Utiliser les bons outils (Zustand, React Navigation, React Query)

Optimiser le rendu, les listes, les animations

Tester, mesurer, et déployer avec rigueur

Optimisation des performances web

oussama — Fri, 04 Jul 2025 18:07:06 +0000

Les utilisateurs s’attendent à ce que les sites web se chargent instantanément, la performance web n’est plus un luxe, c’est une exigence. Que vous développiez une application SPA ou un site vitrine, voici les meilleures pratiques actuelles pour optimiser les performances de vos sites.

1. Adoptez les Core Web Vitals

Les Core Web Vitals sont des métriques clés mesurées par Google pour évaluer la qualité de l’expérience utilisateur :

LCP (Largest Contentful Paint) : temps de chargement du contenu principal

FID/INP (Interaction to Next Paint) : réactivité

CLS (Cumulative Layout Shift) : stabilité visuelle

`✅ Objectifs :

LCP < 2.5s

INP < 200ms

CLS < 0.1`

Utilisez Lighthouse, PageSpeed Insights ou WebPageTest pour analyser vos performances.

2. Minification, compression et bundling intelligent

Minifiez HTML, CSS, JS (Terser, cssnano)

Gzip/Brotli : compressez les fichiers côté serveur

Code splitting : avec Webpack, Vite ou Next.js

js

// Lazy loading d’un composant React
const Settings = React.lazy(() => import('./Settings'));

🎯 Objectif : réduire la taille initiale des bundles JS.

3. Utilisez un CDN pour les assets statiques

Hébergez vos images, polices, JS/CSS minifiés sur un CDN global (Cloudflare, Netlify, Vercel, etc.) pour rapprocher le contenu de l’utilisateur.

4. Optimisation des images

Formats modernes : WebP, AVIF

Chargement adaptatif : utilisez srcset pour servir des images adaptées à la résolution

Lazy loading natif (loading="lazy")

html

<img src="hero.webp" loading="lazy" alt="Image principale" />

5. Lazy loading & hydration partielle

En 2024, grâce à des frameworks comme React Server Components, Qwik ou Astro, vous pouvez :

Différer l’exécution du JS

Hydrater seulement les parties interactives

Éviter le JS inutile côté client

Ex. : Astro permet de rendre statiquement des pages, avec des composants dynamiques chargés uniquement quand nécessaire.

6. Réduisez les requêtes HTTP et utilisez HTTP/3

Combinez les fichiers quand possible

Utilisez des preload, prefetch, dns-prefetch intelligemment

Passez à HTTP/3 (supporte le multiplexing et TLS intégré)

html

<link rel="preload" href="/styles.css" as="style" />

7. Mesurez et surveillez en continu

Real User Monitoring (RUM) : avec tools comme Sentry, Datadog, New Relic, ou Vercel Analytics

Synthetic Monitoring avec des tests automatisés réguliers

8. Erreurs fréquentes à éviter

Trop de polices custom

Trop de JS bloquant le rendu

Pas de cache-control ou d’etag sur les fichiers statiques

Manque de fallback sur les images externes

Check-list rapide
Action Outils recommandés
Analyse de performance Lighthouse, PageSpeed Insights
Compression Brotli, Gzip
Chargement JS Code splitting, lazy loading
Frameworks optimisés Astro, Next.js, SvelteKit
Images WebP, AVIF, srcset, lazy load
CDN Cloudflare, Vercel, Netlify

En conclusion
Une application rapide, c’est :

Un meilleur SEO

Une expérience utilisateur plus fluide

Une conversion augmentée

Les performances ne sont pas uniquement une affaire de front-end : elles concernent aussi les API, bases de données, et l’infrastructure globale.

JavaScript moderne : ES2024 et au-delà

oussama — Fri, 04 Jul 2025 17:57:34 +0000

javaScript évolue rapidement avec de nouvelles fonctionnalités chaque année. Découvrez les nouveautés d'ES2024 et comment les utiliser dans vos projets.

Depuis plusieurs années, JavaScript (ECMAScript) continue de gagner en puissance, simplicité, et expressivité. L’édition ES2024 ne fait pas exception. Voici un tour d’horizon des fonctionnalités les plus attendues ou déjà disponibles, et comment en tirer parti dans vos projets dès aujourd’hui.

1. Set methods – Des méthodes utiles enfin disponibles

Les ensembles (Set) gagnent enfin des méthodes utilitaires natives ! Fini les conversions manuelles en Array pour faire des opérations classiques comme l’union ou l’intersection.

js

const a = new Set([1, 2, 3]);
const b = new Set([2, 3, 4]);

Set.union(a, b);       // Set {1, 2, 3, 4}
Set.intersection(a, b); // Set {2, 3}
Set.difference(a, b);   // Set {1}
Set.symmetricDifference(a, b); // Set {1, 4}

✅ Ces méthodes rendent les opérations sur les ensembles plus lisibles et plus performantes.

2. Array.prototype.toSorted() / toReversed() (déjà en ES2023)

Bien qu’introduites en ES2023, elles sont encore peu connues. Elles permettent de ne pas muter l’array original (contrairement à sort() ou reverse()).

js

const numbers = [3, 1, 4];
const sorted = numbers.toSorted();   // [1, 3, 4]
const original = numbers;            // [3, 1, 4]

🔒 Idéal pour la programmation fonctionnelle et éviter les effets de bord.

3. Promise.withResolvers() – Plus de contrôle sur vos promesses

Cette méthode permet de créer une promesse avec son resolve et reject externes, sans devoir créer un wrapper soi-même.

js

const { promise, resolve, reject } = Promise.withResolvers();

setTimeout(() => resolve('OK'), 1000);


await promise; // "OK"

✨ Très pratique pour des systèmes d’attente ou d’ordonnancement personnalisés.

4. Importation de modules via import attributes

ES2024 introduit la possibilité de passer des attributs lors d’un import, notamment utile pour charger des JSON ou du contenu en tant que module.

js

import data from './config.json' with { type: 'json' };

🔐 Plus sécurisé et standardisé, particulièrement utile dans les navigateurs modernes.

5. Temporal API (proposée mais très attendue)

Bien que toujours en proposition, l’API Temporal vise à remplacer Date, trop imprécise et difficile à manipuler.

js

const now = Temporal.Now.plainDateTimeISO();
const later = now.add({ days: 3 });

📅 Temporal promet une gestion des dates plus fiable, internationale et sans les bugs de Date.

6. Pipeline operator (|>) –

Toujours en discussion mais prometteur , Syntaxe fonctionnelle très attendue :

js

const result = value
  |> double
  |> square
  |> toString;

✅ Rend les transformations de données plus lisibles, dans un style proche de celui de Elm ou Elixir.

📌 En résumé : les bonnes pratiques 2024
✅ Ce que vous pouvez adopter dès maintenant :

Set.union, Set.intersection, etc.

toSorted, toReversed

Promise.withResolvers

import ... with { type: 'json' }

🧪 À surveiller pour demain :

Temporal

Pipeline operator

Pattern matching (stage 3 actuellement)

🚀 Comment les utiliser dans vos projets ?
Activez les flags expérimentaux dans Node.js pour certaines fonctionnalités :

node --harmony script.js

Utilisez Babel ou SWC pour transpiler certaines fonctionnalités futures.

Vérifiez le support navigateur avec Can I use.

Les meilleures pratiques React en 2024

oussama — Fri, 04 Jul 2025 17:37:27 +0000

React continue d’évoluer rapidement, et 2024 marque une année clé avec des améliorations significatives et de nouvelles recommandations. Que vous soyez un développeur débutant ou expérimenté, voici un condensé des meilleures pratiques à adopter dès maintenant.

Utilisez les Server Components (RSC) Introduits de manière stable avec Next.js 14, les React Server Components (RSC) permettent de déplacer la logique côté serveur tout en gardant une expérience fluide côté client.

✅ Avantage : Moins de JavaScript envoyé au client → meilleures performances.

🔧 Exemple :

`tsx

// Composant server-side
export default async function ProductList() {
  const products = await getProductsFromDB();
  return <div>{products.map(p => <Product key={p.id} data={p} />)}</div>;
}`

2._ Adoptez les dernières APIs React (useDeferredValue, useId...)_
Les nouveaux hooks comme useDeferredValue ou useId aident à résoudre des problèmes classiques de performances et d’accessibilité.

useDeferredValue permet de différer le rendu non prioritaire :

tsx

const deferredInput = useDeferredValue(input);

📦 3. Structuration du projet modulaire
Organisez votre code par domaines fonctionnels plutôt que par types de fichiers.

❌ Mauvais :


bash

/components
/pages
/hooks

✅ Bon :


/features/products
   - ProductList.tsx
   - productAPI.ts
   - productSlice.ts

Cela améliore la lisibilité et la maintenabilité sur le long terme.

Évitez le sur-usage de context API
Le Context API est puissant, mais pas fait pour tout. Préférez des solutions comme Zustand, Jotai, ou Redux Toolkit pour un état global plus performant et prédictible.
Typescript obligatoire
En 2024, Typescript n’est plus un luxe mais une norme. Il permet :

Une meilleure documentation du code

Une réduction drastique des bugs en prod

Un onboarding plus rapide des équipes

Tests automatisés = non négociables Utilisez des outils modernes :

vitest pour les tests unitaires

Testing Library pour les tests d'intégration

Cypress pour les tests end-to-end

Analyse de performance avec React Profiler + Lighthouse Identifiez les problèmes de rendu ou de charge inutile via :

Le React DevTools Profiler

Déploiement edge avec Vercel/Netlify Exploitez les functions edge pour un rendu plus rapide. Utilisez le CDN de Vercel/Netlify + ISR (Incremental Static Regeneration) pour un maximum de performance.

✨ En résumé
✅ À faire en 2024 :

Exploiter les Server Components

Écrire du code typé et modulaire

Optimiser les performances avec les bons hooks

Tester et monitorer automatiquement

🚫 À éviter :

Utiliser useContext pour tout

Créer des fichiers trop gros

Négliger le rendu serveur

📌 React en 2024, c’est plus que du code : c’est de l’architecture, de la performance et une UX optimisée.