Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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.

A01b931867096ec8874202e233279212?s=128

Simon Sturmer

July 18, 2019
Tweet

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?
  43. None
  44. None
  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.
  46. None
  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.
  69. None
  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_