Flutter: Developer experience on Google’s React Native competitor

March 01, 2018 0 Comments

Flutter: Developer experience on Google’s React Native competitor

 

 

Google tends to dominate our lives by offering services we use on the daily basis in home and work. E-mail, calendar, contacts, everything is in their hands. With creation of Android they also got into our pockets.

It also affects professionally used services and tools. The most recent Hangouts Chat release looks like they’re already started claiming the market already owned by Slack. Now they’re conquering developers world.

React Native, a very successful framework for building mobile apps is slightly gaining a huge part of the native development world. Is it the other area in which Google sees potential big deal? In my opinion yes – and I think that’s why they rolled out Flutter.

What exactly Flutter is?

First time I heard about Flutter watching the Google I/O 2017 talk “Single Codebase, Two Apps with Flutter and Firebase” and I must admit now that it didn’t catch my attention that time. But now with the beta release it’s time to have a closer look on it.

The best description about Flutter can be seen on its front page For me it looks like we’re having a React Native’s replacement here with some functionalities given by Expo:

Flutter is Google’s mobile UI framework for crafting high-quality native interfaces on iOS and Android in record time.

The latter part of it’s description looks pretty exciting as well. I’m actually very curious how it works with existing code:

Flutter works with existing code, is used by developers and organizations around the world, and is free and open source.

Flutter uses programming language Dart and it’s main building blocks are widgets. They’re heavily inspired by React’s JSX syntax, and for those familiar with React it should be easy to jump into Flutter development.

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

Flutter also provides a vast range of Material Design inspired components, ready to be pulled into our app:

  • Navigation elements: navbars, tabs, a drawer component,
  • Form elements: buttons, inputs, checkboxes, selects and dropdowns,
  • Modals, tooltips, alerts and cards,
  • Ready to use tables,
  • Icons, image wrappers and more.

Let’s see how the developer experience looks like!

Installation

Installation of the framework starts with cloning a git repository and adding its binary to the user’s PATH:

git clone -b beta https://github.com/flutter/flutter.git
export PATH=`pwd`/flutter/bin:$PATH

Then we need to run a command called flutter doctor to check if our development environment consists of all the required libraries and tools:

flutter doctor

The output will be similar to the following. In my case I had missing CocoaPods, ios-deploy and some libraries:

Doctor summary (to see all details, run flutter doctor -v): [✓] Flutter (Channel beta, v0.1.5, on Mac OS X 10.13.3 17D102, locale en-PL) [✓] Android toolchain - develop for Android devices (Android SDK 27.0.3) [!] iOS toolchain - develop for iOS devices (Xcode 9.2) ✗ Your Mac needs to enabled for developer mode before using Xcode for the first time. Run 'sudo DevToolsSecurity -enable' to enable developer mode. ✗ libimobiledevice and ideviceinstaller are not installed. To install, run: brew install --HEAD libimobiledevice brew install ideviceinstaller ✗ ios-deploy not installed. To install: brew install ios-deploy ✗ CocoaPods not installed. CocoaPods is used to retrieve the iOS platform side's plugin code that responds to your plugin usage on the Dart side. Without resolving iOS dependencies with CocoaPods, plugins will not work on iOS. For more info, see https://flutter.io/platform-plugins To install: brew install cocoapods pod setup [✓] Android Studio (version 3.0) [!] VS Code (version 1.20.1) [!] Connected devices ! No devices available ! Doctor found issues in 3 categories.

It doesn’t look like a seamless setup but after fixing all the issues I’ve been able to run the app using flutter run command.

Editor integration

Worth mentioning is excellent editor integration. My preferred editor of choice is Visual Studio Code and there is official extension which transforms our editor with a very powerful IDE.

Through a few clicks within VSCode’s Extension Marketplace we got the ability to create, debug and run the app on the physical device or a simulator just from the editor. This is really nice and I’ve been missing this feature while working with React Native.

New Project

Creation of new project is also fully automated. It can be done through the console:

flutter create <project_directory_name>

or quicker from the editor, in my case it’s VSCode, just using the Command Palette:

A few clicks and the app is up and running:

I’ve been doing some changes, used some widgets from the library and the hot reloading is the thing! It really works blazingly fast!

Hands on Dart, the programming language behind Flutter

During my experience with Flutter I had a quite broad look at Dart – the language Flutter uses. For people coming from JavaScript everything should seem very familiar (well, it’s been for me). Asynchronous stuff with async/await, arrow functions, no private/protected methods but also some things I found missing in JS: static type checking for example.

In Dart everything is an object. Functions, strings, even null is an object. It has similar data structures to those we know in JavaScript.

For example, an equivalent of JavaScript’s array is a List:

var list = [1, 2, 3];

And with object literals we can find some similarity to Dart’s Maps:

var turtles = { 'first': 'One turtle', 'second': 'Two turtles', 'third': 'Three turtles' };

I strongly encourage you to have a look at Dart’s Language Tour and play with it on its interactive playground called DartPad (similar to CodePen). It’s fun! 🙂

Final thoughts

I personally see huge improvement and step forward in multiplatform mobile development with the variety of tools – React Native and now Flutter. I’m also very curious how will be the market response to Dart and Flutter. It’s still in beta phase but it’s baked by Google and even in beta looks pretty stable, well designed and mature(!).

Don’t forget to let me know what you think in comments!


Tag cloud