web
AU
moBiLE
~20min
DU
Les technos multiplateformes qui changent les standards en 2016
![](https://s3.amazonaws.com/media-p.slid.es/uploads/436673/images/2148143/iphone6plus_gold_portrait.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/436673/images/2618372/appstore_badge.png)
qui sommes-nous
Florian Rival
![](https://s3.amazonaws.com/media-p.slid.es/uploads/436673/images/2148610/bam_logo.png)
@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
![](https://s3.amazonaws.com/media-p.slid.es/uploads/436673/images/2665655/Ionic_Logo.svg.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/436673/images/2146574/react-logo.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/355309/images/2680037/F7.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/355309/images/2680040/NativeScript.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/355309/images/2680052/fuse.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/355309/images/2680078/app-ptr-sencha_copy.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/355309/images/2680083/famous-logo-splash.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/355309/images/2680081/appc-axway-logo-stacked_copy.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/355309/images/2680093/kendo-logo_copy.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/436673/images/2730648/xamagon.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/436673/images/2665655/Ionic_Logo.svg.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/436673/images/2146574/react-logo.png)
Open Source
Communauté importante
Javascript
Structure "HTML"
Styling "CSS"
![](https://s3.amazonaws.com/media-p.slid.es/uploads/436673/images/2148143/iphone6plus_gold_portrait.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/436673/images/2148143/iphone6plus_gold_portrait.png)
WebView
JavaScript app
Chrome/
UIWebView
JavaScript app
JSCore
App with native components
les deux approches
![](https://s3.amazonaws.com/media-p.slid.es/uploads/436673/images/2665655/Ionic_Logo.svg.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/436673/images/2146574/react-logo.png)
Ionic
![](https://s3.amazonaws.com/media-p.slid.es/uploads/436673/images/2665655/Ionic_Logo.svg.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/355309/images/2680550/screenshot_4.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/355309/images/2680119/ionic.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/355309/images/2705627/Snip20160603_7.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/355309/images/2705629/Snip20160603_6.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/355309/images/2666105/AngularJS-Shield-huge.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/436673/images/2665655/Ionic_Logo.svg.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/355309/images/1750982/cordova_256.png)
Ionic
Angular
Cordova
+
+
Ionic 2
![](https://s3.amazonaws.com/media-p.slid.es/uploads/436673/images/2665655/Ionic_Logo.svg.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/355309/images/2666105/AngularJS-Shield-huge.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/436673/images/2665655/Ionic_Logo.svg.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/355309/images/1750982/cordova_256.png)
Ionic 2
Angular 2
Cordova
+
+
![](https://s3.amazonaws.com/media-p.slid.es/uploads/355309/images/2680542/ts.png)
Typescript
+
![](https://s3.amazonaws.com/media-p.slid.es/uploads/355309/images/2680550/screenshot_4.png)
Ionic 2
![](https://s3.amazonaws.com/media-p.slid.es/uploads/436673/images/2665655/Ionic_Logo.svg.png)
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;
![](https://s3.amazonaws.com/media-p.slid.es/uploads/355309/images/2707460/ios.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/355309/images/2707459/wphone.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/355309/images/2707458/android.png)
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
![](https://s3.amazonaws.com/media-p.slid.es/uploads/436673/images/2146574/react-logo.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/436673/images/2146574/react-logo.png)
Native
React
JSCore
+
+
![](https://s3.amazonaws.com/media-p.slid.es/uploads/436673/images/2711026/framework_icon.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/436673/images/2711041/2000px-Apple_iOS_new.svg.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/436673/images/2711043/Android-Logo-png-as.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/436673/images/2724014/Screen_Shot_2016-06-08_at_17.37.40.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/436673/images/2724015/Screen_Shot_2016-06-08_at_17.37.55.png)
or
or
![](https://s3.amazonaws.com/media-p.slid.es/uploads/436673/images/2724046/os-windows8-xxl.png)
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
![](https://s3.amazonaws.com/media-p.slid.es/uploads/436673/images/2146574/react-logo.png)
<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
![](https://s3.amazonaws.com/media-p.slid.es/uploads/436673/images/2146574/react-logo.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/355309/images/2707459/wphone.png)
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
![](https://s3.amazonaws.com/media-p.slid.es/uploads/355309/images/2707460/ios.png)
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
![](https://s3.amazonaws.com/media-p.slid.es/uploads/436673/images/2665655/Ionic_Logo.svg.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/436673/images/2146574/react-logo.png)
🏆
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
![](https://s3.amazonaws.com/media-p.slid.es/uploads/436673/images/2167521/cordova_bot.png)
react native
iOS or Android
JavaScriptCore
React Native
provided by iOS, embedded on Android
your JavaScript app
Components
APIs
React Native JS components
![](https://s3.amazonaws.com/media-p.slid.es/uploads/436673/images/2146574/react-logo.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/436673/images/2146574/react-logo.png)
Natif
JS
![](https://s3.amazonaws.com/media-p.slid.es/uploads/436673/images/2146574/react-logo.png)
Du Web au Mobile
By Florian Rival
Du Web au Mobile
[Best of Web 2016 - Paris]
- 2,932