Comparaisons JS / TypeScript / Vue / React / Angular

JavaScript

Définition

Le JavaScript c’est quoi :
JavaScript est un langage multiparadigme (qui supporte la programmation procédurale et orientée objet) dynamique avec des types et des opérateurs avec des objets intégrés et des méthodes. Sa syntaxe est basée sur le langage Java et C. Plusieurs structures de ces langages fonctionnent aussi dans JavaScript.
Source : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Language_overview

Avantages

• Très facile à apprendre.
  Source : https://careerfoundry.com/en/blog/web-development/should-you-learn-javascript/#:~:text=JavaScript%20experts%20are%20versatile,and%20desktop%20apps%20using%20React.
• Beaucoup d’options (Frontend, backend et même des jeux vidéo).
  Source : https://careerfoundry.com/en/blog/web-development/should-you-learn-javascript/#:~:text=JavaScript%20experts%20are%20versatile,and%20desktop%20apps%20using%20React.
• Plus populaire, plus de source d’aide en ligne
• L’exécution de script est plus rapide puisqu’il est interprété et non compilé
  Source: https://data-flair.training/blogs/advantages-disadvantages-javascript/

Inconvénients

• Aucune fonction de débogage
  Source : https://geekway-mag.fr/avantages-et-inconvenients-de-javascript/coding/
• Pas universel pour tous les navigateurs
  Source : https://geekway-mag.fr/avantages-et-inconvenients-de-javascript/coding/
• Puisque le code JS est disponible en inspectant la page, le code est non sécurisé
  Source : https://data-flair.training/blogs/advantages-disadvantages-javascript/

Exemples de projets

• Un exemple de projet JavaScript valide serait pour des jeux jouables sur navigateur, avec le départ de flash Player par adobe, JavaScript demeure un langage facile d'utilisation pour des pages Web interactives nécessitant l'usage de différentes variables et événement d'input. (Facebook, Netflix, Duolinguo et même Angry Bird utilisent JavaScript)
• On peut faire de la robotique avec JS.
• On peut aussi faire des sites interactifs
  Source: https://www.simplilearn.com/applications-of-javascript-article

TypeScript

Définition

TypeScript est un langage open source typé basé dépendant de JavaScript, développé par Microsoft.
https://www.typescriptlang.org/

Avantages

• TypeScript possède plusieurs modules permettant à celui-ci de mieux organiser le code. La gestion et la maintenance du code sont facilitées grâce à l’encapsulation du code dans des fichiers distincts.
• L’autre avantage de TypeScript est que celui-ci propose le choix d’utiliser ou non le typage statique. Grâce à la valeur attribuée, il peut aussi déduire automatiquement les types pour les variables et les paramètres de fonction.
  Source: https://kinsta.com/fr/base-de-connaissances/guide-complet-typescript/
• Vérifient les erreurs d’un programme avant l’exécution en se basant sur les types de valeurs, autrement appelées « vérificateur statique ».
• Meilleure documentation
• Plus facile à déboguer

Inconvénients

• Le fait de devoir chercher des librairies qui comble tes besoins peut être compliqué et même ne pas contenir tout ce que tu veux donc tu vas devoir créer une nouvelle librairie
  Source: https://www.stxnext.com/blog/typescript-pros-cons-javascript/#:~:text=However%2C%20as%20with%20everything%20else,can%20be%20tiring%20and%20frustrating.
• Le fait de devoir écrire plus de code fait que les fichiers sont plus gros et peuvent ralentir le processus de développement
  Source: https://www.altexsoft.com/blog/typescript-pros-and-cons/
• Moins flexible que JavaScript
• Alourdis le code

Exemples de projets

• Slack
  Slack est une plate-forme de communication collaborative largement utilisée en milieu professionnel. Elle offre des fonctionnalités de messagerie instantanée, de partage de fichiers, de création de canaux thématiques et d'intégration avec d'autres outils. Grâce à son interface conviviale, Slack permet aux équipes de travailler de manière efficace en centralisant les échanges et en facilitant la collaboration en temps réel, ce qui en fait un outil populaire pour la gestion de projets et la communication interne au sein des entreprises.
