The Tragedy of the Commons

1
Modelling and Simulation

• The Tragedy of the Commons

2
Fast, modern, beautiful apps for Android and iOS
3
Why is Flutter different? Whats new and exciting
about Flutter?
4
Technology OEM SDKs
Interpreted (JavaScript)
Compiled to native
iOS SDK Android SDK

MVC/MVVM
View
Reactive Views
5
Technology WebViews
Interpreted (JavaScript)
Compiled to native
iOS SDK Android SDK Titanium, Cordova, PhoneGap, Ionic, ...

MVC/MVVM
View
Reactive Views
6
Technology Reactive Views
Interpreted (JavaScript)
Compiled to native
iOS SDK Android SDK Titanium, Cordova, PhoneGap, Ionic, ...
Flutter React Native
MVC/MVVM
View
Reactive Views
7
The Bridge
Services, Events, Widgets
Your app
JavaScript realm
Native realm
? Context Switch ?
8
The Bridge
Each realm by itself is blazingly fast. The
performance bottleneck often occurs when we move
from one realm to the other. In order to
architect performant ... apps, we must keep
passes over the bridge to a minimum. https//med
ium.com/_at_talkol/performance-limitations-of-react-n
ative-and-how-to-overcome-them-947630d7f440
9
Advantages of reactive views, without a JS bridge
Compiled to native code (not VM) on each platform
Flutter
10
Widgets!
11
Flutter started as an experiment
12
Traditional Layout
Layout rules (CSS properties)
Widgets (HTML elements)
CSS body text-align center
div.column display inline-block div.icon
color green
HTML ltbodygt ltdiv classcolumngt Hello,
World! ltdiv classicongt 9733 lt/divgt
lt/divgt lt/bodygt
13
Problems with Traditional Layout

• Global rules applied to virtually any widget
• Lots of layout methods
• box model(s), floats, tables, flexbox,
  grid,multiple columns of text, paged media
• Developer cannot add new layout methods
• flexbox, grid
• Slow! And typically N-squared(widgets)

14
What we discovered

• Most layout is relatively simple
• Text on a scrolling page
• Fixed rectangles whose size and positiondepend
  only on the size of the display
• Occasionally tables, floats, etc.
• Most layout is local to a subtree of widgets that
  uses a single layout model
• Simplify and optimize

15
Flutters New Architecture

• Flutter provides its own widgets
• Turns layout on its head!
• Widgets are simple and fast
• Everything is a widget
• Full customization and extensibility

16
Turn layout on its head!
Flutter new Center(child new
Column(children new Text('Hello,
World!'), new Icon(Icons.star, color
Colors.green) ) )
17
Layout widgets (single child)
Padding
Center
Align
Many others, or add new ones
18
Layout widgets (multi child)
Row
Column
Stack
ListView
(flexbox)
Grid, Flow, Table, Wrap, ...
19
Everything is a widget!

• sliver layout model (scrolling)
• object layout model
• Themes
• Navigation
• Applications
• Create new kinds of widgets or subclass existing
  ones

20
Flutter layout

• Fast! And linear (most of the time)
• Avoids layout entirely when possible
• Used to implement scrolling!
• Simple
• Whether you are laying out a column of text, a
  table, a slide show, a single-page app, or just
  centering

21
More about Reactive Views
Reactive web views introduced Virtual DOM Virtual
DOM is immutable Rebuilt for every frame
22
Virtual DOM (web)
Platform
Compare,Update
App
realDOM
Render
? Virtual DOM
WebView
23
Virtual widgets (mobile)
Platform
Compare,Update
App
Render
OEM widgets
? Virtual widgets
Flutter
App
Render
? Widget tree
24
Reactive Views in Flutter

• Limits updates to parts that have changed
• Uses structural repainting using compositing
• Bit blit instead of re-rendering
• Fast scrolling

25
Dart helps

• Reactive views generate lots of small objects
• Generational garbage collection
• Allocation with single pointer bump
• GC runs fast (no locks), avoids jank and stutter
• Tree shaking compiler

26
More reasons Flutter picked Dart
27
Structure of Flutter
28
Compatibility

• No compat libraries needed
• Android Jelly Bean, iOS 8.0
• Updating widgets?

29
Great
Tooling
30
Other benefits

• Widget sets
• Android, iOS, Material Design, ltyour brandgt
• Plugins
• Open source (100 committers)

31
New and exciting about Flutter?

• Reactive views, no JS bridge
• Fast and smooth compiles AOT to native (ARM)
  code
• Developer control of widgets and layout
• Beautiful, customizable widgets
• Great developer tools, stateful hot reload
• More performant, more compatibility, more fun

• Whats missing?

• Single codebase, multiple platforms (!?)

• Customization enables multiple platforms

32
A revolutionary app for a revolutionary show
Flutter is an excellent choice for beautiful,
high-performance, brand-driven mobile
experiences.
33
What I really like about Flutter, is their
beautiful set of Material Design
widgets. https//medium.com/_at_aubykhan/how-i-buil
t-a-cross-platform-connected-app-in-7-days-93728a9
87424
34
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
35
The UI is butter smooth ... I have never seen
such a smooth Android app Pascal Welsch,
Speaker at Droidcon Berlin
36
Coding with Dart and Flutter rekindled the joy I
had when I started with mobile dev way back when
No B.S. https//traversoft.com/blog/2017/08/08
/conference-app-flutter/
37
Companion article https//goo.gl/4BaSPx
Hamilton talk at GDD https//youtu.be/prlK_QL_qO
A
DartConf 2018 https//events.dartlang.orgJanuar
y 23-24, Los Angeles
Wm Leler Developer Advocate wmleler_at_google.com
Thanks! Questions?