Blog

Elena Kvitkovska

How to create a video chat app

Posted by Elena Kvitkovska on November 13, 2019

We live in the informational age of digital life and online communication. Information delivery is changing, and today video calls are a global trend. Using a video chat app, you can call colleagues, clients, and partners, handle online consulting sessions, and the like.

Why you need a video chat

Video chat is becoming an essential part of live chat software helping businesses enhance the customer experience. It can help a lot in improving sales provide better support. According to lifesize, video calling brings significant benefits to the working process:

  • 99% of respondents think that video calling improves communication and enhances productivity;
  • 90% of respondents say video calling helps them to get their point across;
  • 89% of respondents agreed that video calling helps them to complete the tasks faster;
  • 87% of employees that are not present for a meeting feel better engaged through a video call.

Live video chat is applicable to any business area: online commerce, consulting, finance, e-learning, etc. Healthcare industry is widely adopting video calls – global healthcare trends, like telemedicine, telepharmacy, and telepsychiatry are entirely based on it.

Let’s see how you can strengthen your business by using the custom video chat system.

Improved customer service

If a customer has a question, they visit your website and try to contact the support team via live chat. Video communication makes it fast to fix any issues because support managers can assist their customers immediately. Video calls can help them to tackle any challenges they may experience while using your product. When a customer needs you most, you’ll be right here.

Minimizing costs

Speaking about online support, we all agree that it may be challenging to explain the problem via a chat. Imagine, how much money the company loses when it is impossible to solve the issue from the first time? A video call can solve this challenge since the visual form is clearer than text instructions. Video chatting enhances remote work management. This decreases the operational costs of office management and organization of business trips.

The growth of sales

Online video chatting is erasing your geographic boundaries. You may expand your audience, explore new markets and be in touch with clients from all over the world. Surfing your e-shop, customers may experience difficulties selecting the product they need. Via a video chat app, your employees may connect with the customers and help them select the necessary product.

Enhanced teamwork and productivity

Video chatting also enables regular and clear communication between team members, even if they are not located in the same building or even the same country. This helps cut down on in-office costs and increase the productivity of remote team members. Many negotiations and conversations can happen well over a high-speed video call. In one click, you can arrange a meeting with your employees, clients, and partners without the necessity of leaving your room.

Main features of the video chat app

The video chat development process does not differ much from the development of a regular application, but there are some nuances that you should study more carefully because your success depends on them. Let’s start with the most important thing.

First, you should consider the most essential features of your application. None of video chat apps can exist without the following functionality:

User registration & profile settings

Give your users a convenient way of getting started in your video chat service. You may ask them to fill the sign-up form from scratch or allow to register via a popular social network. The video chat app should also provide an interface for managing the account details and settings.

Search and add contacts

This feature will allow your users to find people they need and start using your application.

User and message status

It is convenient to know whether your companions are online and if they have read your message. Perhaps, the chat system failed to deliver the message and you should try one more time?

Push notifications

As we’ve already mentioned, push notifications allow you to always stay in touch with your users. The users will benefit as well – thanks to pushes, they will never miss an important chat message or application update.

To enhance the capabilities of your video chat application, consider adding additional features that will stand your product out of competitors:

  • End-to-end encryption – ensures the complete security of user information;
  • Cloud services synchronization – storing the user attachments on your servers;
  • Automatic backup – to avoid accidental loss of important information;
  • Support for various data formats – text, video, audio, emoticons, pictures, photographs, stickers, etc.

This is a basic set of desired chat features based on user preferences. After promoting the MVP of your app, you will get the first reviews and see how you can improve it.

How to create your video chat app

To develop the chatting functionality, you can use one of many ready-made solutions. This will save your money and the time and effort of your development team.

Backend development

Most of the video call applications are developing using WebRTC. It is an open-source project built and maintained by Google, Mozilla, Opera, and others. It allows you to build real-time communication software in your browser and is standardized at the W3C & IETF levels.

There are two ways to develop and run a video call application using WebRTC: On-premise and using a CPaaS, or Communication-Platform-as-a-Service, provider.

  • On-premise variant means that it is your job to develop the application and manage its server infrastructure.
  • CPaaS provider will offer you to use their ready-made infrastructure. This will allow you to focus on the development process and save a considerable amount of time and money.

