Je fais la même App Avec 4 Framework - Lequel est le mieux en 2024 ?

[@guillaumesoulie8365]

Angular 17+ est tellement gamechanger rien qu'avec les signals, models, nouveau control flow, signal queries. Tu refais ton appli avec ça, tu vas tout de suite voir la différence ;)

[@antoinemisplon5833]

Complètement d’accord !

[@melvynxdev]

J'ai suivis la doc

[@sebpjee]

Idem avec l'apport des signalStore NgRx qui apportent une gestion complète des stores et remplacent NgRX/store et NgRx/data

[@sebpjee]

Idem avec l'apport des signalStore NgRx qui apportent une gestion complète des stores et remplacent NgRX/store et NgRx/data

[@eveeengineering]

Angular 17+ c est le top

[@BertrandZuchuat]

Le *ngFor et *ngIf ont changé avec la version 17 d'Angular. Tu as maintenant @for et @if Et désolé pour le terme Framework, mais à part Angular les autres sont des librairies.

[@melvynxdev]

Vue ce dit aussi "Framework" (leur landing page)

[@code-cake]

C'est dommage de pas avoir utiliser le nouveau control flow syntax pour les if / else en Angular Pour les ngFor / NgIf à importer dans le composant, pas besoin avec les standalones composants et avant ca tu importais CommonModule dans ton composant racine et c'était réglé. Pareil pour les inputs tu as pas utilisé les signaux... Pour l'@Output, tu as l'inférence de type avec typescript ;) pas besoin de répéter EventEmitter

[@guiomoff2438]

Je valide, ça se voit qu'il ne connaît pas super bien Angular. Mais bon, on ne peut pas tout savoir et beaucoup n'appliquent pas encore les dernières update d'Angular, ça se comprend aussi!

[@melvynxdev]

Effectivement, j'ai suivi la documentation officielle active pour créer l'application, je ne peux pas utiliser des trucs non documentés 😂

[@tfgg1490]

​​@@guiomoff2438 ton l'argument ne marche pas car pour svelte aussi il n'a pas pris la nouvelle syntax des runes mais en général les librairies reste les mêmes ici pour sa comparaison et désolé angular c'est très verbeux

[@guiomoff2438]

@@tfgg1490 on dit qu'il existe une syntaxe plus simple, tu interprètes qu'on défend Angular, perso je m'en fous, ça ne me fait ni chaud ni froid d'entendre des gens dire/penser que c'est de la merde, trop ci, trop ça, pas assez ci, pas assez ça! Ici, il est question finalement de regarder et comparer la logique entre ces frameworks et de comparer la syntaxe, c'est tout ce qu'il juge, il ne regarde pas la vitesse d'exécution ou la complexité des algos. En partant de ces critères, on dit simplement qu'on peut faire plus simple syntaxiquement parlant, c'est tout! On ne dit pas qu'Angular, c'est mieux! Et je ne connais pas les autres, je fais plutôt de la data et donc python/R et j'ai appris Angular/C# dans une formation supplémentaire juste pour en savoir plus sur le développement. Bref oui dans la doc, ils utilisent une certaine syntaxe mais bon, rien n'empêche de la simplifier lorsqu'on connaît correctement typescript, les génériques etc. Et entre nous, je ne me ferais pas chier à répondre si ça ne m'intéressait pas au moins un peu et il n'est pas question ici non plus de descendre la personne qui a fait cette vidéo, le commentaire est assez constructif il me semble.

[@tfgg1490]

@@guiomoff2438 bon breff quand même le créateur d'angular quitte le navire pour crée Qwik Js lui même dis que c'est plus optimale et en vrai c'est lent donc juste une information quoi

[@sebpjee]

Belle vidéo avec de beaux exemples. On peut pas montrer toutes les astuces et avantages de tous les framework en une video. Bravo pour le contenu.

[@melvynxdev]

Un grand merci !

[@NicolasB-wm6mf]