• Canva
  Canva est une plate-forme de conception graphique en ligne qui permet aux utilisateurs de créer facilement des graphiques, des présentations, des publications sur les réseaux sociaux, des invitations, et bien plus encore, grâce à une interface conviviale et des outils intuitifs. Elle propose une vaste bibliothèque de modèles, d'images, d'icônes et de polices pour aider les utilisateurs à concevoir des contenus visuellement attrayants sans avoir besoin de compétences approfondies en design. Canva est largement utilisé par des professionnels, des étudiants et des particuliers pour produire des documents visuels de manière rapide et efficace.
• Un gros formulaire, puisque le vérificateur statique oblige et vérifie un certain type de données

Vue.js

Définition

• Vue est un framework JavaScript qui se repose sur les standards HTML, CSS et JavaScript. Il propose une manière efficace de déclarer des composants pour la construction d'interfaces utilisateur, qu'elles soient simples ou complexes.
  Source: https://fr.vuejs.org/guide/introduction.html
• Vue.js permet d’étendre les capacités du HTML en utilisant des directives comme attributs HTML.
• Ces directives offrent des fonctionnalités supplémentaires aux applications HTML
• De plus, Vue.Js fournit des directives par défaut à l'utilisateur, mais lui permet aussi de créer des directives personnalisées.
  Source: https://www.w3schools.com/whatis/whatis_vue.asp

Avantages

• Performance améliorée : Optimisation des performances pour les applications complexes.
• Bonne flexibilité, permettant de choisir l’API Options ou Compositions
• Composition API : meilleure réutilisation et organisation de la logique.
• Améliore l’intégration de TypeScript
  Source : https://appweb.progwmj.ca/cours/cours-05

Inconvénients

• Courbe d'apprentissage pour l'API Composition : Peut sembler complexe au début.
• Migration : Défis lors de la migration vers Vue.js 3 pour les projets existants. Source: https://appweb.progwmj.ca/cours/cours-05
• Manque d'adhésion par de grands projets/entreprises comparé à Réact et Angular
• Trop flexibles, peuvent causer des inconsistances
• Moins grande communauté de développeurs
  Sources:
  • https://www.altexsoft.com/blog/pros-and-cons-of-vue-js/
  • https://marketsplash.com/tutorials/vue-js/vue-js-pros-and-cons/#section1_2
  • https://esokia.com/fr/expertises/framework-vuejs

Exemples de projets

• Un site Web similaire à GitLab et GitHub
• Facebook,Netflix,Xiaomi, Adobe,The Motley Fool, Trivago,Alibaba,Gitlab,Behance, Nintendo, BMW,UpWork, Apple, 9GAG, Google
  Source : https://www.trio.dev/blog/websites-using-vue

React

Définition

• React est une bibliothèque JavaScript libre. React est maintenue par Meta(anciennement Facebook)ainsi que par une communauté de développeurs individuels et d’entreprises depuis l’année 2013.
• React est une bibliothèque qui ne gère que l'interface de l'application, considéré comme la vue dans le modèle MVC. Elle peut ainsi être utilisée avec une autre bibliothèque ou un framework MVC comme AngularJS. La bibliothèque se démarque de ses concurrents par sa flexibilité et ses performances, en travaillant avec un DOM virtuel et en ne mettant à jour le rendu dans le navigateur qu'en cas de nécessité.
  Source : https://fr.wikipedia.org/wiki/React
• C'est une librairie JavaScript open source qui permet de créer des interfaces utilisateur composables. React sert spécifiquement pour des applications d'une seule page, il permet aux développeurs de créer de grandes applications Web qui peuvent modifier les données, sans avoir à recharger la page. De plus, il ne fonctionne que sur les interfaces utilisateur de l'application.
  Source: https://ibracilinks.com/blog/quest-ce-que-reactjs-et-pourquoi-devrions-nous-utiliser-reactjs

Avantages

