React Native vs Flutter
A web developer’s perspective
I’ve been writing web apps professionally for almost four years now and want to contribute to the mobile projects that we have in the pipeline at work. This has been met with some resistance, with my team lead even going so far as saying I’d need an advanced degree to be considered for mobile development teams, or asking if I’d consider learning Java.
So I’ve written a couple apps on the side to get my feet wet in developing for mobile. Going to DartConf earlier last year gave me the confidence to give mobile development a try since modern tooling makes it possible to apply my web experience in that sphere.
Flash forward a year later, I’ve tested out both React Native (RN)and Flutter and these are my thoughts on the two.
How they get the job done
Both RN and Flutter allow you to write native mobile applications for iOS and Android from a single code base.
How React Native Works:
To understand how RN works as a web developer, you could equate its rendering API to React’s virtual DOM. It acts as a layer between the description of the view and what’s needed to render the app to the page. To make your views interactive, you must edit the DOM in the browser.
In RN, instead of rendering to the DOM, it invokes Objective-C APIs to display iOS components, or Java APIs to display Android components. From the time of jQuery, this abstraction has been a normal part of a web developers life and should feel natural to those who’ve learned to code in the last 5 years.
How Flutter Works
In Flutter, to travel the bridge that exists between the device and the code you write is achieved through platform channels where the ‘channel’ sends a message to the device in its native language.
Instead of writing this in JavaScript, you write in Dart; and this for me was challenging, as not only did I have to learn to develop something for a mobile screen, where the real estate is limited, and the layout is almost backwards from that of a browser (like the default being in columns and not rows), but I also had to learn a new language, with all of it’s idiosyncrasies and quirks. It was like learning React without ever having learned how to manipulate the DOM with vanilla JS.
Ergonomics
Getting Started
There are two methods for initializing and developing your app in react native: Expo, and the React Native CLI.
Expo provides a more robust and developer friendly workflow at the cost of some flexibility. Apps bootstrapped with these processes also have access to a slew of useful features provided by the Expo SDK, like BarcodeScanner, MapView, ImagePicker, and so many more.
When using the React Native CLI, all of the development and native code files are exposed to you; giving back that flexibility, with the trade off of having to maintain the native code.
Getting started with Flutter is not as simple as npm install, but involves downloading the Flutter SDK, and all that jazz which is different depending on your operating system and then you have to set up environments for both xcode and Android Studio, then you have to set up your editor, etc.
It takes considerably more effort to get started but the official instructions were simple to follow, even for someone like me who tends to skim documentation and get it wrong the first time. But if you prefer Medium articles to documentation: here is a real good guide for you.
For RN development, I lean towards Expo because of all the tooling it provides and the time savings of not having to learn native code in case a client wants something that the framework doesn’t provide. The biggest draw being that the whole things feels like adding another layer of indirection and complexity to an already complicated stack, and I found it confusing to find a solution to a problem on the internet, only to discover that solution is not for apps built with Expo.
Development experience
It’s safe to say that react has had a profound influence on Flutter’s architecture, demonstrated through the offering of a similar development experience.
Not only can you still use VS Code, tooling for each is quasi-similar offering hot reload to give you a faster feedback loop while writing code, visualization tools that allow you to understand your component tree and layout, and extendibility through their respective package managers — npm for RN and pub for Flutter.
You can also bring the same principles of lifting up state, composition vs inheritance and thinking in React that have shaped the mindset of how we build modern applications.
Roadmaps
While it’s important to know how they compare in terms of inner workings and ergonomics, it’s equally as important to consider their purpose and future roadmaps could impact your design decisions.
Flutter seeks to dominate the multi-platform application development space and make Dart the best way to build applications. They accomplish this by adding a full suite of extensible components that are built from scratch. They are also spearheading Flutter’s use on other platforms like desktop, and web.
Conversely, RN seeks to distill the differences between platforms into the most generic components already available to the platform so the community can build on that. While good at keeping with a baseline consistency of rendering on iOS and Android, you won’t get very far with the components provided through the framework without a whole heap of css or a component library, where you should practice discernment when deciding which to use.
RN and Flutter both allow businesses an opportunity to get into the mobile space without making investments in new employees because of a lack of mobile development expertise.
They also open freelancers to more opportunities in the mobile space and expand their skillset and make more money.
What to consider when deciding which to use.
If they both offer similar tools for similar means — rapid development, beautiful design and be first to market — when making a decision on which technology to use, there are two things we should all keep in mind which are what kind of experience does it provide for you — as the developer — and what kind of experience will it provide to your users.
For developers
For me, the experience of developing apps with Flutter feels more pleasing and things just seem to work, especially when styling a widget or just getting started by doing trivial things like building a simple master/view app to get the hang of it. When I got to doing more advanced things, things that I am fluent at doing in React, I struggled. Most of these struggles surrounded learning some of Dart syntax and how to create a desired layout. There was a lot of Googling.
There is still much Googling working with RN, albeit more precise, but having concrete knowledge of its basic concepts like JSX, state, and props has made me a more informed Googler and has made the transition to mobile easier.
Again, layouts on mobile were hard for me to wrap my head around. I appreciate having knowledge of the flex-box model to bridge the gap in knowing how to style my components in RN. And with this shift in mindset, I could go back and be just as productive with styling in Flutter after feeling the ergonomics of developing on mobile through my experience with RN.
For users
My insider’s eye is more keen than that of regular users, but I can always tell when an app is built with RN. Like the CATS Pass for our transit system or PassPortParking app (all of which built here in Charlotte). These aren’t the apps that Facebook is going to showcase on their site, but are nonetheless used by (or has the potential to be used by) many users daily.
While not terrible, their components are generic and lack a certain depth, animations and performance are a little janky for some, probably because of the amount of effort from the developer to deliver a rich native experience. Since Flutter widgets were built with performant native end-user experiences in mind, it’s less mental effort to provide that to users.
In conclusion
Considering the momentum, community and how fun it is to use, it makes me excited to be apart of the Flutter community. I got my first freelance opportunity recently and while Flutter would have been my choice, the client chose to build with RN, for similar reasons that are echoed in the corporate IT consulting world: it’s just not that well known, or tested. Enterprises think that if the likes of Facebook and Instagram are vetting this tool, then it must be good enough for my use. And our sales folks are more concerned with how they could sell this to their clients.
But the reality is that Flutter is making mobile development great again and it’s not a matter of selling the idea of Flutter or demonstrating the veracity of the technology, it’s about how this technology choice impacts our team and our product.
If you’re also a web developer who wants to get in on the future of mobile development, the time is now! There are so many resources, trainings, podcasts available for you to learn Flutter; here are some to get you started:
Hi, I’m Erica Mitchell (aka Duggie) and I write software for clients large and small, in the Charlotte, NC area.
If you like my style, go ahead and give a round of applause, and be sure to follow to read more of my rambling thoughts about life && code ❤️.
