Starting in mobile development: React Native vs Flutter

Feb 28, 2022 | english, Sin categoría

The latest trends for mobile application development have helped a lot of customers to have better experiences with the companies they engage and this in turn has allowed businesses to increase their number of daily downloads and generate higher revenues.

However, behind every application, there is a software development process that uses an increasingly set of tools allowing these experiences to happen. There are many options for these toolsets and even when they might serve the same purpose, the differences between them become the most critical aspect when software developers want to make a decision on which is the best tool to use.

React Native and Flutter are two frameworks for developing native mobile applications, for both iOS and Android, while using only one codebase. The two frameworks share similar functionalities and are trending in the mobile applications industry right now. React Native was officially released in 2015 and Flutter in 2018, currently React Native is leading the race, however, Flutter wants to encompass more of the market share by letting developers also publish the final application to the web. Both frameworks are open source and are backed by the biggest players in the tech game React Native by Facebook and Flutter by Google.

The key difference between Flutter and React Native is the base language: dart and javascript, respectively. This is an initial and huge difference as dart is compiled while javascript is interpreted.

Flutter uses Dart which has been used internally in development in google and has been available since 2011 and got more attention in 2017 with the launch of Flutter. The biggest difference is that dart is a compiled language and it comes with type safety allowing developers loose and strong prototyping to prevent more errors when compiling. Dart is different from what developers are used to and can have a learning curve. Although developers familiar with object-oriented programming can learn it very quickly.

React Native uses javascript which has been around for more than twenty years, nearly every electronic device from a computer, tablet or mobile phone uses some form of javascript. React Native is based on the javascript library React and having knowledge of javascript makes the learning curve short and most developers can get up to speed quickly.

Javascript is a loosely typed language that can cause some problems during runtime if the types of data are not managed carefully (for instance passing a string to a function that expects integers), although typescript is often used to guarantee type safety it can complicate things.

Flutter has a growing community of developers that are constantly improving libraries and documentation. The initial documentation is considered more organized than React Native in some topics.

React Native as of published date has fewer stars on GitHub at 87.9k versus 93.9k of Flutter showing that Flutter is gaining popularity rapidly. Although GitHub stars are just one metric that can mean a lot of things (how many people are following the library, how many found it useful, etc) StackOverflow questions give more information as it shows how many developers are currently using the technology in their projects. Total questions about Flutter are currently at 48,751 while React Native’s are at 77,166 suggesting that Flutter is increasing in popularity. React Native has the advantage of having a more stable community as they have had more time in the technology landscape and thus have more questions.

But this article is not going to be your same old Flutter vs React Native comparison, so let’s start with the good stuff.

Flutter

Setup

Starting from configuring the development environment Flutter is more streamlined and in most operating systems allows for a very quick and productive configuration. The Flutter doctor is particularly useful for detecting problematic configurations.

The Flutter doctor command runs a thorough check of the system making sure the right toolchain is installed, ensuring that an IDE is configured, by default it asks for Android studio to be installed as it uses the configured emulator depending on the operating system.

The Flutter doctor also checks devices connected to the computer, updates to the version of Flutter, android licenses, all possible devices for emulation, and IDE´s currently compatible with Flutter.

In short, after configuring the development environment a test application can be deployed and emulated in less than an hour.

Flutter comes with plugins for android, vs code, and other common IDE´s, In the android studio it comes complete with dart plugins and all the facilities to be able to emulate apps.

As of November 2019, React Native implemented Doctor which essentially checks system configurations to speed up development processes. Doctor checks the environment node, yarn, npm, Android SDK, and Xcode configurations similar to Flutter.

Although it aims to do the same as flutter doctor we tested it and ran into problems while it was running and scanning some node modules.

React Native also comes with plugins for vs code and other common IDE´s although android studio does not support development.

Flutter Benefits Setup

Flutter is very responsive and very fast. It is backward compatible with old devices and, although apps are a bit larger than Native, performance and graphics are optimized. Lots of functionality and graphic components are supported right out of the box saving time for developers and not requiring developers to get into the nuances of navigation and state management. This is great for productivity but not great for customization as Flutter is still quite new, some plugins and functionalities may not be available in the existing libraries resulting in the necessity of coding and adjusting what is available. It however is very useful for creating MVP and testing proofs of concept.

As of recently, Flutter has allowed for beta testing of Flutter for the web which allows dart code to be compiled into javascript for use in the browser. This lets developers create apps with web support so that they can run in the browser by creating a web development server and the front web app. So, with the same code Flutter allows for the development of web applications and mobile applications allowing less redundancy while coding and simpler testing practices.

React Native

On the other hand React Native although it has a more mature ecosystem, configuring the development environment can be time-consuming as sometimes some configurations and versions can be incompatible with each other and therefore require more adjusting.