• Performance : React a été pensé pour être très rapide et performant. Les atouts qu’il possède tel que du server-side rendering ou un virtual DOM program. En gros, cela facilite le fonctionnement d’application d’envergure qui est très complexe.
  Source: https://www.peerbits.com/blog/reasons-to-choose-reactjs-for-your-web-development-project.html
• Composante recyclable : React est pensé en multiple composante qui peuvent être facilement être réutilisé. Ces petits bouts de codes qui ont chacun leur propre logique deviennent extrêmement intéressants pour créer du code complexe.
  Source : https://www.javatpoint.com/pros-and-cons-of-react
• Avec React, les développeurs peuvent réduire le temps de chargement et améliorer la vitesse de rendu d'une application Web.
  Source: https://massivepixel.io/blog/react-advantages-disadvantages/#:~:text=With%20React%2C%20developers%20can%20reduce%20loading%20time%20and,Google%20seems%20to%20index%20React-based%20applications%20quite%20well.
• ReactJS bénéficie d'être un outil open source, car n'importe quel développeur peut créer des tutoriels, des outils de formation et d'autres documents pour aider les nouveaux et les anciens développeurs à apprendre.
  Source: https://www.koombea.com/blog/react-pros-and-cons-what-are-the-advantages-and-disadvantages-of-reactjs/

Inconvénients

• En raison du développement de react qui est d’une vitesse élevée, la documentation n’évolue pas aussi rapidement que le logiciel. Les développeurs ont donc moins d’outils pour se guider. Cela peut bloquer les nouveaux développeurs qui apprennent cette technologie.
• Vu que le développement de react est très rapide, l’environnement est toujours en évolution ce qui oblige les développeurs à constamment réapprendre le code. Ils doivent donc toujours s’informer des nouveaux changements puisque le rythme, les habitudes et les méthodes ne cessent pas de changer.
  Source : https://www.ambient-it.net/avantages-inconvenients-reactjs/
• Le langage n'est pas typé (selon les préférences, cela pourrait être un avantage). Les variables sont déclarées avec des var/let/const comme sur JavaScript. Source:
  https://www.w3schools.com/react/react_es6_variables.asp#gsc.tab=0
• React est mis à jour si souvent et rapidement qu'il y a un manque temps pour faire une documentation complète.
  Source: https://www.javatpoint.com/pros-and-cons-of-react

Exemples de projets

• React Native est principalement utilisé pour développer des applications mobiles. Les types d’applications peuvent être des réseaux sociaux comme Facebook. Ça peut aussi être un site d’achat en ligne ou bien des applications de communication comme Skype.
  Source : https://reactnative.dev/showcase
• Instagram est entièrement basé sur la bibliothèque React JS. L'incroyable interface utilisateur et UX que vous expérimentez est due à React. Les fonctionnalités puissantes telles que les API Google Maps, la précision des moteurs de recherche, les géolocalisations et les balises qui s'affichent sans hashtags sont grâce à cela.
• Facebook :Il utilise React Native, car il s'agit d'une plate-forme d'applications mobiles multiplateforme qui développe sa propre application mobile. L'un des plus grands sites de médias sociaux au monde, Facebook vous aide à rester en contact avec vos amis et votre famille. Leur page Web est construite avec React et le script est mélangé avec le code de l'application. En fait, Facebook était l'endroit où la bibliothèque React JS a été initialement créée, et actuellement, il existe une version bêta d'un React JS complètement réécrit appelé React Fiber.
  Source: https://www.zucisystems.com/be/blog/15-applications-web-populaires-creees-a-laide-de-react-js/

Angular

Définition

• Angular est une plate-forme de développement bâtie avec TypeScript. La plate-forme utilise des composantes afin de développer des applications Web. Elle inclut plusieurs librairies pour faire des routes, de la gestion de formulaires ou encore pour faciliter la communication entre le client et le serveur. De plus, la plate-forme propose des outils afin d’aider le développeur à construire et tester le code.
  Source : https://angular.io/guide/what-is-angular
