Flutter Kasper Lund, Google

Transcription

1 Flutter Kasper Lund, Google

2

3

4

5 The best way to build for mobile?

6 We need to talk about American politics...

7

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

9 Hamilton!

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

11

12 When do you need it? Now.

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

14 Flutter

15

16 Mobile SDKs Compiled to native MVC/MVVM Reactive ios SDK Android SDK Interpreted (JavaScript)

17 Mobile SDKs MVC/MVVM Reactive Compiled to native Interpreted (JavaScript) ios SDK Android SDK Titanium, Cordova, PhoneGap, Ionic,...

18 Mobile SDKs MVC/MVVM Reactive Compiled to native Interpreted (JavaScript) ios SDK Android SDK Titanium, Cordova, PhoneGap, Ionic,... React Native

19 Mobile SDKs Compiled to native Interpreted (JavaScript) MVC/MVVM ios SDK Android SDK Titanium, Cordova, PhoneGap, Ionic,... Reactive Flutter React Native

20 ... Flutter s layered architecture

21 Flutter comes with lots of Material Design widgets...

22 Let us see it live... $ flutter devices emulator-5554 android-x64 (7.1.1) $ flutter run -d emulator-5554

23 What I really like about Flutter, is their beautiful set of Material Design widgets.

24 Custom UIs are really quite popular

25 Tr ad iti o na l ly Doing custom is hard Doing custom twice is painful

26 Flutter supports custom UIs extremely well because of the platform layering

27

28 Fl u tte r Doing custom is easy Doing custom twice is not needed

29 Running at 60 fps, user interfaces created with Flutter perform far better than those created with other cross-platform development frameworks.

30 Dart

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

32

33 Dart translates to JavaScript and runs in all modern browsers

34 main() { var person = new Person("Kasper"); print("hello $person"); } class Person { String name; Person(this.name); tostring() => name; } A taste of Dart...

35 The Dart language Unsurprising and object-oriented Class-based single inheritance Familiar syntax with lexical scoping Sound type system NEW!

36 Ahead-of-time compilation.apk *.dart compiler.js

37 Dart compiles to native machine code L0:... 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 ldr r0, [r1, #3] ldr r1, [r1, #7] eor r0, r0, r1...

38 The UI is butter smooth... I have never seen such a smooth Android app. Pascal Welsch, Speaker at Droidcon Berlin

39 but making sausages is quite involved!

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

41 Stand back while I hack this thing...

42 Coding with Flutter the past week has brought back the joy of mobile development for me.

43 Co nc er ne d? Constructing widget trees in Flutter appear expensive is it?

44 Ex ci No! te d!

45 Free space is contiguous filled free

46 Allocate by bumping a single pointer... filled new free

47 and initializing the allocated space filled free

48 Al lo ca tio n in Da rt Lock free Simple Fast

49 Co nc er ne d? How much do we have to pay for collecting the garbage?

50 Dart conservative 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? precise

51 Semi-space collector live objects

52 Semi-space collector live objects from space to space

53 Semi-space collector live objects copy from space to space

54 Semi-space collector live objects copy from space to space

55 Semi-space collector live objects copy from space to space

56 Semi-space collector live objects from space to space

57 Semi-space collector live objects from space to space

58 Semi-space collector live objects contiguous free space to space from space

59 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

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

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

62 root forwarding pointer to space Let s start at the root

63 root to space When done with the roots, we scan through to space

64 root to space We continue scanning through to space...

65 root to space as long as we re making progress (copying over objects)

66 root Done We never touched any of the dead objects! to space and we re done!

67 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

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

69 Da r tf or F lu t te Dart allows deploying fast machine code Dart enables hot reload in development Dart deals efficiently with tons of widgets r

70 Now back to Hamilton...

71 After a short three months... One simple codebase, two great apps (Android and ios)

72

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

74 Thank you!