Développer une application web avec React.js Flashcards

1
Q

Définition SPA

A

Une application SPA (pour Single Page Application) est une application web, composée de HTML, CSS et JavaScript, qui ne contient qu’une seule page.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
2
Q

Fonctionnement du MPA ?

A

Le nouveau serveur demande une recharge complète de la page pour afficher le contenu HTML en réponse, formant ainsi une MPA (Multiple Page Application) pour chaque demande.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
3
Q

Définition AJAX

A

AJAX, pour Asynchronous JavaScript and XML.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
4
Q

A quoi sert XML et JSON ?

A

XML et JSON sont des formats de données standardisés qui permettent de structurer un ensemble complexe de données.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
5
Q

Comment fonctionne le modèle MVC?

A

MVC, ou Model View Controller, est une architecture qui sépare les responsabilités d’une application web en trois entités distinctes : le modèle, qui gère l’accès et la mise en forme des données, la vue, qui gère la mise en forme de l’écran et l’interface, et le contrôleur, responsable des tâches logiques. Le MVC est modélisé comme une entreprise, le modèle jouant le rôle d’administrateur et la vue celui de gestionnaire de la commercialisation des services. Le contrôleur, quant à lui, est le PDG et fournit des directives générales. Le contrôleur effectue une requête POST avec les identifiants et vérifie si les identifiants sont valides dans la Base de données (BDD). Si c’est le cas, le contrôleur renvoie les données à la vue et affiche le panneau d’administration.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
6
Q

Définition MVVM?

A

MVVM, pour Model View ViewModel.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
7
Q

Définition de binding ?

A

Le binding est un mécanisme qui permet de faire des liaisons entre des données de manière dynamiques.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
8
Q

Définition du DOM ?

A

Le DOM est une API navigateur qui peut être très lente pour un gros volume de nœuds de DOM ou un gros volume de modifications à apporter.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
9
Q

Qu’est-ce que le Virtual DOM ?

A

C’est une copie de l’ensemble de l’arbre de DOM réalisé en JavaScript. C’EST PLUS RAPIDE QUE LE DOM

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
10
Q

Que veux dire MVC ?

A

MVC, ou Model View Controller, est une architecture qui sépare les responsabilités d’une application web en trois entités distinctes : le modèle, qui gère l’accès et la mise en forme des données, la vue, qui gère la mise en forme de l’écran et l’interface, et le contrôleur, responsable des tâches logiques.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
11
Q

Cite moi La différence entre les trois couche MVC .

A

Pour faciliter la compréhension et pour caricaturer un peu, imaginons le MVC comme une entreprise. Au sein de celle-ci, on retrouve une hiérarchie bien en place.

Modèle (Model) : On le voit comme l’administrateur. Il va gérer les communications avec une source de données comme les bases de données.

Vue (View) : Au niveau de l’entreprise, on va le voir comme le service marketing. Il va gérer la présentation de notre site.

Contrôleur (Controller) :

On va considérer le Contrôleur comme le CEO de l’entreprise. Il va donner les directives en général. Au niveau du code, si on appelle une route, on va alors solliciter le Contrôleur qui gère la route en question.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
12
Q

le binding est unidirectionnel (one-way data-binding) c’est quoi ?

A

la variable impacte le DOM (le contenu de la variable est ajouté au DOM), mais une modification du DOM (comme le fait de supprimer la balise h1) ne changera pas le contenu de la variable.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
13
Q

un binding bidirectionnel (two-way data-binding)?

A

Il est aussi possible de lier les données au DOM et d’écouter les événements en provenance du DOM pour modifier les données en conséquence : c’est le two-way data-binding.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
14
Q

React c’est quoi ?

A

React, a été développé par Facebook en 2011, est un bibliothèque de JavaScript étudiée pour créer interactives et dynamiques applications web. Développée par Facebook, elle se concentre sur la création de composants réutilisables et la manipulation dynamique de l’utilisateur, permettant une plus grande flexibilité dans la création d’interfaces utilisateur. Ce cours explore les fonctionnalités, les caractéristiques et les principes de React, y compris l’application à page unique (SPA) et le rendu côté client (CSR). Il est essentiel de faire la distinction entre la manipulation du DOM à partir du JavaScript natif et la manipulation du DOM par React.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
15
Q

Avantage SPA

A

