Questions d'entretien pour un développeur front-end

1. Question : Pouvez-vous expliquer la différence entre var, let et const en JavaScript ?

Réponse :

• var : Portée fonctionnelle et peut être redéclaré et mis à jour. Il est hissé, ce qui signifie que sa déclaration est déplacée vers le haut de sa portée au moment de la compilation.
• let : De portée bloc et peut être mis à jour mais pas redéclaré dans la même portée. Il ne se hisse pas de la même manière que le var.
• const : De portée bloc et ne peut pas être mis à jour ou redéclaré. La valeur doit être attribuée lors de la déclaration. Il fournit un moyen de définir des constantes.
• L'utilisation de let et const permet d'éviter les bogues courants dus à des problèmes de portée et à une réaffectation accidentelle.

2. Question : Comment gérer l'état dans une application React ?

Réponse :

La gestion de l'état dans React peut être gérée via :

• État du composant local : Utilisation de l'état du composant useState ou de la classe pour des scénarios simples.
• API contextuelle : Pour les problèmes de perçage d'accessoires, pour transmettre les données à travers l'arborescence des composants sans transmettre manuellement les accessoires à chaque niveau.
• Bibliothèques de gestion d'état : Telles que Redux, MobX ou Zustand pour les applications complexes nécessitant un état global.
• Hooks : Hooks personnalisés pour encapsuler et réutiliser la logique avec état.
• React Query ou SWR : Pour la gestion de l'état du serveur.
• Le choix dépend de la complexité et des exigences de l'application.

3. Question : Qu'est-ce que le DOM virtuel et comment React l'utilise-t-il ?

Réponse :

• Le Virtual DOM est une représentation en mémoire des éléments DOM réels générés par les composants React.
• Lorsque l'état d'un composant change, React met à jour l'arborescence Virtual DOM.
• Il calcule ensuite efficacement l'ensemble minimal de modifications (diffings) nécessaires pour mettre à jour le vrai DOM.
• Ce processus améliore les performances en réduisant la manipulation directe du DOM, qui est une opération coûteuse.

4. Question : Expliquez la délégation d'événement en JavaScript.

Réponse :

• La Délégation d'événements exploite le bouillonnement d'événements pour gérer les événements à un niveau supérieur dans le DOM plutôt que sur des nœuds individuels.
• Au lieu d'ajouter des écouteurs d'événements à chaque élément enfant, vous attachez un seul écouteur d'événements à un élément parent.
• Lorsqu'un événement est déclenché sur un élément enfant, il remonte jusqu'au parent, où il peut être capturé et traité.
• Cette approche améliore les performances et simplifie la gestion du code, en particulier lorsqu'il s'agit d'éléments ajoutés dynamiquement.

5. Question : Que sont les composants Web et quel est leur lien avec les éléments personnalisés ?

Réponse :

• Les Composants Web sont un ensemble d'API standardisées qui permettent la création de balises HTML réutilisables et encapsulées.
• Ils sont constitués de :
  • Éléments personnalisés : Définissez de nouveaux types d'éléments HTML.
  • Shadow DOM : Fournit une encapsulation pour les styles et le balisage.
  • Modèles HTML : Vous permettent de définir des modèles réutilisables.
• Les Éléments personnalisés sont un élément clé des composants Web, permettant aux développeurs de créer leurs propres balises HTML avec un comportement et un style personnalisés.

6. Question : Comment fonctionne la spécificité CSS ?

Réponse :

La spécificité CSS détermine quelles règles de style s'appliquent à un élément lorsque plusieurs règles peuvent s'appliquer :

