Flutter

Kasper Lund, Google

✓
The best way to build for
mobile?
We need to talk about American politics...
The Founding Father Alexander Hamilton's
life is now a hip-hop musical...
Hamilton!
So you have have one really popular show.

What more do you need?

When do you need it?

Now.
Hurry up and build two great apps!

● We need a super productive framework and developer environment

● We need a platform that supports custom UIs really well
● We need a high-performance solution that supports beautiful apps
Flutter
http://flutter.io/
Mobile SDKs

Compiled to native Interpreted (JavaScript)

iOS SDK
MVC/MVVM
Android SDK

Reactive
Mobile SDKs

Compiled to native Interpreted (JavaScript)

iOS SDK Titanium, Cordova,

MVC/MVVM
Android SDK PhoneGap, Ionic, ...

Reactive
Mobile SDKs

Compiled to native Interpreted (JavaScript)

iOS SDK Titanium, Cordova,

MVC/MVVM
Android SDK PhoneGap, Ionic, ...

Reactive React Native

Mobile SDKs

Compiled to native Interpreted (JavaScript)

iOS SDK Titanium, Cordova,

MVC/MVVM
Android SDK PhoneGap, Ionic, ...

Reactive
Flutter React Native
 ...

Flutter’s layered architecture

Flutter comes with lots of Material Design widgets...
Let us see it live...

$ flutter devices
emulator-5554 • android-x64 (7.1.1)
$ flutter run -d emulator-5554
“What I really like about Flutter, is their
beautiful set of Material Design widgets.”

https://medium.com/@aubykhan/how-i-built-a-cross-platform-connected-app-in-7-days-93728a987424
Custom UIs are really quite popular
 Tr
ad
iti
ona
lly

Doing custom is hard

Doing custom twice is painful

Flutter supports custom UIs extremely
well because of the platform layering
 Fl
utte
r

Doing custom is easy

Doing custom twice is not needed

“Running at 60 fps, user interfaces created with
Flutter perform far better than those created with
other cross-platform development frameworks.”
https://code.tutsplus.com/tutorials/developing-an-android-app-with-flutter--cms-28270
Dart
Dart is the tech stack of choice for
Google’s largest business
Dart translates to JavaScript and
runs in all modern browsers
 main() {
var person = new Person("Kasper");
print("Hello $person");
}

class Person {
String name;
Person(this.name);
toString() => name;
}

A taste of Dart...
The Dart language

● Unsurprising and object-oriented

● Class-based single inheritance
● Familiar syntax with lexical scoping
● Sound type system NEW!
Ahead-of-time compilation

.apk

*.dart compiler

.js
Dart compiles to native machine code
...
ldr r1, [sp]
ldr d0, [r1, #3]
vcmpd d0, d0
vmstat
bvs L0
vcvtid s2, d0
vmovrs r0, s2
adds r0, r0, r0
bvs L1
vcvtdi d1, s2
vcmpd d0, d1
vmstat
bxeq lr
L0: ldr r0, [r1, #3]
ldr r1, [r1, #7]
eor r0, r0, r1
...
“The UI is butter smooth ... I have never
seen such a smooth Android app.”

Pascal Welsch, Speaker at Droidcon Berlin

… but making sausages is quite involved!
Pay as you go: Just-in-time compilation

● Compile the application as it executes

● Avoid paying the compilation cost up front
● Only compile the parts actually executed
Stand back while I hack this thing...
“Coding with Flutter the past week has brought
back the joy of mobile development for me.”
https://traversoft.com/blog/2017/08/08/conference-app-flutter/
 Co
nc
er
ne
d?

Constructing widget trees in Flutter

appear expensive – is it?
 Ex
ci
te
d!

No!
Free space is contiguous

filled free
Allocate by bumping a single pointer ...

filled new free

… and initializing the allocated space

filled free
 Al
lo
ca
tio
n
in
Da
rt

Lock free
Simple
Fast
 Co
nc
er
ne
d?

How much do we have to pay for

collecting the garbage?
 Dart

conservative precise
Idea: treat everything that looks like a pointer as such
- can’t distinguish ints from pointers
- can’t update pointers, because they might be ints

Where have all the pointers gone?

Semi-space collector

live objects
Semi-space collector

live objects

“from” space “to” space

Semi-space collector

live objects

copy

“from” space “to” space

Semi-space collector

live objects

copy

“from” space “to” space

Semi-space collector

live objects

copy

“from” space “to” space

Semi-space collector

live objects

“from” space “to” space

Semi-space collector

live objects

“from” space “to” space

Semi-space collector

live objects

contiguous free space

“to” space “from” space

 Dart

conservative precise
Idea: allow moving objects and compacting
- enables really fast allocations
- enables really fast garbage collections

Dart provides precise garbage collection for Flutter

 root

Live and dead objects in the object soup (usually called the heap)
 root

“to” space

Live and dead objects in the object soup (usually called the heap)
 root

forwarding pointer

“to” space

Let’s start at the root

 root

“to” space

When done with the roots, we scan through “to” space

 root

“to” space

We continue scanning through “to” space ...

 root

“to” space

… as long as we’re making progress (copying over objects)

 root

Done

We never touched
any of the dead
objects!

“to” space

… and we’re done!

 Ga
sh rba
or ge
t- c
liv ol
ed lec
ob tio
je n o
ct f
s
Zero cost for dead objects
Now I should really tell you
Non-recursive
about generational garbage
Simple
collection...
Fast
Flutter’s widget construction pattern is
super well supported by Dart!
 Da
r tf
or
Flu
tte
r

Dart allows deploying fast machine code

Dart enables hot reload in development
Dart deals efficiently with tons of widgets
Now back to Hamilton...
After a short three months...

One simple codebase, two great apps

(Android and iOS)
 Flutter makes it
easy and fast to
Flutter is available
build beautiful as an open-source,
alpha release.
mobile apps.
Flutter is used by
Google and others
Flutter is a new mobile app SDK to in production.
help developers and designers build
modern mobile apps for iOS and
Android.

https://flutter.io/
Thank you!
https://flutter.io/