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 22. Débogage de la partie frontale

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

Tu es enfin arrivé au point de ton application frontale où tout est prêt pour la production. Tu as dû déboguer des problèmes pendant le développement, tu as donc déjà quelques stratégies ou approches à adopter. Maintenant que tout est intégré et que ton application est en production, tu as besoin d'une approche plus systématique pour trouver et résoudre les bogues.

Bien qu'il n'existe pas de stratégie unique qui te garantisse de trouver un bogue exactement de la même façon à chaque fois, il y a des choses communes que tu peux faire pour te donner, à toi et à l'équipe, un bon point de départ. Ainsi, lorsque toi et les autres équipes commencerez à travailler ensemble avec l'application en production, tu pourras aider tout le monde en apprenant à trouver rapidement les causes profondes.

Dans ce chapitre, je vais passer en revue :

Endroits où commencer ton voyage de débogage
Outils que tu peux utiliser pour aider
Autres domaines à prendre en compte lorsque tu es bloqué
Que faire lorsqu'un bogue se produit à cause d'une autre équipe ?

Le débogage est un art qui demande du temps et l'exposition à de nombreux projets pour s'améliorer. C'est l'une des compétences les plus sous-estimées et les plus précieuses que tu puisses avoir parce qu'elle s'applique à toutes les applications sur lesquelles tu travailles ...