:::: MENU ::::

React Native : la nouvelle bombe de chez facebook

La semaine dernière s’est tenue la conférence React.js Conf . Lors du discours d’ouverture, après un petit rappel sur l’origine de React , l’annonce d’une possible révolution dans le développement mobile est faite : il s’agit de React Native.

Du natif sans natif

Les développeurs de chez facebook sont partis du constat que les applications mobiles faites avec des technos web ne sont pas (encore) au niveau des composants natifs. De plus, il existe des éléments d’interfaces conçus spécifiquement pour ces plateformes ( iOS et Android ) et qui sont adaptés en terme de performance, d’interaction et de visuel.

Android + iOS + React

Ils se sont donc demandé comment utiliser ces éléments mais sans passer par du code « propriétaire » (Objective C et Java )

 

« Learn once, write everywhere »

Plutot que de réécrire un nouveau framework mobile, ils ont décidé d’utiliser Javascript et React comme couche d’abstraction sauf que au lieu de créer des éléments de DOM, on va ici piloter des composants natifs ! Et ce qui est assez intéressant, c’est que la syntaxe est exactement la même que dans un navigateur, seul les composants changent.

Par exemple sous iOS, une div devient une View, un paragraphe un composant Text etc… Le JSX peut aussi etre utilisé par une phase de transpilage, de même que n’importe quel module npm qui ne dépend pas du navigateur.

jimmyneutron

Le workflow de dev mobile devient celui du web, sans temps de compilation, avec la puissance et la simplicité de React.

Comment ça marche ?

Le système tire partie des processeurs multi-coeurs en mettant en place un moteur javascript en arrière plan. Celui ci va communiquer avec le thread principal de manière asynchrone, évitant ainsi de gêner le rendu graphique. Pour chaque plateforme un serveur permet de transformer les appels issus de React vers les composants natifs.

HTML5 and CSS3

Pour le style, pas de navigateur, pas de CSS. Toutes les bonnes pratiques largement éprouvées sont mises à rude épreuve puisque le style est donné aux composants directement en ligne et en javascript. Ils ont en fait réécrit une implémentation minimal du css en javascript. A noter le choix de flexbox pour les problématiques de layout.

Peut on l’utiliser ?

Très bientot oui. React Native sera open source, mais le projet est encore très jeune. Le code source devrait être publié d’ici peu, en attendant vous pouvez jetter un oeil à la réécriture de flexbox .

En savoir plus ?

Voici les vidéos d’ouverture et de présentation de React Native

Notes:
1. React a été créé au départ par l’équipe travaillant sur les systèmes de publicité de facebook
React a été créé au départ par l’équipe travaillant sur les systèmes de publicité de facebook

9 Comments

  • Répondre Cyril Moreau |

    ha je ne suis pas le seul à trouver que le logo de Jimmy Neutron == logo React :)
    CSS inline, le render dans le JS, comme tu dis les bonnes pratiques sont mises à rude épreuve

    • Répondre Sylvain Pollet |

      je dirais même qu’on piétine allègrement des années de bonnes pratiques, y compris pour React version web. Mais comme dirait twitter, « osef mate les benchs ! »

      • Répondre maxdow |

        Le pire c’est qu’à l’usage c’est pas si degueu que ça ! Sur un dev actuel je me suis posé la question du inline vs class . Mon seul soucis c’est la perf car c’est plus maintenable pour moi le inline avec React .
        En fait je dirais que dans une logique composant à la React c’est tout à fait viable. On va de toute façon voir émerger des bonnes pratiques pour les web components, et celles ci vont surement tacler certaines existantes pour les pages web standards.
        Le monde bouge :p

        • Répondre Cyril Moreau |

          c’est clair que le changement ça a du bon, c’est indéniable. Je pense que React est un merveilleux outil dans un contexte, mais pas dans un autre.
          Le plus compliqué c’est de savoir quand utiliser tel ou tel outil pour tel ou tel projet avec telle ou telle équipe.

          • maxdow |

            Exactement ! Tout comme les problématiques et la grogne actuelle autour d’AngularJS. D’où l’indispensable utilité de la veille techno ;)

    • Répondre tomsoft |

      Quoi que les « bonnes pratiques » ne sont pas toujours si bonnes que ca. Quand je vois que les gars s’évertuent a mettre le css dans des fichiers.css, le javascript dans du .js et le html dans le reste, on arrive a quelque chose avec un fort couplage dans le nommage des classes, des id, du binding dans tous les sens pour le javascript alors qu’il aurait été plus simple de mettre les chose de manière beaucoup plus « colocalisé ». C’est justement un des avantages de react

    • Répondre maxdow |

      Disons que ça va dans le sens de l’usage des technos web et du javascript hors du navigateur. Avec le support des 2 principaux OS mobiles ça devient clairement intéressant oui.

      • Répondre Xavier Carpentier |

        Oui, c’est intéressant comme technologie !

        En ce qui me concerne, je l’utilise pour des projets sérieux et dans ce cadre j’ai étudié son fonctionnement. Si ça intéresse quelqu’un, voici un article de retour d’expérience et d’explication de la technologie : http://bit.ly/newbie-reactnative

        D’ailleurs merci Maxlab pour l’article ! :)

So, what do you think ?