A New Hope

"A New Hope" a talk about Flutter by Eugenio Marletti & Stebastiano Poggi

Video DroidconIT 2017: https://youtu.be/0ijVuVtu6a4

In this day and age, the Android UI is getting more and more features. Which is amazing. But they get layered on top of years of TODOs, less-than-clean code, and quick patches. This means the APIs are not as terse as us devs would like, and there’s plenty of unwritten knowledge to have to make things work. What if there was something that took the best bits of the Android UI model and wrapped that in a modern, sensible codebase?

Turns out, there is. It’s part of a “native cross-platform” framework, Flutter, that is being developed in Google and used in some of their products. While still a long way from stable and feature-complete, Flutter has an interesting approach of including a full framework based off of Dart. It’s modeled on the good bits of the Android UI framework and will allow your code to run consistently across devices, without the weird BSP- or vendor-specific issues we unfortunately got used to.

Transcript

1. A NEW
   HOPE
   Sebastiano Poggi
   Android GDE, Novoda
   Eugenio Marletti
   Android GDE, Clue
   

   View Slide

2. View Slide

3. SDK for building high-performance,
   high-fidelity, apps for iOS and Android,
   from a single codebase
   

   View Slide

4. TECH PREVIEW
   

   View Slide

5. flapping wings quickly and lightly
   rapid variation of signal parameters
   a small bet
   

   View Slide

6. QUIZ TIME!
   

   View Slide

7. QUIZ TIME!
   

   View Slide

8. View Slide

9. View Slide

10. View Slide

11. View Slide

12. Open-source language
    Made by (and for) Google
    “Familiar” Java-like syntax
    More modern than Java
    

    View Slide

13. Dynamic language
    Statically checked (strong mode)
    Mixins, reified generics, async (streams!)
    const constructs
    Snapshots (serialisation)
    Runs in Dart VM, JS or AOT native
    

    View Slide

14. FRAMEWORK
    ENGINE
    

    View Slide

15. C++
    FRAMEWORK
    ENGINE
    

    View Slide

16. FRAMEWORK
    ENGINE C++
    TEXT (BLINK)
    SKIA
    

    View Slide

17. FRAMEWORK
    WIDGETS
    RENDERING
    DART:UI
    DART
    CUPERTINO
    MATERIAL
    ENGINE C++
    TEXT (BLINK)
    SKIA
    

    View Slide

18. WIDGETS
    WIDGETS
    WIDGETS
    WIDGETS
    WIDGETS
    WIDGETS EVERYWHERE
    WIDGETS EVERYWHERE
    WIDGETS EVERYWHERE
    WIDGETS EVERYWHERE
    WIDGETS EVERYWHERE
    

    View Slide

19. Composition over inheritance
    Everything is a widget
    Declaration and binding together
    

    View Slide

20. View Slide

21. Stateless
    Stateful
    

    View Slide

22. Stateless
    class BoringText extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
    return new Text("Hello world")
    }
    }
    

    View Slide

23. Stateful
    class Counter extends StatefulWidget {
    @override
    _CounterState createState() => new _CounterState();
    }
    

    View Slide

24. Stateful
    class _CounterState extends State {
    int _counter = 0;
    void _increment() {
    setState(() {
    ++_counter;
    });
    }
    @override
    Widget build(BuildContext context) {
    return new Text("Count: " + _counter);
    }
    }
    

    View Slide

25. Animations
    

    View Slide

26. View Slide

27. View Slide

28. Unit tests
    Instrumentation tests
    Widget tests
    

    View Slide

29. Smoooth (60 fps)
    Performance? Smoooth (60 fps)
    

    View Slide

30. Full control
    No OEM customisation
    Always up to date
    Inspect real source code which will be run
    Minimal Apk size: 8MB
    

    View Slide

31. Development experience
    

    View Slide

32. $ flutter doctor
    [✓] Flutter (on Mac OS X 10.12.4 16E195, channel unknown)
    • Flutter at /Users/takhion/flutter
    • Framework revision 031e042eee (3 weeks ago), 2017-03-17 15:24:54
    • Engine revision c4edec7417
    • Tools Dart version 1.23.0-dev.9.0
    [✓] Host Executable Compatibility
    • Downloaded executables execute on host
    [✓] Android toolchain - develop for Android devices (Android SDK 25.0.2)
    • Android SDK at /Users/takhion/Android/sdk
    • Platform android-25, build-tools 25.0.2
    • ANDROID_HOME = /Users/takhion/Android/sdk
    • Java binary at: /Library/Java/JavaVirtualMachines/jdk1.8.0_25.jdk/Contents/Home/bin/java
    • Java version: Java(TM) SE Runtime Environment (build 1.8.0_25-b17)
    [✓] iOS toolchain - develop for iOS devices (Xcode 8.2.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 8.2.1, Build version 8C1002
    • ios-deploy 1.9.1
    • CocoaPods version 1.2.0
    [✓] Android Studio (version 2.2)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Gradle version 2.14.1
    [✓] Connected devices
    • Pixel • FA69N0309825 • android-arm • Android 7.1.1 (API 25)
    

    View Slide

33. Full control
    

    View Slide

34. $ flutter run
    Launching lib/main.dart on Pixel in debug mode...
    Running 'gradle assembleDebug'...
    Built build/app/outputs/apk/app-debug.apk (21.8MB).
    Uninstalling old version...
    Installing build/app/outputs/apk/app.apk... 6.0s
    Syncing files to device... 2.8s
    ! To hot reload your app on the fly, press "r". To restart the app entirely, press "R".
    The Observatory debugger and profiler is available at: http://127.0.0.1:8106/
    For a more detailed help message, press "h". To quit, press "q".
    

    View Slide

35. View Slide

36. View Slide

37. View Slide

38. Full control
    

    View Slide

39. Full control
    

    View Slide

40. API 16+
    ARM only
    iOS 8+
    64 bit (iPhone 5S+)
    

    View Slide

41. View Slide

42. View Slide

43. Eric Seidel
    Adam Barth
    Ian Hickson
    

    View Slide

44. flutter.io
    github.com/rock3r/squanchy-flutter
    bit.ly/a-new-hope-flutter
    

    View Slide

45. Eugenio Marletti
    @workingkills
    @seebrock3r
    Sebastiano Poggi
    

    View Slide