Super vidéo. Silple clair et efficace Team Vue par ici je trouve ca plus simple, plus logique et plus "cadré" (ce qui évite les grosses différences d'un codeur à l'autre du fait de ne pas avoir à refaire toutes le logiques js comme en react par exemple) Il y a des choses qui pourraient etre améliorée dans ton code vue mais on peut pas maîtriser toutes les techos c'est deja tres cool de pouvoir comparer 4 technos

[@surrion]

Team vue aussi sans hésiter pour avoir fait de l'Angular un moment. j'ai trouvé vue beaucoup plus simple est "beau'

[@melvynxdev]

Ahah je comprends ! Tu deverais adorer angular alors.

[@socrateekpaliguidime1043]

Superbe vidéo. Pour angular,en ce qui concerne l'import des directives ngfor,ngif ... Tu peux directement importer angular-common et tu as accès à toute les directives de base.

[@melvynxdev]

effectivement merci

[@Droumix]

Je viens ici défendre angular sans cracher sur les autres framework que je ne connais pas de manière pro. Voici quelques points: - t'as critique sur l'import du ngFor se résout en une seconde avec un ide, dommage de ne pas avoir utiliser angular 17 qui a une syntaxe beaucoup plus sexy pour ça. - une todo app est malheureusement une application trop simple pour une framework comme Angular (utiliser un bazooka pour tuer une mouche), je te défi de refaire cette vidéo sur un formulaire complexe avec des form arrays, des champs du formulaire calculés et d'autres affichés selon d'autres champs, la gestion des erreurs etc, tu verras ici la puissance des reactives forms d'angular :) - à partir de angular 16 si je ne me trompe pas, il y a aussi la puissance des signaux à considérer (que ce soit pour la gestion d'un store par exemple) - vraiment pas une bonne practice de push dans une array en angular => tu ne modifies pas la référence, il faut plutot faire comme avec svelte et muter pour qu'il détecte le changement et update proprement la vue (utile quand on est en OnPush pour optimiser les performances) - je n'ai jamais prevent default sur un formulaire angular donc je pense que c'est inutile mais à vérifier Pour moi la qualité première d'angular c'est la gestion de form très complexe et réactifs aux events, c'est d'ailleurs ce qui m'empêche de partir sur d'autres lib / framework car c'est souvent un sujet peu évoqué. Sinon vidéo tout de même intéressante pour comparer

[@antoineleduc7611]

Après avoir lutter 1 journée pour avoir un component input type=file contrôlé en React je confirme si c’est ton point principale change pas pour React en tout cas, faisable mais pas fait pour D’ailleurs je suis pas sûr que y ai le concept d’input contrôle en angular

[@melvynxdev]

Hello, effectivement je suis pas un angulareux et j'ai suivi la doc actuel (qui ne semble pas forcément à jour car la majorité des exemples n'utilies pas les signaux) Sinon, même si je veux bien te croire, React, Svelte ou VueJS gères aussi très bine les grosse application !

[@nathn1680]

Sympa ton commentaire bien documenté. J'y connais rien (touriste de passage) mais c'est vrai que souvent un langage sert un but et donc a des forces et faiblesses par rapport à d'autres utilités.

[@mwlulud2995]

Mec tes vidéos sont incroyable et tes schéma tellement bien fait frérot tu gère 😉

[@melvynxdev]

merci beaucoup

[@robertroger9733]

Pour Vue tu aurais pu directement faire le v-if sur l'input et le v-else sur le span. Sinon bonne vidéo, ça permet ainsi de se décider, ayant travaillé avec React puis après Vue, j'ai toujours trouvé Vue plus logique/accessible que React (avec les conditions ternaires et le fait de devoir tout faire soi-même).

[@melvynxdev]

Oui effectivement, y'a pleins de moyen de faire la même chose :o

[@siyedyoussef3202]

ca fait toujours plaisir de voir la simplicité de svelte 🎯

[@melvynxdev]

C'est tellement ça !

[@jeandarius8791]

Merci pour le conseil sur l'utilisation de svelte

[@melvynxdev]

Merci !

[@JasonAngel-o1b]

S'il te plaît! C'est vous qui expliquez le code et qui me le rend clairement. Mais s'il vous plaît, pouvez-vous faire un tutoriel sur la react hook form et zod ? Je veux dire, comment mettre les données d'un formulaire fait avec zod react hook form ou d'un blog par exemple dans une base de données avec prisma. stpp