Let’s consider the ways of dealing with each strategy:

On-premise – Peer-to-peer approach

To deploy any software using the on-premise model, you will need your own physical servers. They can be located in your organization or you may rent a server in any data center.

On-premise solutions are the most secure way to store the data. You also can access any information you look for at any time you need. But you must ensure the continuous work of the servers, their maintenance, and security. In case of the P2P approach, the system capabilities are limited to 5-6 users. To implement the group calls, recording, saving the data, you will need a media server.

On-premise – Media Server approach

A media server remains between the call participants and helps them to exchange the data. This approach allows you to add some advanced features, such as recording, simulcast and multi-party calls.

Using the media server approach, you will need to add the signaling layer and STUN/TURN servers. Also, you will have to buy or rent the hardware to include the media server itself and to configure it.

Using a Communication-Platform-as-A-Service (CPaaS) Provider

It provides you its own infrastructure. Typically it includes different software tools, APIs, sample code and other out-of-box solutions. It allows you to focus on the development without setting up your own infrastructure.

UI/UX design

A good application should have an attractive and intuitive user interface and user experience. The users shouldn’t spend lots of time to understand how to perform the action they need. As for the video chat interface, it should have a clear and catching design without lots of buttons and icons.

Cross-platform video chat application

The main step of video chat development is adapting it to different platforms (Android, iOS, and web). To make a cross-platform chatting app, you may use React Native or Flutter frameworks.

Integrations

To build your own chat app, you may use third-party solutions like QuickBlox. They make it possible to real-time client-server communication and information exchange, like streaming. The necessary part of a video chat application is organizing a stable internet connection. QuickBlox solution is one of those tools that can be easily integrated into our application.

Conclusion

Video call apps give people an opportunity to always stay in touch without any effort. For businesses, it means easy communication with clients and partners, as an efficient workflow. A video chat application can be a sustainable service or part of your own infrastructure specific to your business needs.

If you are thinking of adding a video call feature to your platform or building a new video chat app, browse QuickBlox’s SDK and API documentation. This can make the development process a bit simpler since you don’t need to code from scratch. For more details, feel free to contact our sales department right now!

Elena Kvitkovska

Getting started with QuickBlox React Native SDK

Posted by Elena Kvitkovska on November 1, 2019

One of the most appealing sides of React Native framework is that you only have to build your app at once using JavaScript. React Native means two times lower costs for building and maintenance. It has a large community and a variety of libraries in native languages. It is similar in structure to React.js, so it is easy for web developers to work with it.

React Native makes use of native Objective-C/Swift and Java/Kotlin ingredients. They help native-like UI and boost performance in intensive operations. Yet, you can’t reuse native modules across different platforms.

We have recently announced the release of the Quickblox React Native SDK. Today we have prepared a step-by-step guide on building a messenger app with it. You are welcome to download Quickblox React Native SDK. It is in beta now, and we are ready to hear the feedback and improve our SDK according to your proposals.

Why do you need QuickBlox React Native SDK?

QuickBlox React Native SDK offers you all you need to build a chat messaging app. Our toolkit contains helpful methods for implementing the following functionality:

  • Authentication. Upon the user logins to the application, the application starts a secure session. The token is valid for 2 hours after the last API request and is automatically renewed.
  • Users. SDK has all the necessary toolset for secure storing, managing and updating the user information.
  • Chat. For our messaging API, we use the XMPP protocol. Using the toolkit, you can manage the connection to chat server and managing 1-1 and group dialogs.
  • Content. This module allows to store attachments and manage the content.
  • Push Notifications. Push messages help you to keep in touch with the users who are not currently online. Using QuickBlox React Native SDK you can integrate push messaging into your Android or iOS app.
  • Custom Objects. The Custom Objects module provides all you need to manage and update your records.

How to create a React Native app using QuickBlox SDK?

Getting started

To create a new React Native chat messaging app with QuickBlox SDK from scratch follow these steps:

  1. Install Node.js
  2. Install React Native
  3. If you’re on MacOS – install CocoaPods
  4. Run react-native init AwesomeChatApp to create a new project
  5. Navigate to created project and install JS dependencies with npm install
  6. Add QuickBlox SDK to dependencies with npm install quickblox-react-native-sdk --save
  7. If you’re on MacOS – install Pods: enter ios folder and run pod install

