Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
React Native — Webnesday #9
Search
Robert Vogt
November 09, 2016
Programming
1
360
React Native — Webnesday #9
Slides for my talk about React Native at Webnesday #9 in St. Gallen.
Robert Vogt
November 09, 2016
Tweet
Share
More Decks by Robert Vogt
See All by Robert Vogt
JavaScript - From DHTML to a Multi-Paradigm Language
deniaz
0
330
Hands On: React Native
deniaz
0
300
ADR Lightning Talk
deniaz
0
320
Other Decks in Programming
See All in Programming
Ruby製社内ツールのGo移行
bgpat
2
270
品質とスピードを両立: TypeScriptの柔軟な型システムをバックエンドで活用する
kosui
5
1.2k
The Future of C++ Interoperability: Insights from Porting a Game to Swift
teamhimeh
0
290
導入から5年が経って見えた Datadog APM 運用の課題
bgpat
2
540
incrementalモデルの理解を深める
ikkimiyazaki
2
640
オブジェクト指向のリ・オリエンテーション~歴史を振り返り、AI時代に向きなおる~
hanyudaeiiti
2
250
自作ソフト(VMagicMirror)がVRMA対応してる話+実装のTips
bakudreameater
0
110
IntelliJ IDEA を知らなかった 自分に教えたい小ネタ集 / IntelliJ IDEA Hints for My Past Self
mackey0225
3
180
Laravel OpenAPIによる"辛くない"スキーマ駆動開発
kentaroutakeda
2
2.1k
Dockerで始めるAWS Lambda開発
stutkhd0709
14
2.5k
PHP8の機能を使って堅牢にコードを書く
fendo181
6
2.6k
OpenAPI を守るのは難しい
ohmori_yusuke
2
150
Featured
See All Featured
jQuery: Nuts, Bolts and Bling
dougneiner
57
7.1k
How to Ace a Technical Interview
jacobian
272
22k
Designing on Purpose - Digital PM Summit 2013
jponch
109
6.4k
The Cost Of JavaScript in 2023
addyosmani
13
3.7k
A Modern Web Designer's Workflow
chriscoyier
689
190k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
28
5.9k
In The Pink: A Labor of Love
frogandcode
137
21k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
39
4.3k
Writing Fast Ruby
sferik
619
59k
The World Runs on Bad Software
bkeepers
PRO
60
6.6k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
67
38k
Building a Scalable Design System with Sketch
lauravandoore
455
32k
Transcript
React Native React Native #webnesday — November 2016
Robert Vogt Robert Vogt Software Engineer at smartive.ch @_deniaz
1. History 2. React 3. React Native 4. Live Example
None
$str = '<ul>'; foreach ($talks as $talk) { $str +=
'<li>' . $talk->name . '</ li>'; } $str += '</ul>'; 1. Facebook in 2004 (PHP)
None
$content = <ul />; foreach ($talks as $talk) { $content->appendChild(<li>{$talk-
>name} />); } 2. Facebook in 2010 (XHP)
$talkList = <TalkList />; foreach ($talks as $talk) { $talkList->appendChild(<Talk
talk={$talk} />); } 3. Facebook in 2010 (XHP)
«Welp, I’m going to take XHP to the browser within
six months.» — Jordan Walke, Facebook / ReactJS
None
var content = ( <TalkList>{talks.map(talk => <Talk talk={talk} /> )}
</TalkList> ); 4. Facebook in 2013 (ReactJS)
UI = f (data)
function f(name) { var div = document.createElement('div'); var p =
document.createElement('p'); p.textContent = 'Hello ' + name ? name : 'World'; div.appendChild(p); return div; } var node = f('Webnesday'); document.getElementById('my- app').replaceWith(node);
None
$(document).on('message.new', (e, data) => { let $msg = $('.messages'); $msg.prepend(`<li>New:
${data.message}</li>`); }); 1. jQuery (Imperative)
$(document).on('message.new', () => { let $count = $('.notifications__count'); let currentCount
= parseInt($count.text(), 10); $count.text(++currentCount); }); 2. jQuery (Imperative)
const state = { unread: 1, messages: [{ id: 43,
body: 'Hallo!', sender: 'Alice' }, { id: 42, body: 'Hoi :)', sender: 'Bob' }] }; 1. ReactJS (Declarative)
class TalkList extends React.Component { render () { return (
<ul className='talk-list'> {props.messages.map((message) => ( <li>{message.sender} says: {message.body}</li> )} </ul> ); } } <TalkList messages={state.message} /> 2. ReactJS (Declarative)
class Counter extends React.Component { render () { const {
count } = this.props; return ( <span className='counter'>{count}</span> ); } } <Counter count={state.unread} /> 3. ReactJS (Declarative)
const state = { unread: 2, messages: [{ id: 44,
body: 'Wie gehts!', sender: 'Alice' }, { id: 43, body: 'Hallo!', sender: Alice' }] }; 4. ReactJS (Declarative)
«It turns out, ‘good enough’ wasn’t good enough.» — Mark
Zuckerberg, 2012
react-dom (DOM) react www.smartive.ch
react-native (UIKit) react smartive App
class Hello extends React.Component { constructor(props) { super(props); this.state =
{ name: 'World' }; } render() { return ( <div className="hello"> <input ref={(c) => this._input = c} type="text" placeholder="Your Name" onChange={() => this.setState({ name: this._input.value })} /> <p>Hello {this.state.name}!</p> </div> ); } }
class Hello extends React.Component { constructor(props) { super(props); this.state =
{ name: 'World' }; } render() { return ( <View> <TextInput ref={(c) => this._input = c} placeholder="Your Name" onChange={() => this.setState({ name: this._input.value })} /> <Text>Hello {this.state.name}!</Text> </View> ); } }
<Button title="My Button" onPress={onButtonPressed} />
Components ActivityIndicator Button DatePickerIOS DrawerLayoutAndroid Image ListView MapView Modal Navigator
Picker ProgressBarAndroid ProgressViewIOS RefreshControl ScrollView Slider SnapshotViewIOS StatusBar Switch TabBarIOS Text TextInput TouchableHighlight TouchableNativeFeedback TouchableOpacity TouchableWithoutFeedback View WebView APIS Alert Animated AppState AsyncStorage BackAndroid CameraRoll Clipboard Dimensions Geolocation ImageEditor ImageStore Keyboard Linking NetInfo PanResponder PushNotificationIOS Settings StyleSheet ToastAndroid Vibration
React Native Community Quality code from the React Native Community
github.com/react-native-community react-native-svg react-native-elements react-native-blur react-native-tab-view react-native-video react-native-navbar react-native-side-menu
JS Runtime React Native JS API Custom App Code Android
SDK Custom View Manager iOS SDK RN Bridge
Native Bridge JavaScript 1 2 3 4 5 6 8
7 Event (touch, timer, networks, …) Collect data and notify JS Serialized payload Process event Call native methods Update UI if needed Process commands Serialized response
None
$ brew install node $ brew install watchman $ npm
install -g react-native Xcode AND/OR Gradle + Android Emulator
! A Word Of Warning Fun on OS X macOS,
not so much on Linux / Windows.
.babelrc android index.android.j s index.ios.js ios node_modules package.json src !""
app.js $ react-native init WebnesdayApp $ cd WebnesdayApp $ react-native run-ios
None
Cheers Cheers @_deniaz