[@melvynxdev]

bonne idée !

[@nathn1680]

C'est super bien présenté et chacun peut se faire une idée même sans tes préférences et c'est ce qu'il faut. Tu précises tout le temps que tu es partial, c'est très bien. Les râleurs ben ils râlent lol😅

[@melvynxdev]

ahah oui c'est comme un journalisme, impossible de ne pas avoir d'avis

[@AngelSuikoden]

Comment fait-on une propriété calculée sur les différents framework ? Et comment passer de l'html custom genre colonne speciale de datatable ?

[@melvynxdev]

Dans tous les framework, c'est comme passé une variable et donc utilisé les {} généralement

[@diduknowhrs7373]

Je trouve tous les framesworks intéressants ,mais je dois en choisir un (=> j'étais de base team Svelte(React)) J'ai un projet simple et peu de temps, et je dois choisir un frameworks pour le front (avec du Spring Boot en Back): Y a t il des utilisateurs de React ou Svelte qui voudrait partager leur avis avec moi ? Merci d'avance ^^

[@melvynxdev]

Hello, viens en parler sur mon discord communautaire ! mlv.sh/discord

[@R.e.n.e]

Je pense pour que les if en vuejs ta pas besoin de template

[@rigetheo]

Oui les templates içi ne servent à rien les directive 'v-if' et 'v-else' peuvent directement être implémenté sur le input et le span. Aussi Vue 3 à des shorthands pour passer :todo="todo" à :todo. Enfin les évents emitter peuvent être appelés directement dans le template nottament pour la method delete.

[@melvynxdev]

Effectivement, après dans la documentation il y avait des exemples avec la template et des codes que j'ai trouvé ils mettaient ceci en avant :o

[@TheBabanito]

Bonne vidéo, par contre les template pour les rendus conditionnels en vue ne servent à rien et tu peux définir les types de tes props directement dans defineprops

[@melvynxdev]

J'ai pas dit que ça servait à rien mais que c'est moins intuitif que svelte

[@callmefred]

Un peu "hors sujet" mais ça aurait été intéressant de comparer cela à du vanilla JS.

[@melvynxdev]

Oui après ça aurait été une si grande différence que ça aurait été un peu compliqué

[@callmefred]

@@melvynxdev de fait, perso je code tout en vanilla JS. Call me Old School ;)

[@fabmartel]

Ha bienn, enfin une comparaison très clair. Merci Cela fait maintenant +- 10 ans que je ne fais plus de front end car je fut trop dégouté, j'ai toujours gardé un oeil sur les évolutions (mais de loin) préfèrent faire de l'esb. Je suis dégouté de voir du code Angular (quelque soit ça version), j'ai pas trop regardé Vue. Par contre React me parait assez sympa. Svelte, mmhh je me méfie des framework trop jeune (sur sa capaciter a tenir la route sur du long terme) maintenant , le summum serait de voir sur ces quatre frameworks le côté performance, et taille mémoire utilisée. Si tu fais une vidéo sur ça je suis chaud. Merci en tout cas.

[@melvynxdev]

Merci beaucoup ! Je comprends, faut se méfier de svelte

[@mamerihocine4612]

J'aime bien votre logiciel prise de note . C'est lequel svp ?

[@ultrv_lmf]

C'est excalidraw

[@melvynxdev]

exacte

[@AliceSEBEGO]

Recap' et comparatif très instructifs et intéressants : ici je suis à la fois dans toutes les teams, tout en étant dans aucune ; je préfère choisir une solution techno en fonction du besoin de la demande client et utilisateur en avant tout ; bref merci pour ce très bon partage

[@melvynxdev]

Tu as raison, c'est la meilleur option.

[@joraz8575]

Tu n'as pas tester le SLOT qui permet d'integrer un compsant. Vuejs est plutot bon car on peut ajouter plusieurs slot dans un composant

[@melvynxdev]

Ça c'est vrai que je l'ai oublié et c'est vachement con.

[@lesagecode]

