Choosing between React Native and Flutter

Last year at KCDC I gave a talk on React Native yet this year the hottest new mobile framework is undoubtedly Flutter.

This talk will take you on a journey through the current state of mobile frameworks and present the strengths and challenges of each of these two frontrunners, cutting through the hype and marketing cruft.

I'll present a small proof-of-concept app written in each framework and share the source code on Github.

We'll compare these frameworks on criteria such as: learning curve, approaches to composition, relative complexity for building small/medium/large apps, ecosystem, tooling, developer community as well as the underlying programming language (TypeScript / Dart) and gotchas you might encounter for each.

Performance is often a factor when choosing technology for mobile devices, but this talk will focus more on developer experience than performance.

Transcript

1. Choosing between React Native & Flutter Kansas City Developer Conference 2019
2. OUR AGENDA FOR TODAY • What are these frameworks (and why should you care)? • Background on each one • How are they similar? • What criteria do we care about • Strengths & weaknesses of React Native • Strengths & weaknesses of Flutter • The developer experience • The languages: Dart & TypeScript • The ecosystem (tooling & community) • When you get past Hello World • Building production software • Some final advice
3. I'm Simon Hi I like building engaging user interfaces. I work at Google doing frontend infra. I was previously at Facebook doing web UI.
4. This is a talk about two modern, powerful frameworks for building mobile applications with relative ease. It's about the dev ex, the tooling, the ecosystem, the learning curve, the good parts and the ugly parts.
5. These two are the hottest (possibly over-hyped) open-source frameworks on the mobile development scene right now. Side note...
6. You, the Audience Let's assume you’re a software developer and you want to build an app from the ground up targeting Android and also iOS.
7. Why use a framework at all? • You want to build and ship quality UI across multiple platforms. • You want to get to market quickly with rapid iteration. • You like tooling that makes your job easier, gives you quick feedback and helps you make fewer mistakes.
8. The Frameworks Made by Google. Open sourced in 2017. Made by Facebook. Open sourced in 2015.
9. Some opinion ahead We’re going to get into some “A is better than B at X” stuff So it’s worth mentioning that I really like both of these frameworks and I’ve made it a priority to be as fair as I can. ...but there will be some unpopular opinion ahead.
10. Individual claims with a grain of salt This stuff moves fast. So beware of misleading metrics (remember the Angular vs React performance debate?) What today is a serious shortcoming today in framework X, could change next week. ...because the each core team is rapidly learning from and incorporating great features from other frameworks.
11. The year is 2015... Write once run everywhere More like “learn once, write everywhere”
12. Had the goal of bringing the best parts of React to mobile. • a declarative approach to UI • one-way data flow • rapid development with short iteration cycles • composition and separation of concerns React Native
13. Despite some rough patches along the way (omg navigation), and with a lot of help from the open-source community, it has effectively delivered on its original promise. React Native
14. And a large ecosystem has formed around React Native. You have lots of different choices when building with RN: design patterns, navigation libraries, state management, even the language you write with. React Native
15. React Native at its core imposes very little opinion on anything. And this might be considered one of its weaknesses. React Native
16. In this talk I’ll focus on a subset of this ecosystem: • TypeScript - a strongly typed variant of JS • Expo - All the stuff that should be in RN core but isn’t. • React Navigation - Pretty much the de facto navigation library these days. • React Hooks - The modern way to handle side effects and encapsulate view logic in reusable chunks. Note
17. A Dart project codenamed Sky is teased, claiming 120fps on Android. The year is 2015...
18. It actually showed up two years later, in 2017, under the name Flutter and boasted first-class support for iOS too. It was evidently worth the wait, because it was met with a huge amount of excitement and fan fare.
19. The original design goals of Flutter: • Rapid development across Android and iOS • Top-notch performance with GPU-accelerated rendering • Stateful hot reloading • Robust set of widgets and world-class tooling Flutter
20. Interestingly, Flutter chose Dart as its programming language, which was a relatively obscure language at the time, but fairly well-liked within Google. It had once-upon-a-time been viewed as a JS replacement, and the team had optimized it accordingly.
21. Even though Flutter is younger than RN, it was able to avoid a lot of RN's early mistakes, came out the gate strong, matured quickly. Second Mover Advantage
22. So what do they both have in common?
23. Open Source Cross Platform Declarative approach to UI Component based architecture Strong performance characteristics compared to their predecessors Similarities Rapid development & hot reload Backed by large tech co's, invested in their success who use in their own products. Backed by even larger open-source communities which helps drive each framework’s momentum.
24. The bar is already high for modern mobile applications. Users expect fast startup times, smooth transitions, optimistic updates, rich gesture support and low latency interactions.
25. Modern frameworks raise the bar for developer experience also. The dev tooling we have at our disposal is better than ever before. React Native and Flutter are perfect examples of this.
26. No longer do developers expect multi-minute compilation times between pressing save and seeing the changes.
27. So let's dig in to how they're different from each other.
28. What’s provided out of the box Learning curve / ease of getting started Underlying programming language Type Safety Layout Engine Relative complexity for building non-trivial apps Popularity Ecosystem (tooling and community) I want to look at the following criteria
29. We'll touch on performance, but this is not a deep dive into that subject, and here's why...
30. Diving into Flutter is a truly fantastic experience. Let's start with Flutter
31. • Flutter gives you a LOT out of the box. • Two comprehensive widget libraries. • Theming is deeply integrated and well thought out • Navigation is well documented and easy to use. • Frankly Flutter kicks RN's ass on this and it shows. Out of box experience
32. • Editor support is top notch. • Dart is an easy language to pick up and I found I can learn most of what I need from the API surface by Cmd+clicking through the source code. • The Flutter source code is incredibly well documented and easy to understand. Authoring Experience
33. Stateful hot reload is out of this world. It's way better than you think it's going to be, you have to experience it to understand.
34. Rendering Engine Flutter has a really innovative and high-performance GPU accelerated rendering engine.
35. And it bears repeating... The widgets, theming, navigation, page scaffolding and the standard library are incredibly comprehensive. (remember the first time you tried to format a date in JS? Or replaceAll on a string?)
36. But...
37. Dart! OMG, Dart! Classes inside of classes inside of classes. Oh, the boilerplate...
38. You didn't think you could just write "padding: 20" right? No, you have to instantiate a Padding class and an EdgeInsets class.
39. You didn't think you could just write "borderRadius: 4" right? No, you have to instantiate a BoxDecoration class and a BorderRadius and a Radius.circular.
40. Want to put a border on an element, sure, use a BoxDecoration. But a border on a text input, that will need an InputDecoration and an OutlineInputBorder.
41. If you come from Java, Dart’s syntax is fine. It's a little less verbose than Java and has some niceties like named args. But if you come from Kotlin or Swift, then you're likely to find Dart borderline terrible. Coming from TypeScript, it seems a bit brittle and tedious, but you do get used to it.
42. But at least Dart has a safe, sound type system, right?
45. Just be prepared. As a beginner, you will forget to initialize some variable and you will see some null pointer exceptions. Among other exceptions.
47. Moving on.. The Layout System
48. The Layout system is verbose and leads to a lot of nesting. Each layer of nesting adds a particular property to it's child, such as padding, alignment or fit. But, you get used to this.
49. Actually, an interesting side effect of the "styling by nesting" is that you can't easily separate structure from style. They are intrinsically coupled.
50. Overall, you get used to this all pretty quickly and you learn to work with the tools you have. Ultimately it's a small price to pay for an otherwise fantastic framework.
51. React Native let's you move fast, building high quality UI with strong influence from web. Let's move on to React Native
52. • All the things you already love from React web (hooks for the win!) • Flex Layout is clean, terse and follows a set of rules you can learn in an afternoon. • TypeScript is an incredibly ergonomic language with great type inference and a good safety net. React Native
53. Expo is phenomenal. It's hard to convey just how much this impacts developer experience, from running on real devices to sending a link for your colleague to preview the app, online playground, OTA updates, the list goes on. RN + Expo
54. • Expo supports Web as a first class citizen. • Provides build tools in the cloud. • Simplified deployments • Optimizes assets • .. and all the extra components (such as icon) that RN should provide but doesn't RN + Expo
55. We could do a whole talk on Expo, but let's move on to TypeScript.
56. Compared with Dart, we get: • Explicit null safety • Union types and incredible type inference. • Strongly typed data objects • Strongly typed Tuples • Destructuring
57. Language preference is hugely biased by the previous languages you've been exposed to. And if you came from a more powerful language with variants, probably TS would feel limiting.
58. React Native Rendering Engine Uses the built-in platform-provided components. iOS and Android each have a set of similar but different view components.
59. React Native, so many great features, BUT...
60. OMG, the out of box experience! React Native, out of the box, provides next to nothing..
61. No navigation. No theming. No component library. Not even icons.
62. There is literally no way to tell React Native "Please use this font family for all the text in my app"
63. You end up going to the community for every little piece, and let's be honest, npm is a hot mess. Everyone ends up with their own cocktail of UI components, navigation, state management.
64. Hopefully they all work well together. And hopefully the library author keeps maintaining it. And hopefully the next version of the lib doesn't break backwards compatibility.
65. But even then, everyone's project has a slightly different mix of these packages, and no two React Native projects are alike. This is the fragmentation problem.
66. Upgrading used to be a disaster (unless you're using Expo). Animation and Gestures took 3 generations to get it right. The community finally nailed that.
67. Besides, that, React Native has a few quirky behaviors around Keyboard handling and some platform inconsistencies (try to figure out Alert.alert(), seriously) But overall, it's a small price to pay for an otherwise incredible developer experience.
68. Yesterday, we did a workshop building an app in React Native and Expo. Let's move on to Real Examples So for fun, I built the same app in Flutter.
70. You can demo the React Native version on Expo: https://exp.host/@sstur/hux
71. Both are open source on Github. github.com/sstur/hux-flutter github.com/sstur/hux-rn Special thanks to Vincent Wendy for the app design: dribbble.com/vinwendy
72. Bonus: web version using Expo Web huxapp.com/demo
73. So which one should you choose for your next project?
74. This heavily depends on what criteria matter to you. Is strong web support a priority? Are you confident making various tech decisions for things like UI libraries and theming? Is your team already proficient in TS/React?
75. Things we didn't touch on: • Integrating into existing apps/codebases • How easy/hard it is to find a job in the area • Availability of talent for hire
76. Do you need a system that's complete out of the box. Is top-notch editor tooling a priority Are you comfortable learning a Java-like language and getting some performance along with that This heavily depends on what criteria matter to you. Is strong web support a priority? Are you confident making various tech decisions for things like UI libraries and theming? Is your team already proficient in TS/React?
77. A note on developer community and learning ecosystem. Both of these frameworks have a fantastic community behind them, great documentation, guides, blog posts and plenty of open source packages.
78. You will actually enjoy building apps with either of these.
79. Thank you. Please go out and try these frameworks, you will learn a lot. Find me on the Twitters @sstur_