Archive for react

React : L’impact des composants purs sur les performances

React : L’impact des composants purs sur les performances

Il y a quelque mois s’est déroulé la React Europe Conférence à Paris. Durant ces deux jours, pas mal de sujets ont été traités comme Flux, React Native, React Router, Relay & GraphQL, etc… Jusque là, rien de nouveau.

En revanche, la conférence qui nous intéresse ici est Making your app fast with high-performance components par Jason Bonta. React est connu pour être un framework performant de base (cette vidéo nous le prouve d’ailleurs dans les 5 première minutes: [youtube z5e7kWSHWTg]) mais un mauvais usage de cette technologie pourra tout de même entrainer l’apparition de lenteurs dans nos applications.

Dans cette conférence, Jason parle notamment de l’usage de shouldComponentUpdate qui fait partie des lifecycle methods et qui est aujourd’hui trop peu utilisée.
Cette méthode reçoit les props et le state précédent ainsi que les props et le state suivant et son rôle est de déterminer si oui ou non le composant doit se rendre à nouveau (en retournant true ou false).
Dans la majorité des cas, il suffirait de vérifier s’il existe une différence entre les props précédentes et suivantes ainsi que le state précédent et le state suivant.

Heureusement, il existe dans React un mixin permettant d’implémenter cette fonctionnalité facilement: Le PureRenderMixin.
Ce mixin implémente tout simplement le méthode shoudComponentUpdate qui effectue une comparaison entre les props et les state.

Cependant, Il est important de noter deux choses:
Le PureRenderMixin ne fonctionnera correctement que si le composant est « pur », c’est à dire que pour un même state et un même props, il affiche le même résultat.
Aussi, le mixin n’effectue qu’un « shallow equal » (c’est à dire une comparaison uniquement sur le premier niveau de profondeur de l’objet) car sur des objets complexes cela pourrait devenir vite contre productif.
Ainsi si les props ou le state contiennent des sous objet, la comparaison se fera au niveau des références.

C’est là qu’interviennent les objets immutables. Ces objets ont la particularité de conserver la même référence si leurs attributs n’ont subit aucun changement au cours d’une mise à jour. Ainsi, peu importe la complexité d’un objet immutable il est possible de comparer deux objets immutables simplement par leur référence. La librairie la plus connue permettant de profiter de cette fonctionnalité est ImmutableJS que nous utilisons déjà.

Dans la suite de la conférence, Jason fait mention des éléments enfants qu’il est possible de transmettre à un composant auquel ce dernier a accès via la  propriété this.props.children. Cette propriété pose problème car la référence de this.props.children change à chaque nouveau rendu de l’élément parent rendant encore une fois le PureRenderMixin inutile. Ainsi, sa conclusion est qu’il faut les éviter au maximum.

En bref, cette conférence regorge de plein de précieux conseils et astuces que nous pouvons mettre facilement en application dans nos projets, alors pourquoi s’en priver ?

 

React Template : Une alternative au JSX

React Template : Une alternative au JSX

Il y a quelque temps nous avons décidé de migrer à React. Ce choix, qui n’a pas été immédiat, est le résultat d’une longue hésitation avec l’autre leader du marché qu’est Angular JS.
A l’époque, les points qui nous rebutaient le plus dans React étaient la syntaxe JSX et le fait de mélanger l’affichage et la logique du composant au sein d’un même fichier même si, en réalité, il s’avère que ce dernier point est plutôt pratique à l’usage.
Cependant, il reste certaines choses qui restent un peu fastidieuses, comme les conditions ou les boucles.
C’est là qu’intervient React Template, un moteur de template permettant d’écrire du JSX avec une syntaxe proche de celle utilisée dans Angular JS.
En effet, il suffira d’un attribut « rt-if » pour définir la condition d’affichage d’un élément, d’un « rt-repeat » pour répéter un élément selon une condition précise, etc…
Vous trouverez ci-dessous un exemple de template React:

Les templates peuvent se compiler simplement avec la majorité des task runner ou builder courants tels que Grunt, Gulp, Browserify ou Webpack.
De la compilation résulte un module javascript contenant une fonction destinée à remplacer la méthode render du composant. De ce fait, l’inconvénient, s’il en est, est que le template sera toujours séparé du composant.
En bref, React Template est une alternative intéressante au JSX et, même si la syntaxe peu déplaire pour ceux qui ont fuit Angular à cause de tout ces attributs ng-*, il prouve qu’il est possible de rendre l’écriture des composant React un peu plus pratique pour ceux qui ont peur de ne pas se faire au JSX !

 

Ecmascript 6, l’avenir du Javascript entre nos mains grâce à BabelJS

Ecmascript 6, l’avenir du Javascript entre nos mains grâce à BabelJS

Devinette : Je suis un langage de programmation qui est longtemps resté le vilain petit canard du développement web mais qui depuis plusieurs années se refait une image auprès des développeurs jusqu’à investir des domaines encore impensables il y a quelques années (serveur, outils en ligne de commande, objets connectés, etc.). Je suis basé sur la norme ECMAScript et m’exécute historiquement dans le navigateur mais pas que. Je suis ?

OK, c’était facile, vous l’aurez deviné, c’est du Javascript dont on parle.

Même si ce langage arrive à gommer petit à petit sa mauvaise image notamment grâce à l’arrivée de Frameworks permettant une architecture d’application plus professionnelle (React, Angular, Backbone, etc. ont fait beaucoup) la syntaxe et les fonctionnalités offertes aux développeurs sont souvent source de frustration. Il faut dire que le notion de langage prototypé peine à convaincre les développeurs qui ont souvent tendance à tenter de reproduire de la POO classique avec les prototypes, avec plus ou moins de succès.

C’est ainsi qu’est apparu l’ECMAscript 6. Cette nouvelle version de la norme ajoute de nouvelles fonctionnalités au langage attendues de longue date : de la vraie POO avec les « class » et les « extends », des constantes, et plein de sucre syntaxique pour le plus grand plaisir de nos petits doigts délicats de développeurs.
Malheureusement, là encore, un problème se pose. En effet, l’ES6 n’est pas encore supporté par tous les navigateurs et encore moins sur les vieilles versions. Oui Internet Explorer, c’est toi que je fixe !

Heureusement est né Babel ! Le principe est relativement simple : Babel est un programme qui permet d’écrire du Javascript dans sa version ES6 et de la transformer en ES5 pour assurer le support de toutes les machines. Le site officiel explique d’ailleurs très bien comment rédiger du code ES6. Vous pouvez même profiter d’un compilateur en temps réel !

Voir le Site officiel de Babel