Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
React Native
2017.3.9 DroidKaigi 2017
Yukiya Nakagawa / @Nkzn
ROOM 3 17:10-17:40
#droidkaigi3
Who are you?
• Yukiya Nakagawa / @Nkzn
• @
•
•
• Android 2009
React Native
•
• Hello World
• Production
Target
• Android / iOS
• React React Native
• React Native
Agenda
•
‣
‣ React
‣ React Native
•
‣ React Native
‣
‣
• React
• React Native
• React Native Before / After
• React (DOM)
• ES201x
• NPM
• React Native
Biz
Biz
• Android iOS
•
•
•
https://www.kantarworldpanel.com/global/smartphone-os-market-share/
•
•
• iOS Android
1
Android iOS
OS
UI
WebView Cordova Xamarin Unity
React
React
https://facebook.github.io/react/
•
• JSX
•
Reactive
JSX
<div>
<Header />
<LeftPane />
<RightPane />
</div>
React
import React from 'react';
import ReactDOM from 'react-dom';
const styles = {
container: {display: 'flex', flexDirection: ...
Virtual DOM
React DOM
React DOM
React DOM
React DOM
https://tylermcginnis.com/an-introduction-to-life-cycle-events-in-react-js/
https://developer.android.com/reference/android/app/Activity.html
React is
• Facebook JS
• https://facebook.github.io/react/
•
•
• View
View View
React Native
(Side React)
Android View
Android
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
...
Android View
<include layout=
“@layout/header”/>
android.view.View
<include layout=
“@layout/left_pane”/>
<include layout=...
• Fragment
•
• Advocating Against Android Fragments
• https://medium.com/square-corner-blog/advocating-against-
android-fr...
Android View
View
DOM
Android View
View
DOM
React is
• Facebook JS
• https://facebook.github.io/react/
•
•
• View
View View
React
DOM
import React from 'react';
import ReactDOM from 'react-dom';
const styles = {
container: {display: 'flex', flexDirection: ...
import React from "react";
import { View, AppRegistry } from "react-native";
const styles = {
container: {display: 'flex',...
React
ReactDOM
React
UI
React Native
React Native
(Side Android)
Android iOS
OS
UI
React Native
Android iOS
OS
UI
React Native Android
(Side UI Component)
ReactRootView
• FrameLayout
• onMeasure JavaScriptCore
JS JS
ReactRootView RootView
(ReactActivityDelegate.java)
protected ReactRootView createRootView() {
return new ReactRootView(ge...
Activity ReactRootView JS
View
View
<View style={styles.container}>
<Text style={styles.welcome}>
Welcome to React Native!
</Text>
<Text style={styles.in...
react.gradle
JS
: import
JS
$buildDir/intermediates/
assets/index.android.bundle
JS
React Native Android
(Side Native Module)
JS
UI
(Web API)
https://developer.mozilla.org/ja/docs/Web/Reference/API
/Libraries/Core/Timers/JSTimers.js
/ReactAndroid/src/main/java/com/facebook/react/modules/core/Timing.java
(※ )
Polyfill
https://facebook.github.io/react-native/docs/javascript-environment.html
• React View
• API
JS
• UI ReactRootView
UI
React Native
Android iOS
OS
UI
http://facebook.github.io/react-native/showcase.html
https://design.google.com/articles/airbnb/
React Native
Biz
• Android iOS
•
•
•
Facebook
JA
• iOS Cordova + React
Web
• 1 iOS/Android
• React
•
React Native
UI
CSS
• CSS
const styles = StyleSheet.create({
container: {
paddingTop: metrics.x4,
paddingBottom: metrics.x2
},
logo: {
height: 180,
...
<View
style={styles.container}>
…
</View>
CSS
• CSS
• CSS
• Bootstrap Material Design Lite
• CSS React
• OnsenUI material-ui
Android, iOS
Material Design
const metrics = {
x0_25: 2,
x0_5: 4,
x0_75: 6,
x1: 8,
x1_5: 12,
x2: 16,
x2_5: 20,
x3: 24,
x4: 32,
x5: 40,
...
• <Image>
•
• Android Picasso PhotoView
• iOS UIScrollView
JS
http://square.github.io/picasso/
https://github.com/chrisban...
React Native
HelloWorld
JS
• API
• lodash
• API
React Native
•
• API
orz
• VSCode JS
• Android/iOS
Android iOS
• JS R Live
Reload
• Android Studio Xcode
VSCode
Android
Studio
Xcode
Android
iOS
Live Reload
• JS
localhost
•
• Initial commit: 2 22
• v1.0.0 : 5 11
2
CI
•
• Android Java, Android SDK
• iOS OS X, Xcode, iOS SDK
• Fastlane CocoaPods Ruby
• mac mini
React Native
+ React
• Web View
React
• Learn Once, Write Anywhere
• React Native
•
React Native
• Breaking Change
Breaking Change
• React Native
•
React Native
• Breaking Change
•
•
• v2
2
React Native
React Native
React Native
• WebView React
• UI Native
Component/Module
• Android Java,
React Native
React
Android
!
React Nativeはクロスプラットフォームモバイルアプリ開発の夢を見るか #DroidKaigi
React Nativeはクロスプラットフォームモバイルアプリ開発の夢を見るか #DroidKaigi
React Nativeはクロスプラットフォームモバイルアプリ開発の夢を見るか #DroidKaigi
React Nativeはクロスプラットフォームモバイルアプリ開発の夢を見るか #DroidKaigi
React Nativeはクロスプラットフォームモバイルアプリ開発の夢を見るか #DroidKaigi
React Nativeはクロスプラットフォームモバイルアプリ開発の夢を見るか #DroidKaigi
React Nativeはクロスプラットフォームモバイルアプリ開発の夢を見るか #DroidKaigi
React Nativeはクロスプラットフォームモバイルアプリ開発の夢を見るか #DroidKaigi
React Nativeはクロスプラットフォームモバイルアプリ開発の夢を見るか #DroidKaigi
React Nativeはクロスプラットフォームモバイルアプリ開発の夢を見るか #DroidKaigi
React Nativeはクロスプラットフォームモバイルアプリ開発の夢を見るか #DroidKaigi
React Nativeはクロスプラットフォームモバイルアプリ開発の夢を見るか #DroidKaigi
React Nativeはクロスプラットフォームモバイルアプリ開発の夢を見るか #DroidKaigi
React Nativeはクロスプラットフォームモバイルアプリ開発の夢を見るか #DroidKaigi
React Nativeはクロスプラットフォームモバイルアプリ開発の夢を見るか #DroidKaigi
React Nativeはクロスプラットフォームモバイルアプリ開発の夢を見るか #DroidKaigi
React Nativeはクロスプラットフォームモバイルアプリ開発の夢を見るか #DroidKaigi
React Nativeはクロスプラットフォームモバイルアプリ開発の夢を見るか #DroidKaigi
React Nativeはクロスプラットフォームモバイルアプリ開発の夢を見るか #DroidKaigi
Upcoming SlideShare
Loading in …5
×

React Nativeはクロスプラットフォームモバイルアプリ開発の夢を見るか #DroidKaigi

21,550 views

Published on

DroidKaigi 2017の講演資料です

Published in: Technology
  • Hello! Get Your Professional Job-Winning Resume Here - Check our website! https://vk.cc/818RFv
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

React Nativeはクロスプラットフォームモバイルアプリ開発の夢を見るか #DroidKaigi

  1. 1. React Native 2017.3.9 DroidKaigi 2017 Yukiya Nakagawa / @Nkzn ROOM 3 17:10-17:40 #droidkaigi3
  2. 2. Who are you? • Yukiya Nakagawa / @Nkzn • @ • • • Android 2009
  3. 3. React Native
  4. 4. • • Hello World • Production
  5. 5. Target • Android / iOS • React React Native • React Native
  6. 6. Agenda • ‣ ‣ React ‣ React Native • ‣ React Native ‣ ‣
  7. 7. • React • React Native • React Native Before / After
  8. 8. • React (DOM) • ES201x • NPM • React Native
  9. 9. Biz
  10. 10. Biz • Android iOS • • •
  11. 11. https://www.kantarworldpanel.com/global/smartphone-os-market-share/
  12. 12. • • • iOS Android
  13. 13. 1
  14. 14. Android iOS OS UI WebView Cordova Xamarin Unity
  15. 15. React
  16. 16. React https://facebook.github.io/react/
  17. 17. • • JSX • Reactive
  18. 18. JSX
  19. 19. <div> <Header /> <LeftPane /> <RightPane /> </div>
  20. 20. React
  21. 21. import React from 'react'; import ReactDOM from 'react-dom'; const styles = { container: {display: 'flex', flexDirection: ‘row', …} }; class App extends React.Component { render() { const myName = /* props or state */; return ( <div style={styles.container}> <Header /> <LeftPane /> <RightPane name={myName} /> </div> ); } } ReactDOM.render( <App />, document.getElementById('app') );
  22. 22. Virtual DOM
  23. 23. React DOM
  24. 24. React DOM
  25. 25. React DOM
  26. 26. React DOM
  27. 27. https://tylermcginnis.com/an-introduction-to-life-cycle-events-in-react-js/
  28. 28. https://developer.android.com/reference/android/app/Activity.html
  29. 29. React is • Facebook JS • https://facebook.github.io/react/ • • • View View View
  30. 30. React Native (Side React)
  31. 31. Android View
  32. 32. Android <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" > <include layout="@layout/header" /> <include layout="@layout/left_pane" /> <include layout="@layout/right_pane" /> </RelativeLayout>
  33. 33. Android View <include layout= “@layout/header”/> android.view.View <include layout= “@layout/left_pane”/> <include layout= “@layout/right_pane”/>
  34. 34. • Fragment • • Advocating Against Android Fragments • https://medium.com/square-corner-blog/advocating-against- android-fragments-81fd0b462c97 • ( ) http://ninjinkun.hatenablog.com/entry/ 2014/10/16/234611
  35. 35. Android View
  36. 36. View DOM
  37. 37. Android View
  38. 38. View DOM
  39. 39. React is • Facebook JS • https://facebook.github.io/react/ • • • View View View
  40. 40. React DOM
  41. 41. import React from 'react'; import ReactDOM from 'react-dom'; const styles = { container: {display: 'flex', flexDirection: ‘row', …} }; class App extends React.Component { render() { const myName = /* props or state */; return ( <div style={styles.container}> <Header /> <LeftPane /> <RightPane name={myName} /> </div> ); } } ReactDOM.render( <App />, document.getElementById('app') ); import ReactDOM from 'react-dom'; div div ReactDOM.render( <App />, document.getElementById('app') );
  42. 42. import React from "react"; import { View, AppRegistry } from "react-native"; const styles = { container: {display: 'flex', flexDirection: ‘row', …} }; class App extends React.Component { render() { const myName = /* props or state */; return ( <View style={styles.container}> <Header /> <LeftPane /> <RightPane name={myName} /> </View> ); } } AppRegistry.registerComponent( "App", () => App );
  43. 43. React ReactDOM
  44. 44. React UI React Native
  45. 45. React Native (Side Android)
  46. 46. Android iOS OS UI
  47. 47. React Native Android iOS OS UI
  48. 48. React Native Android (Side UI Component)
  49. 49. ReactRootView • FrameLayout • onMeasure JavaScriptCore JS JS
  50. 50. ReactRootView RootView (ReactActivityDelegate.java) protected ReactRootView createRootView() { return new ReactRootView(getContext()); } // protected void onCreate(Bundle savedInstanceState) { // if (mMainComponentName != null && !needsOverlayPermission) { loadApp(mMainComponentName); } // } protected void loadApp(String appKey) { if (mReactRootView != null) { throw new IllegalStateException("Cannot loadApp while app is already running."); } mReactRootView = createRootView(); mReactRootView.startReactApplication( getReactNativeHost().getReactInstanceManager(), appKey, getLaunchOptions()); getPlainActivity().setContentView(mReactRootView); } https://github.com/facebook/react-native/blob/d21aa9248056b08449f4a0f57e824b3c52b0614b/ReactAndroid/src/main/java/com/facebook/react/ReactActivityDelegate.java#L67-L115
  51. 51. Activity ReactRootView JS
  52. 52. View
  53. 53. View <View style={styles.container}> <Text style={styles.welcome}> Welcome to React Native! </Text> <Text style={styles.instructions1}> To get started, edit index.android.js </Text> <Text style={styles.instructions2}> Shake or press menu button for dev menu </Text> </View>
  54. 54. react.gradle JS : import JS $buildDir/intermediates/ assets/index.android.bundle JS
  55. 55. React Native Android (Side Native Module)
  56. 56. JS UI
  57. 57. (Web API) https://developer.mozilla.org/ja/docs/Web/Reference/API
  58. 58. /Libraries/Core/Timers/JSTimers.js /ReactAndroid/src/main/java/com/facebook/react/modules/core/Timing.java (※ )
  59. 59. Polyfill https://facebook.github.io/react-native/docs/javascript-environment.html
  60. 60. • React View • API JS • UI ReactRootView UI
  61. 61. React Native Android iOS OS UI
  62. 62. http://facebook.github.io/react-native/showcase.html
  63. 63. https://design.google.com/articles/airbnb/
  64. 64. React Native
  65. 65. Biz • Android iOS • • •
  66. 66. Facebook JA
  67. 67. • iOS Cordova + React Web • 1 iOS/Android • React •
  68. 68. React Native
  69. 69. UI
  70. 70. CSS • CSS
  71. 71. const styles = StyleSheet.create({ container: { paddingTop: metrics.x4, paddingBottom: metrics.x2 }, logo: { height: 180, alignSelf: "center" }, loginBox: { marginTop: metrics.x4, marginHorizontal: metrics.x4 } });
  72. 72. <View style={styles.container}> … </View>
  73. 73. CSS • CSS • CSS • Bootstrap Material Design Lite • CSS React • OnsenUI material-ui
  74. 74. Android, iOS
  75. 75. Material Design const metrics = { x0_25: 2, x0_5: 4, x0_75: 6, x1: 8, x1_5: 12, x2: 16, x2_5: 20, x3: 24, x4: 32, x5: 40, x6: 48, x7: 56, x8: 64, x9: 72 }; export default metrics; metrics.android.js const metrics = { x0_25: 2, x0_5: 4, x0_75: 6, x1: 8, x1_5: 11, x2: 15, x2_5: 20, x3: 22, x4: 32, x5: 40, x6: 44, x7: 56, x8: 64, x9: 72 }; export default metrics; metrics.ios.js
  76. 76. • <Image> • • Android Picasso PhotoView • iOS UIScrollView JS http://square.github.io/picasso/ https://github.com/chrisbanes/PhotoView
  77. 77. React Native HelloWorld
  78. 78. JS • API • lodash
  79. 79. • API React Native • • API orz
  80. 80. • VSCode JS • Android/iOS Android iOS • JS R Live Reload • Android Studio Xcode
  81. 81. VSCode Android Studio Xcode Android iOS Live Reload
  82. 82. • JS localhost •
  83. 83. • Initial commit: 2 22 • v1.0.0 : 5 11
  84. 84. 2
  85. 85. CI • • Android Java, Android SDK • iOS OS X, Xcode, iOS SDK • Fastlane CocoaPods Ruby • mac mini
  86. 86. React Native
  87. 87. + React
  88. 88. • Web View React • Learn Once, Write Anywhere
  89. 89. • React Native • React Native • Breaking Change
  90. 90. Breaking Change
  91. 91. • React Native • React Native • Breaking Change
  92. 92. • • • v2 2
  93. 93. React Native
  94. 94. React Native
  95. 95. React Native
  96. 96. • WebView React • UI Native Component/Module • Android Java,
  97. 97. React Native
  98. 98. React Android
  99. 99. !

×