Tu as déjà un parti pris sinon en vue les directives sont comme des attributs donc du simple html. Facile intuitif et performant.

[@melvynxdev]

Oui je trouve ça overcomplicated quand tu compares aux syntaxes simple de Slvete

[@lesagecode]

@@melvynxdev c'est du a la façon dont tu as utilisé. Si tu faisais abstraction des templates qui n'ont servi a rien le code serait plus concis

[@dmarsalone]

Sur vue le state peut être géré avec une seule prop réactive et basta. Tu fais du vue avec une méthodologie react, du coup tu passes à côté des trucs qui rendent vue attractif 😉

[@melvynxdev]

Exemple ?

[@chambaderaphael8946]

Vidéo tres intéressante, merci. On sent que tu es un peu frais sur les trois premières technos, mais globalement le comparatif est pertinent. Team vue/svelte pour ma part🎉

[@melvynxdev]

J'ai commencé par Vue, Puis React, Puis Angular, juste Svelte en loisir

[@lesagecode]

Agréable pour toi. Vue est un pure plaisir

[@melvynxdev]

xd

[@raphaelbussiere]

team Angular ici (disclaimer) la dernière version que j'ai touché c'etait la 14, donc rien de futuriste; - de mémoire je n'ai jamais eu besoin d'importer ngFor et ngIf, mais comme dit dans un autre commentaire, on importe toujours le "common", donc c'est transparent. - en angular on a tendance a dire qu'il est "interdit" de modifier le parent depuis l'enfant; on descend les variable/valeur, et on remonte avec des event/callback. d'où le fait que la syntax soit moche quand tu vas a contre courant. L'astuce réside dans le fait que la variable est envoyé par le parent à l'enfant, et donc le parent et tout ces enfants sont synchronisé sur la valeur. en gros, l'enfant modifie le contenu de la liste et donc le parent a immédiatement la nouvelle valeur et les autres enfants directement aussi. pas besoin de eventEmitter pour faire remonter la nouvelle valeur. (bien sûr l'astuce ne fonctionne seulement si tu ne "tue" pas la ref, donc il faut mutate la liste plutout que de faire array =[...array]) - dernier point, rien de grave, mais il existe aussi un "else" avec le ngIf, pas besoin de faire ngIf="A" + ngIf="!A" force est de constaté que le binding automatique et le [(ngModel)] est beaucoup plus appréciable que useState() ! Je t'accorde cependant le point pour l'import de Form, moi aussi je trouve que c'est une hérésie XD En tout cas, je ne connaissait pas Svelte, j'aime bien sa simplicité ! :D Je découvre React et je suis encore en train de me battre avec les re-render sauvage et les useEffect qui me font des re-rendu boucle infini 😢

[@melvynxdev]

Intéressant d'avoir ton avis ! Tu viendras déposer un nouveau après un petit moment avec React !

[@tfgg1490]

Moi même qui utilise svelte et Sveltekit ces commentaires son un peu logique et objectif Angular est verbeux,vue js c'est un bon, la syntax est moin verbeux mes verbeux quand même,svelte bonne syntaxe a cause du compilateur qui s'occupe du reste et react c'est react quoi le boss bonne syntaxe même si qui ce rapproche le plus du vania même si je préfère svelte donc c'est ca!

[@melvynxdev]

C'est mon résumer aussi

[@mahfoudh_arous]

👏👏👏j'aurais aimer voir aussi "Astro" dans cette collection

[@R.e.n.e]

Astro n'est pas un framework d'ui javascript. Avec Astro il n'y a pas de state. Astro justement ce combine avec les framework présente dans la vidéo .

[@melvynxdev]

Effectivement Rene !

[@KerByGaming971]

Angular c'est Lourd mais je trouve que pour les dev qui code aussi cotée backend il à l'air plus naturel à prendre en main - React les renders et les hooks sa déstabilise, - svelte du mal à le concevoir dans un gros projet, - Vuejs pas tester mais à l'air pas mal

[@tfgg1490]

Je suis pas d'accord en tant qu'utilisateur de svelte pour aussi un gros SaaS svelte est léger car c'est le compilateur qui s'occupe du code l'ours au contraire svelte est utilisé par pocketbase ou Google donc oui ça peut