You’re done with dependencies!

Launching the app

Now you can start the app with react-native run-android or react-native run-ios

But the application created is not really a chat messenger yet, right? So now you should create some UI for messages and then use our SDK to make it alive!

To make SDK work you should use your QuickBlox application account. To create a QuickBlox application, follow the steps below:

  1. Register a new account at https://admin.quickblox.com/signup. Type in your email and password to sign in. You can also sign in with your Google or Github accounts.
  2. Create the application clicking New app button.
  3. Configure the application. Type in the information about your organization into corresponding fields and click the Add button.
  4. Go to the screen with credentials. Locate Credentials groupbox and copy your Application ID, Authorization Key, Authorization Secret and Account Key. These data needed to run your application on QuickBlox server.

Now, it’s time to turn on QuickBlox SDK


import QB from "quickblox-react-native-sdk"

const appSettings = {
  appId: xxxxx,
  authKey: xxxxxxxxxx,
  authSecret: xxxxxxxxxx,
  accountKey: xxxxxxxxxx,
  apiEndpoint: '', // optional
  chatEndpoint: '' // optional
};

QB.settings
  .init(appSettings)
  .then(function () {
    // SDK initialized successfully
  })
  .catch(function (e) {
    // Some error occured
    // look at the exception message for more details
  });

Now you should sign in and connect to chat:

QB.auth
  .login({
    login: 'yourlogin',
    password: 'yourpassword'
  })
  .then(function (info) {
    // signed in successfully, handle info as necessary
    // info.user - user information
    // info.session - current session
  })
  .catch(function (e) {
    // handle error
  });

Once you signed in you can connect:

QB.chat
  .connect({ userId: 12345, password: 'passw0rd!' })
  .then(function () { /* connected successfully */ })
  .catch(function (e) { /* some error occurred */ });

Great! Now since you’re connected to chat – it’s time to send a message to someone. Let’s create a new dialog:

QB.chat
  .createDialog({
    type: QB.chat.DIALOG_TYPE.CHAT,
    occupantsIds: [12345]
  })
  .then(function (dialog) {
    // handle as necessary, i.e.
    // subscribe to chat events, typing events, etc.
  })
  .catch(function (e) { /* handle error */ });

In order to receive new messages we should tell SDK to send us events when there are new messages in chat:

QB.chat
  .subscribeMessageEvents({
    dialogId: dialog.id // something like 'dsfsd934329hjhkda98793j2'
  })
 .then(function () { /* subscribed successfully */ })
 .catch(function (e) { /* handle error */ });

But how will we handle new messages? We should probably assign an event handler:


import { NativeEventEmitter } from "react-native"

const emitter = new NativeEventEmitter(QB.chat)

function newMessageHandler (event) {
  const {
    type, // name of the event (the one we've subscribed on)
    payload // event data (new message in this case)
  } = event
}

emitter.addListener(
  QB.chat.EVENT_TYPE.RECEIVED_NEW_MESSAGE,
  newMessageHandler
)

So, now we have a dialog, we subscribed for new messages and created function to handle incoming messages. Let’s send our first message:

const message = {
  dialogId: 'dsfsd934329hjhkda98793j2',
  body: 'Hey there!', // message text
  saveToHistory: true // keep this message in chat history
};

QB.chat
  .sendMessage(message)
  .then(function () { /* send successfully */ })
  .catch(function (e) { /* handle error */ })

That’s it!

Conclusion

QuickBlox React Native SDK is here to speed up the process of messaging app development – from designing the prototype to final testing. Using our toolkit, you can integrate the messenger, voice and video calling to your app, manage the files and objects. If you have any questions or suggestions, please submit a ticket to our support team.

Elena Kvitkovska

What are Push Notifications?

Posted by Elena Kvitkovska on October 31, 2019

Push notification is a friendly reminder to your customers about your brand. It is a great marketing tool that helps you keep in touch with the users and return them to your website. Notifications will reach the user anyway, even if they are not online or use a different mobile or desktop device. Push mailing allows you to develop a more efficient and responsive marketing strategy. It is easy to adjust it to user behavior, so it is more efficient than PPC advertising and bulk mailing.

