1 of 31

Von React zu React Native

Was kann schon schiefgehen?

Ruben Grimm

17.01.2019

2 of 31

Warum glaube ich über React Native reden zu können

  • Zweitag Hackteams: Erste React Native Erfahrungen gesammelt
  • Zwei Kundenprojekte umgesetzt
    • Sowohl iOS als Android
  • Airbnb Blogbeiträge gelesen

3 of 31

Was könnte schiefgehen?

  • Einstieg in React Native
  • React vs. React Native
  • Webentwicklung vs. native Entwicklung (mit RN)
  • Webentwicklung vs. App-Entwicklung

4 of 31

Was ist React Native?

  • Framework zu Entwicklung von nativen iOS / Android Apps in JS
  • 2015 von Facebook veröffentlicht
  • Basis: React
  • “Bridge” zwischen nativem Code und JS
  • Keine WebView

https://facebook.github.io/react-native

5 of 31

From nothing to App

Der Einstieg in React Native

6 of 31

Der Einstieg in React Native

  • Jeder gute Einstieg braucht ein gutes “Getting Started”
  • Einfacher Weg: expo init MyApp
    • Sehr schnell nutzbare App
    • Stellt den nativen Teil von RN in einer eigenen App bereit

https://facebook.github.io/react-native/docs/getting-started

https://expo.io/

7 of 31

Der Einstieg in React Native

  • Jeder gute Einstieg braucht ein gutes “Getting Started”
  • Nativer Weg:
    • Für produktive Apps empfohlen
    • Expo Apps können “ejected” werden

https://facebook.github.io/react-native/docs/getting-started

8 of 31

Der Einstieg in React Native

  • Ordnerstruktur (ohne Expo)
  • index.js – Registrierung des JS Codes in der nativen Bridge
  • app/ – JS-App
  • android/ – Android Java Projekt
  • ios/ – XCode Projekt

https://facebook.github.io/react-native/docs/getting-started

9 of 31

Does it still React?

React vs. RN

10 of 31

React vs. React Native

import React from ‘react’;

import TweetCard from './TweetCard.js';

export default class TweetList extends React.Component {

render() {

return (

<ul className='tweet-list'>

{this.props.tweets.map(tweet =>

<li className='tweet-item'>

<TweetCard tweet={tweet} />

</li>

))}

</ul>

);

}

}

11 of 31

React vs. React Native

import React from ‘react’;

import TweetCard from './TweetCard.js';

export default class TweetList extends React.Component {

render() {

return (

<ul className='tweet-list'>

{this.props.tweets.map(tweet =>

<li className='tweet-item'>

<TweetCard tweet={tweet} />

</li>

))}

</ul>

);

}

}

import React from ‘react’;

import TweetCard from './TweetCard.js';

import { View, Text } from ‘react-native’;

import styles from ‘./TweetList.styles.js’;

export default class TweetList extends React.Component {

render() {

return (

<View style={styles.tweetList}>

{this.props.tweets.map(tweet => (

<View style={styles.tweetItem}>

<TweetCard tweet={tweet} />

</View>

))}

</View>

);

}

}

12 of 31

React vs. React Native

import React from ‘react’;

import TweetCard from './TweetCard.js';

export default class TweetList extends React.Component {

render() {

return (

<ul className='tweet-list'>

{this.props.tweets.map(tweet =>

<li className='tweet-item'>

<TweetCard tweet={tweet} />

</li>

))}

</ul>

);

}

}

import React from ‘react’;

import TweetCard from './TweetCard.js';

import { View, Text } from ‘react-native’;

import styles from ‘./TweetList.styles.js’;

export default class TweetList extends React.Component {

render() {

return (

<View style={styles.tweetList}>

{this.props.tweets.map(tweet => (

<View style={styles.tweetItem}>

<TweetCard tweet={tweet} />

</View>

))}

</View>

);

}

}

13 of 31

What does the W3C say?

Webentwicklung vs. React Native

14 of 31

Webentwicklung vs. RN

  • kein HTML

import React from ‘react’;

import TweetCard from './TweetCard.js';

import { View, Text } from ‘react-native’;

import styles from ‘./TweetList.styles.js’;

export default class TweetList extends React.Component {

render() {

return (

<View style={styles.tweetList}>

{this.props.tweets.map(tweet => (

<View style={styles.tweetItem}>

<TweetCard tweet={tweet} />

</View>

))}

</View>

);

}

}

15 of 31

Webentwicklung vs. RN

  • kein CSS
    • Flexbox only
    • Nur ausgewählte Eigenschaften
    • (fast) keine Vererbung
  • Es müssen neue Patterns beim Zusammenspiel von Styles und Komponenten etabliert werden!

import { StyleSheet } from 'react-native';

export default const styles = Stylesheet.create({

tweetList: {

flex: 1,

flexDirection: 'justify-content',

paddingLeft: 10,

paddingRight; 10,

paddingTop: 10,

paddingBottom: 10,

},

tweetItem: {

// …

},

});

