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

Поділитися
Вставка
  • Опубліковано 24 січ 2025

КОМЕНТАРІ • 106

  • @guillaumesoulie8365
    @guillaumesoulie8365 10 місяців тому +25

    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
      @antoinemisplon5833 10 місяців тому +2

      Complètement d’accord !

    • @melvynxdev
      @melvynxdev  10 місяців тому +1

      J'ai suivis la doc

    • @sebpjee
      @sebpjee 10 місяців тому

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

    • @sebpjee
      @sebpjee 10 місяців тому

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

    • @eveeengineering
      @eveeengineering 10 місяців тому +2

      Angular 17+ c est le top

  • @sebpjee
    @sebpjee 10 місяців тому +1

    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.

  • @BertrandZuchuat
    @BertrandZuchuat 10 місяців тому +8

    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
      @melvynxdev  10 місяців тому

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

  • @mwlulud2995
    @mwlulud2995 9 місяців тому +2

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

  • @code-cake
    @code-cake 10 місяців тому +15

    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
      @guiomoff2438 10 місяців тому +3

      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
      @melvynxdev  10 місяців тому +1

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

    • @tfgg1490
      @tfgg1490 10 місяців тому +1

      ​​@@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
      @guiomoff2438 10 місяців тому +4

      @@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
      @tfgg1490 9 місяців тому

      @@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

  • @NicolasB-wm6mf
    @NicolasB-wm6mf 10 місяців тому +5

    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
      @surrion 10 місяців тому

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

    • @melvynxdev
      @melvynxdev  10 місяців тому

      Ahah je comprends ! Tu deverais adorer angular alors.

  • @socrateekpaliguidime1043
    @socrateekpaliguidime1043 8 місяців тому

    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.

  • @Droumix
    @Droumix 10 місяців тому +11

    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
      @antoineleduc7611 10 місяців тому +1

      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
      @melvynxdev  10 місяців тому +1

      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
      @nathn1680 10 місяців тому +1

      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.

  • @robertroger9733
    @robertroger9733 10 місяців тому +4

    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
      @melvynxdev  10 місяців тому

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

  • @nathn1680
    @nathn1680 10 місяців тому

    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
      @melvynxdev  10 місяців тому

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

  • @siyedyoussef3202
    @siyedyoussef3202 10 місяців тому +1

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

    • @melvynxdev
      @melvynxdev  10 місяців тому

      C'est tellement ça !

  • @jeandarius8791
    @jeandarius8791 10 місяців тому +1

    Merci pour le conseil sur l'utilisation de svelte

  • @callmefred
    @callmefred 10 місяців тому +2

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

    • @melvynxdev
      @melvynxdev  10 місяців тому

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

    • @callmefred
      @callmefred 10 місяців тому

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

  • @R.e.n.e
    @R.e.n.e 10 місяців тому +3

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

    • @rigetheo
      @rigetheo 10 місяців тому

      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
      @melvynxdev  10 місяців тому

      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
    @TheBabanito 10 місяців тому +2

    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
      @melvynxdev  10 місяців тому

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

  • @AliceSEBEGO
    @AliceSEBEGO 10 місяців тому

    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
      @melvynxdev  10 місяців тому +1

      Tu as raison, c'est la meilleur option.

  • @fabmartel
    @fabmartel 21 день тому

    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
      @melvynxdev  21 день тому

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

  • @JasonAngel-o1b
    @JasonAngel-o1b 9 місяців тому

    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

  • @AngelSuikoden
    @AngelSuikoden 10 місяців тому

    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
      @melvynxdev  10 місяців тому

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

  • @chambaderaphael8946
    @chambaderaphael8946 10 місяців тому

    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
      @melvynxdev  10 місяців тому

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

  • @diduknowhrs7373
    @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
      @melvynxdev  Місяць тому +1

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

  • @lesagecode
    @lesagecode 10 місяців тому

    Agréable pour toi. Vue est un pure plaisir

  • @mahfoudh_arous
    @mahfoudh_arous 10 місяців тому

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

    • @R.e.n.e
      @R.e.n.e 10 місяців тому +2

      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
      @melvynxdev  10 місяців тому +1

      Effectivement Rene !

  • @mamerihocine4612
    @mamerihocine4612 10 місяців тому

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

  • @lesagecode
    @lesagecode 10 місяців тому

    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
      @melvynxdev  10 місяців тому

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

    • @lesagecode
      @lesagecode 10 місяців тому

      @@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
    @dmarsalone 10 місяців тому

    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 😉

  • @joraz8575
    @joraz8575 10 місяців тому

    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
      @melvynxdev  10 місяців тому

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

  • @tfgg1490
    @tfgg1490 10 місяців тому +2

    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
      @melvynxdev  10 місяців тому +1

      C'est mon résumer aussi

  • @KerByGaming971
    @KerByGaming971 10 місяців тому

    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
      @tfgg1490 10 місяців тому

      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
      @melvynxdev  10 місяців тому

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

  • @raphaelbussiere
    @raphaelbussiere 7 місяців тому

    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
      @melvynxdev  5 місяців тому

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

  • @guillaumesoulie8365
    @guillaumesoulie8365 10 місяців тому +1

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

    • @melvynxdev
      @melvynxdev  10 місяців тому

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

  • @R.e.n.e
    @R.e.n.e 10 місяців тому

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

    • @NsHtxZekoo
      @NsHtxZekoo 10 місяців тому

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

    • @R.e.n.e
      @R.e.n.e 10 місяців тому

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

    • @melvynxdev
      @melvynxdev  10 місяців тому

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

  • @davidfontaine204
    @davidfontaine204 10 місяців тому +2

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

  • @antoineleduc7611
    @antoineleduc7611 10 місяців тому +2

    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
      @melvynxdev  10 місяців тому +1

      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
      @antoineleduc7611 10 місяців тому

      @@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
    @denisjean-bastien1253 10 місяців тому +1

    Team Svelte !

  • @surrion
    @surrion 10 місяців тому +3

    | -> pipe

    • @R.e.n.e
      @R.e.n.e 10 місяців тому

      En français c'est barre verticale ou tube

    • @melvynxdev
      @melvynxdev  10 місяців тому

      exacte

    • @surrion
      @surrion 10 місяців тому +2

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

    • @guiomoff2438
      @guiomoff2438 10 місяців тому

      @@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

  • @nicolasdupere
    @nicolasdupere 10 місяців тому +2

    React forever

  • @fabienlecuyer8107
    @fabienlecuyer8107 10 місяців тому

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

    • @melvynxdev
      @melvynxdev  10 місяців тому

      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
    @nathn1680 10 місяців тому

    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
      @melvynxdev  10 місяців тому

      Ahaha tkt c'est la vie d'artiste

  • @BertrandZuchuat
    @BertrandZuchuat 10 місяців тому +1

    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
      @melvynxdev  10 місяців тому

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