Flutter - true cross-platform solution or just a tool for prototyping? // GDG DevFest Budapest 2017

My presentation about the Fluter SDK from GDG DevFest Budapest 2017.

A native focused Android and iOS developer's take on using Google's Flutter SDK for developing cross-platform applications with extensive code sharing. We will take a look at how the SDK performs on the different platforms, how easy it is to develop using it, it's advantages and shortcomings versus native applications. Finally, we will look into the future of Flutter and the OS that may even replace Android one day.

You can watch the recording of the talk here: https://youtu.be/_we-3_ov-gQ

Links from the end:
Flutter’s website
https://flutter.io

Flutter’s GitHub
https://github.com/flutter

POSSE’s presentation about how they built the Hamilton app
https://youtu.be/prlK_QL_qOA

Eric Seidel’s presentation from Strange Loop 2017
https://youtu.be/VUiVkDpikDI

Single Codebase, Two Apps with Flutter and Firebase (Google I/O '17)
https://youtu.be/w2TcYP8qiRI

Transcript

1. Balázs Gerlei Flutter - true cross-platform solution or just a tool for prototyping? @balazsgerlei
2. What is Flutter? • “Flutter is a new mobile app SDK to help developers and designers build modern mobile apps for iOS and Android.” • Open source • Still in alpha • Aims to enable shared codebase, designs and development team • Apps are fast and performant, highly customizable • You write applications in Dart language flutter.io/
3. What is Dart? • An open-source language developed by Google • Very similar to Java, JavaScript (and Kotlin) • Optional, but strong type system • Fast generational garbage collection • Tree-shaking compiler which removes dead code, resulting tiny binaries • Heavily used (mainly in web development) by Google, can scale well dartlang.org
4. Motivation • Developing for mobile is hard • The market is a two-horse race between iOS and Android, it’s rare to only develop for one • Managing two separate teams, and building two separate apps is not easy • “Write once, run everywhere” is an enticing promise, but almost none of the existing solutions can truly deliver • You should be able to trust that users will see what you see during development
5. Flutter’s solution • A cross-platform SDK without the overhead of slow bridges between the cross-platform and native environment • The Dart code is compiled to native • Flutter renders the whole UI, no native Views/Widgets are used • Provides a productive development environment
6. One-pass layout and painting • Flutter handles all rendering • Most other platforms either join layout and painting, or do multi-pass O(Nˆ2) layout • Flutter has a one-pass, O(N), separated layout and painting • Flutter uses simple constraint model: basically min and max width and height • Flutter invalidates subtrees not rects
7. UI is entirely code • You write your UI in code as the rest of the app, not in a declarative language • Flutter favors composition over inheritance, almost everything is a Widget, even Padding • Two kinds of Widgets: • StatelessWidget: immutable views, ex. a text • StatefullWidget: mutable views, ex. list of items retrieved from the network
8. Widget Composition class ExampleWidget extends StatelessWidget { @override Widget build(BuildContext context) { return new Column( children: <Widget>[ new Text("One"), new Center( child: new Text("Hello, world!"), ), ], ); } }
9. Hot Reload • Similar to the native ”Instant Run” feature of Android, but works on iOS too • It preservers state (heap and stack) • Really fast and reliable
10. Flutter in the limelight
11. Flutter in production – Hamilton App • The official app for the popular US musical Hamilton is built with Flutter • Almost fully custom design (almost no platform-specific View/Widget) • Big user base, 900k+ installs, 450k+ daily actives, 2m+ entries in the ticket winning lottery
12. Flutter in production – Hamilton App
13. So... Can it be used in production?
14. Can it be used in production? • Well... maybe • It is in very early stage • For apps with either pure Material Design, or entirely custom UI, without deep system integration • Promotional type apps (like Hamilton) are great example • Not (yet) suited for most (complex) applications
15. Advantages • Most complete Material Design implementation • As all rendering is done by Flutter, apps look the same on all platform versions • Hot reload really works well, development cycles are fast • Static analysis is quite good and improving • Active and enthusiastic community
16. Disadvantages • Still in alpha, used by few • Have to learn a whole new language • Which is still under active development • Easy to mix in UI code with logic (can use MVP or MVVM to mitigate) – cannot write UI in a declarative way • You can feel boxed in by the built-in Widgets – they clearly have an intended usage (mostly inspired by Material Design) • Not a lot of available libraries • Not always suited best for both platforms (Android almost always takes priority)
17. Thank You! Balázs Gerlei @balazsgerlei
18. Links • Flutter’s website • flutter.io • Flutter’s GitHub • github.com/flutter • POSSE’s presentation about how they built the Hamilton app • youtu.be/prlK_QL_qOA • Eric Seidel’s presentation from Strange Loop 2017 • youtu.be/VUiVkDpikDI • Single Codebase, Two Apps with Flutter and Firebase (Google I/O '17) • youtu.be/w2TcYP8qiRI