Pourquoi utiliser une librairie front-end ? et comment la choisir ?

Article ► grafikart.fr/blog/librarie-fr...
Abonnez-vous ► bit.ly/GrafikartSubscribe
Je vous propose aujourd'hui de parler des librairies front-end en JavaScript, pourquoi elles-sont utiles et pourquoi il y en a autant. Mais avant de se lancer dans l'exploration il est important d'identifier le problème qu'elles résolvent.
00:00 Introduction
00:12 Le problème
03:00 Les solutions
08:30 Comment choisir ?
Soutenez Grafikart:
Devenez premium ► grafikart.fr/premium
Retrouvez Grafikart sur:
Le site ► grafikart.fr
Twitter ► / grafikart_fr
Discord ► grafikart.fr/tchat

[@masterchief9148]

Cette vidéo m'a surtout fait réaliser que je vais reprendre ton cours sur le JS pour perfectionner le JS vanilla avant de faire un vrai choix de framework ahah

[@zaelyndra744]

Pour ensuite partir ensuite partir sur du ts :). Le ts n'est rien d'autre que du js fortement typé. Cela évite énormément de bug

[@ZitoxLD]

Pour ceux qui ont les bases de JS et qui souhaitent se familiariser avec les concepts des librairies/frameworks front-end (états, composants etc.) je vous conseille Svelte. Non seulement c'est celle qui a la syntaxe la plus simple, mais surtout la partie learn/tutorial sur leur site est extrêmement bien faite que ça en devient addictif. Ensuite une fois les concepts de base acquis c'est relativement facile de passer d'une librairie à une autre comme dit dans la vidéo

[@MrJohAA]

Syntaxe simple avec des $ et des # ?? On se croirait revenu sur du Jquery couplé à du twig php. Quant aux bind:this et autre on:something Vue3 propose des choses bien plus intéressantes pour un code quasi équivalent. C'est un réel gap par rapport à la version 2. Je ne doute pas que Svelte soit un bon framework en revanche on va être honnête React tient les reines et si c'est pour le travail je conseille largement de partir sur du React surtout si on est familier avec le JS natif. Vue offre une syntaxe bien meilleure que React et il y a un réel marché qui se met en place. Svelte en revanche est plus récent et n'est clairement pas installé sur le marché de l'emploi.

[@happycreeper6923]

encore une fois le meilleur pour parler d'un sujet c'est graphikart.

[@Kabodanki]

Pour les plus jeunes, ne vous ruez pas sur une librairie, essayez de maîtriser les fondamentaux avant. Plus tard sa vous permettra de passer d’une lib frontend a l’autre plus facilement.

[@grafikart]

Complètement d'accord, ça permet aussi de mieux comprendre les problèmes que résolvent ces librairies et de savoir quand les utiliser (ou non)

[@arnaques-tuto-informatique]

Salut, oui et les fondamentaux ne changent pas trop comparées aux librairies et c bien de savoir ce qui se passe en arriere plan ^^

[@codeavecwinner]

Moi j'ai 14 ans et je me débrouille en HTML,CSS,JavaScript, sass, et bootstrap. Tu me conseilles d'aller vers une librairie ou d'apprendre directement un langage backend comme php?

[@Sundead55]

​@@codeavecwinner Avant d'acheter une caisse à outils complète, on apprend à bricoler. L'utilisation de Framework PHP comme Symfony demande de connaître le PHP. Donc personnellement je recommande toujours de commencer par apprendre le language de base avant d'utiliser des boîtes à outils...

[@zxenon_]

​@@grafikartAbsolument. Le problème, qd on ne maîtrise pas Js et certains concepts plus poussés, on pense que les frameworks et libs font de la magie. Et on ne sait plus différencier ce qui est natif au Js et l'apport du framework.

[@worksfatherwemagic3152]

Merci encore pour cette vidéo. On le dit toujours, mais on ne manque jamais de tomber sur ces développeurs "experts expérimentés qui ont déjà tout essayé et qui savent tout" qui te font un speech de 2 jours pour te prouver que c'est qu'ils utilisent qui est le meilleur. Il n'y a pas de meilleurs frameworks. Il y a que des approches différentes qui pourront être préférables seulement en fonction des besoins

[@peterahlaoui]

Merci à vous Monsieur pour tout le contenu que vous nous offrez généreusement. Vous êtes archi pédagogue, vos cours sont faciles à suivre c'est un réel plaisir

