Choix technologiques - GregoireAntoine/DEVWEB3 GitHub Wiki

Front-end:

React

Nous utiliserons dans le cadre ce projet React qui est une bibliothèque Javascript, technologie ouverte par Facebook en 2013 qui est utilisée pour la création d'énorme application web.

Architecture :

React n'applique pas une structure de projet spécifique, on peut commencer à utiliser React avec seulement quelques lignes de code. React peut être utilisé comme bibliothèque d'interface utilisateur pour rendre des éléments, sans appliquer une structure de projet spécifique, et c'est pourquoi ce n'est pas strictement un cadre. React est basé sur JavaScript, mais il est principalement combiné avec JSX (JavaScript XML), une extension de syntaxe qui nous permet de créer des éléments contenant du HTML et du JavaScript en même temps. Tout ce que nous faisons avec JSX peut également être créé avec l'API JavaScript React, mais nous préférons JSX car il est plus intuitif.

Popularité :

React est l'un des projets JavaScript les plus populaires avec 160 000 étoiles sur GitHub . Il est développé et maintenu par Facebook, et il est utilisé en interne dans de nombreux projets. En outre, il alimente plus de 2 millions de sites Web, selon les statistiques d'utilisation de BuiltWith .

Angular est développé par Google, mais étonnamment, il n'est pas utilisé dans certains de leurs produits phares tels que Search ou Youtube. Il est souvent utilisé dans les projets d'entreprise et alimente plus de 97 000 sites Web basés sur les données de BuiltWith . C'est le moins étoilé parmi les trois frameworks, avec 68k étoiles sur GitHub .

Ecosystème :

De nombreuses applications frontales s'appuient sur la gestion globale de l'état pour stocker des informations, telles que les personnes connectées et d'autres paramètres utilisateur. Le projet le plus populaire pour la gestion de l'état JavaScript est Redux . La plupart des développeurs utilisent les liaisons React officielles pour Redux, qui sont maintenues par l'équipe Redux. En raison de la popularité de React, trouver des composants d'entrée et des éléments prêts à l'emploi est extrêmement facile. Ils sont tous juste une recherche Google ou GitHub.

Comme dans le cas de React, il existe de nombreux composants prêts à l'emploi que l'on peut importer dans nos projets. Ce qui est légèrement différent avec Angular, c'est qu'il existe de nombreux composants officiels dans le projet Angular Material . Il s'agit d'un projet officiel de Google qui propose des composants de conception de matériaux pour les applications angulaires.

Nous pouvons voir que Angular et React sont semblable en beaucoup de points. Nous avons donc défini notre choix de technologie par d'autres facteurs, tels que nos connaissances en amont du projet concernant chacuns de ces langages. Mais aussi nous savions que React prend en charge le rendu côté serveur avec le package officiel ReactDOMServer . Et que pour la virtualisation, nous pouvions utiliser un outil populaire appelé React Virtualized .

Cepandant chacunes de ces 2 technologies présente des avantages et des inconvénients distincts.

React

Avantages:

  • Facile à apprendre, en raison de sa simplicité en ce qui concerne la syntaxe
  • Haut niveau de flexibilité et de réactivité
  • DOM virtuel (modèle d’objet de document)
  • Combiné avec ES6 / 7, ReactJS peut travailler avec la charge élevée d’une manière facile.
  • Librairie JavaScript 100% open source (reçoit beaucoup de mises à jour et d’améliorations quotidiennes)
  • La migration entre les versions est généralement très facile, avec « codemods », fournit par Google, pour automatiser une grande partie du processus.

Inconvénients :

  • Manque de documentation officielle – le développement ultrarapide de ReactJS ne laisse aucune place à la documentation appropriée
  • React est unopinionated, ce qui signifie que les développeurs ont parfois trop de choix.
  • Long à maîtriser, ReactJS nécessite une connaissance approfondie de la façon d’intégrer l’interface utilisateur dans le framework MVC.

Angular

