Choosing between
React Native &
Flutter
Kansas City Developer Conference 2019
Slide 2
Slide 2 text
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
Slide 3
Slide 3 text
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.
Slide 4
Slide 4 text
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.
Slide 5
Slide 5 text
These two are the hottest (possibly over-hyped)
open-source frameworks on the mobile development
scene right now.
Side note...
Slide 6
Slide 6 text
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.
Slide 7
Slide 7 text
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.
Slide 8
Slide 8 text
The Frameworks
Made by Google. Open sourced in 2017.
Made by Facebook. Open sourced in 2015.
Slide 9
Slide 9 text
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.
Slide 10
Slide 10 text
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.
Slide 11
Slide 11 text
The year is 2015...
Write once run everywhere
More like “learn once, write everywhere”
Slide 12
Slide 12 text
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
Slide 13
Slide 13 text
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
Slide 14
Slide 14 text
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
Slide 15
Slide 15 text
React Native at its core imposes very little opinion on
anything.
And this might be considered one of its weaknesses.
React Native
Slide 16
Slide 16 text
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
Slide 17
Slide 17 text
A Dart project codenamed Sky is teased,
claiming 120fps on Android.
The year is 2015...
Slide 18
Slide 18 text
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.
Slide 19
Slide 19 text
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
Slide 20
Slide 20 text
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.
Slide 21
Slide 21 text
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
Slide 22
Slide 22 text
So what do they both have
in common?
Slide 23
Slide 23 text
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.
Slide 24
Slide 24 text
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.
Slide 25
Slide 25 text
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.
Slide 26
Slide 26 text
No longer do developers
expect multi-minute
compilation times between
pressing save and seeing
the changes.
Slide 27
Slide 27 text
So let's dig in to how they're
different from each other.
Slide 28
Slide 28 text
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
Slide 29
Slide 29 text
We'll touch on performance, but this is not a deep dive
into that subject, and here's why...
Slide 30
Slide 30 text
Diving into Flutter is a truly fantastic
experience.
Let's start with
Flutter
Slide 31
Slide 31 text
● 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
Slide 32
Slide 32 text
● 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
Slide 33
Slide 33 text
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.
Slide 34
Slide 34 text
Rendering Engine
Flutter has a really innovative and high-performance GPU
accelerated rendering engine.
Slide 35
Slide 35 text
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?)
Slide 36
Slide 36 text
But...
Slide 37
Slide 37 text
Dart!
OMG, Dart!
Classes inside of classes inside of classes. Oh, the
boilerplate...
Slide 38
Slide 38 text
You didn't think you could just
write "padding: 20" right?
No, you have to instantiate a
Padding class and an EdgeInsets
class.
Slide 39
Slide 39 text
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.
Slide 40
Slide 40 text
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.
Slide 41
Slide 41 text
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.
Slide 42
Slide 42 text
But at least Dart has a safe, sound type system, right?
Slide 43
Slide 43 text
No content
Slide 44
Slide 44 text
No content
Slide 45
Slide 45 text
Just be prepared. As a beginner, you will forget to initialize
some variable and you will see some null pointer
exceptions.
Among other exceptions.
Slide 46
Slide 46 text
No content
Slide 47
Slide 47 text
Moving on..
The Layout System
Slide 48
Slide 48 text
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.
Slide 49
Slide 49 text
Actually, an interesting side effect of the "styling by
nesting" is that you can't easily separate structure from
style. They are intrinsically coupled.
Slide 50
Slide 50 text
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.
Slide 51
Slide 51 text
React Native let's you move fast,
building high quality UI with strong
influence from web.
Let's move on to
React Native
Slide 52
Slide 52 text
● 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
Slide 53
Slide 53 text
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
Slide 54
Slide 54 text
● 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
Slide 55
Slide 55 text
We could do a whole talk on Expo, but let's move on to
TypeScript.
Slide 56
Slide 56 text
Compared with Dart, we get:
● Explicit null safety
● Union types and incredible type inference.
● Strongly typed data objects
● Strongly typed Tuples
● Destructuring
Slide 57
Slide 57 text
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.
Slide 58
Slide 58 text
React Native Rendering Engine
Uses the built-in platform-provided components.
iOS and Android each have a set of similar but different
view components.
Slide 59
Slide 59 text
React Native, so many great
features, BUT...
Slide 60
Slide 60 text
OMG, the out of box experience!
React Native, out of the box, provides next to nothing..
Slide 61
Slide 61 text
No navigation.
No theming.
No component library.
Not even icons.
Slide 62
Slide 62 text
There is literally no way to tell React Native
"Please use this font family for all the text in my app"
Slide 63
Slide 63 text
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.
Slide 64
Slide 64 text
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.
Slide 65
Slide 65 text
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.
Slide 66
Slide 66 text
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.
Slide 67
Slide 67 text
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.
Slide 68
Slide 68 text
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.
Slide 69
Slide 69 text
No content
Slide 70
Slide 70 text
You can demo the React Native version
on Expo:
https://exp.host/@sstur/hux
Slide 71
Slide 71 text
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
Slide 72
Slide 72 text
Bonus: web version using Expo Web
huxapp.com/demo
Slide 73
Slide 73 text
So which one should you choose
for your next project?
Slide 74
Slide 74 text
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?
Slide 75
Slide 75 text
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
Slide 76
Slide 76 text
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?
Slide 77
Slide 77 text
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.
Slide 78
Slide 78 text
You will actually enjoy building
apps with either of these.
Slide 79
Slide 79 text
Thank you.
Please go out and try these frameworks, you will learn a
lot.
Find me on the Twitters @sstur_