$30 off During Our Annual Pro Sale. View Details »

Choosing between React Native and Flutter

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.

Simon Sturmer
PRO

July 18, 2019
Tweet

More Decks by Simon Sturmer

Other Decks in Technology

Transcript

  1. Choosing between
    React Native &
    Flutter
    Kansas City Developer Conference 2019

    View Slide

  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

    View Slide

  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.

    View Slide

  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.

    View Slide

  5. These two are the hottest (possibly over-hyped)
    open-source frameworks on the mobile development
    scene right now.
    Side note...

    View Slide

  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.

    View Slide

  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.

    View Slide

  8. The Frameworks
    Made by Google. Open sourced in 2017.
    Made by Facebook. Open sourced in 2015.

    View Slide

  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.

    View Slide

  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.

    View Slide

  11. The year is 2015...
    Write once run everywhere
    More like “learn once, write everywhere”

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  15. React Native at its core imposes very little opinion on
    anything.
    And this might be considered one of its weaknesses.
    React Native

    View Slide

  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

    View Slide

  17. A Dart project codenamed Sky is teased,
    claiming 120fps on Android.
    The year is 2015...

    View Slide

  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.

    View Slide

  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

    View Slide

  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.

    View Slide

  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

    View Slide

  22. So what do they both have
    in common?

    View Slide

  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.

    View Slide

  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.

    View Slide

  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.

    View Slide

  26. No longer do developers
    expect multi-minute
    compilation times between
    pressing save and seeing
    the changes.

    View Slide

  27. So let's dig in to how they're
    different from each other.

    View Slide

  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

    View Slide

  29. We'll touch on performance, but this is not a deep dive
    into that subject, and here's why...

    View Slide

  30. Diving into Flutter is a truly fantastic
    experience.
    Let's start with
    Flutter

    View Slide

  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

    View Slide

  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

    View Slide

  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.

    View Slide

  34. Rendering Engine
    Flutter has a really innovative and high-performance GPU
    accelerated rendering engine.

    View Slide

  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?)

    View Slide

  36. But...

    View Slide

  37. Dart!
    OMG, Dart!
    Classes inside of classes inside of classes. Oh, the
    boilerplate...

    View Slide

  38. You didn't think you could just
    write "padding: 20" right?
    No, you have to instantiate a
    Padding class and an EdgeInsets
    class.

    View Slide

  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.

    View Slide

  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.

    View Slide

  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.

    View Slide

  42. But at least Dart has a safe, sound type system, right?

    View Slide

  43. View Slide

  44. View Slide

  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.

    View Slide

  46. View Slide

  47. Moving on..
    The Layout System

    View Slide

  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.

    View Slide

  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.

    View Slide

  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.

    View Slide

  51. React Native let's you move fast,
    building high quality UI with strong
    influence from web.
    Let's move on to
    React Native

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  55. We could do a whole talk on Expo, but let's move on to
    TypeScript.

    View Slide

  56. Compared with Dart, we get:
    ● Explicit null safety
    ● Union types and incredible type inference.
    ● Strongly typed data objects
    ● Strongly typed Tuples
    ● Destructuring

    View Slide

  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.

    View Slide

  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.

    View Slide

  59. React Native, so many great
    features, BUT...

    View Slide

  60. OMG, the out of box experience!
    React Native, out of the box, provides next to nothing..

    View Slide

  61. No navigation.
    No theming.
    No component library.
    Not even icons.

    View Slide

  62. There is literally no way to tell React Native
    "Please use this font family for all the text in my app"

    View Slide

  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.

    View Slide

  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.

    View Slide

  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.

    View Slide

  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.

    View Slide

  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.

    View Slide

  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.

    View Slide

  69. View Slide

  70. You can demo the React Native version
    on Expo:
    https://exp.host/@sstur/hux

    View Slide

  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

    View Slide

  72. Bonus: web version using Expo Web
    huxapp.com/demo

    View Slide

  73. So which one should you choose
    for your next project?

    View Slide

  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?

    View Slide

  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

    View Slide

  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?

    View Slide

  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.

    View Slide

  78. You will actually enjoy building
    apps with either of these.

    View Slide

  79. Thank you.
    Please go out and try these frameworks, you will learn a
    lot.
    Find me on the Twitters @sstur_

    View Slide