Les SPA sont souvent critiques pour leur mauvaise performance en référencement naturel, mais React permet de créer des SPA indexées par les moteurs de recherche. Les techniques tels que prérendu server et gestion des métadonnées pour réseaux sociaux offrent une meilleure visibility pour les SPA. Enfin, React a une plus rapide et scalability comparé à des technologies web traditionnelles, réduisant les coûts de développement et libérant les projets plus rapidement.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
16
Q

Définition CDN ?

A

Il s’agit d’un réseau de serveurs informatiques répartis géographiquement dans le monde entier, conçu pour fournir rapidement des contenus (tels que des images, des vidéos, des scripts, etc.) à des utilisateurs finaux.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
17
Q

Qu’est-ce que le CSR ?

A

Le CSR (Client Side Rendering) est une technique de développement web qui permet de générer une application web dans le navigateur de l’utilisateur plutôt que sur le serveur.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
18
Q

Comment fonctionnent CSR ?

A

CSR
*envoie requete au serveur et récupere le squeltte HTML
* envoie le squellette sur la page par un script JavaScript qui va se charger de générer dynamiquement le HTML
*et l’affiche à l’utilisateur

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
19
Q

Que veux dire SSR?

A

Le SSR (Server-Side Rendering) est une technique de rendu de pages web qui permet au serveur de générer le code HTML complet d’une page web et de le renvoyer au navigateur de l’utilisateur.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
20
Q

Avantages du SSR ?

A

le SSR avec React, les avantages incluent une amélioration de la performance, une meilleure accessibilité pour les moteurs de recherche, et une expérience utilisateur plus rapide et plus fiable.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
21
Q

Définition du DOM ?

A

Le DOM (Document Object Model) est une structure de données, hiérarchique en arbre qui représente la structure HTML de votre page web. Le DOM est utilisé pour représenter et manipuler les éléments de la page web en JavaScript.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
22
Q

VIRTUAL DOM définition?

A

Le Virtual DOM est une copie légère du DOM qui est créée et stockée en mémoire par React. Lorsqu’un composant React est mis à jour, le Virtual DOM est mis à jour en premier lieu, plutôt que le DOM réel.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
23
Q

La différence entre javascript et REACT ?

A

En somme, les principales différences entre JavaScript et React concernant la manipulation du DOM sont les suivantes :

JavaScript manipule le DOM directement, tandis que React utilise une représentation virtuelle du DOM appelée Virtual DOM.

La manipulation du DOM avec JavaScript peut entraîner des performances atténuées en raison de la nécessité de mettre à jour toute la page, tandis que React optimise les performances en ne mettant à jour que les parties du DOM qui ont changé.

24
Q

Le DOM sert à quoi?

A

Le DOM est utilisé par les développeurs web pour manipuler et modifier dynamiquement les éléments de la page web en utilisant des langages de programmation tels que JavaScript.

25
Q

Définition VIrtual DOM ?

A

Le Virtual DOM est un concept clé de React. Il s’agit d’une représentation virtuelle de l’ensemble de la structure de la page web créée par React, qui est stockée en mémoire et qui permet à React de déterminer rapidement les changements à apporter à la page.

26
Q

Comment le processus de mise à jour oppert dans le virtual DOM?

A

Le processus de mise à jour du Virtual DOM est basé sur un algorithme appelé « diffing ». L’algorithme « diffing » compare le Virtual DOM actuel avec le Virtual DOM précédent pour détecter les différences et identifier les éléments qui ont besoin d’être mis à jour.

27
Q

Pourquoi c’est mieux virtual DOM?

A

améliore les performances, permet de développer des applications plus complexes et dynamiques et aussi permet aux développeurs de créer des composants réutilisables, car chaque composant peut gérer son propre état et mise à jour.

28
Q

Différences entre le DOM réel et le DOM virtuel

A
  • mise à jour du Virtual DOM plus facile que celle du DOM réel.
  • La manipulation du Virtual DOM plus simple que la manipulation du DOM réel,
  • React permet d’optimiser la mise à jour du Virtual DOM en groupant les changements et en effectuant des mises à jour en lot.
29
Q

Limites du Virtual DOM et stratégie d’optimisation

A

L’utilisation excessive du Virtual DOM peut entraîner une surcharge de la mémoire et ralentir les performances de l’application.

De plus, l’utilisation du Virtual DOM peut entraîner des problèmes de synchronisation dans les applications multi-threaded.

