book

Stratégies JavaScript Full Stack

by Milecia McGregor

March 2025

Intermediate to advanced

480 pages

14h 47m

French

O'Reilly Media, Inc.

Read now

Unlock full access

À qui s'adresse ce livreCe que tu apprendrasCe que ce livre n'est pasComment ce livre est organiséConventions utilisées dans ce livreUtiliser des exemples de codeApprentissage en ligne O'ReillyComment nous contacterRemerciements
Le projet que tu vas construireRéunion de lancement du projetConsidérations sur la conceptionConception basée sur les donnéesDécomposer les conceptions en tâchesAffiner les tâches à partir des exigences des fonctionnalitésDiscuter des calendriers avec les équipes de produits et les autres équipesParler à d'autres équipes de développementCoordination avec DevOpsTravailler avec l'assurance qualitéPlanification avec soutienConclusion
Pourquoi NestJS ?Choisir une approche de projetConfiguration de NestJSTester le backend localementMise à jour du READMEAjouter un CHANGELOGArchitectures monolithiques et microservicesArchitectures alternatives à considérerChoisir un modèle de conception d'API : REST et GraphQLConclusion
Considérations initialesDiagramme du schéma de donnéesConfiguration de PostgresDécider quel ORM utiliserRédiger des migrationsAlimenter la base de donnéesConclusion
S'assurer que le Frontend et le Backend sont d'accordCréation d'un document pour les conventionsCréation de l'API et du premier point d'accèsCréation des points de terminaison des commandesTravailler au service des commandesVérifier la connexion à la base de donnéesConclusion
Choisir un service tiersListe des services potentielsIntégrer StripeÉcriture du contrôleurRédiger le serviceConclusion
Mise à jour de l'architecture dorsaleUtilisation des tâches CronAlertes et surveillanceEnregistrementProblèmes avec la synchronisation des données et l'exécution des tâchesConsidérations futuresConclusion
Pourquoi consacrer du temps aux tests ?Comment aborder la rédaction d'un testDonnées fictivesConclusion

