web

moBiLE

~20min

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

Angular

Cordova

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

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

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

IONIC

REACT NATIVE

react.parts / JS.coach

Hybride

cordova

iOS or Android

WebView (UIWebView/Chromium)

JavaScript/HTML/CSS app

App native

API/Plugins natifs

Interfaces

react native

iOS or Android

JavaScriptCore

React Native

provided by iOS, embedded on Android

your JavaScript app

Components

APIs

React Native JS components

Natif