30
Q

Alternatives au Virtual DOM

A
  • L’une de ces approches est la manipulation directe du DOM.
  • OU l’utilisation de bibliothèques de gestion d’état, telles que Redux ou MobX.
  • les approches alternatives peuvent être combinées avec l’utilisation du Virtual DOM pour obtenir des performances optimales.
31
Q

Qu’est-ce que Node.js ?

A

Node.js est un environnement d’exécution côté serveur, qui permet d’exécuter du code JavaScript en dehors d’un navigateur web.

32
Q

Comment fonctionne Node.js ?

A

Node.js utilise un modèle d’exécution asynchrone, traitant simultanément plusieurs requêtes sans affecter le flux d’exécution principal grâce à des rappels pilotés par des événements.

33
Q

Qu’est-ce que NPM ?

A

NPM (Node Package Manager) est un gestionnaire de packages pour Node.js. C’est un outil en ligne de commande qui permet d’installer, de mettre à jour et de gérer des packages Node.js, ainsi que leurs dépendances.

34
Q

C’est quoi un composant dans react ?

A

Un composant dans React est une brique logicielle réutilisable qui permet de factoriser du code métier en fournissant une abstraction.

35
Q

Quel est le meilleur moyen de sécuriser son site sur Symfony ?

A

Security-bundle ainsi que des outils de sécurité comme HttpFoundation pour la génération de sessions, session_start(), et $_SESSION. Et enfin active la Protection CSRF à l’aide de security-csrf. Cela crée un jeton appelé _csrf_token pour vérifier que le formulaire est légitime.

36
Q

D’autre idée pour sécuriser SYMFONY ?

A

Citons HTTPfoundation, authenticator, security-csrf, UserPasswordHasherInteface, UserAuthenticatorinterface et bien d’autres systèmes de sécurité qui travaille pour nous sécuriser et permettent de hasher les données sensibles.

37
Q

Quel type d’élément faut -il prendre en compte avant de déployer son site web ?

A

prendre en compte plusieurs éléments clés, tels que la configuration du serveur, l’optimisation des performances, la sécurité, la gestion des erreurs et des sauvegardes, et la mise en place d’un plan de reprise d’activité en cas de dysfonctionnement.

38
Q

La préparation avant le déploiement en production

A

Vous devez optimiser les performances de votre application Symfony pour assurer une expérience utilisateur rapide et fluide.

39
Q

Caching Définition ?

A

Le caching consiste à stocker en mémoire les résultats de requêtes ou de calculs afin de les réutiliser ultérieurement plutôt que de les recalculer à chaque fois.

40
Q

Faut -il vider le cache de l’application avant sa mise en production? Si oui quel commande le permet-il ?

A

Il faut toujours vider la mémoire cache avant la mise en production. Cela peut se faire avec la ligne de commande ci-dessous :

$ php bin/console cache:clear

41
Q

Comment activer le mode production et quel précaution prendre ?

A

Pour activer le mode de production, vous devez définir la variable d’environnement APP_ENV sur prod.

Vous pouvez également supprimer tous les composants que vous avez installés qui ne sont utilisables qu’en mode dev. Vous retrouverez tous ces composants dans composer.json et dans “require-dev”. Pour les supprimer tous en une seule fois avec la commande :

$ composer install –no-dev
ou
$ composer –no-dev update

optimisant ainsi ses performances et sa sécurité.

42
Q

Donne moi les Étape théorique pour qu’une application soit bien installée en production en gros sos modo.

A

Pour déployer votre code sur le serveur de production, suivez les étapes suivantes :

1/téléchargez tous les fichiers nécessaires,
2/installez les dépendances du fournisseur,
3/exécutez les migrations de base de données,
4/videz votre cache,
5/marquez une version spécifique de votre code en tant que 6/version, créez une zone de transit temporaire,
7/exécutez des tests pour garantir la stabilité du code et du serveur, 8/supprimez les fichiers inutiles du répertoire public/ et nettoyez les systèmes de cache externes tels que Memcached ou Redis.

Ces étapes garantissent que votre application utilise les dernières modifications apportées au code.

43
Q

Comment choisir un bon hébergeur ?

A

Choisir un hébergeur
Choisir un bon hébergeur est une étape importante dans la création de votre site web. Voici quelques éléments à prendre en compte pour faire un choix éclairé :