To send the push messages, it is enough to get the permission of the user. They don’t even need to provide personal information, like a phone number or email address. This is the first step to creating the experience of positive interaction with the user.

What is a push notification and how is it different from a text message?

Today, push notifications increasingly replace SMS messages. You can plan mailings and segment the recipients, customize the notifications, create interfaces. You can analyze the effectiveness of the distribution, as well as user interaction with notifications. Push alerts provide more segmentation capabilities and are much cheaper than SMS.

push notifications

Why should you use push notifications?

First of all, push messaging is a great way of communication with the customers, engaging and reactivating them. It allows you to encourage users for performing the necessary actions, and track their behavior. You can analyze their interests, preferences, customize the content and choose the right time to send it.

While the emails are often left unread, push notifications always reach the customers. They are also less annoying then bulk mailing. You send push reminders to the loyal audience since the recipients have agreed to get them. The information in the push messages is brief, so the users don’t have to spend a lot of time understanding it.

Push notifications exist as a marketing channel for reaching customers, but they are also convenient for the users.

It is a good way to follow the updates of their favorite resources: Hot Sale alerts, new publications, tips, promotions, price updates. They remind to complete some actions: continue the game, finish the purchase, do the exercise, take medicine, etc.

You can use push notifications as targeted advertising. They do not broadcast bulk messages yet communicate with each separate user. Let’s consider the main push notifications advertising campaigns.

Types of push notification campaigns

You can use push notifications as targeted advertising. They do not broadcast bulk messages yet communicate with each separate user. Let’s consider the main push notifications advertising campaigns.

Geo-targeting

Geo-targeting is also known as local PPC. It refers to communicating with the customers located near the advertised company. To send the most relevant push notifications, customize the campaign according to the time zone and location of users.

Promotional and discount messages

This is the simplest and most common type of push campaigns. Its main rule is to make an adequate frequency of notifications. If the promotion is available for a limited time, make sure that the client has enough time to use the offer.

Reminder notifications

Based on user activity and the data from external sources, an app sends reminders. It helps them not to miss the opportunity and not forget to do something. If the user left the application with an unplaced order, the company sends a push notification with an offer to complete it.

Surveys

Personal user interaction improves campaign performance and increases loyalty. You may create personalized survey interfaces asking for feedback. The replies will go to the servers which process them.

How do push notifications work with business apps?

Push notifications are good for applications of different business areas: Synoptics, Cooking, Banking, Travel, E-commerce. In specialized business applications, push notifications can perform official, informative functions, for example:

  • a notice of money transactions (from financial apps)
  • notification of a received letter or personal message
  • information about updates or program crashes, etc.

How to add push notifications to an application?

Each mobile application platform has its own OSPNS (Operating System Push Notification Service). To add push notifications to an application, you need to register it with the OSPNS. The OS service provides an application programming interface (API) to the app publisher. The app publisher then adds the SDK to the app, then uploads the app to the appropriate app store.

Despite this, the correct tuning of notifications is a time-consuming process. It requires extra research – reading documentation, case studies, and implementation guides.

QuickBlox notification toolkit

QuickBlox provides the opportunity to install push notifications without spending lots of effort. We also provide clear and extensive documentation and flexible processing tools.

Using our tools, you can send cross-platform notifications from the Android app to an iOS device. This ensures the synchronization of actions across many mobile devices.

Wrap-up

Push messaging is communication with the users already interested in your business. Sending well-considered, relevant, and timely messages is a great marketing strategy. By focusing on your business goals, you will develop and maintain your customer base.

QuickBlox can help you organize notifications across platforms, devices, and users for better engagement and delight of your customers. Contact our team to learn more about QuickBlox push notifications solutions.

Julia Poltavets

Why QuickBlox choose XMPP protocol

Posted by Julia Poltavets on October 11, 2019

Any communication solution provider needs a communication protocol. There is a bunch of them at the market and one needs to give a good thought before they understand the way they work and opt for the one most relevant in their particular case. We at QuickBlox chose XMPP protocol once and the time has come to spread a word about it.

What is XMPP (jabber)?

XMPP is quite an old technology. Launched under the name Jabber, it was an open-source project for developing a protocol capable of supporting instant messaging solutions. Jabber also became the name of an instant messaging service based on XMPP.

