Frontend Flashcards
Quelles sont les trois étapes du maquettage ?
Wireframe, maquettage, prototypage
Qu’est-ce que le responsive design?
C’est le fait d’avoir un produit qui s’adapte a toutes les tailles d’écrans.
UX ? UI ?
Ux = user experience et UI = user interface. Ce sont deux approches du design, l’un se
concentrant sur l’experience utilisateur (ressenti, ergonomie, intuitivité) , l’autre sur l’interface
au sens du design (art, beauté etc.)
Connais-tu le système de composants ?
Le concept de “système de composants” en développement web est très important, surtout
dans le contexte des interfaces utilisateur (UI) modernes. Un système de composants est
une approche de développement qui permet de diviser une application en parties
réutilisables, modulaires et indépendantes.
Qu’est-ce que le CSS ?
Le CSS (Cascading Style Sheets) est utilisé pour styliser les éléments HTML sur une page
web, définissant l’apparence (couleurs, polices, mises en page, etc.).
Comment rendre responsive avec le CSS ?
Avec les Media Queries : Appliquent des styles selon la taille d’écran.
Qu’est-ce que le SASS ? Différence avec le CSS ?
SASS (Syntactically Awesome Style Sheets) est un préprocesseur CSS qui ajoute des
fonctionnalités avancées au CSS, comme des variables, des mixins, des fonctions, et
l’imbrication de sélecteurs. Il est compilé en CSS standard pour être utilisé dans les
navigateurs.
Tu as utilisé une librairie CSS (ex : tailwind) : peux-tu
donner les avantages et les inconvénients ?
Avantages de Tailwind CSS :
● Personnalisation rapide : Utilisation de classes utilitaires pour un style direct dans le HTML.
● Cohérence : Assure une apparence uniforme avec un système de design intégré.
● Modularité : Pas de styles inutilisés, ce qui réduit la taille des fichiers CSS en production.
● Facilité de configuration : Hautement configurable via un fichier de configuration pour répondre aux besoins spécifiques.
Inconvénients de Tailwind CSS :
● HTML surchargé : Les classes utilitaires peuvent rendre le HTML difficile à lire et à maintenir.
● Courbe d’apprentissage : Peut être déroutant pour les débutants non familiers avec les classes utilitaires.
● Déviations du design : Encourager le style directement dans le HTML peut compliquer la gestion des designs complexes ou dynamiques.
Qu’est-ce que le Référencement naturel ?
C’est le fait d’être placé au début des recherches Google
Que signifie S.E.O ? À quoi ça sert ?
SEO signifie Search engine Optimization.
Ça permet d’optimiser sont site pour qu’il soit référencé par google plus haut dans les résultat de manière naturelle (sans payer, contrairement au SEA).
Quelles sont les bonnes pratiques en SEO (en citer au moins 3)
?
Avoir les bon mots clefs sur son site, avoir une structure du site cohérente et logique, avoir un site web responsive (et encore mieux, optimiser mobile
Quelle architecture as-tu mis en place ?
Architecture MVC (model, vue, composant)
Différence librairie VS framework ?
Les bibliothèques ciblent une fonctionnalité spécifique, tandis qu’un framework tente de fournir tout le nécessaire pour développer une application complète.
Qu’est-ce que React ?
React : Une bibliothèque JavaScript pour créer des interfaces utilisateur (UI), développée par Facebook. Elle permet de construire des composants réutilisables et de gérer efficacement l’état d’une application.
Pourquoi choisir React ?
● Composants réutilisables : Facilite la maintenance et l’évolutivité.
● Virtual DOM : Améliore les performances en mettant à jour seulement les parties nécessaires de l’UI.
● Écosystème riche : Large communauté, nombreux outils et extensions.
● Apprentissage : Courbe d’apprentissage raisonnable pour les développeurs JavaScript.
Qu’est-ce qu’une SPA (Single Page Application) ?
SPA : Application web qui charge une seule page HTML et met à jour
dynamiquement le contenu en fonction des interactions de l’utilisateur sans recharger toute la page.
Avantages d’une SPA ?
● Expérience utilisateur fluide : Navigation rapide sans rechargement de page.
● Moins de requêtes serveur : Seules les données nécessaires sont échangées, réduisant la charge sur le serveur.
Inconvénients d’une SPA :
● SEO plus difficile : Moins optimisée pour le référencement naturel, bien que cela puisse être amélioré avec des techniques comme le server-side rendering (SSR).
● Temps de chargement initial plus long : Peut être plus lente à charger au départ, car toute l’application doit être chargée.
A quoi sert vite ?
Vite est un outil de développement qui sert à construire des applications web modernes. Il est principalement utilisé pour les projets utilisant des frameworks JavaScript comme React, Vue, ou Svelte.
Fonctionnalités principales :
● Serveur de développement ultra-rapide : Démarre rapidement et propose un rechargement à chaud (Hot Module Replacement) quasi instantané.
● Build performant : Utilise Rollup sous le capot pour produire des bundles optimisés pour la production.
● Support natif des modules ES : Utilise les modules ECMAScript natifs du navigateur pour un développement plus rapide sans nécessiter de transpilation initiale.
Avantages :
● Rapidité : Temps de démarrage quasi instantané, même pour les projets volumineux.
● Expérience développeur améliorée : Rechargement instantané des modules, rendant le développement plus fluide.
● Configuration minimale : Prêt à l’emploi avec des configurations par défaut optimisées.
En résumé, Vite accélère le développement et le processus de build des applications web modernes, en particulier celles utilisant des frameworks front-end.
Qu’est-ce qu’un bundle JS ?
Un bundle JS est un fichier JavaScript unique qui combine et minifie plusieurs fichiers JavaScript (et parfois CSS) utilisés dans une application.
Objectif du bundle JS :
● Optimisation : Réduit le nombre de requêtes HTTP en regroupant plusieurs fichiers en un seul, améliorant ainsi les performances de chargement de l’application.
● Minification : Supprime les espaces, commentaires, et réduit les noms de variables pour diminuer la taille du fichier final.
● Gestion des dépendances : Assure que tous les modules et bibliothèques utilisés dans l’application sont inclus dans le bundle, évitant les erreurs d’importation ou de dépendances manquantes.
Exemples d’outils de bundling : Webpack, Rollup, Parcel.
