What is that makes React native less efficient than Dart though both are statically typed(JS --> Typescript)
I'm a react enthu. Trying to understand dart, so that I could get hands on it! 😊
For further actions, you may consider blocking this person and/or reporting abuse
The top 50 must-have CLI tools, including some scripts to help you automate the installation and updating of these tools on various systems/distros.
AneeqMalik -
Shan Shaji -
shrey vijayvargiya -
MD Sarfaraj -
Once suspended, droidmakk will not be able to comment or publish posts until their suspension is removed.
Once unsuspended, droidmakk will be able to comment and publish posts again.
Once unpublished, all posts by droidmakk will become hidden and only accessible to themselves.
If droidmakk is not suspended, they can still re-publish their posts from their dashboard.
Once unpublished, this post will become invisible to the public and only accessible to Kabeer ( Afroze ) Khan.
They can still re-publish the post if they are not suspended.
Thanks for keeping DEV Community safe. Here is what you can do to flag droidmakk:
Unflagging droidmakk will restore default visibility to their posts.
Top comments (4)
Thanks for the tag @rhymes ..
Hey @droidmakk !
THE SHORT VERSION:
Flutter apps are compiled directly from Dart source (Flutter app) into native executables (ARM code). They achieve performant (60fps) screen refreshes for smoother animations/transitions by working directly with the GPU and bypassing Android/iOS widget libraries altogether.
React Native by comparison involves having a JavaScript layer (application-managed views) and the native widgets layer (OEM-managed views) where the latter is responsible for rendering to the actual screen. So for every screen update, you are going from JS<==>native<==>graphics in RN, while with Flutter, you get just native<==>graphics (no JS bridges).
THE LONG VERSION:
I'd done a lightning talk ( slides here for reference ) where I had talked about this briefly if useful - my slides are adapted from some made by the Flutter team but any misinterpretation is mine.
I made a merged version of three slides o help explain this better
The short answer is as follows:
React pioneered the approach of having a Virtual DOM (application-managed view) on which developers made updates; the framework compared the changes against the real DOM (browser-rendered view) and patched the latter efficiently, making reactive updates more performant.
React Native adapted the approach to native mobile development by similarly allowing developers to work with virtual widgets (JavaScript defined views); the framework compared the changes against equivalent platform widgets (native OEM views) and patched the latter for efficiency. However because the application uses JavaScript - while the native widgets use Android or iOS specific languages - this effectively requires updates to "cross the JS/native bridge" frequently, which has an associated cost as compared to purely compiled native widgets/apps.
Flutter is reactive like React Native - but the biggest difference is that it doesn't even bother with mapping onto native widgets. Rather, with Flutter, the widgets (views) are written in Dart but compiled directly into native code for deployment which makes them more efficient (no bridges). There are no OEM-created widgets - i.e., you are bypassing the default iOS widgets and Android widgets. Instead the Flutter team is taking on the burden of creating and maintaining Android (Material Components) and iOS (Cupertino) Flutter widget catalogs that will keep parity with the native widget collections but can be used by Flutter developers. Now, the rendering layer directly interacts with the GPU for efficient repainting of the screen.
And by defining the layered widget-based architecture they way they have and having clear stateful and stateless widget classes, they can be efficient about updating the render tree to trigger repainting of the screen. At some point I want to do a deep-dive write up about their rendering process but there is a nice Rendering Pipeline talk that provides a starting point, and a few more resources I can share later.
Hope that helped.
Hi @rhymes , Thanks for the tag.
Hi @nitya , That was a lot of information. I now got the pretty much understanding of overall architecture, covered. Also found this awesome-flutter library. Once finished GatsbyJS will start right away with flutter.
Thank you for the great explanation!
I don't know much about any of those technologies but I remember from @nitya 's presentation that there is no bridge between Dart and the native environment.
That is probably the reason why React Native is less efficient.