Flutter or React Native, a cross-platform dilemma | DevFest Pisa 2019

Nowadays the hype around Flutter is raising a lot. But what about the "(not so) old-fashioned" React Native? In this talk, we will see the basics and the differences between the two frameworks and which to choose. All this journey is based on the true story of an Android Developer that he wanted to explore the cross-platform jungle.

Transcript

1. Flutter or React Native a cross-platform dilemma 13th April 2019
2. WHO I AM Software & Data Engineer @ Uniwhere MARCO GOMIERO COMPUTER ENGINEER Co-Leader @ GDG Venezia
3. LET’S GET IN TOUCH! twitter.com/marcoGomier MARCO GOMIERO COMPUTER ENGINEER github.com/prof18 marco.gomiero.93[at]gmail[dot]com marcogomiero.com
4. Disclaimer
5. Background
6. Background Flutter React Native
7. History JANUARY 2015 First public preview MAY 2015 Open sourced and launched officially SUMMER 2013 First version developed during an internal hackathon 2013 2015 2015 React Native
8. History JANUARY 2015 First public preview MAY 2015 Open sourced and launched officially SUMMER 2013 First version developed during an internal hackathon 2013 2015 2015 Flutter React Native MAY 2017 Alpha Release DECEMBER 2018 First 1.0 version APRIL 2015 Unveiled at Dart Dev Summit 2015 2018 2017
9. Trends React Native Flutter
10. LANGUAGE
11. React Native • Javascript • ☠ for Object Oriented Devs: • Type Conversion • Sometimes silently fails • Prototype based inheritance • Ecosystem Confusion
12. Flutter • Dart, invented by Google in 2011 • Object Oriented friendly • e.g strongly typed but type can be inferred • Flat learning curve for OO devs • Mobile -> compiles to ARM and x86 code • Web -> transpiles to Javascript
13. !crusade It’s not a language crusade, just my experience
14. UI
16. // React Native import React from "react"; import { StyleSheet, Text, View } from "react-native"; export default class App extends React.Component { render() { return ( <View style={styles.container}> <Text>Hello world!</Text> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: "#fff", alignItems: "center", justifyContent: "center" } });
17. // React Native import React from "react"; import { StyleSheet, Text, View } from "react-native"; export default class App extends React.Component { render() { return ( <View style={styles.container}> <Text>Hello world!</Text> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: "#fff", alignItems: "center", justifyContent: "center" } }); // Flutter import 'package:flutter/material.dart'; void main() { runApp( Center( child: Text( 'Hello, world!', textDirection: TextDirection.ltr, ), ), ); }
18. // React Native import React from "react"; import { StyleSheet, Text, View } from "react-native"; export default class App extends React.Component { render() { return ( <View style={styles.container}> <Text>Hello world!</Text> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: "#fff", alignItems: "center", justifyContent: "center" } }); // Flutter import 'package:flutter/material.dart'; void main() { runApp( Center( child: Text( 'Hello, world!', textDirection: TextDirection.ltr, ), ), ); }
19. // React Native import React from "react"; import { StyleSheet, Text, View } from "react-native"; export default class App extends React.Component { render() { return ( <View style={styles.container}> <Text>Hello world!</Text> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: "#fff", alignItems: "center", justifyContent: "center" } });
20. // React Native import React from "react"; import { StyleSheet, Text, View } from "react-native"; export default class App extends React.Component { render() { return ( <View style={styles.container}> <Text>Hello world!</Text> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: "#fff", alignItems: "center", justifyContent: "center" } });
21. // React Native import React from "react"; import { StyleSheet, Text, View } from "react-native"; export default class App extends React.Component { render() { return ( <View style={styles.container}> <Text>Hello world!</Text> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: "#fff", alignItems: "center", justifyContent: "center" } });
22. // React Native import React from "react"; import { StyleSheet, Text, View } from "react-native"; export default class App extends React.Component { render() { return ( <View style={styles.container}> <Text>Hello world!</Text> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: "#fff", alignItems: "center", justifyContent: "center" } });
23. // React Native import React from "react"; import { StyleSheet, Text, View } from "react-native"; export default class App extends React.Component { render() { return ( <View style={styles.container}> <Text>Hello world!</Text> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: "#fff", alignItems: "center", justifyContent: "center" } }); Components • Basic UI building blocks • Fit together to form a custom component • Domain specific language called JSX • Customisable with CSS • Or better “usually match how CSS works on the web”
24. https://facebook.github.io/react-native/docs/components-and-apis.html
25. // React Native import React from "react"; import { StyleSheet, Text, View } from "react-native"; export default class App extends React.Component { render() { return ( <View style={styles.container}> <Text>Hello world!</Text> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: "#fff", alignItems: "center", justifyContent: "center" } }); // Flutter import 'package:flutter/material.dart'; void main() { runApp( Center( child: Text( 'Hello, world!', textDirection: TextDirection.ltr, ), ), ); }
26. // Flutter import 'package:flutter/material.dart'; void main() { runApp( Center( child: Text( 'Hello, world!', textDirection: TextDirection.ltr, ), ), ); }
27. // Flutter import 'package:flutter/material.dart'; void main() { runApp( Center( child: Text( 'Hello, world!', textDirection: TextDirection.ltr, ), ), ); }
28. // Flutter import 'package:flutter/material.dart'; void main() { runApp( Center( child: Text( 'Hello, world!', textDirection: TextDirection.ltr, ), ), ); }
29. // Flutter import 'package:flutter/material.dart'; void main() { runApp( Center( child: Text( 'Hello, world!', textDirection: TextDirection.ltr, ), ), ); } • Basic UI building blocks • Takes inspiration from RN • Everything is a Widget Widgets
30. Structural Element (Button, Menu …)
31. Stylistic Element (Font, Color Scheme ..)
32. Aspect of Layout (Padding, Align ..)
33. https://flutter.io/docs/development/ui/widgets
34. Components vs Widgets: Summary • React Native: jumps from Javascript to JSX • Flutter: remains in the Dart context • Possibility of UI modularisation
35. Components vs Widgets: Summary • React Native: jumps from Javascript to JSX • Flutter: remains in the Dart context • Possibility of UI modularisation
36. UNDER THE HOOD
37. React Native • Core: an infrastructure, aka “Bridge” built at runtime • It lets native code call JS and viceversa • Your code run inside a JS Virtual Machine: JavaScriptCore • Event driven
38. • Event driven Event Serialized Payload Process Event Process Command Serialized Response Call native methods App opening [1, 1, [‘My App’, {}]] [[2, 3, [2, ‘View’, {…}]],
 [2, 3, [3, ‘View’, {…}]]] val view = View()
 val view = TextView() Render new Views
