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
   

   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