However, after configuration, everything runs smoothly. But does require more time for development as out of the box React Native only allows for the basic functionality and has lots of choices for handling states, navigation, and most other basic functionality. This is great for customization but requires developers to dig deeper into the application of component libraries as they need to understand the nuances and details of the libraries they need to implement. This takes more time and effort but has the result of a more customizable product.

The apk generated between Flutter and React Native is similar in size so there is not much comparison here. As both are cross-platform neither is completely Native so the size can be an issue in some cases but both companies are working on reducing the size of the apks.

Apps developed in each framework

Flutter

Flutter has been used to develop many common use applications for example.

Google ads

This app enables users to launch marketing campaigns, monitor them, and count with the ability to receive alerts and messages.

Alibaba

The complete Alibaba marketplaces are developed using Flutter, users can buy, sell, publish and ask for information of products from mobile devices allowing them to do e-commerce from all over the world.

Birch Finance

Birch Finance is a credit card rewards app that helps users manage and optimize their existing cards. Users can monitor their purchases, choose the best card for their needs and show them rewards available.

Music Tutor

This app teaches users how to read music by identifying music notes in timed sessions and exercises.

School Planner

This app lets students monitor their classes and homework, they can see information about their timetable, homework, grades, exams, tests, and enables sharing of notes and messages between students and teachers.

App Tree

App tree is an enterprise application for popular brands like Mcdonald’s where organizations can audit, collect information and manage business workflows. Flutter integrates user authentication, security, performance, and third-party integration in its workflow.

The new York times

The Ken Ken puzzle published in the new york times is ported to the mobile and web forum of the New York Times is supported by Flutter.

Google Assistant

Many of the Google Assistant apps have been leveraging the power of Flutter. Flutter for mobile, web, embedded and desktop has been used in many of google’s apps. Since Flutter and Google Assistant belongs to the same ecosystem.

React Native

React Native has been used to develop the following common applications for example:

Facebook Ads

is the first full React Native, the cross-platform app built by Facebook. The Javascript framework perfectly handles the different ad formats, date formats, currencies, time zones, and all things necessary for marketing.

Walmart

After Walmart implemented node into their infrastructure they ported their mobile application to React Native where they could save time in development and give the user a great experience in all their e-commerce shopping.

Instagram

Instagram is a flagship product of Facebook so naturally, it was important for them to port to React Native, their first implementation was the push notification view but in time they ported the complete app which functions well with their python based backend.

SoundCloud Pulse

SoundCloud Pulse is an application for creators that helps them manage their accounts and upload content.

Wix

Wix is an online company that provides web hosting and website design services. Users can design and build their sites in HTML5/CSS, as well as mobile websites, using drag and drop utilities. The users do not need to know programming to be able to use Wix.

Airbnb

Airbnb has used React Native for its applications. According to a software engineer at Airbnb, there are 60 members working on React technology on a daily basis in their development team. Currently, they have changed their development lifecycle but used React Native for their base infrastructure.

UberEats

This company uses React Native for part of the application. They connect restaurants to collaborators to their clients and have developed parts of their mobile applications using React Native

Components or widgets

In Flutter nearly everything is a widget. Fonts, buttons, layout elements, styles are all widgets.

Widgets have to be imported from libraries of components the same way as React Native.

Only the components used in the application will be imported.

As with React Native components that can be custom made according to the need of the project, widgets can also be custom made and work similarlydaily as components as they inherit and interact with properties from their parent widget or component.

The main difference between widgets and components is that in Flutter widgets are designed to work the same way in IOs and android allowing for simpler integration and easier development although adjustments could have to be made. In React Native some things need to be adjusted because of the javascript bridge to Native. The main difference is a javascript bridge versus a direct compilation to code which results in a slight performance improvement.

Which to choose?

React Native is recommended for bigger, more complex applications as its robust architecture tends to have fewer bugs and issues due to it having more time in the market. It is generally more likely to find solutions to know issues and other options to work around as more developers have used React Native than Flutter.

Flutter, on the other hand, has improved performance than React Native applications as it allows 60fps in the app and 120fps in animations all improving performance as dart compiles without a javascript bridge that React Native requires. Flutter also compiles to a smaller app installation allowing for less size taken up in phone internal memory. However, some issues could be an obstacle during development due to the reduced ecosystem.

Although most major functionalities and APIs are currently available it is more likely that react native has more workarounds, options, and solutions than Flutter.

So, for smaller applications or fewer complex applications Flutter is a clear winner but if a bigger, more complex application needs to be developed React Native is a better option.

If developers come from web development it is faster and productive to continue to React Native as Flutter requires knowledge of dart for development.

In brief, Flutter is rapidly catching up to Flutter and if it irons out these issues and increases performance as is most likely it could easily become the better choice in the future.

If you are thinking about creating an application for your business or your website, keep in mind that for using these tools, it is best to have professional and complete advice, which will help you to enhance the project and will also help you to define the scope of it. In this way, you will save time and costs, obtaining the best result for your project.

To learn how to achieve this type of development, visit: https://www.appspringtech.com/services