What is the XMPP protocol? If we decipher the abbreviation, we will get extensible messaging and presence protocol, and this is exactly what XMPP is. It is a protocol for a messaging service based on extensible data exchange that can show the user’s “presence” – their ability to send and receive messages.

During two decades of its existence, it has got a reputation of a reliable solution and even earned the trust of such industry leaders like Google and Facebook that used XMPP in their messaging services – Google Talk and Facebook Messenger.

At QuickBlox, we opted for XMPP as it has always been chat-oriented, and chats and instant messaging are the primary focus of our service. XMPP is perfectly suited for real-time messaging including all types of instant communication – private, public or group messaging, video and audio communication, data exchange. Let’s look at XMPP strong suits to see why it became our protocol of choice and you may consider it your choice in 2019.

Why use XMPP in 2019?

Open Standard

XMPP uses an open standard published by IETF. Any provider that complies with this standard can implement an instant messaging solution using XMPP. Therefore, XMPP supports a free choice of the IM vendor.

Decentralized architecture

There is no central server that supports communication via XMPP. All communication is processed via servers with no direct connections between clients, but anyone can launch and maintain their own XMPP server. This ensures server independence, increases security, and provides additional customization opportunities.

Operating system and device independency

XMPP is not limiting you in the choice of operating systems or devices on which you run your IM solutions.

Great support

Compared to other communication protocols, XMPP wins points in the support category. As one of the oldest protocols, it has one of the most effective support services that, thanks to the contributions by Google and other companies, has evolved into an efficient and reliable function.

Disadvantages of XMPP

As everything, XMPP has its weaknesses of which we are aware of. For the time being, however, we believe that its advantages outweigh its drawbacks, and XMPP remains a working component of our communication solutions.

High overhead

XMPP transmits lots of redundant data. Sometimes, as much as 60% of data is repeated creating huge amounts of unnecessary traffic.

Mandatory XML format for IM

In XMPP, messaging is done in an XML document with no option to send unmodified binary data. This restriction makes it impossible to send files without using additional communication protocols.

What XMPP features does QuickBlox implement?

Add communication through XMPP

In our communication solutions, we implement a set of the most important features that are necessary for a chat application:

RFC-6120

This document defines the basic specifications and standards describing, among others, the security and encryption mechanisms used in XMPP-based instant messaging applications. Particularly, RFC-6120 refers to the TLS 1.2 security protocol that QuickBlox uses in its solutions.

RFC-6121

RFC-6121 is another standard that governs the management of rosters (contact lists of the user) and presence information (the user’s status in the context of their ability to participate in the conversation).

XEP-0045

XEP-0045 is an XMPP extension for a highly customizable multi-user chat. With XEP-0045, you can enable conversations in chat rooms as well as exercise user management functions. However, XEP-0045 does not support establishing a system of user roles and privileges or changing a role or privilege for a particular user.

XEP-0280

XEP-0280 is used to send carbon copies of instant messages to different resources to maintain the uninterrupted conversation flow. This extension allows users to continue conversations from different devices with no messages lost.

XEP-0016

The XEP-0016 extension provides the ability to block communication with a particular user based on personal preferences. With XEP-0016, you can block users both in private chats and in group conversations.

XEP-0198

XEP-0198 is an XMPP extension that supports the management of data streams. The functionality of XEP-0198 allows resuming the stream after an interruption.

XEP-0333

With XEP-0333, you get the ability to set chat message markers, such as “delivered”, “received” or “acknowledged”. This way, users get visual confirmation that their messages have reached their recipients.

XEP-0012

XEP-0012 allows providing information about the user’s last activity or presence in the chat. In QuickBlox solutions, the presence data is shown in seconds.

XEP-0352

This extension enables displaying the user’s status. With XEP-0352 implemented, the chat shows whether the particular user is online or not.

What XMPP features can be implemented upon request?

XEP-0060

The XEP-0060 extension allows implementing the publish-subscribe service. In our case, we may develop the service with Telegram channels.

XEP-0191

XEP-0191 is a blocking command extension. It is used to block communications and can be implemented faster and easier than XEP-0016.

Within the functionality of XEP-0191, the following features are also available:

  • Edit message
  • Delete message
  • Self-destructing messages

XEP-0033

