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

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

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

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

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

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

Intérêts Pourquoi ReactJS ?

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)

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.

Comment fonctionne ReactJS ? Fonctionnement Comment fonctionne ReactJS ?

Fonctionnement Approche « Composant » de ReactJS Style Logic Markup

Démonstration http://codepen.io/mehmet-95190/pen/OWLeyE?editors=0010#0

Démonstration

Le routing Définition Fonctionnement Exemple

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

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.

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

Avantages et inconvénients Incovénients

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

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