[@pintokatendejonathan1740]

Un plaisir de vous revoir

[@mathisrx]

Merci, tres bonne video pour comprendre l'interet d'utiliser ou non ces technologies. On ne prend pas le temps de nous l'expliquer pendant les etudes, c'est juste "Faites ce projet avec ces technos, et point bonus si vous utilisez React, a rendre avant la fin du week-end"

[@kyredormangara4298]

Merci beaucoup pour cette vidéo. Je suis encore un peu largué sur le dev de mon site pour afficher des datas. Mais je puise beaucoup dans tes vidéos pour essayer de trouver une bonne méthode qui me plaise et qui soit adaptée au projet.

[@augustin_]

Oh super vidéo! Merci

[@serychristianrenaud]

Thank 🎉

[@maloukemallouke9735]

j'aime bien tes vidéos, un grand merci Bonhomme. (j'ai passé une année + le travaille a apprendre javascript au final il faut qu'j apprend React aussi ou angular ca ne s'arrete jamais)

[@HyperText23]

Merci pour la vidéo

[@sebastienpinpin9763]

Excellente vidéo. Ça change des vidéos YT qui prônent tel ou tel framework sans même réfléchir au pourquoi.

[@Creativeetea]

"Quel est le meilleur framework en 2023 ?"

[@TikhAll]

J'adore ce cours

[@jamvideos7417]

Bravo 👏👌

[@excellenztechnique7002]

Merci Jonathan

[@IllusionIRL]

Une vidéo que je trouve vraiment pertinente dans la guerre de l'eco système front end. Souvent, on néglige la complexité que cela peu apporter alors que des solutions comme les web components existe ou de petite librairie de states comme Alpinejs.

[@svek_heldward]

La barbe de giga chad 👌. Très bonne vidéo

[@NiamorH]

Top merci! Il me semble que le terme 'bibliothèque' serait plus adéquat par contre, 'librairie' étant un faux-ami bien connu anglais/français.

[@bastienetienne778]

Vraiment propre est simple comme explication par contre ils manquent vraiment celui qui casse un peux le code Qwik js avec la resumabilitty sa pourrait être top si tu pouvais tester

[@zaelyndra744]

Perso j'ai approfondie énormément Angular et Vue. Je les aimes tout les 2 deux. Angular m'a énormément aidé pour mes projets en vue. C'est moins libre et les concepts sont moins abstraits. Il te force à bien penser ton code. Mais tout c'est framework ont un intérêt sérieusement !!! Moi en tout cas ils m'ont tous apporter quelques choses !!! Mes langues préférés C# et ts. Rust en ferait sûrement partie. Un peu exploré et c'est le feu. PHP j'aime pas mais pour des raisons objectifs et non subjectifs. Mais je comprends son utilité

[@Mister_FELEMOU]

Merci beaucoup pour l'information. C'est très important. Mais j'ai une requête est-ce que vous pouvez nous aider à avoir une vidéo sur code igniter la toute dernière version ?

[@blackdevfullstack0000]

Grafikart pourrais-tu nous faire un tuto sur le serveless ?

[@polaris1900]

Alors dans le cadre de Angular sur les signaux t'es un peu en avance c'est du Developper Preview pour l'instant et c'est pas du tout une obligation même plus tard de les utiliser, globalement le double data binding va servir encore longtemps. Le signal ça sera surtout pour remplacer plutôt des observables dans certaines situations

[@julienr8114]

Pour moi c'est surtout pour simplifier le travail du change detection qui est vraiment pas opti sur Angular😉

[@thoniorandriamialisona3933]

pour ma part, depuis 4ans, j'utilise juste ce que la boite propose et en 4ans on en a propose les 3 (Vue, Reqct, Angular)

[@gungun974]

Un point non mentionné dans la vidéo mais ne réfléchissez pas en terme de « performance » pour comparer ou choisir une bibliothèque frontend. La performance est une mesure très vague et subjective et ne reflète en rien si la bibliothèque vous convient ou non. Réfléchissez surtout comme dit dans la vidéo par goût personnel et offre d’emploi et ne vous sentez jamais bloqué / pris prisonnier par une bibliothèque. Et pour ce qui sont vraiment têtu a vouloir chercher le truc le plus rapide et performant. N’oubliez pas que la différence entre ces framework est surtout une histoire de cas d’utilisation, de taille de projet et d’optimisation et que chaque chose a le droits d’exister de ça façon comme encore une fois dite dans cette vidéo.

