Cross-platform app development is making a lot of noise these days. As software houses, along with their clients, are scrambling to keep up, we take an in-depth, technical look at the 2019 top-rated cross-platform frameworks – React Native and Flutter. We hope to give you a bit more than just a general overview or advice on what to choose.
Table of contents
- React Native – the story so far
- How to create an app with React Native?
- The short story of Flutter
– How does Flutter work
- React Native vs Flutter – comparison
– React Native vs Flutter – learning curve
– Flutter vs React Native – popularity
– Flutter vs React Native – community support
– Flutter & React Native – productivity
– React Native vs Flutter – easy view building
– React Native vs Flutter – building app releases
– React Native & Flutter – programming languages
– Flutter vs React Native – performance
– Flutter or React Native – user interfaces
– Flutter vs React Native – testing
- React Native or Flutter development – a comparison table
- React Native and Flutter – summary
React Native – the story so far
React Native’s quick rise to fame created quite a few misconceptions as to its capabilities and use. You can read more about it in our article “7 React Native myths vs reality”.
How to create an app with React Native?
React Native contains a set of standard UI elements, equipped with bindings to native components, to be used in the app according to the operating system. The components can be freely grouped in the hierarchical structure of the declarative view. They can render other declarative components or components with native bindings.
Component (React.Component) is a fundamental concept in React Native. It is an object (or function) that has “props” and “state”. For given props and state, the component should return a view, but only when props or state change. Props are types of arguments for a component that are set from the outside – the component has no control over them. State, on the other hand, is internal, private data, entirely and exclusively under the control of the component.
The data flow
React Native uses unidirectional data flow, which distinguishes it from other declarative frameworks such as Angular (two-way data binding). This results in better performance and easier debugging. The one-way data flow in React Native is done by giving the component in the rendering phase read-only props and state. It can freely transform them, pass them down the view hierarchy, but shouldn’t be able to mutate them directly. The same goes for child components that will receive this data as props. Modifying props or states directly will not refresh the view. To do this, use the component’s setState method (or a similar function when using Redux or other solutions). Event handling by child components should be accomplished by passing in callbacks’ props to handle events that ultimately implement the parent’s setState as needed.
Hot / Live reload
All you have to do is install one Expo application on your phone, and you can download the RN application code from the internet or the QR code and instantly update it when it changes. It is not suitable for creating production applications, but rather for rapid prototyping. If we just want to add real push notifications, Crashlytics or any library not included in the Expo SDK, we must first complete the work with Expo and export (expo eject) the project to the “full” version.
We don’t even have to install Expo on the phone, as we can simulate the application in the browser!
React Native CLI
A program to generate a new React Native project. Unfortunately, very limited options and the program is used from the terminal.
Usually, there is a lot of initialization work left to be done, e.g., generating certificates, adding dev/prod variants or hooking up Crashlytics. You can prepare a project template to initiate new projects faster, but the React Native environment is changing so quickly that we would have to spend more time on maintaining it. Poor in comparison to project designers in Android Studio / XCode. Also, you can use premade templates, for example TypeScript template.
The short story of Flutter
The first version of an open-source framework called Flutter, (code-named “Sky” back then) was presented in 2015 at the Dart developer conference. The first stable version, allowing to compile native Android and iOS applications from one code, was released at the Flutter Live event, December 2018. Among the top advantages of Flutter, the creators mentioned a smooth operation level with native apps and maintaining the state of the hot reload application. The initial receptions of the Flutter framework were very positive, and the first Flutter reviews gave us a lot to look forward to.
Now this open-source technology based on a programming language called Dart is one of the most popular cross-platform app development tools used by software houses. Flutter doesn’t need third-party libraries to build excellent UIs and offers impressive performance. It is very much appreciated by developers and users.
How does Flutter work
Everything is a Widget
The basic building block of the user interface is the Widget. The operating principle is similar to React Native – Flutter’s documentation actually mentions React as inspiration. Individual elements are arranged in a hierarchical structure, rebuilt each time the state of the application changes. This does not mean, however, that the view is being built again and again. The returned structure is only an intermediary on which the framework modifies the visible interface. In this way, Flutter replaces the imperative style known from native platforms with a declarative style, taking the burden of writing and managing transitions between possible interface states of the developers’ shoulders.
Flutter provides a wide range of ready-made widgets that comply with Material Design guidelines. The programmer has, among others, buttons, text boxes with titles, or wrappers that manage the position of beams or floating buttons. Arranging items on the screen may cause some confusion as we define the position and look of components by placing them in containers. This often causes the structure to grow and forces you to remember the behaviors and relationships between several types of containers.
The BLoC (Bussiness Logic Component) architecture is one of the solutions proposed by Google. It places use cases in separate classes. Communication with them takes place via asynchronous streams, where the interface publishes events in the appropriate BLoC “inputs” and, at the same time, listens to the outputs for the flow of subsequent application states. The intermediary between these components and the interface is the StreamBuilder widget, which receives data from streams. The basic assumption of this architecture is to adapt the application to operate in an asynchronous environment – where a variety of data flows in at any time and in any order.
Native developers familiar with RxJava and MVVM architecture will definitely find this to be a comfortable solution. However, this is not the only way Flutter can work with, e.g., Redux and then the components themselves can propagate the state. This process can be simplified by InheritedWidget, which will shorten the path to the target component to which the data must travel. The provider can also be used as a solution, being a library combining Dependency injection and application state management. With its help, the programmer can provide the necessary values to the appropriate locations in the interface. You can inject any objects, simple data, streams, or objects observing data changes (e.g., ChangeNotifier).
All of the above solutions are well documented and explained in official guides. This will help many developers to implement solutions they already know.
React Native vs Flutter – comparison
Now let’s compare React Native and Flutter. We will analyze the main tools available to programmers working in cross-platform frameworks. To find out what are the advantages and drawbacks of these app development technologies, we will consider various criteria to give you a comprehensive look at both Flutter and React Native from many perspectives.
React Native vs Flutter – learning curve
Google actively encourages developers to learn and switch to Flutter. There are plenty of training materials available in the form of lectures and video tutorials.
The documentation is comprehensive, laden with examples, and thoroughly explains various aspects of working with the framework- from building an interface to writing tests. The authors of the framework give us recipes for creating a variety of elements of modern applications. They also propose a straightforward and Flutter-friendly architectural model – the BLoC. The section dedicated to developers familiar with other popular platforms, both mobile and web, is a huge help. It explains the critical differences between Flutter and other programming environments.
That said, both technologies have certain levels of entry. Developers experienced in native app development will have to assimilate patterns known from web productions rather than what they are used to. In contrast, front-end programmers will have to face specific patterns of development for mobile platforms. Knowledge of particular platforms will also be useful if only to improve the process of building and implementing applications.
Flutter vs React Native – popularity
As for Flutter and React Native themselves, they are both appreciated for Android & iOS app building. Being leaders on the market, their communities are vast and helpful, although React Native is a bit older, so it has more supporters.
Flutter vs React Native – community support
React Native in this field relies more on the community, having several third-party libraries for handling the same tasks. This can be both a disadvantage and an advantage. Flutter remains under greater control of its authors, who continuously keep providing ready-made solutions. At the same time, they cooperate with a growing community for missing tools, such as database support.
Flutter & React Native – productivity
First of all, both Flutter and React Native development are rather seamless and fast. Coding is productive thanks to hot reloads, which allow them to introduce changes and updates in almost real-time, code structure and syntax that are logical and easy to understand, as well as easy configuration and installation.
Code reusability between platforms is splendid with a bit of advantage towards Flutter. With libraries made by fellow developers, every app development can be radically sped up. Overall, productivity in Flutter or React Native is on a high level and there is no doubt that development with these frameworks can provide splendid results.
React Native vs Flutter – easy view building
Both frameworks build views in a declarative way. They introduce analogous concepts of Component and Widget, as basic building blocks of applications, operating on the basis of an unchanged state. Each of them also offers a Hot Reload function that allows you to reload a working application and quickly see introduced changes.
At the core, both technologies are quite similar. They use a declarative UI building style and are quite flexible, allowing the developer to apply various techniques to manage the state of the application. Access to device features is provided by plugins.
React Native vs Flutter – building app releases
Everything has to be done natively and we are limited to what Android Studio / XCode offers. We have 2 platforms to manage and there are no advantages of React Native.
Flutter offers plugins to facilitate work in Android Studio and Visual Studio Code. They support project creation, debugging and the Hot Reload function.
A tool for debugging and profiling apps from your browser. It allows, among others, to browse the interface in the form of a tree and check individual widgets. It also allows you to track memory usage, CPU resources and app performance testing.
OEM Debugger (Original Equipment Manufacturer)
It allows you to debug not only Dart code but also files generated for a specific platform. This is especially useful when writing your own system solutions.
React Native & Flutter – programming languages
Flutter vs React Native – performance
Flutter is more independent – meaning it doesn’t require such actions to build advanced UIs and keep the speed. This type of architecture, where the framework has everything within itself, makes every app built with it more stable and secure.
Flutter or React Native – user interfaces
In app development, UI is one of the critical elements. It’s a layer responsible for interactions between the app and the user. Fonts, colors, buttons, the whole visual layer of the app – that’s the user interface.
Flutter offers UI widgets that do not require any bridges, making the app UI even more native-like. Software is more consistent across operating systems because of the premade libraries offered by Flutter.
Flutter vs React Native – testing
There are several frameworks for React Native. By default, “Jest” is enabled. We can easily add new unit tests by putting them to __tests__ and running the “npm test” command. You have to be careful when importing native modules – you need mocks, and these are often missing in npm packages or work poorly.
Flutter offers its own plugin designed to perform unit and integration tests and check widgets. For mock dependencies, the official documentation recommends Mockito.
Flutter supports flavors that allow you to configure various build variants, search among existing Android’s productFlavors and iOS’ schema. You can refer to them directly in the Dart code or call them out from Flutter CLI, but they must be configured separately for each platform first. The process has so far been described in Flutter community articles. What’s up with that, Google?
To prepare the release version, it is necessary to configure each platform individually. The documentation describes the process of editing individual files, but knowledge of Android and iOS will definitely speed up the process.
React Native or Flutter development – a comparison table
|Architecture||Based on Flux and Redux, need a bridge to connect with native UI||BLoC architecture, UI is built with premade Flutter components|
|Documentation and tools||Great documentation, but it can be difficult to start a project from scratch||Thorough documentation and starter toolkit|
|Libraries||Utilizes native UI components of the operating system||An extensive library of widgets and plugins|
|When to use||You want reusable code for mobile, web and desktop development||You need excellent UI and fast performance|
|When not to use||You need better efficiency||You want your app to have a smaller size|
If you are a programmer and are interested in Flutter or React Native – you should definitely check out their official websites to get even more information about their capabilities.
React Native and Flutter – summary
Cross-platform frameworks like React Native and Flutter keep developing and are gaining ground across the IT landscape. Solutions used for app development with results similar to native, are definitely displacing hybrid methods, offering better performance and native appearance, as well as the behavior of the application. Flutter and React Native seem to be top players important in the cross-platform field.
The market shows a lot of interest in React Native apps and Flutter apps. This comes not only from budget-conscious startups but also from the largest global brands. React Native development can be the perfect choice for creating MVP versions of the software. Flutter is sometimes used as the major framework for a single app made only for iOS and Android.
Would you like to know more about the differences between cross-platform and native app development? Download our ebook! It is the ultimate guide to React Native, Flutter and many other technologies used in software development. You will find out more about native applications, cross-platform applications and technologies used to build them.
And if you are looking for app development specialists that know how to utilize React Native, Flutter and native frameworks – we are here for you. Just email or call us to discuss your next app project!