• Les Styles en ligne (attribut style) ont la spécificité la plus élevée.
• Les IDs (#id) ont une spécificité plus élevée que les classes.
• Classes, attributs et pseudo-classes (.class, [type="text"], :hover) ont une spécificité moyenne.
• Les Éléments et pseudo-éléments (div, ::before) ont la spécificité la plus faible.
• La spécificité est calculée en fonction de la combinaison des sélecteurs. A spécificité égale, la dernière règle définie prévaut.

7. Question : Que sont les promesses en JavaScript et en quoi diffèrent-elles des rappels ?

Réponse :

• Les Promesses sont des objets représentant l'achèvement ou l'échec éventuel d'une opération asynchrone.
• Ils fournissent des méthodes telles que .then(), .catch() et .finally() pour gérer les résultats asynchrones.
• Promesses vs rappels :
  • Les Promesses permettent un code asynchrone plus propre et plus maintenable et une meilleure gestion des erreurs.
  • Les rappels peuvent conduire à un « enfer des rappels », où les rappels imbriqués rendent le code difficile à lire et à maintenir.
• Les promesses améliorent la lisibilité et la gestion du code par rapport aux rappels traditionnels.

8. Question : Pouvez-vous expliquer comment fonctionnent les fermetures en JavaScript ?

Réponse :

• Une fermeture est une fonction qui mémorise ses variables externes et peut y accéder.
• Cela signifie qu'une fonction peut accéder aux variables depuis sa propre portée, la portée de la fonction externe et la portée globale.
• Les fermetures sont créées à chaque fois qu'une fonction est créée, au moment de la création de la fonction.
• Ils sont utiles pour la confidentialité des données et l'émulation de méthodes privées.

9. Question : Comment optimiser les performances d'une application web ?

Réponse :

• Réduire les requêtes HTTP : Combinez des fichiers, utilisez des sprites.
• Chargement asynchrone : Utilisez async et différé pour les scripts.
• Mise en cache : Implémentez la mise en cache du navigateur et utilisez un réseau de diffusion de contenu (CDN).
• Optimiser les images : Compressez les images et utilisez des formats de nouvelle génération comme WebP.
• Partage de code : Utilisez des outils comme Webpack pour diviser le code pour un chargement paresseux.
• Réduisez les ressources bloquant le rendu : Optimisez la livraison CSS et JavaScript.
• Surveillance des performances : Utilisez des outils tels que Lighthouse et Chrome DevTools pour l'audit.

10. Question : Quel est le but d'un Service Worker dans une Progressive Web App (PWA) ?

Réponse :

• Les Service Workers agissent comme un proxy entre l'application Web et le réseau.
• Ils activent des fonctionnalités telles que la prise en charge hors ligne en mettant en cache les actifs et en interceptant les requêtes réseau.
• Prise en charge de la synchronisation en arrière-plan et des notifications push.
• Améliorez les performances en contrôlant la mise en cache et la récupération des ressources.

11. Question : Expliquez le modèle de boîte en CSS.

Réponse :

• Le Modèle de boîte CSS est une boîte qui entoure chaque élément HTML.
• Il se compose de :
  • Contenu : Le contenu réel comme le texte ou les images.
  • Padding : Espace autour du contenu à l'intérieur de la bordure.
  • Border : Une bordure qui fait le tour du remplissage et du contenu.
  • Marge : Espace en dehors de la frontière entre cet élément et d'autres éléments.
• Comprendre le modèle de boîte est essentiel pour l'agencement et le design.

12. Question : Que sont les composants d'ordre supérieur (HOC) dans React ?

Réponse :

• Un HOC est une fonction qui prend un composant et renvoie un nouveau composant.
• Ils sont utilisés pour partager des fonctionnalités communes entre les composants.
• Les HOC peuvent injecter des accessoires, gérer l'état ou gérer les effets secondaires.
• Exemple d'utilisation : const EnhancedComponent = withFeature(WrappedComponent);

13. Question : Comment assurez-vous l'accessibilité dans les applications Web ?

Réponse :

• Utiliser le HTML sémantique : Utilisation appropriée des éléments HTML.
• Attributs ARIA : Fournissez un contexte supplémentaire si nécessaire.
• Navigation au clavier : Assurez-vous que tous les éléments interactifs sont accessibles via le clavier.
• Contraste et lisibilité : Utilisez des contrastes de couleurs et des tailles de texte appropriés.
• Texte alternatif pour les images : Fournissez des attributs alt descriptifs.
• Test : Utilisez des outils de test d'accessibilité et des technologies d'assistance.

14. Question : Qu'est-ce que le partage de ressources entre origines croisées (CORS) et comment ça marche ?

Réponse :

• CORS est une fonctionnalité de sécurité qui autorise ou restreint les ressources demandées à un autre domaine.
• Cela fonctionne en ajoutant des en-têtes HTTP qui spécifient quelles origines sont autorisées à lire les réponses.
• Les navigateurs appliquent les politiques CORS et les serveurs doivent inclure des en-têtes appropriés tels que Access-Control-Allow-Origin.
• Les requêtes de contrôle en amont (méthode OPTIONS) sont utilisées pour les requêtes complexes visant à vérifier les autorisations.

15. Question : Décrivez comment vous implémenteriez le chargement différé dans une application Web.

Réponse :

• Pour les images et les médias :
  • Utilisez l'attribut chargement="lazy" dans balises.
  • Implémentez l'API Intersection Observer pour charger les médias lorsqu'ils entrent dans la fenêtre d'affichage.
• Pour le code :
  • Utilisez les importations dynamiques avec Webpack ou d'autres bundles.
  • Dans React, utilisez React.lazy() et Suspense pour le fractionnement du code au niveau des composants.
• Avantages :
  • Améliore le temps de chargement initial et les performances.
  • Réduit l'utilisation inutile des données.

16. Question : Quelle est la différence entre == et === en JavaScript ?

Réponse :

• == (Égalité abstraite) : Compare les valeurs après avoir effectué la coercition de type si les types diffèrent.
• === (Égalité stricte) : Compare à la fois la valeur et le type sans contrainte de type.
• Exemple :
  • 0 == '0' est vrai.
  • 0 === '0' est faux.
• Il est généralement recommandé d'utiliser === pour éviter des résultats inattendus dus à la coercition de type.

17. Question : Comment gérez-vous les erreurs dans le code asynchrone ?

Réponse :

• Promesses : Utilisez .catch() pour gérer les rejets.
• Async/Await : Enveloppez les appels d'attente dans des blocs try...catch.
• Gestionnaires d'erreurs globaux : Pour les rejets de promesses non gérés.
• Limites des erreurs (React) : Détectez les erreurs dans les arborescences de composants.
• Une gestion appropriée des erreurs garantit une meilleure expérience utilisateur et un débogage plus facile.

18. Question : Expliquez le concept de design réactif et comment vous le mettez en œuvre.

Réponse :

• Le Responsive Design garantit qu'un site Web s'adapte à différentes tailles d'écran et appareils.
• Mise en œuvre :
  • Utilisez des dispositions de grille flexibles avec CSS Flexbox ou Grid.
  • Implémentez des requêtes multimédias pour ajuster les styles en fonction de la taille de la fenêtre d'affichage.
  • Utilisez des unités relatives comme les pourcentages et les em ou rem.
  • Optimisez les images pour différentes résolutions d'écran.
• Test : Utilisez les outils de développement du navigateur et les appareils physiques pour tester la réactivité.

19. Question : Qu'est-ce qu'un préprocesseur CSS et pourquoi en utiliseriez-vous un ?

Réponse :

• Les Préprocesseurs CSS étendent les capacités du CSS en ajoutant des fonctionnalités telles que des variables, l'imbrication, des mixins et des fonctions.
• Les exemples incluent Sass, Less et Stylus.
• Avantages :
  • Réutilisabilité et maintenabilité du code.
  • Plus facile à gérer de grandes bases de code CSS.
  • Peut compiler en CSS standard pour la compatibilité du navigateur.

20. Question : Pouvez-vous expliquer le concept d'immuabilité et son importance dans React ?

Réponse :

• L'Immuabilité signifie que les données ne peuvent pas être modifiées après leur création.
• Dans React, l'immuabilité est importante car elle :
  • Permet des changements d'état prévisibles.
  • Aide à l'optimisation des performances, car React peut faire des comparaisons superficielles.
  • Évite les effets secondaires involontaires.
• Mise en œuvre :
  • Utilisez des méthodes qui renvoient de nouvelles copies de structures de données, comme Object.assign ou l'opérateur spread.
  • Utilisez des bibliothèques comme Immutable.js pour les structures de données complexes.

21. Question : Qu'est-ce que Webpack et pourquoi est-il utilisé ?

Réponse :

• Webpack est un bundler de modules pour les applications JavaScript.
• Utilisations :
  • Regroupe les fichiers JavaScript à utiliser dans un navigateur.
  • Traite et regroupe des actifs tels que CSS, des images et des polices via des chargeurs.
  • Permet le fractionnement du code et le chargement paresseux.
  • Prend en charge les plugins pour des fonctionnalités étendues.
• Avantages :
  • Gère efficacement les dépendances.
  • Optimise les actifs pour la production.

22. Question : Comment empêcher les attaques de type Cross-Site Scripting (XSS) ?

Réponse :

• Désinfection des entrées : Nettoyez et validez toutes les entrées utilisateur côté serveur.
• Encodage de sortie : Échapper aux entrées de l'utilisateur avant de les afficher dans le navigateur.
• Politique de sécurité du contenu (CSP) : Définissez des sources de contenu fiables pour empêcher les scripts malveillants.
• Évitez les scripts en ligne : Conservez le code JavaScript dans des fichiers externes.
• Utiliser les cookies HTTPOnly : Pour empêcher l'accès aux cookies via JavaScript.
• Audits de sécurité réguliers : Restez informé des meilleures pratiques de sécurité.

23. Question : Quels sont les avantages et les inconvénients de l'utilisation des applications à page unique (SPA) ?

Réponse :

• Avantages :
  • Expérience utilisateur fluide sans rechargement de page complète.
  • Meilleures performances après le chargement initial.
  • Plus facile de créer des expériences de type mobile.
• Inconvénients :
  • Défis de référencement, bien que cela puisse être atténué grâce au rendu côté serveur.
  • Le temps de chargement initial peut être plus long.
  • La gestion de l'historique du navigateur peut être complexe.
• Le choix entre SPA et les applications multipages traditionnelles dépend des exigences du projet.

24. Question : Comment fonctionne le mot-clé this en JavaScript ?

Réponse :

• this fait référence à l'objet qui exécute la fonction actuelle.
• Contextes :
  • Contexte Global : cela fait référence à l'objet global (fenêtre dans les navigateurs).
  • Méthode objet : cela fait référence à l'objet propriétaire de la méthode.
  • Gestionnaires d'événements : cela fait référence à l'élément DOM qui a déclenché l'événement.
  • Fonctions fléchées : N'ont pas leur propre ceci ; ils en héritent de la portée englobante.
• Comprendre cela est crucial pour la programmation orientée objet en JavaScript.

25. Question : Expliquez la différence entre les API RESTful et GraphQL.

Réponse :

• API RESTful :
  • Utilisez des méthodes HTTP et des points de terminaison pour accéder aux ressources.
  • Les données sont organisées autour des ressources.
  • Peut conduire à une récupération excessive ou insuffisante des données.
• GraphQL :
  • Utilise un seul point de terminaison.
  • Les clients précisent exactement de quelles données ils ont besoin.
  • Réduit le nombre de requêtes réseau.
  • Nécessite un schéma et des résolveurs.
• Facteurs de choix :
  • Exigences du projet, complexité des données et expertise de l'équipe.

26. Question : Comment gérer les styles dans une application React à grande échelle ?

Réponse :

• Modules CSS : Classes CSS de portée locale pour les composants.
• Composants stylisés : Bibliothèque CSS-in-JS qui permet d'écrire du CSS dans JavaScript.
• Sass/Less : Utilisez des préprocesseurs pour les fonctionnalités CSS avancées.
• Méthodologie BEM : Pour les conventions de dénomination et l'organisation.
• Thème : Utilisez le contexte ou les bibliothèques pour fournir un style cohérent.
• L'approche dépend des préférences de l'équipe et des besoins du projet.

27. Question : Que sont les React Hooks et pourquoi ont-ils été introduits ?

Réponse :

• Les React Hooks sont des fonctions qui vous permettent d'utiliser l'état et d'autres fonctionnalités de React sans écrire de classe.
• Crochets communs :
  • useState pour la gestion de l'état.
  • useEffect pour les effets secondaires.
  • useContext pour l'API de contexte.
• Raisons de l'introduction :
  • Simplifiez la logique avec état dans les composants fonctionnels.
  • Évitez la complexité des cours.
  • Permettez une meilleure réutilisation du code grâce à des hooks personnalisés.

28. Question : Décrivez comment vous mettriez en œuvre l'authentification dans une application monopage.

Réponse :

• Authentification basée sur des jetons :
  • Utilisez les JWT stockés en toute sécurité (de préférence dans des cookies HTTP uniquement).
  • Mettez en œuvre des flux de connexion pour recevoir et stocker des jetons.
• Protection des itinéraires :
  • Utilisez des composants d'ordre supérieur ou des gardes d'itinéraire pour protéger les itinéraires authentifiés.
• Intégration backend :
  • Configurez les points de terminaison de l'API pour l'authentification.
  • Validez les jetons côté serveur.
• Considérations de sécurité :
  • Protégez-vous contre les attaques XSS et CSRF.
  • Utilisez HTTPS pour crypter la transmission des données.

29. Question : Qu'est-ce que la programmation fonctionnelle et comment s'applique-t-elle à JavaScript ?

Réponse :

• La Programmation Fonctionnelle est un paradigme qui traite le calcul comme l'évaluation de fonctions mathématiques.
• Concepts de base :
  • Fonctions pures : Aucun effet secondaire et renvoie la même sortie pour la même entrée.
  • Immuabilité : Les données ne sont pas modifiées après la création.
  • Fonctions de première classe : Les fonctions sont traitées comme des valeurs.
  • Fonctions d'ordre supérieur : Fonctions qui prennent ou renvoient d'autres fonctions.
• En JavaScript :
  • Prend en charge la programmation fonctionnelle avec des fonctionnalités telles que la cartographie, la réduction, le filtre et les expressions de fonction.

30. Question : Comment gérez-vous la compatibilité des navigateurs et les polyfills ?

Réponse :

• Détection des fonctionnalités : Utilisez Modernizr ou des outils similaires pour détecter les fonctionnalités non prises en charge.
• Polyfills : Inclut des scripts qui reproduisent les fonctionnalités modernes des navigateurs plus anciens (par exemple, Babel polyfill).
• Transpilation : Utilisez des outils comme Babel pour convertir le code ES6 en ES5.
• Amélioration progressive : Créez des fonctionnalités qui fonctionnent sur tous les navigateurs, en les améliorant lorsque cela est possible.
• Test : Testez régulièrement sur différents navigateurs et appareils.
• Utiliser Puis-je utiliser : Vérifiez la prise en charge des fonctionnalités avant la mise en œuvre.

31. Question : Qu'est-ce que la conception centrée sur l'utilisateur ?

Réponse :

La conception centrée sur l'utilisateur consiste à concevoir en pensant à l'utilisateur à chaque étape. En se concentrant sur les besoins réels des utilisateurs et en les impliquant tout au long du processus de développement, les produits ont plus de chances d'être efficaces, conviviaux et de répondre aux demandes réelles du public cible.

32. Question : Qu'est-ce que l'enfer des rappels ?

Réponse :

Callback Hell fait référence à l'anti-modèle consistant à avoir plusieurs rappels imbriqués, ce qui conduit à un code difficile à lire et à maintenir. En utilisant Promises, Async/Await et une structuration appropriée du code, vous pouvez écrire du code asynchrone plus propre et éviter de tomber dans l'enfer des rappels.

33. Question : Que signifie SOLID ?

Réponse :

Les principes SOLID servent de lignes directrices aux développeurs pour créer des logiciels faciles à gérer, à étendre et à faire évoluer. En suivant ces principes, vous pouvez créer des systèmes robustes qui résistent à l'épreuve du temps et s'adaptent gracieusement aux nouvelles exigences.

34. Question : Qu'est-ce que le détournement de clics ?

Réponse :

Le détournement de clic, également connu sous le nom d'« attaque de réparation de l'interface utilisateur », est une technique malveillante par laquelle un attaquant incite un utilisateur à cliquer sur quelque chose de différent de ce qu'il perçoit, ce qui peut conduire à des actions non autorisées ou à la révélation d'informations confidentielles.

Exemple :

• Un utilisateur visite un site Web malveillant qui charge le bouton de connexion d'un site Web bancaire sous un faux bouton « Lire la vidéo ». Lorsque l'utilisateur clique pour lire la vidéo, il clique en fait sur le bouton de connexion du site bancaire, déclenchant potentiellement une action involontaire.

35. Question : Qu'est-ce que la coercition en JavaScript ?

Réponse :

La coercition en JavaScript fait référence au processus de conversion d'une valeur d'un type de données à un autre. JavaScript effectue la coercition de deux manières : implicite (automatique) et explicite (manuelle).

36. Question : Qu'est-ce que l'IIFE en JavaScript ?

Réponse :

Une IIFE (Immediately Invoked Function Expression) est une fonction JavaScript qui s'exécute dès qu'elle est définie. Il s'agit d'un modèle de conception qui fournit une portée privée à votre code.

37. Question : Qu'est-ce qu'un système de grille en CSS ?

Réponse :

Un système de grille en CSS est un cadre de mise en page qui permet aux développeurs de créer facilement des conceptions Web complexes et réactives. Il fournit un moyen structuré d'organiser le contenu en lignes et en colonnes, facilitant ainsi la création de mises en page réactives et flexibles.

38. Question : Que sont les espaces de noms en JavaScript ?

Réponse :

En JavaScript, un espace de noms est un conteneur qui permet aux développeurs de regrouper le code associé sous un nom unique pour éviter les collisions de noms et garder la portée globale propre. Étant donné que JavaScript ne prend pas en charge les espaces de noms intégrés comme certains autres langages, les développeurs créent des espaces de noms à l'aide d'objets, de modules ou d'expressions de fonction immédiatement invoquées (IIFE).

39. Question : À quoi sert la directive use strict en JavaScript ?

Réponse :

La directive use strict est utilisée pour écrire du code JavaScript propre, moins sujet aux erreurs. Il détecte les erreurs de codage courantes comme l'attribution d'une variable sans la déclarer ou la transmission de différents paramètres portant les mêmes noms à une fonction, etc.

40. Question :

Réponse :

Passer les attributs defer ou async à un

• Une analyse approfondie du composant de groupe de liste Bootstrap
• Explication détaillée du currying de la fonction JavaScript
• Exemple complet de génération de mot de passe JS et de détection de force (avec téléchargement du code source de démonstration)
• Angularjs intègre l'interface utilisateur WeChat (weui)
• Comment basculer rapidement entre le chinois traditionnel et le chinois simplifié avec JavaScript et l'astuce permettant aux sites Web de prendre en charge le basculement entre les compétences en chinois simplifié et traditionnel_javascript