web
AU
moBiLE
~20min
DU
Les technos multiplateformes qui changent les standards en 2016
qui sommes-nous
Florian Rival
@yleflour
yleflour
Architectes-développeurs @
yann leflour
@florianrival
4ian
@bam_lab
bamlab
Pourquoi ne pas faire d'app?
Visiteurs uniques par mois
8.9M
3.3M
App
Web mobile
Comscore Mobile Metrics, US, age 18+, juin 2015
Pourquoi faire une app?
Temps moyen par visiteur par mois
10,9min
201,8 min
App
Web mobile
Comscore Mobile Metrics, US, age 18+, juin 2015
le mobile cross platforme
iOS, Android, Windows
Natif
Plateformes, langages et API spécifiques
Framework hybride
Javascript
Votre application, dans un langage commun
Les Frameworks
Open Source
Communauté importante
Javascript
Structure "HTML"
Styling "CSS"
WebView
JavaScript app
Chrome/
UIWebView
JavaScript app
JSCore
App with native components
les deux approches
Ionic
Ionic
Angular
Cordova
+
+
Ionic 2
Ionic 2
Angular 2
Cordova
+
+
Typescript
+
Ionic 2
composants Prêts à l'emploi
Personalisation simple
<button outline secondary (click)="this.onClick">
<ion-icon name="home"></ion-icon>
Home
</button>$colors: (
secondary: #387ef5,
);
$button-ios-border-radius: 4px;
$button-md-border-radius: 0px;
$button-wp-border-radius: 0px;
iOS
Android
Windows
Getting started
with ionic2
npm install -g ionic@beta
ionic start cutePuppyPics --v2
cd cutePuppyPics
ionic run android
ionic run ios🚀
preparez vos sdk
C'est parti pour ionic
Android SDK, XCode installé sur OS X
react native
Native
React
JSCore
+
+
or
or
export default class MyButton extends Component {
render() {
return (
<TouchableHighlight onPress={this.props.onClick}>
<Icon name="work" color={styles.color} style={styles.icon} />
<Text style={styles.text}>{this.props.text}</Text>
</TouchableHighlight>
);
}
}onClick() {
fetch('http://my/api').then((response) => {
Alert.alert(response.json())
});
}react native
<Button text="Work" onClick={this.onClick} />styles css LIKE
// appStyle.ios.js
export default {
buttonBorderRadius: 4,
}
// appStyle.android.js
export default {
buttonBorderRadius: 0,
}react native
import appStyle from './appStyle';
export default {
color: "#129fff",
icon: { padding: 10 },
container: {
flexDirection: 'row',
borderColor: "#129fff",
borderWidth: 1,
borderRadius: appStyle.buttonBorderRadius,
backgroundColor: "white",
}
}Fichiers Specifiques PAR OS
j
Getting started
with React Native
npm install -g react-native-cli && brew install watchman
react-native init MyProject
cd MyProject
react-native run-ios
react-native run-android🚀
preparez vos sdk
C'est parti pour react Native
Android SDK, XCode installé sur OS X
PerformanceS
🏆
Avant de vous laisser
HOT RELOAD
CODE PUSH
4 mots pour vous rendre amoureux de l'hybride
merci !
Des questions ?
:
)
Résumé
Ionic
+ Développement accéléré
+ Prêt à l'emploi
+ Robuste
+ Communauté
+ Développeurs réactifs
- Rendu Unique
- Attention aux performances
Ionic 2
+ Modules ES6
+ Gain en performances
+ Courbe d'apprentissage d' Angular 2
+ Rendu Natif (3 apps distinctes)
+ App instantanément belle
- Instable
- Communauté naissante
React Natif
+ Communauté
+ Performances
+ Flexibilité
+ Courbe d'apprentissage
- Instable
- Besoin de modules complémentaires
- Autant de boilerplates que de devs
L'Hybride
+ Une seule base de code pour plusieurs applications
+ "Business before device"
+ Déploiement court-circuité
+ Développement en temps réel
+ Moteur web harmonisé
- Performances du JS forcément < à celles du natif
- Accès au natif moins évident
A Découvrir
cordova
iOS or Android
WebView (UIWebView/Chromium)
JavaScript/HTML/CSS app
App native
API/Plugins natifs
Interfaces
JS
react native
iOS or Android
JavaScriptCore
React Native
provided by iOS, embedded on Android
your JavaScript app
Components
APIs
React Native JS components
Natif
JS
Du Web au Mobile
By Florian Rival
Du Web au Mobile
[Best of Web 2016 - Paris]
