Skip to content

DEV III

Jump to bottom
PasRP-Theo edited this page May 7, 2025 · 15 revisions

Frontend

🔹 Frontend

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, CRM et ERP

  • 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).

🔹 Préprocesseur CSS

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.

🔹 Framework CSS

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.

🔹 Framework JavaScript

Un framework JS fournit une structure et des outils pour développer plus efficacement des applications web.
Exemples : React, Vue.js, Angular.

🔹 React : DOM Virtuel & Flux/Redux

  • 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.

🔹 CDN (Content Delivery Network)

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.

Résumé - Notions Backend

🔹 Qu’est-ce que le Backend ?

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 vs Librairie

  • 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).

🔹 Technologies utilisées en Backend

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.

🔹 Gestionnaire de paquet

Un gestionnaire de paquet permet d’installer, de mettre à jour et de gérer les dépendances d’un projet.
Exemples :

  • npm pour Node.js
  • pip pour Python
  • composer pour PHP

🔹 Choix technologique

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

🔹 Stack

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

Résumé - Bases de données

🔹 Opérations CRUD

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

🔹 Schéma Entité-Association

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.

🔹 SGBD relationnels

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.

🔹 NoSQL et scalabilité

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

🔹 Types de SGBD NoSQL

  • Clé-valeur (ex : Redis)
  • Colonnes (ex : Cassandra)
  • Documents (ex : MongoDB)
  • Graphes (ex : Neo4j)

🔹 ORM et ODM

  • 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).

🔹 Migrations (Base de données)

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.

Résumé - Notions sur les API

🔹 À quoi sert une API ?

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).

🔹 Types d'API

  • 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.

🔹 Principes REST

  • 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).

🔹 Routage dans une API

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.

🔹 Middlewares

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

🔹 Gestion des erreurs dans une API

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.)

🔹 Documentation d’API

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

🔹 Introduction à Swagger

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

Résumé - UX / UI & Design Web

🔹 UX vs UI

  • UX (User Experience) : L’expérience globale vécue par un utilisateur lors de l’utilisation d’un produit ou service.
  • UI (User Interface) : L’aspect visuel et interactif de l’interface (boutons, couleurs, typographie, etc.).

🔹 Principes fondamentaux de l’UX

  • Comprendre les besoins des utilisateurs
  • Créer des parcours fluides et intuitifs
  • Tester et itérer en fonction des retours utilisateurs
  • Penser accessibilité, clarté et efficacité

🔹 Heuristiques de Nielsen

10 règles d’utilisabilité comme :

  • Visibilité de l’état du système
  • Contrôle utilisateur et liberté
  • Cohérence et standards
  • Prévention des erreurs
  • Reconnaissance plutôt que mémorisation

🔹 Loi de Hick

Plus il y a de choix, plus l'utilisateur met de temps à décider.
👉 Réduire le nombre d'options améliore la rapidité de décision.

🔹 UX Honeycomb (de Peter Morville)

6 qualités d’une bonne expérience utilisateur :

  • Useful
  • Usable
  • Desirable
  • Findable
  • Accessible
  • Credible

🔹 Principes fondamentaux de l’UI

  • Hiérarchie visuelle
  • Alignement et espacement
  • Contraste
  • Cohérence des éléments
  • Feedback visuel (hover, clic…)

🔹 @media print

Permet d’adapter le style d’une page web pour l’impression :

@media print {
  body {
    color: black;
    background: white;
  }
}
🔹 @media queries
Permettent d’adapter le design à différents écrans :

css
Copier
Modifier
@media (max-width: 768px) {
  .menu {
    display: none;
  }
}
🔹 CRAP (Design)
Acronyme pour de bonnes pratiques de design :

Contrast

Repetition

Alignment

Proximity

🔹 Outils de prototypage
Figma

Adobe XD
Utilisés pour créer des maquettes interactives avant le développement.

🔹 Décomposer une maquette en composants
Identifier les éléments récurrents (boutons, cartes, en-têtes…)

Isoler chaque composant avec ses propres styles/fonctionnalités

Favoriser la réutilisabilité (approche “design system”)

Clone this wiki locally