React Native VS Google Flutter

Abstract

I believe many of us frontend or backend developers or even full stack engineers face situation then your customer decides to extend his clients with mobile apps. This is very common nowadays, and it's a smart decision because how we would try with mobile first design and layouts web applications always lose to a native mobile app.

Ten years ago we didn't have a chose and programmers armed with Java or Objective C started to write native code for one platform. What drastically increased the cost and complexity of further maintenance and development. Adobe corp has made first attempt to change that with PhoneGap platform.

PhoneGap provided simple tools based on well-known technologies in modern web development like JavaScript and CSS. Frankly speaking, PhoneGap wasn't real mobile application it was well-masked browser's window (WebView). So, it was a big step, but applications lose all advantages of native version and were restricted in the same manner how and in-browser web applications. But it was enough for many simple API clients app like catalog's viewer, news feeds, content browsers, etc.

But of course, the industry still felt necessity in unified platform what provides abilities for rapid development for both Android and IOS platforms. And video games industry made a significant impact in this area.

Why was it game developers? Everything is dead simple. When you develop mobile game, you are forced to hire two development team for both platforms and build development process for both sides to get the same game on two platforms. And it was very inefficient, sometimes game studios even focus only on one platform and in a case of success ported existing code for the new platform.

So, to close that question many cross platforms frameworks were made like Unity, Corona SDK, and many others. They provided one programming language to code and clear way how to organize development for both platforms in the same time and with the same team.

These frameworks very popular now and they allow to develop applications not only for mobile platforms but video games like PS, XBOX, and PC. An approach what was used in that frameworks called transpiler, it means what main code might be developed on any allowed programming language but before final compilation, it will be transpiled in a native language with a native toolchain for every platform. That's how engineers resolved a problem with a zoo of technologies and gave the industry a way for rapid development with a "native" quality of applications.

Briefing

Mobile application's market shows huge grow every year. In developing countries you could meet people what heavily use advantages of digital era every day but they even never seen a laptop or stationary computer, it sounds weird, but in fact, mobile users are outstripped notebooks and PCs in several times.

As a full stack developer, I understand well nowadays you can't just ignore the mobile market like it was 5-6 years ago and continue to focus only on frontend and backend job. New time dictates new rules, and you all know viral applications what don't have web clients at all like Tinder, Spotify and many more.

As a startup hacker, I see my primary goal in speedy transformation ideas and hypotheses in production ready products in no time environment. When three months development cycle supposes full featured modern frontend for web version and substantial well-planned backend/server part.

There is an issue on how to add mobile applications development in this already overloaded process and do not drastically increase cost, time and final complexity. Yes, PhoneGap like platforms helped a lot but what about performance and access to platform native features what are laying aside of browser's opportunities.

But thanks for technologies and we have now frameworks for rapid native applications development based on well-known web technologies and frameworks, and today we shall test two the most popular platforms on the market what brought great opportunities to extend our possibilities with mobile development without pain.

In this article, I set several points which seems essential in my case. How you can see above I focused on fast prototyping and product's delivery in a very taught environment.

How it's easy to start
Learning curve
Ecosystem and community
Output results

And let's start our review with an overhyped technology, and of course, it's React Native. In our pair, it's ultimate leader regarding popularity.

Review

React Native

Ok, at first I would like to notice what React Native as and a successor to React it's not a framework. It's a library what implements View design pattern. So, it's pretty enough for simple applications like showcase or image gallery, etc. But if you're working on a more complex application, you would build more convenient tools something like MVC framework where you already have V(View) represented with React, and it's time to choose Model and Controller for the full pattern.

In my opinion, the situation here is ambiguous. From one point of view, you can get additional flexibility and find tools what better fit in your task. But to be honest, all we know there is the only couple or ONLY one workable solution for every part of your framework and in 90% of all assemblies on React you could find React Router, Redux, Apollo, Saga, etc. Of course, other solutions, but stability and production readiness don't give them a chance for wider use.

So, everything the same for React Native if need something a little bit more than just starter application you should deal with 3rd party libraries to extend React library to the real framework.

My application is a few screens with some backend's API interaction. Pretty simple but requires all three letters in MVC pattern. As and in React Web, React Native has only one popular option for a router 's role, and yes, Redux could be used here as well. Experienced React developers can find that there is no significant difference between Web and Mobile version - the same widgets/components powered with states, same libraries what provides almost seamless dive into mobile development for React frontend developers. I have had intensive experience with React Web, and it was a super smooth transition for me. But of course, if you never clash with React, you should spend your time on couple tutorials to start even with a straightforward application. But fortunately React is very friendly for newcomers I think you can get basic conception in 1-2 days and begin to feel you free in development.

