{"id":6417,"date":"2021-03-02T14:25:55","date_gmt":"2021-03-02T13:25:55","guid":{"rendered":"https:\/\/www.luklagroup.com\/sem-categoria\/angular-react-et-vue-quel-framework-spa-choisir\/"},"modified":"2026-11-04T16:49:27","modified_gmt":"2026-11-04T15:49:27","slug":"angular-react-et-vue-quel-framework-spa-choisir","status":"publish","type":"post","link":"https:\/\/www.luklagroup.com\/pt-pt\/apps-data-pt-pt\/angular-react-et-vue-quel-framework-spa-choisir\/","title":{"rendered":"Angular, React et Vue : quel framework SPA choisir ?"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\"><em><strong>Cet article pr\u00e9sente un comparatif des principaux frameworks Single Page Application afin de d\u00e9terminer le plus efficient dans votre contexte. <\/strong><\/em><br><br><em><strong>Dans un second article, nous pr\u00e9senterons nos recommandations et les erreurs \u00e0 \u00e9viter dans la mise en place d&#8217;un front en SPA (SEO, compatibilit\u00e9 avec les navigateurs plus anciens, l&#8217;accessibilit\u00e9, le responsive&#8230;).<\/strong><\/em><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><em><strong>Enfin dans un dernier article, nous d\u00e9taillerons l&#8217;approche d&#8217;int\u00e9gration de ces frameworks pour mettre en place un site Drupal headless.<\/strong><\/em><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Qu\u2019est-ce qu\u2019une SPA&nbsp;?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Une SPA (pour Single Page Application) est une application monopage <\/strong>qui ex\u00e9cute principalement l&#8217;interface utilisateur dans le navigateur et qui communique avec le serveur via des services web.     <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Les avantages d&#8217;une SPA par rapport \u00e0 une application web standard sont :<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>de fluidifier l&#8217;exp\u00e9rience utilisateur en \u00e9vitant de charger une nouvelle page \u00e0 chaque action de l&#8217;utilisateur ;<\/li><li>de permettre de s&#8217;ex\u00e9cuter localement sur le navigateur de l&#8217;utilisateur.<\/li><\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Les frameworks servant de base \u00e0 une application SPA sont g\u00e9n\u00e9ralement d\u00e9velopp\u00e9s avec les technologies web classiques : HTML5, CSS3, Javascript ou Typescript.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Pr\u00e9sentation de Angular, React et Vue <\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Angular, React et Vue sont les trois frameworks SPA actuellement les plus utilis\u00e9s au monde. Ils sont open-source.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/digiwin.fr\/wp-content\/uploads\/2021\/03\/ARV-Pres.png\" alt=\"\" class=\"wp-image-2992\"\/><figcaption><strong>Carte d&#8217;identit\u00e9 synth\u00e9tique des frameworks Angular, React et Vue<\/strong><\/figcaption><\/figure>\n\n\n\n<h5 class=\"wp-block-heading\"><strong>Angular<\/strong><\/h5>\n\n\n\n<p class=\"wp-block-paragraph\">Angular (ou Angular 2+) date de 2014. Il a \u00e9t\u00e9 d\u00e9velopp\u00e9 par Google et est une r\u00e9\u00e9criture compl\u00e8te en Typescript du framework AngularJS dont la premi\u00e8re version date de 2010.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Angular propose une approche modulaire orient\u00e9e composant bas\u00e9e sur un mod\u00e8le <a href=\"https:\/\/fr.wikipedia.org\/wiki\/Mod%C3%A8le-vue-vue_mod%C3%A8le\" target=\"_blank\" rel=\"noreferrer noopener\">MVVM <\/a>(Model\u2013view\u2013viewmodel).<\/p>\n\n\n\n<h5 class=\"wp-block-heading\"><strong>React<\/strong><\/h5>\n\n\n\n<p class=\"wp-block-paragraph\">React (ou ReactJS) date de 2013 et a \u00e9t\u00e9 d\u00e9velopp\u00e9e en Javascript par Facebook.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">React est comme Angular orient\u00e9 composant mais s&#8217;apparente plus \u00e0 une biblioth\u00e8que qu&#8217;\u00e0 un framework et n&#8217;adresse que la vue du <a href=\"https:\/\/fr.wikipedia.org\/wiki\/Mod%C3%A8le-vue-vue_mod%C3%A8le\" target=\"_blank\" rel=\"noreferrer noopener\">MVVM <\/a>(Model\u2013view\u2013viewmodel)<\/p>\n\n\n\n<h5 class=\"wp-block-heading\"><strong>Vue<\/strong><\/h5>\n\n\n\n<p class=\"wp-block-paragraph\">Vue (ou Vue.js) date de 2014 et a \u00e9t\u00e9 d\u00e9velopp\u00e9e en Javascript par Evan You un ancien ing\u00e9nieur de Google. Contrairement \u00e0 Angular et React qui sont port\u00e9s respectivement par des entreprises, Vue est ind\u00e9pendant et pilot\u00e9 par la communaut\u00e9.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Comme React, Vue propose une approche modulaire de type biblioth\u00e8que orient\u00e9e composant.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Popularit\u00e9<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Selon les statistiques Github, on peut noter que React et Vue semblent actuellement plus populaires qu\u2019Angular aupr\u00e8s des d\u00e9veloppeurs. La contribution concernant Angular est cependant bien plus cons\u00e9quente.  <\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/digiwin.fr\/wp-content\/uploads\/2021\/03\/ARV-Popularite.png\" alt=\"\" class=\"wp-image-2991\"\/><figcaption>Statistiques Github<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Il convient d\u2019interpr\u00e9ter ces chiffres avec pr\u00e9cautions. En effet, Angular est sur le march\u00e9 depuis plus longtemps que React et Vue (2010 contre 2013 et 2014). <br> Cette popularit\u00e9 est aussi \u00e0 comprendre comme le reflet de l\u2019accessibilit\u00e9 des frameworks, Angular \u00e9tant l\u00e9g\u00e8rement plus complexe \u00e0 appr\u00e9hender, et donc plut\u00f4t ferm\u00e9 aux novices.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Nous verrons ce point plus en d\u00e9tail par la suite. De plus, React et Vue sont orient\u00e9s cr\u00e9ation de composants affichables au sein de sites utilisant une technologie serveur classique, tandis qu\u2019Angular est int\u00e9gralement orient\u00e9 application SPA. Aussi un grand nombre d\u2019utilisateurs de React et Vue n\u2019utilisent ces frameworks que sporadiquement au sein d\u2019un projet port\u00e9 par une technologie principale diff\u00e9rente. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Un point important \u00e0 prendre \u00e9galement en consid\u00e9ration est la disponibilit\u00e9 des d\u00e9veloppeurs par technologie sur le march\u00e9 de l\u2019emploi. Une attention particuli\u00e8re doit \u00eatre port\u00e9e sur la faible proportion de d\u00e9veloppeurs Vue.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/digiwin.fr\/wp-content\/uploads\/2021\/03\/comparaison-react-angular-vue2@2x-80-scaled.jpg\" alt=\"\" class=\"wp-image-2988\"\/><figcaption>March\u00e9 de l&#8217;emploi (disponibilit\u00e9 des comp\u00e9tences)<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Apprentissage<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">React et Vue sont plus simples \u00e0 aborder qu\u2019Angular, cependant une erreur commune serait de faire un choix uniquement en fonction du d\u00e9but de la courbe, alors que la fin est elle aussi importante. Angular demande un investissement initial plus important dans son apprentissage, mais offrira rapidement une solution connue \u00e0 toutes les probl\u00e9matiques futures rencontr\u00e9es.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/digiwin.fr\/wp-content\/uploads\/2021\/03\/comparaison-react-angular-vue@2x-80-scaled.jpg\" alt=\"\" class=\"wp-image-2987\"\/><figcaption>Courbes d&#8217;apprentissage des 3 frameworks<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Angular contient nativement toutes les briques pour concevoir une application web compl\u00e8te. C\u2019est un framework autonome embarquant nativement (entre autres) le routing, un client http et la programmation r\u00e9active via rxjs.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">De leur c\u00f4t\u00e9, React et Vue peuvent \u00eatre consid\u00e9r\u00e9s davantage comme des librairies de cr\u00e9ation de composants web, raison pour laquelle ils sont plus accessibles. Il faudra donc faire des choix de librairies tierces et des efforts de configurations pour r\u00e9pondre aux besoins du d\u00e9veloppement d\u2019une SPA compl\u00e8te avec ceux-ci.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">On retrouve cet aspect dans la description qui est faite de ces 3 frameworks sur leurs sites respectifs :<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">angular.io : <em>\u201cLearn one way to build applications with Angular and reuse your code and abilities to build apps for any deployment target. \u201d<\/em><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">reactjs.org : <em>\u201cA JavaScript library for building user interfaces.\u201d<\/em><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">vuejs.org : \u201c<em>The core library is focused on the view layer only, and is easy to pick up and integrate with other libraries or existing projects.\u201d<\/em><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Concernant la disponibilit\u00e9 en terme de librairies tierces pour ces trois frameworks, celle-ci est \u00e9quivalente. Tous les trois s\u2019appuient sur l\u2019\u00e9norme biblioth\u00e8que que constitue npm.js.<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">On peut \u00e9galement noter qu\u2019Angular a fait le choix du langage Typescript au lieu de Javascript pour React et Vue. Typescript est un langage de programmation orient\u00e9 objet, fortement typ\u00e9, d\u00e9velopp\u00e9 par Microsoft et offrant un haut niveau d\u2019abstraction.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">A noter que Vue est propose \u00e9galement le support de Typescript depuis sa version 3 (septembre 2020).<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Performance<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">En termes de performances, React et Vue \u00e9tant plus l\u00e9gers qu\u2019Angular, sans surprise, ceux-ci sont l\u00e9g\u00e8rement plus performants. Cependant avec la compilation AOT (Ahead Of Time) et l\u2019optimisation du moteur de rendu IVY dans les nouvelles versions d\u2019Angular, celui-ci rivalise largement avec les deux premiers.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Globalement, les \u00e9carts de performances sont si faibles qu\u2019ils ne devraient pas constituer un facteur de choix.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Les deux frameworks (Angular et Vue) sont exceptionnellement rapides avec des m\u00e9triques similaires au benchmark. Utilisez les m\u00e9triques sp\u00e9cifiques du benchmark tiers pour une comparaison plus granulaire, mais la rapidit\u00e9 n\u2019est pas un facteur de d\u00e9cision.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/digiwin.fr\/wp-content\/uploads\/2021\/03\/ARV-Concl.png\" alt=\"\" class=\"wp-image-2993\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Pour conclure, il est tout \u00e0 fait possible de d\u00e9velopper des applications SPA compl\u00e8tes avec ces trois frameworks.<\/strong> <strong>Cependant Angular est clairement con\u00e7u pour, alors que React et Vue n\u00e9cessiteront un apport important en librairies compl\u00e9mentaires pour r\u00e9pondre \u00e0 ce m\u00eame besoin.<\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Cet article pr\u00e9sente un comparatif des principaux frameworks Single Page Application afin de d\u00e9terminer le plus efficient dans votre contexte. Dans un second article, nous pr\u00e9senterons nos recommandations et les erreurs \u00e0 \u00e9viter dans la mise en place d&#8217;un front en SPA (SEO, compatibilit\u00e9 avec les navigateurs plus anciens, l&#8217;accessibilit\u00e9, le responsive&#8230;). Enfin dans un [&hellip;]<\/p>\n","protected":false},"author":6,"featured_media":6418,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[183],"tags":[234,235,230],"class_list":["post-6417","post","type-post","status-publish","format-standard","has-post-thumbnail","category-apps-data-pt-pt","tag-framewok-pt-pt","tag-javascript-pt-pt","tag-recommandation-pt-pt"],"_links":{"self":[{"href":"https:\/\/www.luklagroup.com\/pt-pt\/wp-json\/wp\/v2\/posts\/6417","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.luklagroup.com\/pt-pt\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.luklagroup.com\/pt-pt\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.luklagroup.com\/pt-pt\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/www.luklagroup.com\/pt-pt\/wp-json\/wp\/v2\/comments?post=6417"}],"version-history":[{"count":1,"href":"https:\/\/www.luklagroup.com\/pt-pt\/wp-json\/wp\/v2\/posts\/6417\/revisions"}],"predecessor-version":[{"id":3017243,"href":"https:\/\/www.luklagroup.com\/pt-pt\/wp-json\/wp\/v2\/posts\/6417\/revisions\/3017243"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.luklagroup.com\/pt-pt\/wp-json\/wp\/v2\/media\/6418"}],"wp:attachment":[{"href":"https:\/\/www.luklagroup.com\/pt-pt\/wp-json\/wp\/v2\/media?parent=6417"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.luklagroup.com\/pt-pt\/wp-json\/wp\/v2\/categories?post=6417"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.luklagroup.com\/pt-pt\/wp-json\/wp\/v2\/tags?post=6417"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}