La fiabilité : assurez-vous que l’hébergeur offre une disponibilité élevée (idéalement proche de 100 %) et qu’il dispose d’une infrastructure fiable pour garantir la continuité du service.

Les performances : vérifiez que l’hébergeur offre des temps de réponse rapides et des temps de chargement de pages optimisés, car cela peut avoir un impact significatif sur l’expérience utilisateur de vos visiteurs.

Le support client : il est important de choisir un hébergeur qui offre un support client réactif et compétent, notamment pour résoudre rapidement les problèmes techniques.

Les fonctionnalités : vérifiez que l’hébergeur propose les fonctionnalités nécessaires à votre projet, telles que les bases de données, les certificats SSL, les outils de sauvegarde, etc.

Le prix : comparez les offres des différents hébergeurs en prenant en compte le coût et la qualité du service proposé.

Les avis des utilisateurs : n’hésitez pas à consulter les avis et les retours d’expérience d’autres utilisateurs pour vous faire une idée de la qualité de service de l’hébergeur.

En prenant en compte ces critères, vous devriez être en mesure de choisir un hébergeur fiable et adapté à vos besoins.

44
Q

Quel commande GIT vous permet de pousser les modifications apportées à votre dépôt local vers un dépôt distant, comme GitHub?

A

git push

45
Q

Quel commande GIT me permet de récupérer les modifications apportées à un dépôt distant et de les intégrer à votre dépôt local?

A

git pull

46
Q

Quel commande GIT initialise un nouveau dépôt Git dans un répertoire existant ou vide?

A

git init

47
Q

Quel commande GIT ajoute des fichiers à la zone de staging, qui est une zone temporaire où vous préparez les fichiers avant de les versionner.

A

git add

48
Q

Quel commande GIT enregistre les modifications apportées aux fichiers de la zone de staging dans l’historique des versions de Git. Vous pouvez également ajouter un message de commit pour décrire les modifications?

A

git commit

49
Q

Quel commande GIT vous permet de vérifier l’état de votre dépôt Git. Vous pouvez voir quels fichiers ont été modifiés, quels fichiers sont dans la zone de staging, etc?

A

git status

50
Q

Quel commande GIT vous permet de voir l’historique des commits dans votre dépôt Git. Vous pouvez voir qui a effectué chaque commit, quand il a été effectué et quel message de commit a été ajouté?

A

git log

51
Q

Quel commande GIT vous permet de créer une nouvelle branche dans votre dépôt Git. Les branches sont des copies du code qui vous permettent d’expérimenter et de travailler sur de nouvelles fonctionnalités sans affecter le code principal?

A

git branch

52
Q

Quel commande GIT vous permet de fusionner une branche dans la branche principale de votre dépôt Git?

A

git merge

53
Q

Quel commande GIT vous permet de récupérer les modifications apportées à un dépôt distant et de les intégrer à votre dépôt local?

A

git pull

54
Q

Qu’est-ce que le composant Mailer ?

A

Le composant Mailer de Symfony est un outil performant et flexible qui permet de gérer et d’envoyer des e-mails de manière simple. Avec ce composant, vous pouvez facilement créer et envoyer des courriels, y compris des templates HTML, des pièces jointes, des adresses de réponse, des en-têtes et des signatures. Vous pouvez également configurer facilement les paramètres d’envoi d’e-mail tels que les serveurs SMTP, les adresses d’envoi et de réponse.

55
Q

le serveur SMTP Définition ?

A

Un serveur SMTP (Simple Mail Transfer Protocol) est un serveur informatique qui gère l’envoi et la réception des e-mails. Il s’agit du protocole standard utilisé pour envoyer des e-mails via internet.

56
Q

Qu’est-ce qui nous permet de structurer les e-mails en utilisant des cellules qui peuvent être alignées horizontalement et verticalement. Cette approche est utile pour créer des mises en page complexes avec des colonnes, des en-têtes, des pieds de page et des images alignées avec du texte….

A

Les tables HTML

57
Q

InKy c’est quoi ?

A

Inky est un langage de balisage HTML développé par la société ZURB pour aider à simplifier la création de modèles d’e-mails compatibles avec tous les clients de messagerie électronique. Le filtre Inky permet de convertir le code Inky en HTML standard, en ajoutant automatiquement les tables HTML nécessaires pour garantir la compatibilité avec les clients de messagerie électronique.