Skip to content

Frontend

Gabrielle Cruz edited this page Oct 27, 2021 · 28 revisions

Choix de la technologie

React

--Source 1--

--Source 2--

--Source 3--

Description

ReactJS is a Javascript library responsible for the user interface (view layer) of mobile and web apps. It has been developed to be highly dynamic and responsive to user input, making it a popular framework for software development.

React has essential features that work well with web development nowadays, mainly reusable components and the virtual DOM. First, each React component has its own unique functionalities, making it versatile and flexible, allowing users to implement them in different ways inside a project. Second, DOM manipulation is imperative to modern web development. Having a virtual DOM meant that developers no longer need to refresh pages whenever UI elements change, and React uses this to improve memory and efficiency.

Avantages et Inconvénients

Avantages Inconvénients
Easy to learn JSX syntax
Virtual DOM Fast development pace
Reusable components Poor documentation
One-way data flow
SEO friendly
Javascript library already available for use

Why this?

Nous avons décidé d'utiliser React, ce framework semble parfait pour notre utilisation car il est aussi très stable et rapide d'utilisation. De plus, 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é.

Il est facile à apprendre en raison de sa simplicité au niveau de la syntaxe et que nous avons eu une année complète d'apprentissage en Javascript.

Pour finir, son intégration pour le mobile est très rapide grâce à react native.

Angular

--Source 1--

--Source 2--

Description

Angular is an open-source platform from Google used to build user interfaces (website front-end). Its main benefit was to transform HTML-based documents into responsive and dynamic content, allowing the existence of single-page applications. It is currently one of the most popular front-end web development frameworks used today.

Angular forms a part of the "MEAN stack" : a group of software development tools and frameworks (MongoDB, Express, Angular, Node.js) that cover major development aspects.

The basic building blocks of Angular is NGModules, providing all core functionalities for users while they develop their applications. These modules define the core of the applications. Angular also stands out for its two-way data binding, where any changes to the DOM is immediately reflected in the application and vice-versa. This means that developers are no longer required to reload the the page manually.

However, the framework is quite complex and requires a lot of time and dedication to understand or even use properly.

Avantages et Inconvénients

Avantages Inconvénients
Supported and maintained by Google Complex
Job demand Steep learning curve
Two-way data binding Hierarchical tree-like architecture
Faster DOM Manipulation Dependency Injection
Faster Server Performance Performance Tradeoff
Ease of prototyping and iterative development support Coupled to Javascript/Typescript
Super ease of testing front-end applications Two-way data binding leading to performance issues
MVVM Architecture Heavily weighted framework
Uses plain HTML templates Conformity to the MEAN stack
Migration

Vue

--Source 1--

--Source 2--

Description

Vue.js is a progressive framework for building single-page applications. Developed for Javascript, it has been designed to be responsive and easy to use with other libraries focused on the view layer. The brainchild of Evan You, he initially developed the framework as a lightweight version of Angular, using the latter's best features such as data binding and making it less performance-heavy. At its core, Vue handles the UI of a website, but it can be used with other frameworks.

Vue is used by web developers to create user interfaces for web-based and hybrid mobile applications. It combines both React and Angular features, and brings it with simple, efficient design.

Avantages et Inconvénients

Avantages Inconvénients
Tools and Libraries Language Barriers and Restricted Community
Low Storage Requirements Oversaturates framework choice during development
Simple and easy to learn Lack of support for large-scale projects
Extensive documentation Limited Resources
Reactivity - two-way data binding
Reusabiity
Component-based Architecture
Flexibility

Bootstrap

--Source 1-- --Source 2--

Description

Bootstrap est une collection d'outils utiles à la création du design (graphisme, animation et interactions avec la page dans le navigateur, etc.) de sites et d'applications web. C'est un ensemble qui contient des codes HTML et CSS, des formulaires, boutons, outils de navigation et autres éléments interactifs, ainsi que des extensions JavaScript en option. C'est l'un des projets les plus populaires sur la plate-forme de gestion de développement GitHub.

Avantages et Inconvénients

Avantages Inconvénients

Clone this wiki locally