React Native and the future of web technology (Mark Wilcox) - GreeceJS #15
0 likes335 views
What's all the hype about React Native? What is it? How does it work? Why does it matter and what clues does it give us about the future of web development? Did you know there's a React Native for the Web? What's that all about? It can't be all good, what's wrong with it? Where should you go to find out more?
Ad
More Related Content
What's hot (20)
Viewers also liked (15)
![[Infographic] How will Internet of Things (IoT) change the world as we know it?](https://cdn.slidesharecdn.com/ss_thumbnails/iotinfographicv3-160309101328-thumbnail.jpg?width=560&fit=bounds)
Ad
Similar to React Native and the future of web technology (Mark Wilcox) - GreeceJS #15 (20)
Ad
More from GreeceJS (18)
Recently uploaded (20)
![Get & Download Wondershare Filmora Crack Latest [2025]](https://cdn.slidesharecdn.com/ss_thumbnails/revolutionizingresidentialwi-fi-250422112639-60fb726f-250429170801-59e1b240-thumbnail.jpg?width=560&fit=bounds)
React Native and the future of web technology (Mark Wilcox) - GreeceJS #15
- 1. React Native & the Future of Web Technology Mark Wilcox - Senior Analyst & Technology Lead VisionMobile
- 2. What’s all the hype about React Native? React 0 10000 20000 30000 40000 50000 60000 1 21 41 61 81 101 121 141 161 181 201 221 241 261 281 301 321 341 361 381 401 421 441 461 481 501 521 541 561 581 601 621 641 661 681 701 721 741 761 781 801 821 841 861 881 901 921 941 961 981 1001 1021 1041 1061 1081 1101 1121 1141 1161 1181 1201 1221 1241 React Native GitHub Stars
- 3. What’s all the hype about React Native? • React is the 6th most starred project on GitHub (~52k stars) • React Native is the 14th most starred (~38k stars) • React Native is the fastest growing open source project in terms of both stars and contributors (>1000 in 18 months) • Microsoft has made a port to the Universal Window Platform • Canonical has made a port to Ubuntu • Facebook just launched a version for Oculus VR
- 4. Is the hype justified? • Facebook engineers in a Reddit AMA have said they aim to replace native development • A former Apple UIKit engineer has said he believes Facebook’s model is much better
- 5. Can Facebook be trusted? Closed
- 6. Can Facebook be trusted? It’s all about incentives!
- 7. Facebook didn’t use Parse for their core apps Their incentives were not aligned with Parse users
- 8. Facebook use React Native extensively in production • They are deeply committed to React, it’s what most of their web apps are built with • React Native was used to build Facebook Ad Manager • It was used for much of Facebook Groups • Following the success of these early experiments, Facebook is growing their React Native team and is deploying new features with it on the main app and Instagram
- 9. Other established companies are using it too Airbnb Baidu QQ Soundcloud Discord USwitch
- 10. So what is React Native? MyComponent = React.createClass({ render: function () { return <div> <span>Hello World</span> </div> }}); React on the web: Components
- 11. So what is React Native? MyComponent = React.createClass({ render: function () { return <View> <Text>Hello World</Text> </View> }}); React Native: Components Platform native UI components
- 12. So what is React Native? MyComponent = React.createClass({ onClick: function () { alert("You clicked me")}, render: function () { return <div> <span onClick={this.onClick}>Hello</span> </div> }}); React on the web: Events
- 13. So what is React Native? MyComponent = React.createClass({ onPress: function () { console.log("You pressed me")}, render: function () { return <View> <TouchableHighlight onPress={this.onPress}> <Text>Hello</Text> </TouchableHighlight> </View> }}); React Native: Events Platform native touch event handler
- 14. So what is React Native? MyComponent = React.createClass({ render: function () { return <div class={divClasses}> <span class={spanClasses}>Hello</Text> </div> }}); React on the web: Styling Classes defined in external CSS file
- 15. So what is React Native? MyComponent = React.createClass({ render: function () { return <View style={styles.container}> <Text style={styles.myStyle}>Hello</Text> </View> }}); React Native: Styling (1/3) Styles defined in JavaScript
- 16. So what is React Native? var styles = StyleSheet.create({ myStyle: { color: 'red', fontSize: 12}, anotherStyle: { color: 'yellow', padding: 10, marginTop: 5} container: {flex: 1, flexDirection: 'row', justifyContent: 'center'} }); React Native: Styling (2/3)
- 17. So what is React Native? React Native: Styling (3/3) • No CSS files, styles are defined in JavaScript • Usually defined in the same file as the component • Layout only via a (large) subset of Flexbox
- 18. How does it work? • JavaScript runs in JavaScriptCore on iOS and Android • All JavaScript logic and layout runs on a background thread • Calls to native methods are batched and sent over a bridge to native code (Objective-C on iOS, C++/Java on Android) • The main thread runs (almost) only native drawing code, enabling smooth 60fps animations and scrolling Native (Obj-C or Java/C++) JS VM Bridge
- 19. How does it work? • There’s a good set of built-in components • There’s a declarative animation framework in JavaScript • Developers with native coding skills can create their own native components (separate versions for iOS & Android) • Native modules can also be created for accessing any native API, or third party native library • Community modules can be published on npm and registered on https://react.parts
- 20. Why does it matter? • Developers increasingly need to be able to work on multiple platforms and form factors: • There’s too much to learn • Maintaining multiple codebases is complex and expensive • Facebook’s solution to this for their own development teams could work for everyone - “Learn once, write everywhere” • Iteration speed is really important • JavaScript is “special”…
- 21. JavaScript is “special” "" == 0 //true - empty string is coerced to Number 0 0 == "0" //true - Number 0 is coerced to String "0" "" == "0" //false - operands are both String so no coercion 0.1 + 0.2 === 0.3 //false var a = 0 * 1; // This simple sum gives 0 var b = 0 * -1; // This simple sum gives -0 a === b; //true: 0 equals -0 1/a === 1/b; //false: Infinity does not equal -Infinity for(var i=0; i<10; i++) { console.log(i); } var i; console.log(i); // 10Not this
- 22. JavaScript is “special” • JavaScript, and transpiled to JavaScript languages, are the only choice on the web • JavaScript is one of very few languages you can run on almost all platforms outside the browser • JavaScript is the only language you can download to iOS devices to update apps outside the App Store • So… JavaScript is the best suited language for iterating quickly across multiple platforms - good job it evolving now
- 23. The future of web technology? • Some of the React Native team have described what they’re doing as building polyfills for web standards that haven’t been fully developed yet • This fits with the way other areas of web technology evolve now, like JavaScript itself and Babel, or TypeScript / Flow • Despite suggestions that React and Web Components are competitors, they are complementary and compatible • If we could create low-level components for mobile web apps that were not tied to the DOM, what would they look like?
- 24. React Native for Web! • Wait! Surely we already have React for the web? • The low-level building blocks for React & React Native apps are different, so a implementing the React Native primitives helps make code portable, but… • Twitter engineers weren’t actively deploying React Native apps when they created React Native for Web • They found that React Native’s consistent approach to style, animation, touch, viewport adaptation, accessibility, themes & RTL layout helped solve problems in their web apps
- 25. What’s wrong with React Native? • Nothing’s perfect • React Native is not great for teams with no native developers (or people willing to learn) yet • React Native is still evolving very fast and it can be quite a lot of effort to keep up with the latest changes • There are lots of 3rd party modules of poor quality - it’s not easy to tell until you start to use them, unless you’re an experienced native developer • There are issues with animations synced with system animations (e.g. keyboard sliding in from the bottom)
- 26. Where to find out more • https://facebook.github.io/react-native/ • http://www.reactnative.com • https://www.smashingmagazine.com/2016/04/consider-react- native-mobile-app/ • https://react.parts/native?search=tree
- 27. Questions?