flutter
play

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

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


  1. Flutter Kasper Lund, Google

  2. The best way to build for mobile?

  3. We need to talk about American politics...

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

  5. Hamilton!

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

  7. When do you need it? Now.

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

  9. Flutter

  10. http://flutter.io/

  11. Mobile SDKs Compiled to native Interpreted (JavaScript) iOS SDK MVC/MVVM Android SDK Reactive

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

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

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

  15. ... Flutter’s layered architecture

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

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

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

  19. Custom UIs are really quite popular

  20. T r a d i t i o n a l l y Doing custom is hard Doing custom twice is painful

  21. Flutter supports custom UIs extremely well because of the platform layering

  22. F l u t t e r Doing custom is easy Doing custom twice is not needed

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

  24. Dart

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

  26. Dart translates to JavaScript and runs in all modern browsers

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

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

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

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

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

  32. … but making sausages is quite involved!

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

  34. Stand back while I hack this thing...

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

  36. C o n c e r n e d ? Constructing widget trees in Flutter appear expensive – is it?

  37. E x c i t e d ! No!

  38. Free space is contiguous filled free

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

  40. … and initializing the allocated space filled free

  41. A l l o c a t i o n i n D a r t Lock free Simple Fast

  42. C o n c e r n e d ? How much do we have to pay for collecting the garbage?

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

  44. Semi-space collector live objects

  45. Semi-space collector live objects “from” space “to” space

  46. Semi-space collector live objects copy “from” space “to” space

  47. Semi-space collector live objects copy “from” space “to” space

  48. Semi-space collector live objects copy “from” space “to” space

  49. Semi-space collector live objects “from” space “to” space

  50. Semi-space collector live objects “from” space “to” space

  51. Semi-space collector live objects contiguous free space “to” space “from” space

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

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

  54. root “to” space Live and dead objects in the object soup (usually called the heap )

  55. root forwarding pointer “to” space Let’s start at the root

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

  57. root “to” space We continue scanning through “to” space ...

  58. root “to” space … as long as we’re making progress (copying over objects)

  59. root Done We never touched any of the dead objects! “to” space … and we’re done!

  60. G a r b s a h g o e r t c - l o i v l l e e d c t o i o b n j e o Zero cost for dead objects c f t s Now I should really tell you Non-recursive about generational garbage Simple collection... Fast

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

  62. D a r t f o r F l u t t e r Dart allows deploying fast machine code Dart enables hot reload in development Dart deals efficiently with tons of widgets

  63. Now back to Hamilton...

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

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

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

Recommend


More recommend