[@lmz-dev]

C'est peut-être grâce à ceux que tu penses être "têtus" qu'on sauvera la planète. La performance n'a rien de vague ou de subjectif, elle se mesure... en kWh ;p

[@gungun974]

@@lmz-dev ah mais c’est pas c’est personne la que je parler ^^ Les personnes que tu décrire pour moi sont déjà des gens qui s’y connaissent très bien dans le rapport entre la machine et le programme qu’ils savent très bien que ce n’est pas dans le JavaScript que l’économie d’électricité ce ferra mais dans le gros bousin C++ qui est V8 qui lui faire une grosse différence sur la surcharge de la RAM et l’utilisation du CPU. Le JavaScript qu’il exécute n’est rien en terme d’électricité comparé un runner lui même. Après je dirai que c’est compliqué de mesurer la consommation électrique d’un programme en c/c++ et donc par extension JavaScript car tellement de paramètres peuvent se jouer avec le matériel et l’OS.

[@lmz-dev]

@@gungun974 Pourquoi utiliser une librairie *front-end.* En dehors des performances des différents moteurs JavaScript. Si tu n’utilises pas js en front, la consommation d'énergie relative à ta librairie est nulle, puisque que pas besoin de librairie. Si tu charges jQuery. En dehors du fichier qui finira normalement dans le cache, il faudra 15 ms à l'interpréteur pour traiter le script, ceci pour chaque page. 15 ms * des milliards de pages Web, ça se mesure en kWh. Et s'il faut 3 ms pour une autre librairie qui fera la même chose, bah ça consommera ~5 fois moins... Après il y a ce qu'on en fait. Si on va sur le site de React par exemple, ça charge près de 2 MB de js dès la 1ère page. On se demande bien pourquoi, et heureusement que c'est gZippé ^^ Et pour bien faire, lorsque tu passes la souris sur des liens, ça va chercher le contenu des pages en xhr ... autant de requêtes pour rien. Si l'espèce humaine disparait un jour, les développeurs front-end seront tous coupables ! 😃

[@gungun974]

@@lmz-dev après le problème là c’est pas les bibliothèques que tu décris mais la quantité d’ordinateurs qui a bien augmenté ces dernières années plus la consommation moyenne de ces ordinateur. Après il est très compliqué là de faire ce genre d’économie d’électricité sur cette échelle car ok peut-être avec un bon vieux serveur PHP comme on sais toujours le faire je concentre la consommation électrique. Il me faudrait comme tu la dit des milliards de personnes sur mon site pour faire une différence hors ça m’étonnerais que la plus part des projets qu’on retrouve sur Internet dépasse les 100k d’utilisateurs par mois.

[@lmz-dev]

@@gungun974 Je ne sais plus quoi dire :(

[@frogfox9577]

Tu as plus d’info sur l’idée de faire du montage vidéo avec le Virtual DOM ?

[@grafikart]

Oui tu as www.remotion.dev/ qui permet de générer de la vidéo avec React

[@user-cj5dn8yh3z]

Bonne pedagogie

[@LeMystere]

Pour alourdir son application ? c'est bien ça la réponse ? Et pour la choisir, il suffit de la développer pour multi-usage !

[@cbalmefrezol]

Bravo pour cette belle neutralité ! Toutes ces librairies se valent et sont cousines.

[@Fuck__Russia]

Je fais partie de ceux qui se font des nœuds au cerveau avec ces frameworks JS... J'ai mis le doigt dans l'angrenage du JavaScript, et bien que le JavaScript vanilla est simple, quand on veut avancer, on doit apprendre un nouveau framework, puis un autre, puis un autre, on mélange tout, c'est vraiment le bazar...On ne sait pas se décider. Mêmes difficultés en back-end (Node, Express, EJS...) qu'en front-end (React, Svelte, Vue...). Il y a d'autres écosystèmes beaucoup plus simples, même si le langage est parfois plus rigoureux que le JavaScript.

[@brunometronome1189]

Ce n'est pas le fait d'apprendre le plus de frameworks possibles qui te fera avancer. Par ailleurs, si tu mélanges tout, c'est très probablement que tu n'as pas pratiqué suffisamment de cas concrets dans des projets rééls avec les briques logicielles que tu as choisis d'appréhender sur une période donnée.

[@user-wt9hx2sr7i]

bonsoir grafikart esque on peu ce parlais en privé

[@khaledsanny4817]

c'est quel IDE ?

[@Fuck__Russia]

Ça semble être WebStorm de JetBrains (mêmes barres de navigation, police de caractères et icônes).

[@VincentEkdev]

je me rend compte que pour débuter react faut avoir de SACRE fondation en vanilla, le code que tu a mis pour ton systeme d'incrementation qui est "simple" j'ai strictement RIEN comrpis au code... alors que je pratique JS vanilla sur un petit projet perso... c'est relativement frustrant

[@tropikalGG]

Ceux qui veulent finir au chômage ou difficilement bankable, je vous conseille svelte mais au moins vous vous serez amusé

[@Tamarabzh]

Il commence à avoir du boulot sur svelte !

[@yanntrad2304]

Je n'aime pas trop utiliser des librairies car demain une librairie peut ne plus être maintenue ou avoir son server down (et plus on utilise de librairies plus statistiquement ça risque d'arriver)...

