Skip to Content
🎉 Utilisez JS efficacement →

🌐 Introduction aux technologies du web

Bienvenue dans ce programme dédié aux technologies du web, conçu pour vous fournir une base solide en développement web moderne. À travers ce cours, dispensé à l’Université Champollion à Albi, vous explorerez les outils et concepts fondamentaux pour concevoir des sites performants et interactifs. 🚀

DockerNode.jsGITNPMMongoDBGraphQLFingerprintAuthentificationToolingREACTNext.jsJS

🎯 Objectifs pédagogiques

Node.js

  1. Installation
  2. Fondamentaux
    1. Node.js et serveur
    2. Node.js et gestion asynchrone
    3. Node.js et Express.js
    4. Gestion des fichiers et des flux
  3. TLDR
  4. Quizz
  5. Exercice

GIT

  1. Installation
  2. Les bases de Git : Gestion locale
  3. Gestion des branches dans Git
  4. Travail collaboratif avec Git
  5. Fonctionnalités avancées de Git
  6. Introduction à GitHub / GitLab
  7. TLDR
  8. Quizz

NPM

  1. Qu'est-ce que NPM ?
    1. Gestionnaire de paquets
    2. Le rôle de NPM dans l'écosystème Node.js
    3. NPM dans le flux de développement
  2. L’installation de NPM
  3. Les commandes essentielles de NPM
  4. Gestion des dépendances avec package.json
  5. TLDR
  6. Quizz
  7. Exercices

MongoDB

  1. Installation
    1. Avec NPM & Node.js
  2. NoSQL
  3. Fondamentaux MongoDB
    1. commandes
    2. reponses
    3. schemas
  4. Modélisation
    1. Relations entre les collections
  5. CRUD
    1. create
    2. read
    3. update
    4. delete
  6. Avancées
    1. indexation
    2. administration
    3. securite
  7. Exercice

GraphQL

  1. Fonctionnement
    1. Fondamentaux
    2. Cas pratique
  2. Avantages de GraphQL
  3. Limitations et défis de GraphQL
  4. Cas d’usage typiques et écosystème GraphQL
  5. Exercice
  6. TLDR
  7. Quizz

Authentification

  1. Fondamentaux
    1. Types d'authentification
    2. Exemples
  2. Les protocoles
    1. Comparatifs
    2. Exemples
  3. Gestion des sessions et des jetons
    1. Jetons
    2. Activité pratique
  4. Sécurisation des systèmes d’authentification
    1. Bonnes pratiques de sécurisation
    2. Activité pratique
  5. Authentification avancée et cas pratiques
    1. Cas pratiques

Tooling

  1. Productivité Générale
    1. Prettier
    2. ESLint
    3. PathIntellisense
    4. BracketPairColorizer
    5. MaterialIconTheme
  2. Outils Node.js
    1. NPM
    2. Intellisense NPM
    3. Node Intellisense
    4. Client REST
    5. Docker
  3. React & Frontend
    1. Snippets React, Redux
    2. PropTypes pour les composants de React
    3. Snippets Javascript pour ReactJS
    4. Styled Components
    5. Tailwind CSS
  4. Débogage & Performance
    1. Chrome DevTools
    2. VSCode Debug
    3. Performance Monitor
  5. Git & Collaboration
    1. Git History
    2. Pull Requests
    3. Git History Viewer
  6. Qualité de Code
    1. Code Spelling Checker
    2. Sonar Lint
    3. TODO highlight
  7. Outillage Avancé
    1. Import Cost
    2. Bundle size
    3. Error Lens
  8. Exercices Pratiques
  9. Quizz

REACT

  1. Introduction
    1. Pourquoi utiliser React ?
    2. Comparaison avec d'autres bibliothèques ou frameworks
  2. Installation
    1. Création d'un Nouveau Projet React
    2. Visual Studio Code & REACT
  3. Composants
    1. Définition et utilisation des composants
    2. PropTypes pour le typage des props
    3. State et cycle de vie des composants
  4. Données
    1. Passer des données via les props
    2. Utilisation du Context API pour partager des données globales
    3. Gestion de l'état global avec Redux ou MobX
  5. Routage
    1. Introduction à React Router
    2. Création de routes dynamiques
    3. Navigation programmatique
    4. Présentation de React
  6. Formulaires
    1. Gestion de l'état local dans les formulaires
    2. Validation des formulaires
    3. Utilisation de bibliothèques tierces comme Formik ou react-hook-form
  7. Hooks
    1. Hooks natifs
    2. Hooks personnalisés
    3. Les règles des Hooks
  8. Déploiement
    1. Préparation de l'application pour la production
    2. Déploiement sur Vercel ou Netlify
  9. Exercices React

Next.js

  1. Introduction à Next.js 📚
    1. Différences entre `pages/` et `app/`
    2. Avantages de l’architecture `app/`
    3. Initialisation
    4. Exercices
  2. Routage 🛣️
    1. Layout
    2. Loading
    3. Error
    4. Server VS Client
    5. Exercices
  3. SEO 📈
    1. generateMetadata
    2. OpenGraph
    3. robots.txt & sitemap.xml
    4. Exercices
  4. Server actions ⚙️
    1. Formulaires
    2. React server components
    3. useOptimistic()
    4. useTransition()
    5. Exercices
  5. Optimisations ⚡
    1. Polices
    2. Images
    3. Environnements d'éxécution
    4. Authorisations & session
    5. Déploiement
  6. Quizz 📝
  7. Ressources 📖
    1. Next.js API Reference
    2. NextAuth.js
    3. Tailwind CSS
    4. Vercel
    5. next-seo
    6. next-pwa
    7. Next.js Image Optimization
    8. Next.js Best Practices
    9. Next.js Performance Optimization

JS

  1. Fonctions Asynchrones