AuthentificationAutorisationOWASP Top 10Autres pratiques remarquablesConclusion
Messages détaillés du journalConfigurations de l'environnementStratégies pour retrouver les insectesAider les autres développeurs à déboguerListe de contrôle du débogageConclusion
MétriquesAlertes et surveillanceMise en cacheStratégies de cacheTypes de mise en cacheMise en place d'un cache avec RedisConsidérations sur les produitsConclusion
Types de mise à l'échelleÉchelle verticaleMise à l'échelle horizontaleMise à l'échelle hybrideMise à l'échelle des ressourcesMeilleures pratiques de mise à l'échelleFais un planDocumente le planExécuter les testsCommuniquer les progrèsCommence à déplacer le traficConclusion
Utilisations des journaux et de la surveillanceUtiliser les journaux pour le débogageUtilise la surveillance pour éclairer tes actionsOutils de surveillance et d'enregistrementManuels d'intervention en cas d'incidentÉtapes du livret de jeuModèle de réponse aux incidentsDes autopsies irréprochablesConclusion
Décisions relatives à l'architecture frontaleChoisir un cadre de travail frontalOptions de configuration de l'applicationComposants communsChoix des forfaitsTravailler avec d'autres équipesConclusion
Configure l'application React initialeConfigurer les linters et les formateursConfigurer la constructionConfigurer les stylesMise en place des testsConfigurer le CHANGELOG et le READMEExécute l'application localementConstruis la première fonctionnalitéStructure du projetConfigurer le routageMettre à jour la racine de l'applicationConclusion
Comment fonctionne l'état des composantsuseStateuseReduceruseContextSavoir dans quel niveau d'application gérer l'étatDifférentes approches de la gestion de l'ÉtatConfiguration du gestionnaire d'étatConclusion
Outils potentiels pour obtenir des donnéesGérer les appels d'API avec Axios et TanStack QueryLe fichier .envGestion des états de chargementGestion des états d'erreurConfiguration des en-têtes de requêteQuand vérifier la fonctionnalité du backendConclusion
AccessibilitéCréer un formulaire accessibleVérifier tes implémentations d'accessibilitéAutres considérations sur l'accessibilitéDes conceptions cohérentesThèmes personnalisésConception adaptéeConclusion
Approches fondées sur les limites de l'erreurComposants de l'erreurEnregistrement des erreursErreurs de validation de l'utilisateurErreurs de l'APIConclusion
Vulnérabilités courantesValidation de la logique d'entrepriseGestion des sessionsMaintenance de la version du paquetValidation des entréesAutres principesComment vérifier ta propre applicationConclusion
Mesures de référenceOutils LighthouseSitespeed.ioDomaines à améliorerAnalyse de la taille des paquetsConfigurations de la constructionConfiguration de la mise en cacheChargement paresseuxPréfixationCSS, images et polices de caractèresConclusion
Déterminer les scénarios de testTests unitairesBibliothèque de test Jest et ReactVitestTravailleur de service fictifTest E2E avec CypressConclusion
Le processus de débogageRegarder à travers les bûchesVérifier le codeUtilisation des messages console.logUtilisation des points d'arrêtUtiliser les tests unitairesUtilisation de GitUtiliser les outils de développement du navigateurL'onglet ÉlémentsL'onglet SourcesL'onglet Network+L'onglet ApplicationDébogage dans d'autres environnementsDébogage dans des endroits inattendusConclusion
Équipes impliquées dans les déploiementsÉtapes de connexion du backend et du frontendEtapes du backendÉtapes de l'interfaceÉtapes de nettoyageÉtapes de la documentation et de la maintenanceConclusion
Les cas de testTests de bout en bout avec CypressTests de bout en bout avec le dramaturgeTests de bout en bout avec NightwatchComparaison entre les paquetsConclusion
Déploiement des mises à jour Frontend-Only ou Backend-OnlyDéployer des stratégiesDates de sortieVersions de la versionDéploie Blue-GreenCanary se déploieStratégies pour effectuer des retours en arrièreDéploiement des anciennes versionsAnnulation ou réinitialisation des RPDéploiement d'un correctifConclusion
Préoccupations du front-end et du back-endInquiétudes concernant les services fournis par des tiersDonnées et sécurité en productionConteneurisation de ton applicationConclusion
Créer ton propre pipelineConsidérations sur la vitesseCrochets GitConfigurations GitHubConfigurations CircleCIEnvironnement PipelinesCaractéristiques de l'environnementEnvironnement de développementEnvironnement de préparationEnvironnement de productionVariables d'environnementConclusion
Stratégies de ramificationBranches communes et flux de fusionRevue de presseDes branches pour des fonctions plus petitesBranches de fonctionnalités pour les implémentations plus importantesÉcraser les engagementsRebasage et fusion de branchesGérer les conflits de fusionDiscute avec le développeur qui a fait les changementsUtilise git bisect pour trouver les fichiers concernés.Comparer manuellement les changements de fichiersConclusion
Discussions sur le sprintEstimationsCapacité de développementExigences en matière de fonctionnalitésExamen des billets de l'équipe de développementFeuilles de routeDéfinir et gérer les tâchesMaintenir la conscience de l'équipeRédiger et clarifier les billetsConsidère les tâches généralesSois patientGérer les changements de contexteGarde la communication ouverteConclusion
Connaissances spécifiques au domaineApprends des personnes qui travaillent directement dans le domaineSuivre des coursTravail dans le domaineDécisions relatives à l'architecture et à la conception du systèmeConception pilotée par les domainesC4 DesignApprendre des autres équipesParticipe aux appels de venteParticiper à des études de recherche sur les utilisateursParle à MarketingÉcoute les appels de l'assistance à la clientèleEn savoir plus sur le droitConsidérations relatives à la documentationDéfinis le jargonNe garde que les informations pertinentesPartage tes connaissancesMontre comment le produit affecte l'organisationConclusion
Considérations pour les nouvelles applicationsComprendre le problème que tu essaies de résoudreConstruire le schéma de donnéesDécide d'une architectureChoisis ton fournisseur de CloudConstruire le backendConstruire le FrontendIntégrer le backend et le frontendConfigure ton pipeline CI/CDEffectuer des tests d'assurance qualitéVérifie ton application en productionConsidérations pour les applications existantesAccède aux services dont tu as besoinFaire fonctionner une instance de développementRegarde l'application en productionRegarde l'application en non-productionLis le codePrends des notes sur les refactors potentielsPose des questions et documente les réponsesAméliorer la qualité du codeAjouter des testsApprends ce que signifient les différentes alertesTa carrièreLa voie techniqueLa voie de la gestionJournal professionnelDéménager dans d'autres régionsConclusion

Content preview from Stratégies JavaScript Full Stack

Chapitre 14. Construire l'appli React

Cet ouvrage a été traduit à l'aide de l'IA. Tes réactions et tes commentaires sont les bienvenus : translation-feedback@oreilly.com

Maintenant que tu as fait tes recherches et que tu connais les outils que tu vas utiliser, il est temps d'initialiser ton projet de frontend ! Tu vas mettre en place l'app React et tous les outils dont tu as besoin pour construire ton frontend.

À ce stade, tu as revu les conceptions à de multiples reprises, tu as eu des discussions avec l'équipe Produit et ton équipe de dev, et tu as parlé à l'équipe DevOps pour que l'infrastructure du frontend soit prête. Tu as quelques diagrammes et documents pour te guider, toi et l'équipe, dans la construction de tous les composants. Tu as également beaucoup de tickets à répartir entre les membres de l'équipe. Cependant, lorsque tu démarres un projet greenfield, tu seras considéré comme la personne qui initialisera le repo et établira la structure du projet. De cette façon, ton équipe peut commencer à travailler sur les différentes parties de l'application, et tout le monde a confiance dans le fait que le développement peut se dérouler sans problème.

Dans ce chapitre, je vais passer en revue :

Mise en place de l'app React avec certains des paquets.
Construire le premier élément
Rédiger le premier test

Tu n'as pas besoin d'avoir tout mis en place, juste assez pour que l'équipe puisse commencer à travailler. Tu peux être chargé du développement en arrière-plan pendant ...