Expo.io

Dans mon précédent article, j'expliquais comment je démarrais un projet React-Native classique. Il existe une nouvelle façon de créer une application avec "Create React Native App" et Expo.io.

Create React Native App (CRNA):

source : https://facebook.github.io/react-native/blog/2017/03/13/introducing-create-react-native-app.html

$ npm i -g create-react-native-app 
$ create-react-native-app my-project 
$ cd my-project 
$ npm start

Voici les fichier que l'on obtient après une installation (yarn) :

On remarque qu'on ne voit plus les dossiers "android" et "ios" et  les fichiers "index.android.js" et "index.ios.js". En effet, CRNA utilise expo.io

Contenu du fichier App.js

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text>Open up App.js to start working on your app!</Text>
        <Text>Changes you make will automatically reload.</Text>
        <Text>Shake your phone to open the developer menu.</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

 

Expo

Expo.io est un outil qui va nous permettre de développer une app avec React-Native et de se passer de XCode ou d'Android Studio.

En effet expo fournit un sdk qui permet d'accéder au API native. Il fournit aussi un ensemble de service pour développer ses apps facilement.

On remarque qu'ici on fait abstraction de la plateforme de développement (ios ou android) ce qui rend ce projet plus "portable" qu'avec l'ancienne méthode. On a donc un projet pure JS.

source : https://docs.expo.io/versions/v17.0.0/index.html

On peut directement passer par la CLI d'expo : (il existe aussi une version interface graphique téléchargeable)

$ npm install exp --global
$ exp init myprojectname

liste des commandes exp : https://docs.expo.io/versions/v15.0.0/guides/exp-cli.html

On aura alors un nouveau projet "blank" :

On remarque l'ajout d'un dossier "assets" et d'un simple fichier main.js

Contenu de mains.js

import Expo from 'expo';
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text>Open up main.js to start working on your app!</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

Expo.registerRootComponent(App);

La seule vraie différence avec CRNA c'est cette dernière ligne: Expo.registerRootComponent(App);

Quick start :

$ expo init myprojectname
$ expo start

La commande exp start lance un serveur et va exposer votre app sur 3 canaux (tunnel, localhost ou lan)

De la même manière on peut passer par l'interface graphique pour lancer un serveur :

Lorsque le serveur tourne vous pouvez alors lancer un emulateur ou l'app sur votre device. Soit en usb, soit via votre réseau :

• Tunnel (+ lent mais devrait fonctionner a tous les coups)
• Lan (votre device est sur le meme réseau que votre serveur)
• Localhost (USB ou emulateur local uniquement)

Expo pour quoi faire ?

Expo est un ensemble d'outil qui vont permettre de faciliter le développement d'application avec React Native. Il permet :

• le développement local (sans xCode ou Android studio) avec un serveur Expo
• le développement local avec déploiement distant (via l'application Expo sur Android/iOS) (similaire à Ionic)
• la publication/déploiement en production

Comment ça marche ?

source : https://docs.expo.io/versions/v17.0.0/guides/how-expo-works.html

Lorsque l'on démarre un projet expo (sous XDE ou via la CLI), deux process serveur sont lancés :

• Expo Developement Server
• React Native Packager Server

Expo Developement Server :

Permet la communication entre XDE UI (ou CLI) et  l'app expo sur votre mobile ou simulator. Il fournit le manifest de l'app (config de l'app)

React Native Packager Server :

Si on lance directement un react-native start, expo se lancera alors pour vous et se "pipe" sur la sortie stdout (votre terminal). Il fait deux choses :

• il transpile du code JSX en code JS le tout en un seul fichier.
• il fournit les assets (images)

 

Conclusion

Expo est un ensemble d'outils qui facilite le développement d'application React-Native. Il inclu des éléments supplémentaires à React-Native qu'il va falloir que j'explore.

Cet outil est prometteur. A voir dans le temps.