-
Notifications
You must be signed in to change notification settings - Fork 0
DEV III
Le Frontend représente la partie visible d’un site ou d’une application web, avec laquelle les utilisateurs interagissent. Il comprend le HTML, le CSS et le JavaScript.
- CMS (Content Management System) : Permet de gérer facilement le contenu d’un site web (ex : WordPress).
- CRM (Customer Relationship Management) : Sert à gérer la relation client (ex : Salesforce).
- ERP (Enterprise Resource Planning) : Outil de gestion intégré des processus d’une entreprise (ex : SAP).
Un préprocesseur CSS est un outil qui étend les fonctionnalités du CSS en permettant l'utilisation de variables, de fonctions, de conditions, etc.
Exemple : Sass, Less.
Un framework CSS est une bibliothèque qui facilite la création de mises en page et de styles standardisés.
Exemples : Bootstrap, Tailwind CSS.
Un framework JS fournit une structure et des outils pour développer plus efficacement des applications web.
Exemples : React, Vue.js, Angular.
- DOM Virtuel : Représentation en mémoire du DOM réel. React utilise cette version virtuelle pour effectuer des mises à jour optimisées.
- Flux/Redux : Architectures de gestion d’état global. Elles permettent de centraliser et de contrôler les données d’une application React.
Un CDN est un réseau de serveurs répartis géographiquement qui permet de distribuer rapidement des fichiers statiques (CSS, JS, images, etc.) à l'utilisateur.
Il améliore les performances et la disponibilité d’un site.
Le Backend est la partie invisible d’un site ou d’une application web. Il gère la logique, les bases de données, les requêtes serveurs, la sécurité et la communication avec le frontend.
- Framework : Fournit une structure complète avec des règles à suivre. Il impose un cadre (ex : Laravel, Django, Express).
- Librairie : Outil spécifique pour résoudre un problème donné. On l’utilise librement dans le code (ex : jQuery, Lodash).
Quelques langages et outils courants :
- Langages : PHP, Python, Java, JavaScript (Node.js), Ruby, Go.
- Bases de données : MySQL, PostgreSQL, MongoDB.
- Serveurs : Apache, Nginx.
- APIs : REST, GraphQL.
Un gestionnaire de paquet permet d’installer, de mettre à jour et de gérer les dépendances d’un projet.
Exemples :
-
npmpour Node.js -
pippour Python -
composerpour PHP
Choisir une technologie dépend de plusieurs critères :
- Objectifs du projet
- Compétences de l’équipe
- Écosystème et documentation
- Scalabilité, performance, sécurité
- Communauté et support
Une stack est un ensemble de technologies utilisées ensemble pour développer une application.
Exemples :
- LAMP : Linux, Apache, MySQL, PHP
- MERN : MongoDB, Express, React, Node.js
- Django + PostgreSQL
Les opérations de base sur les données sont regroupées sous l’acronyme CRUD :
- Create : Ajouter une donnée
- Read : Lire une donnée
- Update : Modifier une donnée
- Delete : Supprimer une donnée
Un schéma Entité-Association (E-A) est un modèle conceptuel qui permet de représenter les entités (objets) d’un système et leurs relations.
Utilisé pour concevoir une base de données relationnelle avant sa mise en œuvre.
Les Systèmes de Gestion de Base de Données relationnels (SGBDR) utilisent des tables avec des relations (liens entre données).
Exemples : MySQL, PostgreSQL, SQLite, Oracle.
Les bases NoSQL sont conçues pour gérer de grands volumes de données, souvent non structurées ou semi-structurées.
Caractéristiques :
- Pas de schéma strict
- Scalabilité horizontale (ajout de serveurs)
- Performances élevées pour des cas spécifiques
- Clé-valeur (ex : Redis)
- Colonnes (ex : Cassandra)
- Documents (ex : MongoDB)
- Graphes (ex : Neo4j)
- ORM (Object-Relational Mapping) : Outil qui fait le lien entre une base relationnelle et des objets dans le code (ex : Sequelize avec Node.js & PostgreSQL).
- ODM (Object-Document Mapping) : Similaire à l’ORM, mais pour les bases NoSQL (ex : Mongoose avec MongoDB).
Les migrations sont des scripts permettant de versionner et de gérer les modifications de structure de la base de données dans le temps (création/modification de tables, colonnes, etc.).
Elles assurent la synchronisation entre le code et la base de données.
Une API (Application Programming Interface) permet à deux systèmes logiciels de communiquer entre eux.
Elle expose des fonctionnalités ou des données via des points d’accès (endpoints).
- REST : Le plus courant, basé sur le protocole HTTP et les méthodes standards (GET, POST, PUT, DELETE).
- GraphQL : Permet aux clients de spécifier précisément les données qu’ils veulent.
- SOAP : Plus ancien, basé sur XML et utilisé surtout dans des environnements d’entreprise.
- Utilisation des méthodes HTTP : GET (lire), POST (créer), PUT/PATCH (modifier), DELETE (supprimer).
- Utilisation de statuts HTTP pour indiquer le résultat (ex : 200, 201, 404, 500).
- Structure des endpoints claire et hiérarchique (ex :
/users/123/posts). - Architecture stateless (chaque requête est indépendante).
Le routage permet d’associer des URL à des fonctions ou des contrôleurs qui gèrent les requêtes.
Chaque route utilise une méthode HTTP et peut renvoyer une réponse en JSON, XML, etc.
Un middleware est une fonction qui s’exécute entre la réception d’une requête et l’envoi de la réponse.
Exemples :
- Authentification
- Logger (journalisation)
- Validation des données
- Gestion des erreurs
Une API bien conçue doit :
- Gérer les erreurs côté serveur
- Retourner des codes d’erreur explicites (ex : 400, 401, 403, 500)
- Fournir un message clair dans la réponse (
message,error, etc.)
La documentation permet aux développeurs de comprendre comment utiliser l’API :
- Décrire les endpoints disponibles
- Expliquer les paramètres, réponses, erreurs
- Fournir des exemples de requêtes
Swagger est un outil qui permet de :
- Documenter automatiquement une API REST
- Générer une interface utilisateur pour tester les endpoints
- Créer un fichier standardisé (
OpenAPI) pour décrire l’API
- UX (User Experience) : L’expérience vécue par l’utilisateur lors de l’utilisation d’un produit ou service.
- UI (User Interface) : L’interface graphique avec laquelle l’utilisateur interagit (boutons, menus, couleurs…).
- Comprendre les besoins utilisateurs
- Créer des parcours intuitifs et accessibles
- Réduire la friction et les efforts cognitifs
- Tester et itérer régulièrement
10 règles pour améliorer l’utilisabilité, dont :
- Visibilité de l’état du système
- Liberté et contrôle utilisateur
- Cohérence et standards
- Prévention des erreurs
- Reconnaissance plutôt que mémorisation
Plus il y a d’options, plus la prise de décision est lente.
➡️ Moins d’options = navigation plus rapide.
Les qualités d’une bonne expérience utilisateur :
- Useful (utile)
- Usable (utilisable)
- Desirable (désirable)
- Findable (facile à trouver)
- Accessible (accessible à tous)
- Credible (crédible)
- Hiérarchie visuelle
- Contraste
- Alignement
- Cohérence
- Feedback visuel (hover, clic…)
Permet de modifier le style pour l’impression :
@media print { body { background: white; color: black; } }
Permettent d’adapter le style d’un site selon la taille de l’écran (responsive design) :
@media (max-width: 768px) { .menu { display: none; } }
Acronyme pour 4 grands principes fondamentaux du design visuel :
- Contrast : Distinguer les éléments importants
- Repetition : Réutiliser les mêmes éléments pour la cohérence
- Alignment : Bien aligner les éléments pour une lecture claire
- Proximity : Regrouper les éléments liés ensemble
Outils couramment utilisés pour créer des maquettes et prototypes interactifs :
- Figma
- Adobe XD
Étapes pour transformer une maquette en composants réutilisables :
- Identifier les éléments récurrents (ex : boutons, cartes, en-têtes…)
- Isoler chaque composant avec ses propres styles et fonctionnalités
- Structurer l’interface selon une approche design system pour assurer la cohérence globale
Le testing est l’ensemble des pratiques qui visent à vérifier que le code fonctionne comme prévu et à éviter les régressions lors des évolutions d’un projet.
Le Pyramid Testing est une stratégie qui recommande d’écrire :
- Beaucoup de tests unitaires
- Moins de tests d’intégration
- Peu de tests End-to-End
👉 Cela optimise la rapidité, la fiabilité et le coût du testing.
Il existe une grande variété de tests, chacun ayant un objectif précis :
- Tests unitaires
- Tests d’intégration
- Tests fonctionnels
- Tests End-to-End (E2E)
- Tests de performance
- Tests de sécurité
- Tests exploratoires
- Tests manuels / automatisés
- Boîte noire : Test sans connaissance du code source. On vérifie uniquement les entrées/sorties.
- Boîte blanche : Test avec connaissance du code interne (structure, logique…).
Les tests unitaires valident le bon fonctionnement d’une unité isolée de code (fonction, méthode…).
Les tests d’intégration vérifient que plusieurs composants interagissent correctement entre eux.
Outils simulant des parties du code dans un test :
- Mock : Simule un objet avec des comportements spécifiques.
- Stub : Fournit des réponses prédéfinies.
- Spy : Enregistre l’utilisation faite d’une fonction (appel, arguments…).
- Fake : Remplace une dépendance par une version simple mais fonctionnelle.
Les tests End-to-End simulent un scénario utilisateur complet du début à la fin (ex : remplir un formulaire, valider une commande…).
👉 Utilisés pour tester toute l'application, de l’interface utilisateur jusqu’à la base de données.
- TDD (Test-Driven Development) : On écrit d’abord les tests, puis le code pour les faire passer.
-
BDD (Behavior-Driven Development) : Variante centrée sur le comportement attendu, souvent en langage naturel (ex :
Given / When / Then).
Quelques outils et concepts utiles :
-
Matchers : Fonctions pour vérifier les valeurs attendues (ex :
expect(value).toBe(42)) - Jest : Framework de test pour JavaScript
- Mocha/Chai : Outils pour les tests unitaires JS
- Sinon.js : Pour les mocks, stubs et spies
- Cypress / Playwright : Pour les tests E2E
La couverture de code mesure la part du code qui est exécutée par les tests.
👉 Plus le pourcentage est élevé, plus les tests couvrent le projet, mais cela ne garantit pas une qualité suffisante.