[@melvynxdev]

Oui c'est vrai que Angular a toutes ses règles qui le rendent sympa quand tu aimes les règles (pas comme moi)

[@R.e.n.e]

Pour Angular je pense que dans le futur les signaux devront être utilisés pour le state

[@NsHtxZekoo]

C’est pour se débarrasser de zone-js non ?

[@R.e.n.e]

@@NsHtxZekoo oui dans futur (ça reste des prédictions)

[@melvynxdev]

Oui mais pour l'instant les signaux semble être mal documenté

[@guillaumesoulie8365]

Ah mais ok tu as du chatGPT sur la génération du code aussi :D forcément ce n'est pas opti

[@melvynxdev]

Si je le faisais moi-même ça aurait été encore pire 😂

[@davidfontaine204]

Salut je dirait team2 mais react en 1 et svelte en 2

[@melvynxdev]

Top 2 Svelte

[@antoineleduc7611]

Vue est plus explicite que React, et le fait d’avoir tout en natif js c’est pas + sexy ni une force (de mon pdv, avec les technos actuel ou quoi qu’il arrive on transpile en js et ensuite en vieux js, autant avoir son propre framework avec compilateur) (Ça vient d’un dev qui fais les deux et j’ai plus vraiment de préférence ou de biais) Le fait d’avoir le jsx qui nous fait passer en js avec {} puis les map ou les if/&&/?? sur plusieurs ligne ou fait () et des fois {}, c’est pas toujours clean Le manque de moyen de bien de bind bidirectionnel c’est pas clean, les comparaisons React avec Object.is donc en tant que dev c’est le framework ou on doit le + penser au référence re render etc etc, c’est « compliqué » (pas tant que ça mais ça pourrait ne pas l’être du tout) Par contre très agréable de pouvoir « réfléchir en js » genre juste map une liste sur des éléments du dom, j’enlève pas ça à React Mais la comparaison et le « duel » des deux fait pâle figure et semble inutile des qu’on voit la syntaxe svelte, si j’étais seulement développeur hobby et pas pro je m’amuserai pas mal avec svelte je pense

[@melvynxdev]

React (comme Svelte ou même Angular) est un framework qui part du principe que les states sont immuables, ce qui n'est pas "trop compliqué" non plus même si cela augmente la courbe d'apprentissage, nous sommes d'accord. Svelte est pour moi le mélange parfait entre les points positifs de VueJS et de React, that my point.

[@antoineleduc7611]

@@melvynxdev D’expérience les bugs react peuvent être plus vicieux a débug Ça me demande de savoir + en tout cas Yes je suis totalement d’accord

[@denisjean-bastien1253]

Team Svelte !

[@melvynxdev]

Yeah

[@nicolasdupere]

React forever

[@melvynxdev]

xD

[@fabienlecuyer8107]

Angular pour les gros projets y'a pas mieux je trouve

[@melvynxdev]

Ouais, je suis pas convaincu. Y'a moins d'exemples en ligne, y'a moins de boilerplate, y'a moins de code, y'a moins de librairie...

[@nathn1680]

Sont pas tendres sur les commentaires les développeurs lol Pas étonnant.. Peut-être qu'un challenge entre spécialiste aurait été drôle 😂😂😂 Tu leur demande de coder une maquette que t'as faite et hop on compare.

[@melvynxdev]

Ahaha tkt c'est la vie d'artiste

[@surrion]

| -> pipe

[@R.e.n.e]

En français c'est barre verticale ou tube

[@melvynxdev]

exacte

[@surrion]

non c'est pipe aussi@@R.e.n.e t'es du genre à dire tiret du 6 toi non ?

[@guiomoff2438]

@@surrion en plus, pour générer un pipe personnalisé en ligne de commande, on écrit: ng g p nomDuPipe et le p de la commande vient de pipe et peut être remplacé par pipe

[@BertrandZuchuat]

Ton discours n'est pas vraiment objectif, car tu as déjà un parti pris pour React. On le sent très bien dans ton discours. Dommage

[@melvynxdev]

C'est impossible d'être objectif, comme un journalise.