• Angular est un framework open source du côté client, développé par Google, qui est basé sur le langage TypeScript et qui permet la création d'applications Web variées. Ce framework est surtout connu pour ses utilités pour la création d'applications Web monopages, c'est-à-dire des applications accessibles à partir de pages Web uniques: elles permettent d'éviter les chargements de pages à chaque action et de fluidifier l'ensemble de l'expérience de l'utilisateur. Angular est une réécriture complète d'AngularJS, un autre framework qui fut construit par la même équipe qui le développe actuellement. Le framework est basé sur une architecture de type MVC (Modèle-Vue-Controlleur), ce qui permet de séparer le visuel, les données et les actions pour une meilleure gestion des responsabilités. Bref, Angular est un outil puissant pour développer des applications Web efficaces et complexes.
  Sources:
  • https://fr.wikipedia.org/wiki/Angular
  • https://monpetitdev.fr/cest-quoi-angular-definition/

Avantages

• Facile à prendre en main pour les personnes connaissant JS, HTML et CSS
• Permets la réutilisation du code grâce à sa structure à base de composants
  Source: https://cynoteck.com/fr/blog-post/reasons-to-use-angular-for-your-web-app/
• L’apprentissage est plus facile puisque sa syntaxe est basée sur type script. Cela permet d’avoir une meilleure robustesse et une maintenance plus facile. En plus, le framework angular permet des tests vraiment faciles, car les modules angula sont faciles à gérer. Vous pouvez charger efficacement les informations essentielles et exécuter des tests automatiques avec la présence de modules séparés.
  Source: https://cynoteck.com/fr/blog-post/reasons-to-use-angular-for-your-web-app/
• Angular impose une approche structurée basée sur des composants, facilitant l’échange de données entre ces composants. Il encourage également une implémentation générique, permettant la réutilisation du code Angular dans d’autres contextes
  Source: https://guide-angular.wishtack.io/pourquoi-angular

Inconvénients

• Un projet utilisant Angular supporte difficilement la présence d’autres itérations de JavaScript
• Angular est considéré comme un framework lourd et utilisé pour les PC mobiles et de bureau.
  Sources:
  • https://www.software-developer-india.com/fr/avantages-et-inconvenients-dangularjs/
  • https://mobiskill.fr/blog/conseils-emploi-tech/react-vs-angular-vs-vue-quel-framework-choisir/
  • https://seclgroup.com/10-best-examples-of-websites-and-apps-built-with-angular/
• Manque de documentation officielle, en raison du développement ultrarapide de Angular qui ne laisse pas de place à la documentation appropriée
  Source: https://www.ambient-it.net/reactjs-vs-angular-vs-vuejs/
• Angular est plus lourd et plus complexe que d’autres frameworks
  Source: https://cynoteck.com/fr/blog-post/reasons-to-use-angular-for-your-web-app/

Exemples de projets

• YouTube est un des nombreux projets ayant été créés par du code en Angular. Cette application maintenant acquise par le géant Google est une plate-forme servant à partager des vidéos à tous ceux ayant accès à internet. YouTube est le plus grand site de « Streaming » vidéo avec plus de 2.5 billions d’utilisateurs par mois. Bien que sa base front-hand est fait en Angular JS, il est aussi accompagné par une partie Backhand en Python/Django et en Go.
  Source: https://seclgroup.com/10-best-examples-of-websites-and-apps-built-with-angular/
• Gmail: Gmail utilise Angular depuis 2009. Gmail compte plus de 1,5 milliard d'utilisateurs quotidiens. Et Angular l'aide à gérer sans effort le trafic intense généré par une base d'utilisateurs aussi importante. Ainsi, cette application monopage fonctionne rapidement, sans faille et sans plantages.
• PayPal: Cette application angulaire remplace électroniquement les méthodes papier conventionnelles telles que les chèques et les mandats et prend en charge les transferts d'argent en ligne rapides. La société fonctionne comme un processeur de paiement en ligne et plus de 305 millions de personnes possèdent des comptes actifs sur la plate-forme PayPal. L'application fonctionne parfaitement et peut gérer un trafic important. Étant donné que PayPal est utilisé pour les transactions financières, il nécessite un transfert de données instantané et en temps réel avec des fonctionnalités de sécurité de haute technologie. Grâce à Angular, l'application répond avec succès à ces exigences.