XEP-0033 enables sending messages to multiple recipients simultaneously. On the other hand, it allows sending user presence information to multiple servers at the same time.

Gateways

We can build integrations with the gateways between the XMPP network and legacy messaging services. Particularly, we can create integrations with proxy gateways that act as an XMPP client on a non-XMPP instant messaging service.

Integration with email and message queue

QuickBlox could provide you an option to integrate your email with the XMPP network. This will allow you to receive the messages that were left unread for a while. The messages will be sent to the chat through the Simple Mail Transfer Protocol that is SMTP.

QuickBlox can also ensure you with the message queue integration. A message queue is an integration pattern for the information exchange while being connectionless. The messages you receive will be redirected to your MQ service for further analysis. You’ll also have a dynamic configuration for several message queues.

Conclusion

XMPP is a reliable communication protocol used by numerous companies including Google and Facebook. It’s specifically made for instant messaging and, thus, eventually became our choice.

QuickBlox is ready to provide you with the standard chat features but can also add customizable ones upon request.
If you are interested in setting up a multi-functional chat application or need more details about the available QuickBlox SDKs, contact us, and we will be glad to help.

Julia Poltavets

Flutter vs React Native: What to choose?

Posted by Julia Poltavets on October 7, 2019

Cross-platform development has been a trend in mobile development in recent years. The desire to reduce the time and money spent on developing mobile applications on two platforms at once has provoked the active development of technology to achieve this goal. Some tools, though, are so similar to each other that it might sometimes be very difficult to make a choice. The difference, as always, lies in details.

Today we’re looking at Flutter and React Native, what their purposes are, why using them for this or that project so that you’d be able to choose the best app development solution.

As we’ve already covered in one of our articles, Flutter is a cross-platform open-source mobile application development framework. The idea is simple: take something new with a development perspective and resolve issues in cross-platform app development. Flutter is based on Dart – a fast, object-oriented programming language.

Flutter offers a widget approach. It provides a modern, reactive framework, and an extensive set of platform, layout and foundation widgets. Widgets allow developing user interfaces of any complexity that are no different from native UIs.

What’s Flutter for?

The key benefit of using Flutter as a cross-platform mobile app development solution is the ability to use a single programming language to develop apps for both iOS and Android. Indeed, Flutter includes everything required to develop cross-platform applications, such as ready-made widgets, testing and integration APIs, rendering engine, and command-line tools. It supports cross-platform application development using a single codebase. That’s why it allows developers to significantly save time and resources on the development of both platforms.

Who created Flutter?

Flutter is started by Google and has been heavily promoted since I/O 2017. The first version of Flutter was known as “Sky” and ran on the Android operating system. It was presented at the Dart Developer Summit in 2015. A stable launch of Flutter, however, took place on 4th December 2018. At Google I/O 2019, Google assured that Flutter is expected to be used both for web and desktop app development.

How mature is Flutter?

Like all new tools, it may experience issues of relatively fresh technology. And though it has a significant Google support and offers great functionalities ready to be implemented, it’s still new, and its libraries are limited. Some developers claim that it could not be used for building a complex commercial app yet and it’s better suited for simpler apps and prototyping.

But Google keeps making Flutter stronger and more resilient, giving priority to enhanced stability, performance, and quality. Thus, we can expect it to strengthen its positions eventually.

What popular apps are made with Flutter

Among Flutter acolytes, there is a legendary London-based Abbey Road Studios with Topline for recording songwriters as well as two Chinese giants: Alibaba with their Xian Yu app, and Tencent with the NOW Live app for video streaming. There are also many other Flutter apps that can attract our attention including Reflectly, Hamilton Musical, Cryptograph, Birch Finance, Toughest, InKino and the like.

What is React Native?

React Native is a mobile infrastructure that compiles with native application components, allowing you to create your own mobile applications for various platforms. There is also an option to target web and windows platforms but it requires additional configuration and setup. The applications developed in React Native are somewhere in the middle between native and hybrid. More information on React Native you can find in our article What is React Native and How it works.

What is React Native for?

React Native is ideal for building natively rendering mobile applications for iOS and Android. As we’ve already mentioned, the development process will not take much time and effort. Whatever you need, an application for doctor-patient communication, banks or other financial institutions, marketplaces or anything else – React Natives turns out to be a great development tool for these purposes.

