React Native for iOS Developers: Should We Care?

You've probably heard about ReactNative, this shiny new framework created by Facebook, that allows you to write native mobile apps for iOS and Android using JavaScript. So what? Aren't all these hybrid development tools more effort than it's worth, with consistently horrible results on all supported platforms? That's what I thought too...
I'd like to show you what ReactNative is, from the perspective of an iOS developer who's always been wary of weird development tools. We have Swift, we may miss ObjC sometimes, but JavaScript... seriously?
Let's decide together if we should care or not!

Transcript

1. REACT NATIVE FOR IOS DEVELOPERS Should we care? ! Alberto Guarino @albeguarino
2. THIS TALK IS NOT ABOUT
4. JAVASCRIPT
5. THIS TALK IS ABOUT REACT NATIVE <1 My experience /> <2 What React Native is /> <3 How it works />
6. THIS TALK IS ABOUT REACT NATIVE <4 Live demo /> <5 Pros & cons /> <6 Should we care? />
7. MY EXPERIENCE
8. ▸ Mobile ! SW Engineer (mainly on iOS) ▸ Often working with: wearables ⌚, real-time streaming, BLE connections == go native! ▸ Love Swift ❤, been using it from the start ▸ Met React Native in Warsaw $ in 2016, got hooked %
9. REACT Native
10. ▸ (REACT) A JavaScript library by Facebook for building user interfaces (Web) ▸ (NATIVE) Adapted to app building in the iOS & Android world ▸ (HYPE) A LOT OF
12. DID YOU SAY... HYBRID!?!?
13. [Xcode Demo]
15. OMG !
16. Is this the holy grail?
17. HOW IT WORKS
18. ▸ It's NOT a Web View ▸ Is JS compiled into native code? NO ▸ JS is running inside a JS runtime, in your app ▸ Your JS code is communicating with your main app
19. ▸ JS Context ▸ Native Context.
20. THREADS ▸ MAIN THREAD where UIKit rules ▸ JAVASCRIPT THREAD your JS code runs here ▸ SHADOW QUEUE: where the layout happens
21. THREADS
22. BACK TO JAVASCRIPT? ! [1, 2, 3] + 4 === "1,2,34" // true null + "foo" === "nullfoo" // true 1 == "1" // true null == "null" // false [1, 2, 3] == [1, 2, 3] // false return { javascript: "fantastic" }; // returns undefined
24. THIS IS NOT THE JAVASCRIPT YOU'RE LOOKING FOR
25. ES2015 (ES6) SUPPORT ▸ Classes class Rectangle extends Shape { constructor(height, width) { this.height = height; this.width = width; } } var r = new Rectangle(10, 20);
26. ES2015 (ES6) SUPPORT ▸ Template Strings var name = "Bob"; var time = "today"; `Hello ${name}, I know this is a very long string, ... but how are you ${time}?`
27. ES2015 (ES6) SUPPORT ▸ Constants const foo = "bar"; foo = "even more foo"; // Error!
28. ES2015 (ES6) SUPPORT ▸ let is the new var function varTest() { var x = 1; if (true) { var x = 2; // same variable! console.log(x); // 2 } console.log(x); // 2 } function letTest() { let x = 1; if (true) { let x = 2; // different variable console.log(x); // 2 } console.log(x); // 1 }
29. ES2015 (ES6) SUPPORT ▸ Arrow (=>) functions let someEven = [10, 12, 14]; let someOdd = someEven.map(v => v + 1); // [11, 13, 15] let count = 0; setInterval(() => { console.log(count++); }, 1000);
30. ES2015 (ES6) SUPPORT ▸ Promises let computeResult = function () { return new Promise((resolve, reject) => { setTimeout(() => { resolve(42); }, 500); }); }; computeResult().then(result => { console.log(`The answer is: ${result}`); }).catch(err => { console.log("Sorry, we got an error here! :("); })
31. ES2015 (ES6) SUPPORT ▸ Modules ▸ Generators ▸ Binary and Octal Literals ▸ Destructuring ▸ Improved Unicode support ▸ ...
32. REACT IS COMPONENT-BASED ▸ A small building block (like a function) that knows how to render itself depending on state ▸ You specify how it renders in its render() function ▸ State changes via setState() ▸ React Native figures out what needs to change (diff) and does it for you
33. REACT COMPONENT import React from 'react'; class HelloWorld extends React.Component { render() { return ( <div> <span>Hello World</span> </div> ); } }
34. REACT Native COMPONENT import React, { Component } from 'react'; import { View, Text } from 'react-native'; class HelloWorld extends Component { render() { return ( <View> <Text>Hello World</Text> <View> ); } }
35. JSX ▸ JSX lets you create JavaScript objects using an XML-like syntax ▸ It looks like HTML on the web (but it isn't) ▸ It's optional (but use it) ▸ Great for specifying a hierarchy of components
36. NATIVE COMPONENTS import { View, Text, Image, Navigator, Modal, Picker, ScrollView, Switch, SegmentedControlIOS, ... } from 'react-native';
37. FACEBOOK EVENTS
38. EXTENSIBILITY ▸ Facebook provided a way to bridge things over to JavaScript ▸ Easy to wrap up custom components ▸ RCTBridgeModule, RCTViewManager ▸ The community is hard at work: HealthKit, Bluetooth, AddressBook, Push Notifications, ...
39. PROPS & STATE ▸ Props: set by the parent, fixed throughout component lifetime. <Greeting name='John'/> ▸ State: data that is potentially going to change this.setState({ name: 'John' });
40. STYLE const styles = StyleSheet.create({ smallredbold: { color: 'red', fontWeight: 'bold', fontSize: 10, }, }); <Text style={styles.smallredbold}>Styled Text</Text>
41. LAYOUT
42. Interface Builder Love
43. FLEXBOX ▸ Direction ▸ Justification ▸ Alignment ▸ Flex dimensions
44. FLEXBOX flexDirection: 'column'
45. FLEXBOX flexDirection: 'column' justifyContent: 'center'
46. FLEXBOX flexDirection: 'column' justifyContent: 'center' alignItems: 'center'
47. FLEXBOX flexDirection: 'column' justifyContent: 'space- between' alignItems: 'center'
48. FLEXBOX flexDirection: 'column' justifyContent: 'center' alignItems: 'stretch'
49. [Live Demo] AKA: what could possibly go wrong? !
50. PROS & CONS
51. THE GOOD ▸ React: great at abstracting view hierarchies ▸ Performance: it's GOOD! ▸ Sharing code iOS + Android ▸ Code push (continuous deployment?) ▸ Incremental migration ▸ Great tools (live reload !) vs...
52. THE GOOD ▸ Great tools vs...
53. THE BAD ▸ Very young, keeps evolving and breaking stuff
54. THE BAD ▸ Very young, keeps evolving and breaking stuff ▸ Dependencies (500+) ▸ It's made to solve Facebook's problems (you'll need to put in some effort) ▸ You need iOS experience (this is actually good)
55. SHOULD WE CARE?
56. THANKS! (Dziękuję! !)