A JavaScript library for building user interfaces

Présentation au sujet: "A JavaScript library for building user interfaces"— Transcription de la présentation:

1 A JavaScript library for building user interfaces
AGLIF Fatima Zahra | AYDOGAN Mehmet A JavaScript library for building user interfaces

2 Sommaire Introduction Intérêts Fonctionnement Démonstration Le routing
Avantages & inconvénients

3 Qu’est-ce qu’est ReactJs ?
Introduction Qu’est-ce qu’est ReactJs ?

4 Introduction Facebook (2013) Bibliothèque JavaScript libre
Framework MVC Instagram Côté « vue » dans le paradigme MVC

5 Qu’est-ce qu’est React native?
Introduction Qu’est-ce qu’est React native?

6 React native Un framework mobile hybride
Développé par Facebook depuis 2015 Le but de React Native est de pouvoir réutiliser le maximum de code entre les différentes plateformes (iOS et Android) L'écriture en javascript permet aux développeurs web de construire une application mobile native, contrairement à Cordova qui encapsule l'application dans une webview

7 Intérêts Pourquoi ReactJS ?

8 Intérêts Approche « Composant », différent des autres (Angular 1, Angular 2, Ember, etc.). Au lieu de modifier le DOM, on écrit du HTML dans les composants JavaScript en interne. Code plus compréhensible. Intègre parfaitement les nouveautés ECMAScript 6 (alias JavaScript 2015). Existence de React Native  permettant de créer des applications mobiles à la manière de Cordova ou Ionic pour Angular. De plus, React a été créé en se concentrant sur les performances, utilisant un DOM virtuel pour rafraîchir uniquement les composants qui ont été modifiés et non toute la page (il reste cependant plus lent que du JavaScript pur)

9 Intérêts Les webcomponents (avec le framework Polymer par exemple) ont un but différent de React. En effet, React va principalement chercher à synchroniser les données et le DOM. Alors que les webcomponents vont être principalement créés pour encapsuler des composants. Les deux approches sont finalement complémentaires et on peut donc utiliser Polymer avec React.

10 Comment fonctionne ReactJS ?
Fonctionnement Comment fonctionne ReactJS ?

11 Fonctionnement Approche « Composant » de ReactJS Style Logic Markup

12 Démonstration

13 Démonstration

14 Le routing Définition Fonctionnement Exemple

15 Le routing - Définition
Gestion de différentes pages d’application ReactJS posède une librairie de routing assez performante via la librairie React Router Définir les routes de notre application et les composants qui y seront affichés

16 Le routing - Fonctionnement
Pour introduire des routes dans une application, on ne va plus utiliser la méthode React.render mais plutôt un composant « Router ». Pour naviguer entre les routes, il suffit d’utiliser le composant « Link » avec son attribut « to ».  Créer un lien vers la route définie.  Simplification de l’utilisation d’un composant pour une route  Notion de routes imbriquées permettant de créer des véritables applications.

17 Le routing - Exemple <Route name="app" path="/" handler={App}>
<Route name="view1" handler={View1}/>     <Route name="view2" handler={View2}/> </Route>

18 Avantages et inconvénients
Incovénients

19 Avantages React ouvre les portes des applications universelles qui se bases sur les pages SPA (Single Page Application – s’exécute entièrement dans le navigateur). Navigation plus fluide Serveur moins sollicité (données récupérées par des appels API) Interactions plus riches

20 Inconvénients React est encore jeune  Manque de documentation
L’ecosystème est faible par rapport aux plus anciens tels qu’Angular, etc. Il n’y a aucune garantie que le code écrit à l’heure actuelle fonctionnera avec les futures versions de React. L’approche de l’interface utilisateur est complètement différente. Ce n’est qu’une bibliothèque d'interface utilisateur seulement

21