39. • Event driven • Calls passed between JS to Native in a “batched asynchronous way” • quequed in the MessageQueue -> flushed every 5 ms by default
40. New RN Architecture • React Native team is working on a new architecture: Fabric • High priority UI updates synchronously • More info: https://www.youtube.com/watch?v=UcqRXTriUVI
41. Flutter • Dart code compiled into native, ARM and x86 libraries • Widgets are managed and rendered using a C++ engine Framework (Dart) Engine (C++) Skia Dart Text Material Cupertino Widgets Rendering Animation Painting Gestures Foundation
42. Flutter • Dart code compiled into native, ARM and x86 libraries • Widgets are managed and rendered using a C++ engine • All elements are rendered with Skia, a 2-d graphics library • Pro: take advantage of the GPU • Cons: app size is larger
43. Recap • Components translated to native • Use Native components • Delay due to Bridge initialisation and runtime translation • Widget independent of the OS • No translation time needed • Include its own widgets
44. CONCLUSIONS
45. Crossplatform • Crossplatform is not bad but… IS NOT better than native • It’s a choice with compromises based on specific situation • If trouble became higher than benefits, make a step back
46. React Native or Flutter ? • Right now, React Native is more stable and solid • Flutter is the future • If Google does not drop it $ • Better performance that other framework • Dart is a more modern language
47. Bibliography / Useful Links • https://flutter.dev/docs/development/ui/widgets-intro • https://flutter.dev/docs/get-started/flutter-for/react-native-devs • https://facebook.github.io/react-native/docs/components-and-apis.html • https://levelup.gitconnected.com/wait-what-happens-when-my-react-native-application-starts-an-in-depth-look-inside-react- native-5f306ef3250f • https://flutter.dev/docs/resources/faq • https://flutter.dev/docs/resources/technical-overview • https://speakerdeck.com/mkonicek/under-the-hood-of-react-native • https://speakerdeck.com/frantic/react-native-under-the-hood • https://www.youtube.com/watch?v=rReCzR6DMEM • https://medium.com/snapp-mobile/multi-vs-cross-platform-in-the-age-of-flutter-6e76920028b6 • https://medium.com/dartlang/announcing-dart-2-80ba01f43b6 • https://medium.com/airbnb-engineering/sunsetting-react-native-1868ba28e30a
48. THANK YOU! twitter.com/marcoGomier github.com/prof18 marco.gomiero.93[at]gmail[dot]com marcogomiero.com