Who created React Native?

Created by a Facebook software engineer Jordan Walky, React Native appeared as a parallel project of work on React.js. In 2015, React Native became an open-source project. Initially, only iOS support was provided, Android support was added in September 2015. Currently, it uses JavaScript and React.js and allows you to create applications for both Android and iOS.

How mature is React Native?

React Native has been around for 4 years and has already gathered a big community. It’s still comparatively young if you take other mobile development platforms. Nevertheless, with what we have now, the chances to get the answer in case you’re stuck somewhere increases. Besides, having a community means that you’re always surrounded by like-minded pros. And it allows you to share your experience and get feedback whenever you need it.

What popular apps are made with React Native

Bearing in mind all the advantages and disadvantages, not surprising that many companies give preference to React Native for their mobile app development. Thus, React Native was used in the development of Facebook Ads, Instagram, Pinterest, Skype, Airbnb, Yeti Smart Home, Uber Eats, and many more. The projects speak for themselves.

Installation

The installation process has to be simple without too many complicated stages. Thus, even beginners can easily master it. Still, React Native is a little easier to set up if you already have Node.js and NPM installed, while Flutter installation seems to require extra steps.

React Native — NPM

React Native can be installed using the Node Package Manager (NPM) with a simple command. Of course, this requires a Node.js and NMP to be installed. In addition to the framework, you will need such tools as the Android SDK and JDK.

Flutter — Binary Download from Source

To install Flutter, you need to download it from the source code to the desired directory and unzip it. Then you need to manually add the binary to the PATH variable, which is already more time consuming than a single-line command. Just as with React Native, additional components are required. If you have been developing Android mobile applications before then Android Studio has a module that easily installs everything you need to start creating with Flutter.

UI Component and Development API

Your app’s user interface is everything that the user can see and interact with. It is very important to have a variety of pre-built UI components such as structured layout objects and UI controls that allow you to build the graphical user interface for your app. So we need the support for the native component to ensure the app feels like “native”. It is essential that the framework has an API to easily access the native modules.

React Native — Less Components

React Native has a more extensive UI library than Flutter. It is based on native components. Still, React Native relies on many third-party libraries, which in some cases can be a problem as they may contain bugs or incompatibilities of the UI with a specific platform. Nevertheless, UI components can be linked to the project quickly enough.

Flutter — Rich in Components

Flutter runs perfectly with the proprietary widget sets. They are the best option to get a customized UI design that ensures engagement and native support. The number and variety of widgets are increased due to the lightweight and simplicity of the widgets.

Flutter uses only the canvas of the native platform and draws the UI and all the components from scratch. All the UI elements look the same as native ones. As a result, the UI performance is remarkably high.

Developer Productivity

There are not so many tests to check the developer productivity of applications created on both frameworks, but theoretically, Flutter could outperform React Native in it.

React Native

React Native uses the Javascript bridge to interpret the UI components for rendering and then calls Objective-C or Java API to display the corresponding iOS or Android component. This bridge is an extra layer of abstraction that may cause a more extended and laborious development process.

Flutter

Flutter takes a completely different approach to rendering. Let’s start with the fact that Flutter does not use native components of other platforms. Instead, Flutter works directly with canvas and events, it creates its widgets and uses the GPU to render them on the screen. Flutter compiles all Dart code into native ARM code which is processed directly by the processor. This allows the applications to run faster. Both Flutter and Dart adopt regulated documentation that allows improving the productivity of developers.

Flutter vs. React Native: Conclusion

Choosing between React Native and Flutter for building cross-platform native mobile apps may depend on many aspects. If we look from a UI perspective, the difference is not visible for common app users.

For developers or companies, the choice of the platform depends on various factors from the previous tool stack to budget questions. In general, if a company already has a team of developers, it won’t be difficult to transfer people to React Native. Especially taking into account that React Native has a strong and mature community along with native app performance and use of popular JavaScript in developing cross-platform apps.

At the same time, Flutter has strong support from Google and the number of developers interested in the framework is only growing. Thus, in the near future, you can expect Flutter to flourish.

From our side, QuickBlox is getting ready with React Native SDK which is now in beta testing. But React Native SDK will be available really soon! Thus, stay tuned, otherwise, you can miss our great release!