[@julienr8114]

Vous êtes dans un cadre professionnel ? Par ce que sinon ce n'est vraiment pas une bonne pratique.

[@yanntrad2304]

@@julienr8114 oui je suis professiionnel. Mais je parle pour des projets perso. Caf pour les clients les librairies ce n'est pas grave car faut aller vite et puis s'il y a un probleme ça fait encore du taff pour nous.

[@jc13OM]

Etant partit sur VUe, j'ai switché sur React car : - J'aime le concept de la librairie. - C'est celle qui possède largement le plus de ressources. - NextJS.

[@MrNiuxe]

4:28 : la valeur d'un signaux 😂 je pense que tu n'es pas bien réveillé 9:25 : attention. Une des choses que j'ai remarquées : beaucoup considèrent Svelte comme un petit jouet parce qu'ils ont effleuré le sujet. Or je peux t'assurer que c'est un compilateur qui n'a rien à envier à React/Angular/VueJS. L'année dernière, j'ai coréalisé un énorme projet en Svelte. L'idée de choisir Svelte était avant tout la performance et la simplicité (là où react/Vue/Angular échouent si on recherche absolument ce genre de concept)

[@Fuck__Russia]

D'où le nom ! (Svelte) 😊

[@joelkubanza7345]

Je suis totalement d'accord avec @MrNiuxe. Simple, performant et pratique. Comme c'est bien expliqué dans la vidéo, l'approche est un point important dans ce genre de choix 👍

[@jonathanzadi9571]

on peut construire des classes en javascript? pfff je doit tout reprendre de zero

[@julienr8114]

Oui mais c'est rarement utile.

[@bravados]

Je trouve que les zooms et les mouvements de "caméra" dans tes récentes videos rendent le code moins lisible et la video est moins agréable a regarder. C'est vraiment un ajout inutile

[@grafikart]

Merci pour le retour je vais faire attention à ça pour les prochaines.

[@alfredkouadiokouadio8913]

​@@grafikartcontent de vous revoir Jonathan, depuis un bon moment je ne fais que surfer sur votre porte folio tellement c'est bien conçu... Svp je souhaiterais avoir des sites sur lesquels je peux m'entraîner en Js :histoire de bien asseoir mes compétences Merci pour tout

[@alexmge9182]

Svelte > ALL

[@midnightforseth]

c'est situationnel

[@Creativeetea]

JQuery > Svelte

[@alexmge9182]

Mdr, l'horreur. JQuery n'a plus aucune utilité en 2023, en 2005 pourquoi pas. Mais JS de 2023 est uniformisé et permet de tout faire simplement @@Creativeetea

[@TheEric8866]

En français on dit une "bibliothèque", non pas une librairie

[@saucisse_dev]

En français Librairie est un synonyme de Bibliothèque. D'où le fait qu'on va acheter un livre chez le libraire.

[@TheEric8866]

@@saucisse_dev Non, en français ces 2 mots ne sont pas des synonymes. Une "librairie" est un commerce où l'on vend des livres. Une "bibliothèque" est un lieu où l'on peut emprunter ou consulter des livres ou d'autres documents.

[@MMKante]

Dans toute la vidéo c'est la seule chose que t'as retenu ? 😅

[@Fuck__Russia]

@@MMKante Nan, mais c'est bon de le préciser 😉

[@midnightforseth]

team angular are u there ?