Avantages :

  • Nouvelles fonctionnalités améliorées telles que RXJS, compilation plus rapide (en moins de 3 secondes)
  • Documentation détaillée
  • Liaison de données bidirectionnelle qui minimise les risques d’erreurs possibles
  • MVVM (Model-View-ViewModel) qui permet aux développeurs de travailler séparément sur la même section de l’application en utilisant le même ensemble de données
  • Injection de dépendance des fonctionnalités liées aux composants avec modules et modularité en général
  • Même si ce framework peut être difficile à apprendre. Il dispose d’une grande communauté qui fournit une quantité de formations et de discussions suffisantes pour se lancer dans l’utilisation d’AngularJS sans être bloqué.

Inconvénients :

  • Les problèmes de migration qui peuvent apparaître lors du passage de l’ancienne version aux plus récentes
  • Les applications dynamiques n’ont pas toujours été aussi performantes. Les single-page application complexes pouvaient être à la traîne et peu pratiques à utiliser en raison de leurs tailles.
Angular React
Performance Moyen Haute
Apprentissage Difficile Moyen
Disponibilité des developpeurs Haute Haute
Communauté Grande Très grande
Acceptation et confiance Haute très Haute

Bootstrap

Le framework Bootstrap est donc un ensemble de fichiers CSS et JavaScript qui contiennent des règles prédéfinies et qui définissent des composants. Ces ensembles de règles sont enfermés dans des classes et nous n’aurons donc qu’à utiliser les classes qui nous intéressent afin d’appliquer un ensemble de styles à tel ou tel élément HTML.

Bootstrap utilise également des fichiers JavaScript et notamment des librairies JavaScript externes comme jQuery ou Popper pour définir des composants entiers comme des barres de navigation, des fenêtres modales, etc. qu’on va pouvoir également directement implémenter.

Le choix de Bootstrap nous a semblé le plus judicieux pour plusieurs raisons.
Tout d'abord, pour son système de grille qui nous permettra de développer notre site web pour n'importe quel type d'écran. Bootstrap est utilisé sur 7 sites webs sur 10 ce qui nous procure une certaines sensation de confiance à son égard. De plus, il nous propose une très grande collection de composants. Son utilisations nous permet de gagner un temps considérable par rapport à l'utilisation du css simple. Enfin, possède une très grande communauté sur qui nous pourront compter pour avoir de l’aide ou plus encore réutiliser les composants de la communauté.

Il fait gagner un temps considérable de boulot mais en utilisant bootstrap , oui , tout les sites ce ressemble mais il ne n'empeche pas de rajouter son propre css. Il comporte une très grande collection de composants. C'est aussi un frameworks appartenant à une grande société ( Twitter) ce qui confère une certaine sécurités quant à son utilisations, son développement et sa longévité.

Il y a néanmoins quelques désavantages comme le fait qu'il soit assez assez lourd comparé à certains autres frameworks css. Il nécessite de le surcoucher pour ne pas que notre site ne soit exactement le même que des centaines ou milliers d'autres sites.il est vrai qu’une personne maîtrisant parfaitement Bootstrap va pouvoir réaliser des design complexes très rapidement, il faut prévoir un certain coût d’apprentissage pour un néophyte pour pouvoir utiliser toute la puissance de Bootstrap et pour l’utiliser convenablement.

Comparé à Angular et react, bootstrap nous permet de pousser beaucoup plus loin le design de notre site de manière plutôt simple étant donné que nous utilisons déjà les librairies de base que nous n'aurons qu'à upgrade le moment voulue pour rendre notre site au design unique.

La combinaison de Bootstrap et de React nous permet une fois l'outil parfaitement maitrisé, d'effectuer des tâches simples beaucoup plus rapidement qu'avec de simples langages.

Back-End:

Node.js

Node.js est une plateforme logicielle libre en JavaScript intégrant un serveur HTTP. Son fonctionnement est basé sur une boucle événementielle lui permettant de supporter de fortes montées en charge.

Node.js nous permet de faire du Full-Stack en JavaScript.

Le gestionnaire de paquets npm est très facile d'utilisation et très bien fourni. La communauté est très active donc ça permet de trouver rapidement des solutions aux problèmes rencontrés.

