What Is Flutter?<\/h2>\n
Flutter<\/a>\u00a0is an open-source mobile UI framework designed to help developers create native applications for mobile, web, and desktop using only one codebase. It was created and officially released by Google in 2018, and it\u2019s arguably just starting to become a mature technology in the mobile development industry. From what I\u2019ve seen, there are two things that make Flutter stand out to mobile developers:<\/p>\n Another aspect that makes Flutter unique is the programming language behind it: Dart. Dart was announced by Google back in 2011 at a GOTO conference in Denmark, where it was presented as an object-oriented, class-based, garbage-collected programming language with C-style syntax that could compile to native code or JavaScript. However, the beta wasn\u2019t released until two years later and it initially received a mixed reception by the mobile development community.<\/p>\n Since then, Dart has certainly improved a lot and the growing popularity of Flutter is proof of it. Today, Dart is seen as a very powerful programming language, and Flutter developers especially appreciate its support for inheritance, interfaces, and asynchronous programming. In fact, I believe most people would agree that the grand majority of mobile developers (and even\u00a0React Native developers<\/a>) are choosing to learn Dart because of Flutter. If you\u2019re interested, here\u2019s what a\u00a0Hello World<\/em><\/strong>\u00a0app looks like using Dart and Flutter:<\/p>\n Finally, we can\u2019t really talk about Flutter without talking about its widget-based system. The idea behind Flutter is to combine different widgets that provide developers with everything they would need to build an entire UI. As I briefly mentioned before, these widgets can be used to define almost any type of UI element, including structural (buttons, menus), stylistic (fonts, colors), layouts (padding, sizes), and many other types of elements.<\/p>\n Keep in mind that Flutter uses its own ready-made and native-looking widgets for this and it never uses OEM widgets, as some of the new people learning Flutter might think. Developers can also create their own custom widgets and use reactive-style views that compile Dart ahead of time into native code for multi-platform apps.<\/p>\n There\u2019s a lot more to say about Flutter, but I feel this is enough to give you a rough idea of it. We can take a better look at it when we start comparing it to React Native, so let\u2019s move on.<\/p>\n React Native is a JavaScript framework that allows rapid development of native applications. Just like Flutter, React Native is open-source and created by a tech giant, Facebook. Since its release in 2015, React Native has been commonly used for building native applications in all kinds of platforms, including Android, Android TV, iOS, macOS, Windows, and Web. Here are a few reasons why React Native has been so successful in native development:<\/p>\n In essence, the working principles of React Native are almost identical to the ones of React. However, note that React Native does not manipulate the virtual DOM, and instead runs background processes directly on the native platform. Also, React Native does not use HTML or CSS. As\u00a0Mark Zuckerberg famously said<\/a>\u00a0in 2012, HTML was never the path towards true native experiences.<\/p>\n To solve the markup language problem, React Native uses a mixture of JavaScript, JSX, and a special markup code known as JXL, which is considerably resemblant to XML. This way, React Native gains the ability to communicate with both JavaScript-based threads and Native app threads. In the spirit of making a quick comparison with the Flutter syntax, here\u2019s what a\u00a0Hello World<\/em><\/strong>\u00a0app looks like in React Native:<\/p>\n In 2018, React Native had the\u00a02nd highest<\/a>\u00a0number of contributors out of all repositories in GitHub and it remains one of the top ones to this day. Their community is as strong as it has ever been, and thousands of big-name companies have already rewritten their apps with React Native. Some of the most notable ones are Coinbase, Shopify,\u00a0 Uber, Erikson, Facebook, Instagram, Pinterest, Discord, SoundCloud, and Skype.<\/p>\n React Native has stood out as a unique cross-platform development solution because of its incredible code reusability, rapid cross-platform development, a large development community, and native-level performance. With all of that said, let\u2019s move on to the actual comparison of Flutter vs React Native in 2021.<\/p>\n To start anecdotally, nearly all of the developers I have talked to or heard discussing cross-platform mobile technologies have been more excited about Flutter than React Native over the last year. This correlates with the data in Stack Overflow Trends, which shows that Flutter overtook React Native sometime in 2019. Since then, React Native has leveled out and Flutter is holding an upward trajectory.<\/p>\n But the correlation doesn\u2019t stop there. Several other sites show that, when comparing the best cross-platform mobile app development technologies, Flutter is consistently trending up while React Native holds or slightly declines. For example:<\/p>\n All of this data comes to show what you\u2019ve probably realized already: Flutter is getting comfortably ahead of React Native. However, with only 13 thousand apps using Flutter at the moment (in comparison to\u00a0React Native\u2019s 31 thousand<\/a>), React Native still has a significant dominance in mobile stores and we have yet to see how many more companies will ultimately choose Flutter for their upcoming projects.<\/p>\n Now that we know quite a bit about React Native and Flutter, we can start comparing them in more specific categories. For this, I thought it would be best to focus on a few major categories and select a relative winner for each.\u00a0The Programming Language: Dart vs JavaScript<\/p>\n Comparing Dart vs JavaScript is a massive topic that would probably take us a whole series of articles to tackle properly, especially because this isn\u2019t an apples-to-apples comparison\u2014Dart is designed to compile to JavaScript and native code. So take this quick comparison with a grain of salt.<\/p>\n It seems like React Native takes this round. Let\u2019s move on.<\/p>\n According to the official\u00a0Flutter documentation<\/a>, Flutter\u2019s architecture is designed as a layered, extensible system. In other words, it exists as a series of independent libraries that always depend on their underlying layers. No layer has privileged access to the layer below it, and every part of the framework level is designed to be optional and replaceable.<\/p>\n At the core of Flutter is the Flutter Engine, which is written in C++ and supports all the flutter primitives. Developers normally interact with Flutter through the Flutter Framework, which is the modern, reactive Dart framework we\u2019re used to seeing. At this level, we can find the foundational classes, the rendering layer, the widgets layer, and the Material and Cupertino libraries. For further information, please refer to the documentation linked above.<\/p>\n React Native\u2019s architecture is Flux, the application architecture that Facebook uses for building client-side web applications. It is based on the concept of Unidirectional Data Flow, and made of four individual components:<\/p>\n The Dispatcher is perhaps the most important component of the bunch. It differs from generic pub-sub systems in two ways: first, callbacks are not subscribed to particular events and, second, every payload is dispatched to every registered callback. Along with Node.js\u2019s EventEmitter, Flux will use the Dispatcher to set up an event system that makes it easier to manage the application state. Further information can be found in their\u00a0GitHub documentation<\/a>.<\/p>\n With all of that said, determining who wins this round is a bit pointless from a general perspective. Both React Native and Flutter have great underlying architectures\u2014otherwise, they wouldn’t be as popular as they are. Choosing one or the other based on their architecture is mostly dependent on the particular requirements of the application, so I\u2019ll leave this score to you.<\/p>\n When it comes to performance, Flutter takes a very different approach than React Native or even native development. In essence, the fact that the Flutter framework is compiled using ARM C++ allows it to get as close to machine code as possible and, consequently, allows for better performance in most scenarios. React Native, in contrast, compiles its UI components into their native equivalents, runs JS on a separate thread, and communicates directly with native modules using bridges to ensure all needed actions are fulfilled.<\/p>\n This means that Flutter\u2019s widget-based system makes it a great option for performance-optimized applications that need to use as little CPU and memory as possible. React Native, on the other hand, often needs additional components to achieve UX targets, which naturally reduces performance just slightly enough to be considerable. All of this is illustrated with several examples on\u00a0this benchmark<\/a>.<\/p>\n Additionally, the Google team just released Flutter 2, which now supports Progressive Web Application (PWA) development using the same code base as mobile projects. Flutter 2 also provides support for high-performance 2D and 3D APIs and hardware acceleration, and companies like iRobot and Rive have recently released performance-driven web and mobile applications that leverage these features.<\/p>\n Based on this information, I believe that Flutter is better for performance-driven applications, so we\u2019ve got to give it this round. However, there\u2019s a lot that goes into measuring performance, so your mileage may vary.<\/p>\n When the time comes for testing, most React Native applications use Jest, a JavaScript test runner maintained by Facebook. Since version 0.38, a Jest setup is included by default when running\u00a0react-native init<\/em><\/strong>\u00a0and automatically adds the necessary configuration to the\u00a0package.json<\/em><\/strong>\u00a0file. This also creates a\u00a0jest.preset<\/em><\/strong>\u00a0node environment that mimics the environment of the React Native app, and avoids loading any DOM or browser APIs to improve startup time.<\/p>\n Still, since many React Native and third-party components rely on native code to be rendered, Jest is forced to include a manual mocking system that can help to mock out the underlying implementation. Common third-party components like video can easily be mocked, often with just a few lines of code, but more complex manual mocks are required for forwarding prop types or static fields.<\/p>\n For component and integration testing, React Native developers often use React\u2019s Test Renderer and the React Native Testing Library. However, at this level the testing frameworks are only running JavaScript tests in a Node.js environment, so they do not take into account any iOS, Android, or other platform code which is backing the React Native components.<\/p>\n In Flutter development, unit testing is fairly simple, as developers only need to test Dart classes using the\u00a0dart<\/em><\/strong>\u00a0package. Then comes widget testing, which is analogous to component testing. Testing a widget involves multiple classes and requires a test environment that provides the appropriate widget lifecycle context, but everything is included in the\u00a0flutter_test<\/em><\/strong>\u00a0package, which ships with the Flutter SDK. These are the tools included:<\/p>\n Arguably, the widget testing tools provided by Flutter make testing an easier and faster job than testing in React Native. So we\u2019ve got to give this one to Flutter.<\/p>\n Since they are designed for cross-platform development, both React Native and Flutter are great for development speed and can reduce traditional project delivery time by up to 50%. They also both have their own implementation of \u201cSave, See, Repeat\u201d iterations (Fast Refresh for React and Hot Reload for Flutter), and they both work extremely well. However, the final development time will always depend on two things: the knowledge of the development team in the technology and how many developers you can actually hire.<\/p>\n React Native has clearly been around longer, and the market dominance of React and JavaScript has motivated countless developers to learn and apply this library in their native development projects. After all, learning and implementing the native version of a library you already love is not a hard decision.<\/p>\n In contrast, Flutter hasn\u2019t had as much time to attract as many mobile developers, even if it\u2019s significantly trendier right now than React Native. This means that there aren\u2019t as many developers with a lot of seniority in Flutter development, and it might be a bit harder to find the right people for the job.<\/p>\n Taking all of this into account, development speed is likely to be higher in React Native development projects. However, Flutter does provide many different IDE integrations that can really speed up development. Even on VIM, Flutter allows developers to use tools like IntelliSense, autocompletion, and validation. None of that is available on React Native unless you use TypeScript and the package supports types. So, in terms of potential, Flutter could be the faster development technology.<\/p>\n Popularity aside, both React Native and Flutter have amazing communities of developers behind them. And, contrary to what you may believe after reading the popularity section of this article, the numbers are fairly close. Here\u2019s a quick glance at some relevant community stats for each technology:<\/p>\n\n
\r\nimport<\/span> 'package:flutter\/material.dart'<\/span>;<\/span>\r\n\r\nvoid<\/span> main<\/span>(<\/span>)<\/span> =<\/span>><\/span> runApp<\/span>(<\/span>MyApp<\/span>(<\/span>)<\/span>)<\/span>;<\/span>\r\n\r\nclass<\/span> MyApp<\/span> extends<\/span> StatelessWidget<\/span> {<\/span>\r\n @override<\/span>\r\n Widget build<\/span>(<\/span>BuildContext context)<\/span> {<\/span>\r\n return<\/span> MaterialApp<\/span>(<\/span>\r\n title:<\/span> 'Welcome to Flutter'<\/span>,<\/span>\r\n home:<\/span> Scaffold<\/span>(<\/span>\r\n appBar:<\/span> AppBar<\/span>(<\/span>\r\n title:<\/span> Text<\/span>(<\/span>'Welcome to Flutter'<\/span>)<\/span>,<\/span>\r\n )<\/span>,<\/span>\r\n body:<\/span> Center<\/span>(<\/span>\r\n child:<\/span> Text<\/span>(<\/span>'Hello World'<\/span>)<\/span>,<\/span>\r\n )<\/span>,<\/span>\r\n )<\/span>,<\/span>\r\n )<\/span>;<\/span>\r\n }<\/span>\r\n}<\/span>\r\n\t<\/code><\/pre>\n<\/div>\nWhat Is React Native?<\/h2>\n
\n
\r\nimport<\/span> React from<\/span> 'react'<\/span>;<\/span>\r\nimport<\/span> {<\/span> Text,<\/span> View }<\/span> from<\/span> 'react-native'<\/span>;<\/span>\r\n\r\nconst<\/span> HelloWorldApp<\/span> =<\/span> (<\/span>)<\/span> =><\/span> {<\/span>\r\n return<\/span> (<\/span>\r\n <<\/span>View style=<\/span>{<\/span>{<\/span>\r\n flex:<\/span> 1<\/span>,<\/span>\r\n justifyContent:<\/span> 'center'<\/span>,<\/span>\r\n alignItems:<\/span> 'center'<\/span>\r\n }<\/span>}<\/span>><\/span>\r\n <<\/span>Text><\/span>Hello,<\/span> world!<\/span><<\/span>\/<\/span>Text><\/span>\r\n <<\/span>\/<\/span>View><\/span>\r\n )<\/span>;<\/span>\r\n}<\/span>\r\n\r\nexport<\/span> default<\/span> HelloWorldApp;<\/span>\r\n\t<\/code><\/pre>\n<\/div>\nThe Popularity Matchup<\/h2>\n
![\"flutter](\"https:\/\/assets-global.website-files.com\/5d9bc5d562ffc22c37470958\/60ad78b4602e59247b4cd3c7_7EXLoH8czwpQ0sWV5R_1pAe_2G94t-tYUT4brYnUo7Kasgw1C0Ky8GE8riqjghJMwS4XJiAJGBhcSLvpNggl6SycFDX6sCt5RZUtiy0F1AbPStN5KqVLkIdN0v7y2efOMFbCyMvX.png\")
<\/div>\n
Comparing React Native and Flutter<\/h2>\n
\n
The Underlying Architecture<\/h3>\n
\n
The Performance Race<\/h3>\n
Testing with React Native and Flutter<\/h3>\n
\n
Development Speed<\/h3>\n
Community and Ecosystem<\/h3>\n
![\"React](\"https:\/\/assets-global.website-files.com\/5d9bc5d562ffc22c37470958\/60ad780939bdb8426a17a1fb_R2Ttc2RUnfCqP-7I671Bg2ysQLqahVBjWRuTvARAUDa40puv_zXipGWNk888yntFxIbbtlDh2S_KBEyQ1atOGm7PumEITxJM2kW--UH83EO3S3MWMHqTCa7f7J-IYOR5CaDaGH-o.png\")
<\/div>