16 of 31

Webentwicklung vs. RN

  • kein CSS
    • Flexbox only
    • Nur ausgewählte Eigenschaften
    • (fast) keine Vererbung
  • Es müssen neue Patterns beim Zusammenspiel von Styles und Komponenten etabliert werden!

/** more imports **/

import spacingStyles from ‘./styles/spacing.js’;

import containerStyles from ‘./styles/container.js’;

export default class TweetList extends React.Component {

render() {

return (

<View style={[spacingStyles.smallSpacing, containerStyles.flexed]}>

{this.props.tweets.map(tweet => (

<View style={containerStyles.centered}>

<TweetCard tweet={tweet} />

</View>

))}

</View>

);

}

}

17 of 31

Webentwicklung vs. RN

Quelle: https://speakerdeck.com/mkonicek/under-the-hood-of-react-native?slide=26

18 of 31

Webentwicklung vs. RN

  • Kommunikation über Bridge verläuft asynchron
  • Beispiel: Clipboard.getString()
    • JS reiht Befehl ein
    • Native holt Befehl�Native bearbeitet Befehl�Native reiht Antwort ein
    • JS holt Antwort

19 of 31

Webentwicklung vs. RN

  • Was bedeutet render?
    • String Konkatenation zu HTML (deklarativ)
    • Übergabe an den Browser
    • Sehr viel Optimierung möglich

import React from ‘react’;

import TweetCard from './TweetCard.js';

export default class TweetList extends React.Component {

render() {

return (

<ul className='tweet-list'>

{this.props.tweets.map(tweet =>

<li className='tweet-item'>

<TweetCard tweet={tweet} />

</li>

))}

</ul>

);

}

}

20 of 31

Webentwicklung vs. RN

  • Was bedeutet render?
    • render durchläuft den selben asynchronen Zyklus
    • Umwandlung in Anweisungen (imperativ)
    • Wenig Optimierung auf nativer Seite möglich

import React from ‘react’;

import TweetCard from './TweetCard.js';

import { View, Text } from ‘react-native’;

import styles from ‘./TweetList.styles.js’;

export default class TweetList extends React.Component {

render() {

return (

<View style={styles.tweetList}>

{this.props.tweets.map(tweet => (

<View style={styles.tweetItem}>

<TweetCard tweet={tweet} />

</View>

))}

</View>

);

}

}

21 of 31

Webentwicklung vs. RN

  • FlatList will das Problem lösen
    • Elemente rendern beim scrollen
    • Benachrichtigung über aktuellen Viewport verläuft asynchron
    • Problem: Leerzeilen beim Scrollen

/** imports **/

export default class TweetList extends React.Component {

render() {

return (

<View style={styles.tweetList}>

<FlatList

data={this.props.tweets}

renderItem={tweet => (

<View style={styles.tweetItem}>

<TweetCard tweet={tweet} />

</View>

)}

/>

</View>

);

}

}

22 of 31

The browser

is a lie.

23 of 31

I want my browser back, browser back,

browser back

Webentwicklung vs. App-Entwicklung

24 of 31

Publishing

  • Könnte man mehrere eigene Vorträge zu halten
  • Unterschätzt den Aufwand nicht!
  • Tipp: fastlane
    • Automatisiertes Publishing
    • Zertifikatsverwaltung für iOS
    • Jede menge Erweiterungen

https://fastlane.tools/

25 of 31

Navigation

  • Stack Navigation vs. Link Navigation
    • Umliegende Navigatoren als Grundstruktur
    • Verlangt neue Patterns
  • React Navigation
    • Inzwischen sehr gute Dokumentation

https://reactnavigation.org

26 of 31

Persistenz

  • Versionierung
    • Welche Version hat der Anwender installiert?
  • State
    • Welcher State ist persitiert?
    • Veränderungen am (persistenten) State für jeden Anwender passend migrieren

27 of 31

Your developing applications, deal with it

Was haben wir gelernt?

28 of 31

Was haben wir gelernt?

  • Einstieg in React Native
    • Easy Peasy!
  • React vs. React Native
    • Easy Peasy!
  • Webentwicklung vs. native Entwicklung (mit RN)
    • Ich will meinen Browser zurück.
    • Was ist dieses C?
  • Webentwicklung vs. App-Entwicklung
    • Kommen wir nicht drum herum.

29 of 31

Was haben wir gelernt?

React Native ermöglicht uns durch die gleiche Codebasis die parallele Entwicklung für iOS und Android. Während ein großer Teil des UIs für beide Plattformen identisch ausgeliefert wurde, konnten ohne viel Aufwand auch Plattform-spezifische Elemente umgesetzt werden.

– zweitag.de

30 of 31

Quellen

31 of 31

Vielen Dank

für eure Aufmerksamkeit!

Ruben Grimm

17.01.2019