Flutter Kasper Lund, Google The best way to build for mobile? - - PowerPoint PPT Presentation

▶
flutter
SMART_READER_LITE
LIVE PREVIEW

Flutter Kasper Lund, Google The best way to build for mobile? - - PowerPoint PPT Presentation

Jan 08, 2023 1.13k likes •1.94k views

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

slide-1
SLIDE 1

Flutter

Kasper Lund, Google

slide-2
SLIDE 2
slide-3
SLIDE 3
slide-4
SLIDE 4

✓

slide-5
SLIDE 5

The best way to build for mobile?

slide-6
SLIDE 6

We need to talk about American politics...

slide-7
SLIDE 7
slide-8
SLIDE 8

The Founding Father Alexander Hamilton's life is now a hip-hop musical...

slide-9
SLIDE 9

Hamilton!

slide-10
SLIDE 10

So you have have one really popular show. What more do you need?

slide-11
SLIDE 11
slide-12
SLIDE 12

When do you need it? Now.

slide-13
SLIDE 13

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
slide-14
SLIDE 14

Flutter

slide-15
SLIDE 15

http://flutter.io/

slide-16
SLIDE 16

Mobile SDKs

Compiled to native MVC/MVVM Reactive Interpreted (JavaScript)

iOS SDK Android SDK

slide-17
SLIDE 17

Mobile SDKs

MVC/MVVM Reactive

iOS SDK Android SDK Titanium, Cordova, PhoneGap, Ionic, ...

Compiled to native Interpreted (JavaScript)

slide-18
SLIDE 18

Mobile SDKs

MVC/MVVM Reactive

iOS SDK Android SDK Titanium, Cordova, PhoneGap, Ionic, ... React Native

Compiled to native Interpreted (JavaScript)

slide-19
SLIDE 19

Mobile SDKs

MVC/MVVM Reactive

iOS SDK Android SDK Titanium, Cordova, PhoneGap, Ionic, ...

Flutter

React Native

Compiled to native Interpreted (JavaScript)

slide-20
SLIDE 20

...

Flutter’s layered architecture

slide-21
SLIDE 21

Flutter comes with lots of Material Design widgets...

slide-22
SLIDE 22

Let us see it live...

$ flutter devices emulator-5554 • android-x64 (7.1.1) $ flutter run -d emulator-5554

slide-23
SLIDE 23

“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

slide-24
SLIDE 24

Custom UIs are really quite popular

slide-25
SLIDE 25

Doing custom is hard Doing custom twice is painful

T r a d i t i

  • n

a l l y

slide-26
SLIDE 26

Flutter supports custom UIs extremely well because of the platform layering

slide-27
SLIDE 27
slide-28
SLIDE 28

Doing custom is easy Doing custom twice is not needed

F l u t t e r

slide-29
SLIDE 29

“Running at 60 fps, user interfaces created with Flutter perform far better than those created with

  • ther cross-platform development frameworks.”

https://code.tutsplus.com/tutorials/developing-an-android-app-with-flutter--cms-28270

slide-30
SLIDE 30

Dart

slide-31
SLIDE 31

Dart is the tech stack of choice for Google’s largest business

slide-32
SLIDE 32
slide-33
SLIDE 33

Dart translates to JavaScript and runs in all modern browsers

slide-34
SLIDE 34

main() { var person = new Person("Kasper"); print("Hello $person"); } class Person { String name; Person(this.name); toString() => name; }

A taste of Dart...

slide-35
SLIDE 35

The Dart language

  • Unsurprising and object-oriented
  • Class-based single inheritance
  • Familiar syntax with lexical scoping
  • Sound type system NEW!
slide-36
SLIDE 36

Ahead-of-time compilation

*.dart compiler .apk .js

slide-37
SLIDE 37

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 ...

slide-38
SLIDE 38

“The UI is butter smooth ... I have never seen such a smooth Android app.”

Pascal Welsch, Speaker at Droidcon Berlin

slide-39
SLIDE 39

… but making sausages is quite involved!

slide-40
SLIDE 40

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
slide-41
SLIDE 41

Stand back while I hack this thing...

slide-42
SLIDE 42

“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/

slide-43
SLIDE 43

Constructing widget trees in Flutter appear expensive – is it?

C

  • n

c e r n e d ?

slide-44
SLIDE 44

E x c i t e d !

No!

slide-45
SLIDE 45

Free space is contiguous

filled free

slide-46
SLIDE 46

Allocate by bumping a single pointer ...

filled free new

slide-47
SLIDE 47

… and initializing the allocated space

filled free

slide-48
SLIDE 48

A l l

  • c

a t i

  • n

i n D a r t

Lock free Simple Fast

slide-49
SLIDE 49

C

  • n

c e r n e d ?

How much do we have to pay for collecting the garbage?

slide-50
SLIDE 50

conservative precise

Where have all the pointers gone?

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

Dart

slide-51
SLIDE 51

Semi-space collector

live objects

slide-52
SLIDE 52

“from” space

Semi-space collector

“to” space live objects

slide-53
SLIDE 53

“from” space

Semi-space collector

“to” space live objects copy

slide-54
SLIDE 54

“from” space

Semi-space collector

“to” space live objects copy

slide-55
SLIDE 55

“from” space

Semi-space collector

“to” space live objects copy

slide-56
SLIDE 56

“from” space

Semi-space collector

“to” space live objects

slide-57
SLIDE 57

“from” space

Semi-space collector

“to” space live objects

slide-58
SLIDE 58

“to” space

Semi-space collector

“from” space live objects contiguous free space

slide-59
SLIDE 59

conservative precise

Dart provides precise garbage collection for Flutter

Idea: allow moving objects and compacting

  • enables really fast allocations
  • enables really fast garbage collections

Dart

slide-60
SLIDE 60

root

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

slide-61
SLIDE 61

root

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

“to” space

slide-62
SLIDE 62

root

Let’s start at the root

“to” space forwarding pointer

slide-63
SLIDE 63

root

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

“to” space

slide-64
SLIDE 64

root

We continue scanning through “to” space ...

“to” space

slide-65
SLIDE 65

root

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

“to” space

slide-66
SLIDE 66

root

… and we’re done!

“to” space Done

We never touched any of the dead

  • bjects!
slide-67
SLIDE 67

G a r b a g e c

  • l

l e c t i

  • n
  • f

s h

  • r

t

  • l

i v e d

  • b

j e c t s

Zero cost for dead objects Non-recursive Simple Fast Now I should really tell you about generational garbage collection...

slide-68
SLIDE 68

Flutter’s widget construction pattern is super well supported by Dart!

slide-69
SLIDE 69

Dart allows deploying fast machine code Dart enables hot reload in development Dart deals efficiently with tons of widgets

D a r t f

  • r

F l u t t e r

slide-70
SLIDE 70

Now back to Hamilton...

slide-71
SLIDE 71

After a short three months...

One simple codebase, two great apps (Android and iOS)

slide-72
SLIDE 72
slide-73
SLIDE 73

https://flutter.io/

Flutter makes it easy and fast to build beautiful mobile apps.

Flutter is a new mobile app SDK to help developers and designers build modern mobile apps for iOS and Android.

  • Flutter is available

as an open-source, alpha release. Flutter is used by Google and others in production.

slide-74
SLIDE 74

Thank you!

https://flutter.io/