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.
A TOUR OF
React Native
@tadeuzagallo
ABOUT Me
@tadeuzagallo
@tadeuzagallo
TADEUZAGALLO.COM/BLOG
@tadeuzagallo
TADEUZAGALLO.COM/VERVE-LANG
@tadeuzagallo
Context
What is React Native?
Why did we build React Native?
@tadeuzagallo
WHAT IS React Native?
@tadeuzagallo
WHAT IS REACT NATIVE?
React Native lets you build mobile apps using only JavaScript. It uses
the same design as React, let...
WHY DID WE BUILD
React Native?
@tadeuzagallo
WHY DID WE BUILD
React?
@tadeuzagallo
IMPERATIVE vs DECLARATIVE
@tadeuzagallo
IMPERATIVE UI: DEFINE Transitions
DECLARATIVE UI: DEFINE States
@tadeuzagallo
IMPERATIVE UI: DEFINE TRANSITIONS
@tadeuzagallo
IMPERATIVE UI: DEFINE TRANSITIONS
@tadeuzagallo
IMPERATIVE UI: DEFINE TRANSITIONS
@tadeuzagallo
IMPERATIVE UI: DEFINE TRANSITIONS
@tadeuzagallo
IMPERATIVE UI: DEFINE TRANSITIONS
@tadeuzagallo
IMPERATIVE UI: DEFINE TRANSITIONS
@tadeuzagallo
IMPERATIVE UI: DEFINE TRANSITIONS
@tadeuzagallo
IMPERATIVE UI: DEFINE TRANSITIONS
@tadeuzagallo
3 STATES
9 TRANSITIONS
@tadeuzagallo
O(N2
)
@tadeuzagallo
if (count > 99) { // branch 1
if (!hasFire()) { // branch 2
addFire();
}
} else {
if (hasFire()) { // branch 3
removeFire(...
DECLARATIVE UI: DEFINE STATES
@tadeuzagallo
DECLARATIVE UI: DEFINE STATES
if (count === 0) { // state 1
return <Bell/>;
}
@tadeuzagallo
DECLARATIVE UI: DEFINE STATES
if (count === 0) { // state 1
return <Bell/>;
} else if(count <= 99) { // state 2
return (
<...
DECLARATIVE UI: DEFINE STATES
if (count === 0) { // state 1
return <Bell/>;
} else if(count <= 99) { // state 2
return (
<...
WHY DID WE BUILD
React Native?
@tadeuzagallo
@tadeuzagallo
@tadeuzagallo
WEB ➡ NATIVE
Open Standards ➡ Proprietary Platforms
Instant Distribution ➡ Distributing Binaries
Reload and Run ➡ Compile ...
➡ NATIVE ➡ REACT NATIVE
➡ Proprietary Platforms ➡ Open Source
➡ Distributing Binaries ➡ Instant Distribution
➡ Compile and...
➡ NATIVE ➡ REACT NATIVE
➡ Proprietary Platforms ➡ Open Source
➡ Distributing Binaries ➡ Instant Distribution
➡ Compile and...
HOW DOES
React Native
WORK?
@tadeuzagallo
import React, {
Component,
} from 'react';
import {
AppRegistry,
Text,
} from 'react-native';
class SampleApp extends Comp...
@tadeuzagallo
@tadeuzagallo
FAQ
▸ No WebView
▸ No HTML
▸ No CSS
▸ No compilation to Objective-C/Java/...
@tadeuzagallo
@tadeuzagallo
@tadeuzagallo
@tadeuzagallo
@tadeuzagallo
@tadeuzagallo
@implementation MyNativeModule
RCT_EXPORT_MODULE()
@end
@tadeuzagallo
@implementation MyNativeModule
+ (NSString *)moduleName { return @""; }
+ (void)load { RCTRegisterModule(self); }
@end
@ta...
@tadeuzagallo
@tadeuzagallo
{
"remoteModuleConfig":[
// [
// $moduleName : string,
// $exportedConstants? : { [key: string]: string },
// $methods? : ...
@tadeuzagallo
VM
Basics
@tadeuzagallo
@tadeuzagallo
@tadeuzagallo
@tadeuzagallo
@tadeuzagallo
@tadeuzagallo
// import React, {
// Component,
// } from 'react';
//
// import {
// AppRegistry,
// Text,
TouchableHighlight,
// } from ...
@tadeuzagallo
@tadeuzagallo
@tadeuzagallo
@tadeuzagallo
@tadeuzagallo
class SampleApp extends Component {
onPress() {
-> alert('Hello, World!');
}
...
}
@tadeuzagallo
if (Platform.OS === 'ios') {
AlertIOS.alert(title, message, buttons);
} else if (Platform.OS === 'android') {
AlertAndroid...
@tadeuzagallo
@tadeuzagallo
@tadeuzagallo
@tadeuzagallo
WHERE IS
React Native
RIGHT NOW?
@tadeuzagallo
@tadeuzagallo
First React Native App:
MOBILE ADS MANAGER
@tadeuzagallo
@tadeuzagallo
@tadeuzagallo
Same Team
85%OF CODE SHARED
3 months
@tadeuzagallo
React Native in the
FACEBOOK APP
@tadeuzagallo
@tadeuzagallo
@tadeuzagallo
@tadeuzagallo
@tadeuzagallo
@tadeuzagallo
@tadeuzagallo
React Native is
Open Source
GITHUB.COM/FACEBOOK/REACT-NATIVE
@tadeuzagallo
35,900+ 900+
STARS CONTRIBUTORS
@tadeuzagallo
We Use The
EXACT SAME VERSION
Internally
@tadeuzagallo
@tadeuzagallo
@tadeuzagallo
@tadeuzagallo
@tadeuzagallo
@tadeuzagallo
What Next?
@tadeuzagallo
Evolving the JS Platform
@tadeuzagallo
Evolving the JS Platform
@tadeuzagallo
Evolving the JS Platform
@tadeuzagallo
Evolving the JS Platform
@tadeuzagallo
Evolving the JS Platform
@tadeuzagallo
REACT: the horizontal platform
@tadeuzagallo
@tadeuzagallo
Thanks!
FACEBOOK.GITHUB.IO/REACT-NATIVE
GITHUB.COM/FACEBOOK/REACT-NATIVE
@tadeuzagallo
Upcoming SlideShare
Loading in …5
×

A tour of React Native

3,729 views

Published on

React Native is an open source framework by Facebook that enables software engineers to build world-class application experiences on native platforms using a consistent developer experience based on JavaScript and React. I'll talk about what React Native actually is (and what it isn't), how it works under the hood, and why it was designed like that.

Published in: Software
  • Be the first to comment

A tour of React Native

  1. 1. A TOUR OF React Native @tadeuzagallo
  2. 2. ABOUT Me @tadeuzagallo
  3. 3. @tadeuzagallo
  4. 4. TADEUZAGALLO.COM/BLOG @tadeuzagallo
  5. 5. TADEUZAGALLO.COM/VERVE-LANG @tadeuzagallo
  6. 6. Context What is React Native? Why did we build React Native? @tadeuzagallo
  7. 7. WHAT IS React Native? @tadeuzagallo
  8. 8. WHAT IS REACT NATIVE? React Native lets you build mobile apps using only JavaScript. It uses the same design as React, letting you compose a rich mobile UI from declarative components. — facebook.github.io/react-native @tadeuzagallo
  9. 9. WHY DID WE BUILD React Native? @tadeuzagallo
  10. 10. WHY DID WE BUILD React? @tadeuzagallo
  11. 11. IMPERATIVE vs DECLARATIVE @tadeuzagallo
  12. 12. IMPERATIVE UI: DEFINE Transitions DECLARATIVE UI: DEFINE States @tadeuzagallo
  13. 13. IMPERATIVE UI: DEFINE TRANSITIONS @tadeuzagallo
  14. 14. IMPERATIVE UI: DEFINE TRANSITIONS @tadeuzagallo
  15. 15. IMPERATIVE UI: DEFINE TRANSITIONS @tadeuzagallo
  16. 16. IMPERATIVE UI: DEFINE TRANSITIONS @tadeuzagallo
  17. 17. IMPERATIVE UI: DEFINE TRANSITIONS @tadeuzagallo
  18. 18. IMPERATIVE UI: DEFINE TRANSITIONS @tadeuzagallo
  19. 19. IMPERATIVE UI: DEFINE TRANSITIONS @tadeuzagallo
  20. 20. IMPERATIVE UI: DEFINE TRANSITIONS @tadeuzagallo
  21. 21. 3 STATES 9 TRANSITIONS @tadeuzagallo
  22. 22. O(N2 ) @tadeuzagallo
  23. 23. if (count > 99) { // branch 1 if (!hasFire()) { // branch 2 addFire(); } } else { if (hasFire()) { // branch 3 removeFire(); } } if (count === 0) { // branch 4 if (hasBadge()) { // branch 5 removeBadge(); } return; } if (!hasBadge()) { // branch 6 addBadge(); } var countText = count > 99 ? '99+' : count.toString(); // branch 7 getBadge().setText(countText); @tadeuzagallo
  24. 24. DECLARATIVE UI: DEFINE STATES @tadeuzagallo
  25. 25. DECLARATIVE UI: DEFINE STATES if (count === 0) { // state 1 return <Bell/>; } @tadeuzagallo
  26. 26. DECLARATIVE UI: DEFINE STATES if (count === 0) { // state 1 return <Bell/>; } else if(count <= 99) { // state 2 return ( <Bell> <Badge count={count}/> </Bell> ); } @tadeuzagallo
  27. 27. DECLARATIVE UI: DEFINE STATES if (count === 0) { // state 1 return <Bell/>; } else if(count <= 99) { // state 2 return ( <Bell> <Badge count={count}></Badge> </Bell> ); } else { // state 3 return ( <Bell style={styles.onFire}> <Badge count="99+"/> </Bell> ); } @tadeuzagallo
  28. 28. WHY DID WE BUILD React Native? @tadeuzagallo
  29. 29. @tadeuzagallo
  30. 30. @tadeuzagallo
  31. 31. WEB ➡ NATIVE Open Standards ➡ Proprietary Platforms Instant Distribution ➡ Distributing Binaries Reload and Run ➡ Compile and Wait Product Teams ➡ Platform-aware Teams @tadeuzagallo
  32. 32. ➡ NATIVE ➡ REACT NATIVE ➡ Proprietary Platforms ➡ Open Source ➡ Distributing Binaries ➡ Instant Distribution ➡ Compile and Wait ➡ Reload and Run ➡ Platform-aware Teams ➡ Unified Teams @tadeuzagallo
  33. 33. ➡ NATIVE ➡ REACT NATIVE ➡ Proprietary Platforms ➡ Open Source ➡ Distributing Binaries ➡ Instant Distribution ➡ Compile and Wait ➡ Reload and Run ➡ Platform-aware Teams ➡ Unified Teams ➡ Imperative APIs ➡ Declarative APIs @tadeuzagallo
  34. 34. HOW DOES React Native WORK? @tadeuzagallo
  35. 35. import React, { Component, } from 'react'; import { AppRegistry, Text, } from 'react-native'; class SampleApp extends Component { render() { return ( <Text style={{ margin: 40 }}> Hello, World! </Text> ); } } AppRegistry.registerComponent('SampleApp', () => SampleApp); @tadeuzagallo
  36. 36. @tadeuzagallo
  37. 37. @tadeuzagallo
  38. 38. FAQ ▸ No WebView ▸ No HTML ▸ No CSS ▸ No compilation to Objective-C/Java/... @tadeuzagallo
  39. 39. @tadeuzagallo
  40. 40. @tadeuzagallo
  41. 41. @tadeuzagallo
  42. 42. @tadeuzagallo
  43. 43. @tadeuzagallo
  44. 44. @implementation MyNativeModule RCT_EXPORT_MODULE() @end @tadeuzagallo
  45. 45. @implementation MyNativeModule + (NSString *)moduleName { return @""; } + (void)load { RCTRegisterModule(self); } @end @tadeuzagallo
  46. 46. @tadeuzagallo
  47. 47. @tadeuzagallo
  48. 48. { "remoteModuleConfig":[ // [ // $moduleName : string, // $exportedConstants? : { [key: string]: string }, // $methods? : [string], // $asyncIndexes? : [number] // ] ["RCTSourceCode",{"scriptURL":"http://localhost:8081/index.ios.bundle?platform=ios&dev=true"},["getScriptText"],[0]], ["RCTStatusBarManager",["getHeight","setStyle","setHidden","setNetworkActivityIndicatorVisible"]], ["RCTAlertManager",["alertWithArgs"]], ["RCTExceptionsManager",["reportSoftException","reportFatalException","updateExceptionMessage","reportUnhandledException"]], // ... ] } @tadeuzagallo
  49. 49. @tadeuzagallo
  50. 50. VM Basics @tadeuzagallo
  51. 51. @tadeuzagallo
  52. 52. @tadeuzagallo
  53. 53. @tadeuzagallo
  54. 54. @tadeuzagallo
  55. 55. @tadeuzagallo
  56. 56. // import React, { // Component, // } from 'react'; // // import { // AppRegistry, // Text, TouchableHighlight, // } from 'react-native'; // // class SampleApp extends Component { onPress() { alert('Hello, World!'); } // render() { // return ( <TouchableHighlight style={{ margin: 40 }} onPress={this.onPress}> <Text> Button <⁄Text> </TouchableHighlight>; // ); // } // } // // AppRegistry.registerComponent('SampleApp', () => SampleApp); @tadeuzagallo
  57. 57. @tadeuzagallo
  58. 58. @tadeuzagallo
  59. 59. @tadeuzagallo
  60. 60. @tadeuzagallo
  61. 61. @tadeuzagallo
  62. 62. class SampleApp extends Component { onPress() { -> alert('Hello, World!'); } ... } @tadeuzagallo
  63. 63. if (Platform.OS === 'ios') { AlertIOS.alert(title, message, buttons); } else if (Platform.OS === 'android') { AlertAndroid.alert(title, message, buttons); } @tadeuzagallo
  64. 64. @tadeuzagallo
  65. 65. @tadeuzagallo
  66. 66. @tadeuzagallo
  67. 67. @tadeuzagallo
  68. 68. WHERE IS React Native RIGHT NOW? @tadeuzagallo
  69. 69. @tadeuzagallo
  70. 70. First React Native App: MOBILE ADS MANAGER @tadeuzagallo
  71. 71. @tadeuzagallo
  72. 72. @tadeuzagallo
  73. 73. Same Team 85%OF CODE SHARED 3 months @tadeuzagallo
  74. 74. React Native in the FACEBOOK APP @tadeuzagallo
  75. 75. @tadeuzagallo
  76. 76. @tadeuzagallo
  77. 77. @tadeuzagallo
  78. 78. @tadeuzagallo
  79. 79. @tadeuzagallo
  80. 80. @tadeuzagallo
  81. 81. React Native is Open Source GITHUB.COM/FACEBOOK/REACT-NATIVE @tadeuzagallo
  82. 82. 35,900+ 900+ STARS CONTRIBUTORS @tadeuzagallo
  83. 83. We Use The EXACT SAME VERSION Internally @tadeuzagallo
  84. 84. @tadeuzagallo
  85. 85. @tadeuzagallo
  86. 86. @tadeuzagallo
  87. 87. @tadeuzagallo
  88. 88. @tadeuzagallo
  89. 89. What Next? @tadeuzagallo
  90. 90. Evolving the JS Platform @tadeuzagallo
  91. 91. Evolving the JS Platform @tadeuzagallo
  92. 92. Evolving the JS Platform @tadeuzagallo
  93. 93. Evolving the JS Platform @tadeuzagallo
  94. 94. Evolving the JS Platform @tadeuzagallo
  95. 95. REACT: the horizontal platform @tadeuzagallo
  96. 96. @tadeuzagallo
  97. 97. Thanks! FACEBOOK.GITHUB.IO/REACT-NATIVE GITHUB.COM/FACEBOOK/REACT-NATIVE @tadeuzagallo

×