Cocoaheads 19 oct 2017 Montpellier

1. Backelite – Digital Service Design by Capgemini
React Native
Développez vos applications native en JS
1

2. Backelite – Digital Service Design by Capgemini
Vos intervenants
Nicolas Fontaine
Backelite
iOS & Web developer
Yann Duval
Backelite
Web & Android developer
2

3. Backelite – Digital Service Design by Capgemini
Sommaire
1. Origine
2. Principes
3. React component
● Component APi
● Lifecycle API
4. Styling
5. Communautée
6. Démonstration
3

4. Backelite – Digital Service Design by Capgemini
Origine
● 2011 React
“Learn once, write everywhere”
Jordan Walke, software engineer at Facebook
● début 2015 React Native iOS
○ Utilisation de React pour créer une couche
d’abstraction pour faire du natif
○ L’expérience utilisateur du natif combiné à
l’expérience développeur du web
● septembre 2015 RN Android
● 2016 RN Universal Windows Platform
4

5. Backelite – Digital Service Design by Capgemini
Ils utilisent React Native
5

6. Principes
6

7. Backelite – Digital Service Design by Capgemini
À l’exécution, 3 threads coexistent :
● Thread JS
○ Logique métier
○ Asynchrone
○ Écouté une fois toutes les 1/60s par le UI
Thread
● Thread UI
○ Dimensionnement
○ Dessin des composants
● Native Modules Thread
○ Tous les composants graphiques,
services existent sous forme de module
appelable par le JS
Architecture
● Repose sur un moteur JS embarqué :
JavaScriptCore (Safari)*
● * Exception du debugging via Chrome, le
navigateur Chrome du PC exécute tout le JS
(Donc V8 est utilisé)
7

8. Backelite – Digital Service Design by Capgemini
Fonctionnement
Développement
● React Native Packager Server
○ Transforme la syntaxe du code source en
un seul fichier JS compatible avec le
moteur JS
○ Met à disposition les ressources. Ex :
images à la bonne densité
Production
● Encapsule dans un .ipa ou .apk :
○ Le code JS
○ Les ressources
○ Le JavaScriptCore
8

9. React Component
9

10. Backelite – Digital Service Design by Capgemini
import React from 'react';
import { Text, AppRegistry } from
'react-native';
class HelloWorldApp extends React.Component {
render() {
return (
<Text>Hello world!</Text>
);
}
}
AppRegistry.registerComponent(
'MyProject',
() => HelloWorldApp
);
Component
● Une app = un arbre de Component imbriqués
● Architecture React / Composants React
Native
● JavaScript Syntax Transformers
○ Babel pour utiliser les nouvelles
normes
○ ECMA 2015 (alias ES6)
■ import, export
■ class
■ () => {}
○ JSX
<Text>Michu</Text>
Devient
React.createElement(Text, {}, 'Michu');
○ Flow
10

11. Backelite – Digital Service Design by Capgemini
Component API
this.props
● Définit à l’instanciation par le parent
● Sert à définir une propriété variable d’un
composant à un autre
● Immuable
this.state
● Initialisé dans le constructeur
● Unique source de vérité de l’état d’un composant
● setState()
● Redux : défini un state partagé par plusieurs
composants
11

12. Backelite – Digital Service Design by Capgemini
Lifecycle API
Mounting Cycle
● constructor(object props)
● componentWillMount()
● render() -> React Element
● componentDidMount()
Updating Cycle
● componentWillReceiveProps(object nextProps)
● shouldComponentUpdate(
object nextProps,
object nextState
) -> boolean
● componentWillUpdate(object nextProps, object nextState)
● render() -> React Element
● componentDidUpdate(object prevProps, object prevState)
12

13. Styling
13

14. Backelite – Digital Service Design by Capgemini
class StepBubble extends React.Component {
render() {
return (
<View style={styles.container} >
<Text style={styles.stepNumber} >1</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
backgroundColor: '#6aa84f',
width: 40,
height: 40,
borderRadius: 20,
alignItems: 'center',
justifyContent: 'center'
},
stepNumber : {
color: 'white',
fontSize: 20,
}
});
Styling
● StyleSheet : Similaire à CSS (abstraction)
● CamelCase keys
○ margin-top => marginTop
● Unité = point
● CSS enhancements
○ paddingHorizontal : 5
● Flexbox : Difficile à appréhender mais très
efficace pour composer ses écrans.
14
1

15. Backelite – Digital Service Design by Capgemini
Styling - Flexbox, les bases
15
● Flex: x (ex : 1)
● flexDirection:
● justifyContent: Alignement dans l’axe défini par ’flexDirection’
○ ’space-between’
○ ’space-around’
○ ’center’
○ …
● alignItems: Alignement dans l’axe secondaire
○ ’flex-start’
○ ’center’
○ ’flex-end’
○ ...
column row

16. Backelite – Digital Service Design by Capgemini
Styling
16
Flexbox, les bases :

17. Communauté
17

18. Backelite – Digital Service Design by Capgemini
Communauté
18
● Facebook met à jour react-native très régulièrement...
...de nombreuses pull-request sont ajoutées chaque jour.
● De très nombreuses librairies déjà disponibles
cf annexe de cette présentation
● Intérêt grandissant des développeurs et entreprises
● Support de nombreuses librairies JS non dédiées à React.Native

19. Backelite – Digital Service Design by Capgemini
Démonstration
19
https://github.com/Heidan34/react-native-cocoaheads

20. Backelite – Digital Service Design by Capgemini
Bon à savoir
● Live debug
● Hot reload
● Screen inspection
● Expo (pure-JS)
● Snack Expo
● Platform.OS === 'ios'
● Bridge iOS et bridge Android
● Flow
20

21. Questions ?
21

22. Souhaitez-vous une seconde partie ?
Quels sujets vous intéressent ?
● Déployez vos applications React.Native (de expo à xcode / android studio)
● Créer un composant React.Native avec du code natif.
● Ajouter du React.Native dans une application existante
● Architecturer un projet React.Native
● Redux
22

23. Backelite – Digital Service Design by Capgemini
Liens
● Site web officiel
● Liste de librairies RN avec évaluation de leur
qualité
● Expo : environnement de développement RN
● Flow : static type checker
● Applications qui utilisent RN
● Les Flexbox web
● Public Api -> Studio Ghibli
23