Copyright © 2017, edureka and/or its affiliates. All rights reserved.
WHAT IS FLUTTER
WHAT IS REACT NATIVE
FLUTTER VS REACT NATIVE
www.edureka.co
www.edureka.co
FLUTTER
DART
www.edureka.co
www.edureka.co
REACT
NATIVE
www.edureka.co
JavaScript
www.edureka.co
www.edureka.co
React Native uses JavaScript to build
cross-platform apps. JavaScript is a
very popular language in the web
community at the moment.
Flutter uses Dart programming
language which was introduced by
Google in 2011 and is rarely used by
developers.
www.edureka.co
www.edureka.co
The React Native framework can be
installed using the Node Package
Manager (NPM). For developers that
have a JavaScript background,
installation of React Native is easy,
whereas other developers would
need to learn the node package
manager.
Flutter can be installed by
downloading the binary for a
specific platform from Github. In the
case of macOS, we have to
download the flutter.zip file and add
it as a PATH variable.
www.edureka.co
www.edureka.co
The getting started guide for Flutter
has detailed information on IDE
setup and platform setup for both
iOS and Android. You can read all
the required setup details on Flutter
install for macOS here. On top of
this, Flutter has a CLI tool called
flutter doctor which can guide
developers through the setup.
The getting started guide of the
React Native project assumes that
the developer already has all the
required setup for developing for
iOS and Android. There is little info
on the Xcode command line tools
but it won’t be enough to get going.
www.edureka.co
www.edureka.co
React Native architecture heavily
relies on JS runtime environment
architecture, also known as
JavaScript bridge. The JavaScript
code is compiled into native code at
runtime. React Native uses the Flux
architecture from Facebook.
The Dart framework uses Skia C++
engine which has all the protocols,
compositions and channels. The
architecture of the Flutter engine is
explained in detail in Github Wiki
here. In short, Flutter has everything
needed for app development in the
Flutter engine itself.
www.edureka.co
www.edureka.co
The core React Native framework
provides just UI rendering and
device access APIs. In order to
access most of the native modules,
React Native has to rely on third-
party libraries.
Flutter framework is bundled with
UI rendering components, device
API access, navigation, testing,
stateful management and loads of
libraries. This rich set of components
removes the need to use third-party
libraries.
www.edureka.co
www.edureka.co
As the complexity of apps grows,
developers would need to learn and
adopt the new Flutter concepts. In
addition, Dart is not a common
programming language and there is
a lack of support for it in many IDEs
and text editors.
React Native has a hot reload
feature which saves a lot of
developer time while testing the
changes in the UI. In terms of IDE
support, developers are free to use
any text editor or IDE of their choice.
www.edureka.co
www.edureka.co
Flutter has been around for a while
but it gained a lot of attention when
Google promoted it in the Google
I/O conference in 2017. The Flutter
community is growing rapidly these
days, meetups and conferences are
taking place online.
React Native launched in 2015 and
has gained in popularity ever since.
There is a community of React
Native developers on GitHub and
lots of meetups and conferences
around the world.
www.edureka.co
www.edureka.co
Flutter has great documentation on
testing Flutter apps here, you can
also read the Nevercode blog on
testing Flutter apps for detailed
information on how Flutter apps can
be tested.
when it comes to integration or UI
level testing, there is no official
support from React Native. There
are third-party tools like Appium and
Detox that can be used for testing
React Native apps but they are not
officially supported.
www.edureka.co
www.edureka.co
Flutter has a strong command line
interface. We can create a binary of
the app by using the command line
tools and following the instructions
in Flutter documentation for
building and releasing Android and
iOS apps.
The React Native official
documentation doesn’t have any
automated steps to deploy the iOS
apps to App Store. However, it
provides a manual process for
deploying the app from Xcode.
www.edureka.co
www.edureka.co
React Native doesn’t have any
official documentation on setting up
CI/CD. However, there are some
articles which describe CI/CD for
React Native apps
Flutter has a section on Continuous
Integration and Testing which
includes links to external sources.
However, Flutter’s rich command
line interface allows us to set up
CI/CD easily.
Copyright © 2017, edureka and/or its affiliates. All rights reserved.
www.edureka.co
www.edureka.co