React Native also has excellent documentation for new developers with a good "Getting started" guide. On the installation, you have two options. The first one is a pretty straight model when you install separately Android, and IOS emulators with appropriated toolchain and development go right out on your machine. The next one option it's Expo - library what wraps around appetizer.io service. And what does it mean? It means what you don't need to install gigs of mobile OS images, compilers, and native libs. Expo streams your application from appetiser.io servers. Sounds weird but it's work, and I found this very convenient way to start rapid development even on low-end hardware like an old laptop or even RaspberyPI. But it should be noticed what appetiser.io Free plan includes only 100 minutes in a month what can be not enough and paid plans to start from 50+ USD. But anyway great idea.

I choose the more common way and installed full Android and IOS environment first. After that, I followed a guide and setup React Native in couple "yarn add" commands. Installation was as simple as possible, and I created the new project according to an existing guide and tried to start it to check how my android environment works.

And the first problem occurred here. React tried to compile my application with a wrong Gradel version and failed with a long stack trace. After fast googling, I found a solution and fix my installation. But it seemed strange for me what very fresh React installation fails from the beginning.

After that, I've opened API documentation and add application navbar. Emulator's screen became red with unreadable output, and I've backed to Google again where I found recent GitHub issue with tons comments for it. People blame developers what they are ruining every release in a lousy manner and here I 100% agree. Listen it's the central part of every application what you can meet everywhere but React Native fails on it.

So, in the end, I found more or less stable realize and tried to rollback, and it worked for me.

Let's jump directly to work with React Native aside all that mess in core development. As I and wrote above React it's only View library, and you need to assemble your meta-framework for efficient and rapid development. First of all, I got react-native-paper. That library exists for all modern UI frameworks and provides native google material design components out of the box.
And simple dialog window failed as well but now in react-paper. It was enough for me. Especially after the moment when I pointed on the bug to react-paper community, and one guy just closed it without any comments or whatever. Here I understood what something really broke in this place, but I still should work on my mobile app after all and started searching new tool.

Flutter

And the first thing that caught my eye was Google Flutter. I was distraught after all that problems with React because I love the way how React works, JSX and it's concise and expressive nature.

Instead of that Flutter offered me new Dart language what I have never tried before and frankly speaking I didn't want. But my internal deadlines already started to alert me, and I gave a chance to Flutter, and how you'll see later, it was a great idea.

The installation process was pretty smooth, and because I have had an Android environment installed I just downloaded Flutter distributive, and that's it. From the documentation, I got what it's nice to use Android Studio with Dart and Flutter plugins what I've installed in a couple of clicks.

At first, I checked Dart language quick tour, and it should be noticed. I though what Dart it's a peculiar language but don't forget what I was forced to use it. And after one day of intensive work with it, I found what it's a real change for JS. You can imagine what Dart soak all good ideas from Java, JavaScript, C++ with some Python's flavor. On the first view, it sounds like an ugly monster, but it doesn't. It's a very mature and a well-designed tool. If you tried another Google Go language, you should understand me. Yes, Dart, it's solid strong work what utilizes best practices from both dynamic and static languages and does it masterfully. Literally, after 1-2 days you feel it. Dart very predictable and easy to use tool. I wonder why I didn't meet it before.

But let's back to Flutter itself. After I finished with basics of Dart, I got back to my mobile application, and everything fell into place. If we draw analogs with React conception, you can find what core ideas are mostly the same. You have minimal buildings structures what called Widget here and what the same what we call Component in React, and it could be stateless or stateful. Looks familiar, isn't it? So, all other processes present in the same when you just union your small building blocks in the big application and it's how Flutter works.

But aside of fully featured framework you also get tons of ready to use components/widgets right out of the box. Like Material design, Apple Cupertino design and many more. Don't forget Flutter is a framework you don't need anything else instead of Flutter. Literally, you have all the tools to build, debug, test and publish your production ready application to stores as easy as that!

Сonclusion

React is an excellent library what you can put at the foundation of your framework with a broad ecosystem and exciting ideas like Expo. But forever beta status doesn't allow to count on it well.

Flutter provide robust, full-featured solution with batteries based on Dart. For the first view Dart could seem like a bit weird language, but trust me it is not. Dart is a reliable platform with a bright future especially with we know what Dart will be the primary language for the next Google operation system called Fuchsia. And time what you invest in learning will repay you.

Anyway, that's your choice but I made mine, and I choose Flutter.