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.

Simon Sturmer

July 18, 2019
Tweet

More Decks by Simon Sturmer

Other Decks in Technology

Transcript

  1. 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
  2. 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.
  3. 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.
  4. These two are the hottest (possibly over-hyped) open-source frameworks on

    the mobile development scene right now. Side note...
  5. 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.
  6. 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.
  7. 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.
  8. 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.
  9. The year is 2015... Write once run everywhere More like

    “learn once, write everywhere”
  10. 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
  11. 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
  12. 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
  13. React Native at its core imposes very little opinion on

    anything. And this might be considered one of its weaknesses. React Native
  14. 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
  15. 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.
  16. 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
  17. 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.
  18. 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
  19. 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.
  20. 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.
  21. 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.
  22. 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
  23. We'll touch on performance, but this is not a deep

    dive into that subject, and here's why...
  24. • 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
  25. • 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
  26. 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.
  27. 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?)
  28. You didn't think you could just write "padding: 20" right?

    No, you have to instantiate a Padding class and an EdgeInsets class.
  29. 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.
  30. 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.
  31. 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.
  32. Just be prepared. As a beginner, you will forget to

    initialize some variable and you will see some null pointer exceptions. Among other exceptions.
  33. 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.
  34. Actually, an interesting side effect of the "styling by nesting"

    is that you can't easily separate structure from style. They are intrinsically coupled.
  35. 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.
  36. React Native let's you move fast, building high quality UI

    with strong influence from web. Let's move on to React Native
  37. • 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
  38. 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
  39. • 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
  40. Compared with Dart, we get: • Explicit null safety •

    Union types and incredible type inference. • Strongly typed data objects • Strongly typed Tuples • Destructuring
  41. 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.
  42. React Native Rendering Engine Uses the built-in platform-provided components. iOS

    and Android each have a set of similar but different view components.
  43. OMG, the out of box experience! React Native, out of

    the box, provides next to nothing..
  44. There is literally no way to tell React Native "Please

    use this font family for all the text in my app"
  45. 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.
  46. 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.
  47. 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.
  48. 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.
  49. 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.
  50. 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.
  51. 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?
  52. 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
  53. 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?
  54. 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.
  55. Thank you. Please go out and try these frameworks, you

    will learn a lot. Find me on the Twitters @sstur_