Flutter vs React Native | Edureka

  • 1.
    Copyright © 2017,edureka and/or its affiliates. All rights reserved.
  • 2.
    WHAT IS FLUTTER WHATIS REACT NATIVE FLUTTER VS REACT NATIVE www.edureka.co
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
    www.edureka.co React Native usesJavaScript to build cross-platform apps. JavaScript is a very popular language in the web community at the moment. Flutter uses Dart programming language which was introduced by Google in 2011 and is rarely used by developers.
  • 9.
  • 10.
    www.edureka.co The React Nativeframework can be installed using the Node Package Manager (NPM). For developers that have a JavaScript background, installation of React Native is easy, whereas other developers would need to learn the node package manager. Flutter can be installed by downloading the binary for a specific platform from Github. In the case of macOS, we have to download the flutter.zip file and add it as a PATH variable.
  • 11.
  • 12.
    www.edureka.co The getting startedguide for Flutter has detailed information on IDE setup and platform setup for both iOS and Android. You can read all the required setup details on Flutter install for macOS here. On top of this, Flutter has a CLI tool called flutter doctor which can guide developers through the setup. The getting started guide of the React Native project assumes that the developer already has all the required setup for developing for iOS and Android. There is little info on the Xcode command line tools but it won’t be enough to get going.
  • 13.
  • 14.
    www.edureka.co React Native architectureheavily relies on JS runtime environment architecture, also known as JavaScript bridge. The JavaScript code is compiled into native code at runtime. React Native uses the Flux architecture from Facebook. The Dart framework uses Skia C++ engine which has all the protocols, compositions and channels. The architecture of the Flutter engine is explained in detail in Github Wiki here. In short, Flutter has everything needed for app development in the Flutter engine itself.
  • 15.
  • 16.
    www.edureka.co The core ReactNative framework provides just UI rendering and device access APIs. In order to access most of the native modules, React Native has to rely on third- party libraries. Flutter framework is bundled with UI rendering components, device API access, navigation, testing, stateful management and loads of libraries. This rich set of components removes the need to use third-party libraries.
  • 17.
  • 18.
    www.edureka.co As the complexityof apps grows, developers would need to learn and adopt the new Flutter concepts. In addition, Dart is not a common programming language and there is a lack of support for it in many IDEs and text editors. React Native has a hot reload feature which saves a lot of developer time while testing the changes in the UI. In terms of IDE support, developers are free to use any text editor or IDE of their choice.
  • 19.
  • 20.
    www.edureka.co Flutter has beenaround for a while but it gained a lot of attention when Google promoted it in the Google I/O conference in 2017. The Flutter community is growing rapidly these days, meetups and conferences are taking place online. React Native launched in 2015 and has gained in popularity ever since. There is a community of React Native developers on GitHub and lots of meetups and conferences around the world.
  • 21.
  • 22.
    www.edureka.co Flutter has greatdocumentation on testing Flutter apps here, you can also read the Nevercode blog on testing Flutter apps for detailed information on how Flutter apps can be tested. when it comes to integration or UI level testing, there is no official support from React Native. There are third-party tools like Appium and Detox that can be used for testing React Native apps but they are not officially supported.
  • 23.
  • 24.
    www.edureka.co Flutter has astrong command line interface. We can create a binary of the app by using the command line tools and following the instructions in Flutter documentation for building and releasing Android and iOS apps. The React Native official documentation doesn’t have any automated steps to deploy the iOS apps to App Store. However, it provides a manual process for deploying the app from Xcode.
  • 25.
  • 26.
    www.edureka.co React Native doesn’thave any official documentation on setting up CI/CD. However, there are some articles which describe CI/CD for React Native apps Flutter has a section on Continuous Integration and Testing which includes links to external sources. However, Flutter’s rich command line interface allows us to set up CI/CD easily.
  • 27.
    Copyright © 2017,edureka and/or its affiliates. All rights reserved. www.edureka.co
  • 28.