What is the difference between React-native and Flutter technically?
Both technologies seem to do relatively the same thing, and Flutter even admits that it takes inspiration from React: faq
This is even more obvious when they list the same features and have almost the same syntax (StatefulWidget vs Component class).
Similarly to AngularDart being a Dart implementation of Angular; is it right to assume that Flutter is a Dart implementation of React?
Architecturally, React Native (RN) and Flutter are very similar.
What Flutter calls a "Widget" is the strict equivalent to React's "Component". That's what Flutter means when it says its inspired from React.
The difference between them lies in the other aspects of the frameworks:
Interpreted Javascript VS Compiled Dart
Flutter uses Dart, a typed language that offers both "Just in time" (JIT) and "Ahead of time" (AOT) compilation (with tree-shaking included)
In development, Flutter uses JIT compilation to empower hot-reload. And for production builds, it uses AOT compilation for better performances.
React-Native uses Javascript enhanced by some syntax sugar called JSX.
JSX being a different language, it compiles to JS, then evaluated at runtime.
Bridge to native VS Complete rewrite
React native is built on the top of native.
When using a button or a text in React Native, you are manipulating the official object used for native Android/iOS apps.
We can consider React as a common language between Android/iOS to declare layouts – but fundamentally the applications are different with potential inconsistencies.
It's is not true cross-platform. But at the same time, it allows better interoperability with native elements.
Flutter is the opposite. The goal of Flutter is to use as few native elements as possible.
Flutter requests to the OS a window, and then entirely manage its content using Dart and Skia (it's c++ graphics engine).
It has a few implications:
All the UI logic had to be reimplemented by Flutter. Be it scroll, touch events, animations, ...
The application is written entirely in Dart, even deep into the lower layers. It means that whatever the platform is, it's always the same code that is executed.
Potentially anything that can run Dart code and create a window can run Flutter and apps should work with little to no change. As such, web is in progress ( Hummingbird) and basic support of desktops is available.
To some extent, we can compare Flutter to a webview/game engine, but optimized for casual applications.
Remi already has a couple good points. I have one more.
Interpreted with bridges - vs. native and no bridges
Despite what the name might imply, React Native apps are not compiled to native code. React Native apps interpret Javascript code during runtime, and component updates in a React Native app go through a bridge to the native view counterpart. This might slow things down a little bit and be a bottleneck.
On the contrary, Flutter apps (on release mode) are compiled to native code and don't require a bridge for manipulating the UI. This in turn, at least in theory, will be more performant - there's no need to do roundtrips to the native land to make simple UI changes. Not to mention that release Flutter code is natively compiled and there are no interpreters involved.
Dance monkey, dance
Now that we know that release mode Flutter apps don't have an interpreter or the need for bridges for UI manipulations, let's see what those two things actually are in the first place.
We'll do this with a highly hypothetical example app. Our React Native app has a button that makes a monkey dance on the screen. In React Native, our button and the dancing monkey components are written in Javascript and React.
Interpreters
Since Javascript is not a first class language on Android or iOS, your React Native app includes a Javascript interpreter that interprets your Javascript code in runtime. Without the interpreter, you wouldn't be able to write apps with Javascript at all - even a simple console.log('Hello World!') wouldn't work.
According to the React Native docs, in "most cases", the Javascript code will be interpreted with JavascriptCore.
Bridges
Under the hood, React Native uses the native Android Views and iOS UIViews for displaying UI components (such as dancing monkeys) on the screen. But since the UI parts of the Android and iOS SDKs don't use Javascript, you can't make the monkey dance by using Javascript alone.
This is where a bridge comes into play. On the other side of the bridge are your React Native components and logic, written in Javascript. On the opposite side, we have the host Android/iOS app that renders native views into the screen.
From now on, let's call the two sides of the bridge as the Javascript land and the native land.
So, what happens when the user clicks on our "dance, monkey, dance!" button?
The native Android/iOS view dispatches an onclick event, which goes over the bridge to the Javascript land.
Our onclick listener written in Javascript gets invoked. It is a simple call that toggles a boolean inside the component. Something along the lines of setState(() {isMonkeyDancing = true}) or similar.
React sees that something has changed. It comes up with an updated representation of UI elements that has a dancing monkey. The representation is just a tree of plain Javascript objects that describes the updated state of the UI.
The Javascript object tree gets serialized and sent over the bridge to the native land.
The host app receives the serialized object tree and deserializes it. Now it can update the native Android/iOS view to match the deserialized UI representation. Our monkey is now dancing and our user is eternally happy.
So in this example, one button click required going over the bridge two times.
Actually, it's three - just simply rendering a button initially is a call across the bridge itself.
In an app that is more than just one button and a dancing monkey, you're likely to go over the bridge a lot more. And every time you do, it requires serializing data and sending it over from one side to the another.
This is slower than just coming up with the UI representation and updating the UI with that directly. Additionally, there's a cost of interpreting Javascript in runtime compared to having the code compiled ahead of time.
The bottom line
Since Flutter is essentially a portable rendering engine, Flutter doesn't need a bridge to do an UI update. And because of that, UI updates, at least in theory, are faster. That's one reason why building apps with complex animations or things like Flare, SpriteWidget, or even games would be more lucrative with Flutter compared to React Native.
And because Flutter on release mode is AOT compiled, Flutter doesn't need an interpreter either. That's the difference between Flutter and React Native.
Flutter vs React Native: A Developer’s Perspective
React Native by Facebook and Flutter by Google – two hot cross-platform app development technologies creating a buzz. In this post, we will compare both of them in detail from a developer’s perspective.
What’s Flutter and React Native?
React Native is a project started by Facebook internally that they open-sourced in 2015. On the other side is Flutter, a project started by Google which they have been heavily promoting since I/O 2017. Both of these technologies help app developers build cross-platform apps faster by using a single programming language. React Native is already a mature tool and has a huge community, but Flutter also started seeing huge adoption rates since 2017. In this post, we will compare each of them using ten criteria:
Programming language
Technical architecture
Installation
Setup and project configuration
UI components and development API
Developer productivity
Community support
Testing support
Build & release automation support
DevOps and CI/CD support
Programming Language
The key benefit of using a cross-platform mobile app development technology is the ability to use a single programming language to develop apps for both iOS and Android.
React Native — JavaScript
Flutter — Dart
Installation
The installation method should be straightforward without having too many complicated steps so that it could be easily learned by developers that are just starting with it.
React Native - NPM
Flutter - Binary Download from Source
UI Components and Development API
React Native - Less Components
Flutter - Rich in Components
Conclusion
React Native and Flutter both have their pros and cons. Some of the industry experts have predicted that Flutter is the future of mobile app development. Considering the comparison above, it’s clear that Flutter has entered the cross-platform mobile development race very strongly. Let’s not predict the future but wait and watch!
If you learn both technology in deep. So, you will find big differences:
Programming language- Java Script and Dart
Technical architecture- Flex and Skia.
UI components and development API: Widget in flutter but views in React native.
Developer productivity: Debugging is very easy in Flutter.
Community: Big Community support in React Native.
Documentation & Toolkit: Flutter team have created simple duc for all widgets.
Testing support: Flutter providing testing libs.
DevOps and CI/CD: Flutter Providing CI/CD supports.
There are more difference between React Native and Flutter that you can read her.
Related
i am react native developer , and my question is more generic than code
i am getting really frustrated with react native and the amount of bugs it has
and the extremely low performance on android devices specially the old ones
almost all of the important api are third party developed on github and they not maintained anymore with alot of bugs.
some codes doesn't work sometimes,
what i noticed with highly used(10k+ users) application in react native
on some android devices fetch request is repeated 4 times.
on some android devices async-storage is working probably .
on await and async are getting ignored
React.usestate is buggy and it is ignored sometimes
does flutter offer a better environment with less bugs
Speaking from personal experience, flutter is better than react native for several reasons, but I'll list the few best ones here:-
More interactice community :- Flutter has way more answered question in the past 2 years on stackoverflow than react
Better docs - The flutter docs cover everything, I mean everything\
Nativeness - Flutter does a great job at making the app look as native to the platform as possible
Wide range of packages - Like it says, there is a package for everything, You can also use platform views just in case there is something on the native side you want to add so there are no limits
The editors - OMg I cannot say how much easier it is with good descriptions of all the commands within the code. I mean you can hover on a function and if made by the flutter team or a proper package team, you'll see the full implementation
Rid of any form of html or css - The designing, is much much much much much * infinity easier because everything makes just more sense from a programmer's poin t of view
Great debugging - With flutter, you can debug on different scales, even on the release scale just in case there is a problem with release mode instead of debug mode and ofcourse the community is always there to help
Regular awesome updates - While react is slowly dying down on new features, flutter is booming. With the recent update to flutter 2.0 introducing null safety, the chance of bugs have gone down even more
So yes, I recommend you try to shift to flutter. There is even a full tutorial in the flutter docs for react-native decs to learn flutter.
This is not a technical question.
It just this is my first programming language which I am fluent and I don't want to abandon it. But I feel frustrated, I need to know about this framework, but should I learn something that will change in just a couple more weeks.
News:
https://adtmag.com/articles/2018/07/10/abandon-react-native.aspx
https://www.theregister.co.uk/2018/07/26/node_native_developers/
Few things from my perspective: Airbnb was supporting React Native since 2016, and recently they announced sunsetting React Native and reinvesting all of their efforts back into native because they weren’t able to achieve their specific goals. The reason why AirBnB is moving away from React Native is very specific to Airbnb. They already have a huge number of IOS & Android Developers and feel their application needs are pretty unconventional. They end up developing for 3 platforms instead of 2. Which means their entire application is not in React Native, only a few features are in React Native.
Read these articles: https://medium.com/braus-blog/airbnb-is-dropping-react-js-should-you-too-dcbff36def5c and Here goes what worked well and what didn’t : https://medium.com/airbnb-engineering/react-native-at-airbnb-the-technology-dafd0b43838 . And one head's up from the RN team after the .56 version release is "
We're working on a large-scale rearchitecture of React Native to make
the framework more flexible and integrate better with native
infrastructure in hybrid JavaScript/native apps. With this project,
we'll apply what we've learned over the last 5 years and incrementally
bring our architecture to a more modern one. We're rewriting many of
React Native's internals, but most of the changes are under the hood:
existing React Native apps will continue to work with few or no
changes."
Facebook has not stopped supporting React, and there are still a lot of contributors supporting and using React Native in the community. Moving away from technology depends on what are the other alternatives you have.
Say I wanted to build something like a 2D side-scroller game. Would React Native be suitable performance-wise? E.g., can I use OpenGL-acceleration for it? Or would it probably be slower than just using WebGL and HTML5?
Researched some more and came up with this information:
Apparently there is a GLView which holds a WebGL context:
https://docs.expo.io/versions/latest/sdk/gl-view.html
On that page it says this:
Any WebGL-supporting library that expects a WebGLRenderingContext
could be used. Some times such libraries assume a web JavaScript
context (such as assuming document). Usually this is for resource
loading or event handling, with the main rendering logic still only
using pure WebGL. So these libraries can usually still be used with a
couple workarounds. The Expo-specific integrations above include
workarounds for some popular libraries.
Also a Twitter comment from Expo which mentions 'games' specifically:
Expo Graphics gives you the power of GL combined with Expo+React Native. It
is the foundation for image filters, games, and special effects.
And there should be a demo here:
https://github.com/gre/gl-react
Not much projects listed there which use React Native to build a game. Still, there being a WebGL context interface to a native OpenGL acceleration gives rise to hope.
I've used react-native-webgl to build a minesweeper game. This library has provided the performance gain I needed to render a 16x30 grid of cells with quick transitions from one state to another. In some circumstances the game needs to re-render dozens or even hundreds of cells at once. Default React Native renderer is not fast enough to do that without user noticing the delay.
Note that while react-native-webgl solves the performance problem, it requires you to write low level code such as creating shaders, manage the vertices etc. And I haven't found libraries built on top of react-native-webgl that would work for my task.
So if you really need or want to use React Native for your game, use react-native-webgl or GLView for Expo. Otherwise use a different technology like Unity.
You can find the source code of my game here.
I'm trying to decide which language to learn so I can program an mobile app that revolves around NFC and your location. I heard Flutter and Reactive Native are two relatively new languages that allows you to write code for both iOS and Android and there's courses for them on Udemy. However when I Google searched "NFC Flutter" there wasn't any relevant articles on how to incorporate NFC. Is it worth learning either of the two languages or should I write my app separately in Swift and Java?
You can use either React Native or Flutter and still have NFC capabilities.
For Flutter there is this plugin you could try (haven't tested it myself)
For React Native you could use this plugin which is tested and works great
At the time of writing this answer there is no full solution for NFC in flutter.
That said, you can implement NFC functionality using PlatformChannels. Or, better, encapsulate in in a plugin.
That way, you can write a code for your app in dart for both platforms, but NFC functionality will call Native Swift or Java code to handle platform specifics.
Here is one plugin that is still Work in progress, that does the exact same thing for Android only. You could, for example, fork the plugin and add iOS code and there you would have full solution.
I am making a language app that records any new vocabulary a user is trying to learn. It would be great if users can add their words via a speech to text program, instead of having to enter it manually. I am having trouble achieving this task. I am aware that there is an API for apple but not android. Is there anyway possible of doing this, using an API? Like for instance, google speech to text API? But I guess I would first have to be able to access the device's microphone. I am a beginner and this would be very easy using the web. Is React Native still too young for this task?
You might wanna look at react-native-android-voice, a React Native module that supports speech-to-text for Android.
As #delkant mentioned, there's now also react-native-voice that supports both Android and iOS.
Alternatively, you can always write your custom native module using Android's SpeechRecognizer API. Here's a summary of all the classes and interfaces you might need for this task. If you are familiar with developing native Android apps, it's pretty easy to create a native module and bind it to your React Native project. Here's the official documentation of how to achieve this.
You also have react-native-voice
A speech-to-text library for React Native.
It supports android and iOS
The react-native-bluemix module provides both SpeechToText and TextToSpeech for React Native: https://github.com/pwcremin/react-native-bluemix
It wraps the Watson tools for both ios and android: https://github.com/watson-developer-cloud
React Native uses SFSpeechRecognizer under the hood for iOS which have various limitations : https://developer.apple.com/documentation/speech/sfspeechrecognizer
Be prepared to handle failures caused by speech recognition limits. Because speech recognition is a network-based service, limits are enforced so that the service can remain freely available to all apps. Individual devices may be limited in the number of recognitions that can be performed per day, and each app may be throttled globally based on the number of requests it makes per day. If a recognition request fails quickly (within a second or two of starting), check to see if the recognition service became unavailable. If it is, you may want to ask users to try again later.