En pratique, vous étiez obligé d'avoir deux équipes de développeurs, une pour le frontend et une autre pour le backend. Avec la popularité croissante de Node.js, le mythe du développeur fullstack est devenu réalité. Contrairement à d'autre langage, sachant que nous travaillons déjà avec des outils js, qui ne nous permettent pas de faire facilement du développement fullstack pour chacun des membres du groupe. Si nous avions choisi Django je pense qu'il nous aurait été plus difficile de réaliser le back-end étant donné que Django fonctionne en python langage que nous métrisons peu ou même pas du tout. Donc l'utilisation de Django nous aurait encore un peu plus ralenti dans la réalisation de notre site.

Aujourd'hui, il est possible de coder les deux parties d'une application web en JavaScript par le biais de différents frameworks. C'est un gain de temps pour le développeur et une économie d'argent pour l'entreprise. L’utilisation de Node.js en tant que serveur web permet de traiter un gros volume de requêtes simultanément de manière efficace. Cette performance élevée s’explique par une conception asynchrone (modèle non bloquant) permettant d’éviter les attentes. Ainsi, plusieurs requêtes peuvent être lancées en parallèle. Les résultats sont traités au fil de l'eau. Ce qui nous permet d'assurer si le client le désir une évolution correcte de son site web.

Node.js rassemble une grande communauté de développeurs passionnés. Ce qui en cas de bloquage nous donne l'assurance de trouver des réponses à nos questions.

Il faut aussi se rendre à l'évidence que au jour d'aujourd'hui, javascript prend une place très importante dans le monde de la programmation et que par conséquent, développer comme ici un nouveaux en utilisant cette technologie ne peut être que bénéfique pour son évolution futur.

Il existe des Mooc, des webinaires ou des cours en ligne pour apprendre à utiliser Node.js. Les articles spécialisés et les événements permettent de partager les avancées de Node.js. Des Meetups, des conférences ou des formations sont accessibles dans toutes les grandes villes. Node.js c'est avant tout du JavaScript, et du JS il y en a partout. Node.js n’est plus la petite dernière des technologies. C'est une technologie utilisée et éprouvée par les géants du web : Netflix, Trello, PayPal, LinkedIn, Walmart, Uber, Medium, Groupon, Ebay ou la NASA. Le fait que ces grandes entreprises utilisent Node.js nous confère une certaine sensation de confiance vis à vis de ce framework.

MySQL

MySQL est un système de gestion de bases de données relationnelles. Il est distribué sous une double licence GPL et propriétaire. MySQL est utilisé depuis très longtemps ce qui permet d'éviter les "problèmes de jeunesses". De plus le serveur MySQL est très rapide ce qui permet d'assurer un confort d'utilisation. MySQL est beaucoup plus simple à utiliser que la plupart des serveurs de bases de données commerciaux. Sans compter sur la documentation plus que riche présente sur le net.

Aussi MySQL est utiliser par des monstres du web tels que Google, Facebook et Yahoo! ce qui nous permet une certaine assurance quant à son utilisation.

MySQL est gratuit à des fins non commercial. Même si la licence venait à venir complètement payante. Il nous faudrait débourser 200$.

La documentation de Node.js nous recommande fortement d'utiliser MySQL. En effet NodeJS permette d'établir une connexion grâce à express.js avec une base de données MySQL et d'exécuter des requêtes. Ce qui, en sachant que nous voulons faire du full stack javascript nos oblige en quelque sorte à utiliser MySQL.

De plus tout comme ces concurrents mariabd et mongodb, mysql est opensource mais quand même sous licence de Oracle.

Enfin Mysql conffert une plus grande sécurité que ces adversaires.

PassportJS :

Passport est un middleware d'authentification pour Node.js. Extrêmement flexible et modulaire, Passport peut être intégré discrètement à n'importe quelle application web basée sur Express. Un ensemble complet de stratégies permet l'authentification à l'aide d'un nom d'utilisateur et d'un mot de passe.

SOURCE

https://www.ocsigroup.fr/blog/reactjs-vs-angular-quel-est-le-meilleur

https://www.acseo.fr/6-raisons-daimer-reactjs

https://www.pierre-giraud.com/bootstrap-apprendre-cours/introduction/

https://www.smooth-code.com/articles/6-raisons-de-choisir-node-js

https://kinsta.com/fr/blog/mariadb-mysql/#differences

https://easy-bi.org/blog/mariadb-lalternative-mysql/