Lang
Blog

Google Flutter- From the Perspective of a React Native Developer

And why every JavaScript developer should try it!!

ByPayal Mittal
August 31st . 5 min read
Google Flutter - From the Perspective of a React Native Developer

Flutter was built by Google in 2017 to provide a platform for developers to create scalable and faster applications that would run on both Android and iOS devices. It is an SDK that works on Dart language.

But the interesting thing is, it’s easy for React Native developers to build native applications with Google Flutter. Even those who understand only the basics of React Native can easily make their way to Flutter development.

In this blog, we’ll see what makes Flutter easy for JavaScript developers and learn about its basic concepts-

Overview about Flutter

“Flutter is Google’s portable UI toolkit for building beautiful, natively compiled applications for mobile, web, and desktop for Android and iOS from a single codebase.”

It is free, open-source, and works with the existing code. It is built with C, C++, Dart, and Skia (a 2D rendering engine). It ships with a React-like framework (flutter flux).

It is different from other native-app-building frameworks in many ways, such as -

  • It has its own set of UI components, called widgets. The performance of the Flutter applications is limited by the quality of these widgets.
  • Instead of using WebView or OEM widgets, like other native frameworks, it uses its rendering engine (Skia) to draw UI components (widgets).
  • Also, it only uses a little potion of C and C++ code, most of the other things are implemented in Dart.

The Flutter engine implements and renders Flutter’s libraries, UI components, graphics, animation, network Input/Output, plugins, and compiles toolchains on both Android and iOS.

The Flutter Architecture is based upon a layer-system with a series of independent libraries, each one depending upon the underlying layer.

google-flutter_1.jpg

All the layers are designed in such a way that no specific one has the privilege to access the layer beneath and every part of the framework level is replaceable.

The Flutter SDK consists of:

  • A heavily optimized 2D rendering engine
  • React-like framework
  • High-quality Material Design and Cupertino (iOS-style) widgets
  • Dart DevTools for performance debugging (currently in beta phase but will be activated soon)
  • Interop and plugin system
  • Integration test APIs

Now that you’ve got a basic understanding of Flutter, let’s move further into more details about Flutter flux and Dart language-

What is Dart?

Dart is the modern, concise, general-purpose, and object-oriented programming language, developed by Google, that Flutter uses in building its applications.

Do you know that not many developers know about Dart??

Yes. That’s true.

Although it has a strong presence in the developer’s community, it is ruled out by mainstream languages like JavaScript and Java.

Today’s developer finds his comfort in these mainstream languages and they don’t want to leave or replace them and this is why Dart remains almost untouched by the developer’s world.

But it doesn’t imply that it is not understandable or suitable, rather it is a simple and easy-to-understand language for JavaScript developers as it is also based upon the object-oriented (OOPs) approach.

Whether you’re building a web app, mobile application, or server-side app, Dart is the solution for all.

The reason why the Flutter Team chose Dart of all languages is that while the team evaluated several languages based on four primary parameters, they found Dart most effective over all others.

While some languages met some criteria, Dart, not only, fulfilled all the parameters but also fitted best as per their assessment.

These four parameters are -

  • Object-oriented language
  • Developer productivity
  • High and predictable performance
  • Faster allocation

Also, Dart is an easy-to-get-on-with language with some amazing features like:

  • Ahead-of-Time (AOT) C-style syntax compiled into native.
  • Support for interfaces and abstract classes.
  • Optional transcompilation into JavaScript.

Flutter Flux-

“A Dart app architecture library with unidirectional data flow inspired by RefluxJS and Facebook’s Flux.”

Flutter Flux is a modified form of RefluxJS but, instead of React, it works for Flutter.

The main function of flutter flux is to implement a unidirectional data flow pattern which consists of Actions, Stores, and StoreWatchers. You can see their functions in the image below-

google-flutter_2.jpg

Dart vs JavaScript

While React Native uses JavaScript to develop high-quality, cross-platform applications, Flutter is supported by Dart language. Nonetheless, it is very similar to JavaScript and thus, easy-to-learn for JS developers.

  • Entry Point: While in JavaScript, one has to define an entry point whereas, Dart has a predefined main() function that serves as the entry point.
  • Printing to console:
// In JavaScript
console.log('Hello world!');
// In Dart
print('Hello world!');
  • Assigning Variables: Unlike JavaScript, you must either explicitly type the variable name or it should be inferred automatically.
  • Null or zero value: Values of 1 or any null-objects are considered ‘True’ in JavaScript but in Dart, only the Boolean true is considered ‘True’.
  • Functions: Both JavaScript and Dart have similar functions, they only differ in their declaration.
  • Asynchronous Programming: While JavaScript uses <u>Promise</u> object to represent the resulting value and success/failure of an asynchronous operation, Dart makes use of Future object to do this.

How to Import Widgets?

In Flutter, everything works around widgets. Now, let’s understand what exactly are the widgets-

“Widgets are the basic building blocks of an app’s user interface.”

Widgets can define all the structural and stylistic elements of the applications in the form of buttons and font/color schemes respectively.

Unlike React Native, where one needs to import each component, Flutter imports the whole packages. For example- to use iOS widgets, import the Cupertino library, for more basic widgets, you can even write your own widget library. See below -

import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/widgets.dart';
import 'package: /my_widgets.dart';

Get Started with Flutter

Flutter can directly be installed from here.

To create an app with Flutter, you need to fulfill any one of the given requirements-

  • Use the flutter create command from CLI and make sure to have Flutter SSDK in the PATH.
  • Get the Dart plugins installed and use an IDE with Flutter

On the other hand, we use create-react-native-app command in React Native to create an app.

// Flutter
$ flutter create <projectname>
// JavaScript
$ create-react-native-app <projectname>

A simple “Hello, World!!” app in Flutter

// Flutter
import 'package:flutter/material.dart';
void main() {
  runApp(
    Center(
      child: Text(
        'Hello, world!',
        textDirection: TextDirection.ltr,
      ),
    ),
  );
}

To get into more details, refer to this link -

Write your first flutter app

Summary:

Flutter provides an excellent alternative for building native mobile applications. But why would a JavaScript developer consider it when he has the excellent choice of React Native??

This is due to its in-built UI components (widgets) that cease the need to import third-party libraries, which is very unlikely in React-Native.

Furthermore, the applications built by Flutter render excellent performance, and with no interpreters required for code compilation, they start quickly.

Still, Flutter is fairly in its starting years and has a long way to go. In the meantime, many features and updates will be added to it.

Thanks for reading!!

Share:
0
+0