Parfois, il y a des choses qu'on ne peut expliquer rationnellement... Je suis tombé sur le charme de Vue.js, un vrai coup de foudre. J'ai aimé le logo, j'ai aimé le clin d'oeil Vue (view),...
Super vidéo !! ça serait super aussi de faire une autre vidéo du même style pour parler de svelte qui a une architecture complètement différente des trois autres 😁 j'ai pas encore fait de projet avec mais mes quelques tests m'on donné une bonne impression.
On dirait que ma reponse a ete supprimée pour contenir un lien, alors voila le nom du plugin, je vous laisse chercher sue google:p babel-plugin-transform-react-constant-elements
Explication très claire, merci. Est-ce que la memoisation de composant en React (PureComponent/React.memo) peut amener à des pertes de performance ? Qui dit memoisation dit prendre de la place en memoire, cela voudrait dire qu'une app React prendrait + de memoire (ram je suppose ?) qu'une app Vuejs (qui elle n'a pas besoin de memoiser entierement ses composants) ?
Si tu as un formulaire un peu complexe et que tu fais mal les choses (mauvaise compréhension de ce qui se passe dans le framework) tu peux vite arriver à un délai de 50/60ms entre les rendus. Il est vital à mon sens que le développeur comprenne le moteur de son framework pour éviter ce genre d'expériences.
Très bonne vidéo, ça me fait penser à un truc, est-ce possible de faire une vidéo pour choisir le framework en fonction à quels problèmes ils répondent, les usages et quels questions se poser sur notre projet ! J'arrive bien en tant que dev back sur les technos back mais en front 🥺
C'est assez difficile car dans certaines situation plusieurs framework vont correspondre et ça va dépendre de la sensibilité du développeur (si on préfère le fonctionnel ou l'objet par exemple).
ouais mais dans le cas de react le fait de tous mémoriser peut avoir un impacter négative sur les performances de l'application (je ne sais pas si c'est le cas pour vue), sans parler que de l'augmentation de la consommation de la mémoire et dans certains cas la consommation du cpu
Merci bien pour ces explications. Cependant, comparé à Svelte, qui n'utilise pas de DOM virtuel (car selon son créateur cela représenterait une couche de plus à exécuter lors du chargement de l’application), penses-tu qu'il est plus performant ?
Svelte est plus performant par rapport à vue. Il n'y a même pas besoin de vérifier. Le principe de la compilation rend svelte très performant par nature
Pourrais tu fair une application qui cherche de maniere random de chose sur internet et que tu transposerais en android mais fait sous jav vanilla? Il ny a aucun rapport avec la video cest juste une demande
Je pensais pareil que toi, pourtant après avoir essayé et développé un gros projet avec Vue, je suis tombé sous le charme de cette librairie, même en terme du code d'écriture de composant
Du coup on fait quoi ? React où il faut "penser à optimiser" ce qui est chiant mais au moins c'est explicite VS la magie noir de Vue aka "quand ça marche c'est bien, quand ça marche pas tu pleure" :D
Cela arrivé beaucoup dans les premières versions car la manière d'observer les choses n'étaient pas idéal mais ça arrive moins souvent. J'ai eu des cas ou le computed() avait du mal à suivre ses dépendances perso.
Vue que tout est réactif et mutable tu peux facilement passer une ref via provide/inject et oublier de la mettre en readonly. Ensuite si tu a des composants enfant qui modifie la ref c'est le bordel pour comprendre qui a modifié quoi et debugger. React c'est plus prédictible, tout est immuable et ton app c'est juste un appel de fonction en cascade. Le fait qu'une mise à jour de l'état entraîne le rendu de tous ces enfants et que "le flux de données va vers le bas" rend le debuggage plus facile
je sais pas si c'est pertinent la vitesse d'un framework web en 2021. Chaque mois qui passe donne raison... Les tels / pc / laptop sont de plus en plus puissant et on a déjà une telle vitesse.. Je veux dire, on parle pas d'un FPS/mmo mais d'un simple web app.
C'est tout de même intéressant de s'intéresser à ce qui se passe derrière le framework pour savoir ou chercher en cas de problème. Sans forcément avoir une grosse app, tu peux rapidement arriver à un stade ou tu as de l'input lag sur un formulaire.
Très interessant! Par contre je me demande si c'est vraiment jsx le souci. On peut utiliser jsx avec vue aussi et il "devrait" compiler de la meme manière qu'un template. Une experience est due! 🤩
@@micmotm2479 Eh bien si, désolé, j'ai touché à ce truc pendant 6 mois... Et bordel quelle galère... D: Je vois pas pourquoi je m'embêterai à utiliser Angular et utilisé des fonctions pétés RXjs alors que je peux tout faire, plus simplement et rapidement avec Vue... Désolé hein, mais Angular, Google, n'a jamais étais capable de faire fonctionner leur framework comme il faut... Quand tu vois le nombre d'issues qu'a Angular... Ils dépassent ceux de vue / react / svelte réunis... C'est qu'il y a un gros problème quand même... Et ils changent de version tout les 6 mois... Angular 12... mdr. Bref, ce framework a aucun intérêt à mes yeux devant les pointures Vue / React.
Yeah, too much people (not only in France) spend their time to debate instead of to learn. A good code is good as well on Vue as on React and on Angular or other
The goal of this video is to explain how VueJS optimize things during compile time. Allowing people to make an educated choice about their framework (instead of just following a trend). Debate is a good thing cause it helps you understand what tool to use for what need.
Je ne saisi pas la logique de laisser entendre que l'utilisateur de React à plus de chose à coder en utilisant useMemo, d'après l'exemple, alors que sur Vue il faut utiliser computed. C'est juste la même chose. Cette vidéo semble vouloir prouver que Vue n'est pas React. En effet ce sont deux paradigme différents. On ne code pas de la même manière sur chaque. Et donc évidemment coder en React avec la logique de Vue ce n'est pas performant.
Pour l'exemple du useMemo je me suis peut être mal exprimé mais le sous entendu était que dans react il faut mettre en dépendance (second argument) les propriété qui re-déclenche le calcul et cela demande plus de travail / organisation (surtout si on met des callback au milieu). Aussi, parfois si on veut neutraliser l'opération (si l'élément qui utilise la valeur est masqué) il faudra écrire plus de logique dans le code du useMemo() L'objectif de la vidéo c'est de démontrer effectivement la différence entre Vue qui essaie de faire les choses de manière implicite (ce qui peut mener à des surprises) vis à vis de React qui laisse au développeur le choix. C'est pour cela que j'ai mis "de base" dans le titre de la vidéo, car bien écrit, du code React sera aussi performant que du code VueJS. Mais si le code est écrit sans réfléchir à la performance, alors "de base" vuejs offrira un meilleur résultat.
Hello
Merci de prendre ce temps pour nous expliquer l’envers du décors de tous ces frameworks !
J’approuve à 100% ce nouveau format ❤️
Très interessant comme toujours ! Merci !
Une idée de tuto : une série de tutos complète sur vuejs 3 🙈 comme pour vue 2 (qui était top !!)
Parfois, il y a des choses qu'on ne peut expliquer rationnellement... Je suis tombé sur le charme de Vue.js, un vrai coup de foudre. J'ai aimé le logo, j'ai aimé le clin d'oeil Vue (view),...
Très intéressant ce format, claire et précis. Merci .
Super vidéo. Elle m’a permis de mieux comprendre la memoization en React :)
Super vidéo !! ça serait super aussi de faire une autre vidéo du même style pour parler de svelte qui a une architecture complètement différente des trois autres 😁
j'ai pas encore fait de projet avec mais mes quelques tests m'on donné une bonne impression.
Oui, et Solid, qui mérite grandement d’être comparé à React, Svelte, et Vue 😊
belle explication, je suis dev back Java et j'ai (l'impression d'avoir) tout compris
Merci pour ce beau point détaillé et factuel :) Et ca incite à être plus curieux et ouvert :)
Très bonne video une fois de plus ! D'ailleurs en passant quelle est la typo (dans la zone de code) que tu utilises Jonathan ?
Une vidéo en or ✨ Merci énormément !
Toujours très pertinent, comme d'ab :)
Merci à toi !
Tu peux obtenir la meme chose avec react avec des plugins babel. Ce n'est certes pas inclu de base, mais facile à configurer
Est-ce que tu peux citer quelques exemple s'il te plaît? Ca m'intéresse énormément et c'est pour les autres aussi
On dirait que ma reponse a ete supprimée pour contenir un lien, alors voila le nom du plugin, je vous laisse chercher sue google:p babel-plugin-transform-react-constant-elements
Explication très claire, merci.
Est-ce que la memoisation de composant en React (PureComponent/React.memo) peut amener à des pertes de performance ?
Qui dit memoisation dit prendre de la place en memoire, cela voudrait dire qu'une app React prendrait + de memoire (ram je suppose ?) qu'une app Vuejs (qui elle n'a pas besoin de memoiser entierement ses composants) ?
Merci pour la vidéo. La performance est elle si importante ? J' ai l impression qu en ce moment on fait la course a la nano seconde...
C'est vrai qu'on se prend souvent la tête pour peu mais d'un autre point de vue cela a son importance
@@redyk4073 en vue c'est tendu de le faire laguer. C'est plus souvent des mauvaises pratiques de JS que des problèmes de vue
Si tu as un formulaire un peu complexe et que tu fais mal les choses (mauvaise compréhension de ce qui se passe dans le framework) tu peux vite arriver à un délai de 50/60ms entre les rendus. Il est vital à mon sens que le développeur comprenne le moteur de son framework pour éviter ce genre d'expériences.
Très bonne vidéo, ça me fait penser à un truc, est-ce possible de faire une vidéo pour choisir le framework en fonction à quels problèmes ils répondent, les usages et quels questions se poser sur notre projet ! J'arrive bien en tant que dev back sur les technos back mais en front 🥺
C'est assez difficile car dans certaines situation plusieurs framework vont correspondre et ça va dépendre de la sensibilité du développeur (si on préfère le fonctionnel ou l'objet par exemple).
@@grafikart Oui je sais bien, ça permet de donner des pistes de réflexion surtout.
Même si dans certaines situations il n'y a pas qu'un seul choix.
J'aime ce genre de format!
ouais mais dans le cas de react le fait de tous mémoriser peut avoir un impacter négative sur les performances de l'application (je ne sais pas si c'est le cas pour vue), sans parler que de l'augmentation de la consommation de la mémoire et dans certains cas la consommation du cpu
très bon format de vidéos si ont pouvais descendre un peu plus profondement sous le capot ça serais pas mal
Très pertinent, merci :)
Excellent je regarde une video et je vois une autre video op j enchaine Merci
Merci bien pour ces explications. Cependant, comparé à Svelte, qui n'utilise pas de DOM virtuel (car selon son créateur cela représenterait une couche de plus à exécuter lors du chargement de l’application), penses-tu qu'il est plus performant ?
Svelte est plus performant par rapport à vue. Il n'y a même pas besoin de vérifier. Le principe de la compilation rend svelte très performant par nature
Super cette vidéo, grand bravo
Oui j'aime beaucoup ce genre de contenu.
tres bon format, merci ;)
Pourrais tu fair une application qui cherche de maniere random de chose sur internet et que tu transposerais en android mais fait sous jav vanilla?
Il ny a aucun rapport avec la video cest juste une demande
Je ne vois pas le rapport avec cette vidéo :(
Super vidéo
Je suis trop fan du style de code de React que je ne suis plus capable d'entendre parler des autres framework 😁
Je pensais pareil que toi, pourtant après avoir essayé et développé un gros projet avec Vue, je suis tombé sous le charme de cette librairie, même en terme du code d'écriture de composant
@@eliebismuth412 Merci d'avoir partager ton point de vue, je vais essayer Vue
@@lepresk Il n'y a pas d'autre frameworks. React et Angular sont des librairies tandis que Angular est un framework.
@@polaris1900 Next.js est le framework de React
Polaris
Tu peux lire ce que tu as écrit ?
Tu as commis la même erreur.
Du coup on fait quoi ? React où il faut "penser à optimiser" ce qui est chiant mais au moins c'est explicite VS la magie noir de Vue aka "quand ça marche c'est bien, quand ça marche pas tu pleure" :D
C'est exactement l'objectif / conclusion de la vidéo. Au final c'est à chacun de déterminer le compromis qu'il veut faire ^^.
Ça arrive vraiment ça dans Vue, le cas "quand ça marche pas tu pleures" ?
Cela arrivé beaucoup dans les premières versions car la manière d'observer les choses n'étaient pas idéal mais ça arrive moins souvent. J'ai eu des cas ou le computed() avait du mal à suivre ses dépendances perso.
Vue que tout est réactif et mutable tu peux facilement passer une ref via provide/inject et oublier de la mettre en readonly. Ensuite si tu a des composants enfant qui modifie la ref c'est le bordel pour comprendre qui a modifié quoi et debugger. React c'est plus prédictible, tout est immuable et ton app c'est juste un appel de fonction en cascade. Le fait qu'une mise à jour de l'état entraîne le rendu de tous ces enfants et que "le flux de données va vers le bas" rend le debuggage plus facile
Intéressant, merci pour vos réponses
je sais pas si c'est pertinent la vitesse d'un framework web en 2021. Chaque mois qui passe donne raison... Les tels / pc / laptop sont de plus en plus puissant et on a déjà une telle vitesse.. Je veux dire, on parle pas d'un FPS/mmo mais d'un simple web app.
C'est tout de même intéressant de s'intéresser à ce qui se passe derrière le framework pour savoir ou chercher en cas de problème. Sans forcément avoir une grosse app, tu peux rapidement arriver à un stade ou tu as de l'input lag sur un formulaire.
Et angular ?
Très interessant! Par contre je me demande si c'est vraiment jsx le souci. On peut utiliser jsx avec vue aussi et il "devrait" compiler de la meme manière qu'un template. Une experience est due! 🤩
Perzo j'ai commencé avec Vue et je ne compte pas le délaisser 🇨🇵
tu changera d'avis un de ses 4
@@CodeTatami on verra
Et la comparaison avec svelte
A vrai dire je ne sais plus quoi choisir entre angular ; react ; vue
Vue est plus facile que les autres,
Vue est un peu basé sur angular.
React est bcq plus populaire et complexe.
( Ca reste un point de vu ...)
Commence par Vue c est facile. Ensuite, tu pourras plus simplement découvrir react. Angular parait en perte de vitesse.
the only advantage React has over Vue is job opportunities , vue is mutch easier and has less code.
Je trouve personnellement que Vue est bcp plus propre qu’angular et react.
Je te conseille de prendre un peu de temps pour tester les 3 pour te faire ton propre avis car ils ont des styles de code trèèèèès différents.
Pourrais tu aller vers une comparaison avec angular ?
Il faut que je teste et explore angular avant ;) Mais dès que je le fais je prévois de faire pareil.
Sacré Vue.js !
Thx
Super video , g g
Et dire que les entreprises utilisent Angular parce que c'est Google... Alors qu'a côté, ta Vue ou React qui sont deux pointures... Bref
Tu ne connait vraiment pas Angular pour sortir un commentaire pareil 😅
@@micmotm2479 Eh bien si, désolé, j'ai touché à ce truc pendant 6 mois... Et bordel quelle galère... D:
Je vois pas pourquoi je m'embêterai à utiliser Angular et utilisé des fonctions pétés RXjs alors que je peux tout faire, plus simplement et rapidement avec Vue...
Désolé hein, mais Angular, Google, n'a jamais étais capable de faire fonctionner leur framework comme il faut...
Quand tu vois le nombre d'issues qu'a Angular... Ils dépassent ceux de vue / react / svelte réunis... C'est qu'il y a un gros problème quand même... Et ils changent de version tout les 6 mois... Angular 12... mdr.
Bref, ce framework a aucun intérêt à mes yeux devant les pointures Vue / React.
PLUS FORT LE SON PUTAIN
*2021 and frensh people still debate what frontend framwork is fast lol* read comments if you don;t believe me
Yeah, too much people (not only in France) spend their time to debate instead of to learn. A good code is good as well on Vue as on React and on Angular or other
The goal of this video is to explain how VueJS optimize things during compile time. Allowing people to make an educated choice about their framework (instead of just following a trend).
Debate is a good thing cause it helps you understand what tool to use for what need.
Je ne saisi pas la logique de laisser entendre que l'utilisateur de React à plus de chose à coder en utilisant useMemo, d'après l'exemple, alors que sur Vue il faut utiliser computed. C'est juste la même chose.
Cette vidéo semble vouloir prouver que Vue n'est pas React. En effet ce sont deux paradigme différents. On ne code pas de la même manière sur chaque.
Et donc évidemment coder en React avec la logique de Vue ce n'est pas performant.
Pour l'exemple du useMemo je me suis peut être mal exprimé mais le sous entendu était que dans react il faut mettre en dépendance (second argument) les propriété qui re-déclenche le calcul et cela demande plus de travail / organisation (surtout si on met des callback au milieu). Aussi, parfois si on veut neutraliser l'opération (si l'élément qui utilise la valeur est masqué) il faudra écrire plus de logique dans le code du useMemo()
L'objectif de la vidéo c'est de démontrer effectivement la différence entre Vue qui essaie de faire les choses de manière implicite (ce qui peut mener à des surprises) vis à vis de React qui laisse au développeur le choix. C'est pour cela que j'ai mis "de base" dans le titre de la vidéo, car bien écrit, du code React sera aussi performant que du code VueJS. Mais si le code est écrit sans réfléchir à la performance, alors "de base" vuejs offrira un meilleur résultat.
Et le titre est assez clair. "de base".