Von React zu React Native
Was kann schon schiefgehen?
Ruben Grimm
17.01.2019
Warum glaube ich über React Native reden zu können
Was könnte schiefgehen?
Was ist React Native?
From nothing to App
Der Einstieg in React Native
Der Einstieg in React Native
https://facebook.github.io/react-native/docs/getting-started
Der Einstieg in React Native
https://facebook.github.io/react-native/docs/getting-started
Der Einstieg in React Native
https://facebook.github.io/react-native/docs/getting-started
Does it still React?
React vs. RN
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>
);
}
}
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>
);
}
}
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>
);
}
}
What does the W3C say?
Webentwicklung vs. React Native
Webentwicklung vs. RN
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>
);
}
}
Webentwicklung vs. RN
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: {
// …
},
});
Webentwicklung vs. RN
/** 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>
);
}
}
Webentwicklung vs. RN
Quelle: https://speakerdeck.com/mkonicek/under-the-hood-of-react-native?slide=26
Webentwicklung vs. RN
Webentwicklung vs. RN
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>
);
}
}
Webentwicklung vs. RN
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>
);
}
}
Webentwicklung vs. RN
/** 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>
);
}
}
The browser
is a lie.
I want my browser back, browser back,
browser back
Webentwicklung vs. App-Entwicklung
Publishing
Navigation
Persistenz
Your developing applications, deal with it
Was haben wir gelernt?
Was haben wir gelernt?
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
Quellen
Airbnb Blogposts:
2 – https://medium.com/airbnb-engineering/react-native-at-airbnb-the-technology-dafd0b43838
3 – https://medium.com/airbnb-engineering/building-a-cross-platform-mobile-team-3e1837b40a88
4 – https://medium.com/airbnb-engineering/sunsetting-react-native-1868ba28e30a
React Native Interna:�https://speakerdeck.com/mkonicek/under-the-hood-of-react-native?slide=2
Browser Performance Optimierung beim Rendern von HTML/CSS:
https://hacks.mozilla.org/2017/08/inside-a-super-fast-css-engine-quantum-css-aka-stylo/
Vielen Dank
für eure Aufmerksamkeit!
Ruben Grimm
17.01.2019