Create beautiful performant mobile apps for both iOS and Android using the revolutionary Flutter framework, originally from Google, now supported by a large community. This slide deck was presented at Scale16x in Pasadena. The screencast is at https://www.youtube.com/watch?v=O7TXamVRSbY and the video recording is https://youtu.be/C3WipFZ0blQ?list=PL57quI9usf_vq2TH9NV5sMsbabkMGOnRA&t=13374 (timecode 3:42:54).

1. NATIVE MOBILE APPLICATION DEVELOPMENT
WITH FLUTTER (DART)
Randal L. Schwartz, randalschwartz.me
Wm Leler, wmleler@google.com
Version 1.0.2 on 11 March 2018
This document is copyright 2018 by Randal L. Schwartz, Stonehenge Consulting Services, Inc.
This work is licensed under a
Creative Commons Attribution-Noncommercial-Share Alike 4.0 International License
http://creativecommons.org/licenses/by-nc-sa/4.0/

2. THE EVOLUTION AWAY FROM VENDOR LOCK-IN
➤ Some of us are old enough to remember ancient operating systems…
➤ … that were provided by the vendor
➤ … and generally closed source (with a few exceptions)
➤ Then came the FLOSS revolution: the BSDs and Linux and others
➤ Customers could fix, extend, and modify the OS, or port it to new hardware
➤ And share their code freely with others
➤ But more importantly: write once for Linux, run on extremely varied hardware
➤ Scaling to meet the needs from single-board micro devices to supercomputers
➤ Linux became the open-source API for cross-platform portability

3. THE MOBILE STORY
➤ For a decade, the smartphone vendors have been like the early computer vendors
➤ Phone apps had to be written with:
➤ vendor-supplied toolchains that varied between platforms
➤ vendor-chosen languages that varied between platforms
➤ APIs that varied greatly, even from release to release
➤ vendor-developed, closed-source widgets and gestures
➤ Releasing for both iOS and Android required specialized skills, or separate teams
➤ And never quite looked or acted the same on both platforms
➤ Then, along came Flutter, and suddenly the game has changed!

4. FLUTTER
➤ Flutter is a mobile app SDK, complete with framework, engine, widgets, and tools
➤ Gives developers easy and productive way to build and deploy beautiful apps
➤ Currently, in alpha beta for iOS and Android
➤ Also used for Fuchsia (not much publicly known about that yet)
➤ Some people are also working on desktop apps (similar to Electron)
➤ Dart (Flutter’s language) can be used to build web and server applications as well
➤ Learn Dart once, develop for five platforms

5. WHAT DOES FLUTTER DO?
➤ For users:
➤ Beautiful app UIs come to life
➤ For developers:
➤ Lowers the bar to entry for building mobile apps
➤ Speeds up the development cycle (hot reload, more on that later)
➤ Reduces the cost and complexity of app production across platforms
➤ Permits a single mobile app dev team for both iOS and Android
➤ For designers:
➤ Helps deliver original design vision without compromises
➤ Productive prototyping tool (rapid changes without long compile cycle)

6. WHAT EXPERIENCE DOES A DEVELOPER NEED?
➤ Flutter uses Dart as the primary development language
➤ Modern strongly-typed language with familiar constructs:
➤ Classes, methods, variables
➤ Complex data structures with generics and type inference
➤ Imperative programming (loops, conditionals)
➤ Functional programming (streams, immutable objects)
➤ No prior mobile experience required
➤ Heck, even yours truly is talking about mobile development now!
➤ Even people with very little programming experience seem to be productive rapidly

7. WHAT KINDS OF APPS CAN WE BUILD WITH FLUTTER?
➤ Optimized for 2D mobile apps that want to run on both iOS and Android
➤ Capable of “brand-first” designs
➤ Also mimics “stock platform” look and feel
➤ Full featured apps including native services:
➤ camera
➤ geolocation
➤ network
➤ storage
➤ third-party SDKs
➤ and more!

8. WHO MAKES AND USES FLUTTER?
➤ Open-source project (hosted on github)
➤ Originally developed and still heavily supported by Google
➤ Community contributions as well
➤ Google uses Flutter to build business-critical apps for iOS and Android
➤ Mobile Sales Tool
➤ Store Manager for Google Shopping Express
➤ And growing number of internal projects
➤ Hundreds of apps already deployed by third parties…
➤ Official app for musical Hamilton is a Flutter app!

9. IS IT PRODUCTION READY?
➤ Flutter is not quite 1.0 (but getting closer)
➤ Dart 2 is currently rolling out
➤ The APIs are pretty stable, but some might still change
➤ Used extensively inside Google
➤ Some key features (accessibility) are not ready for broad deployment
➤ File a github issue if something is missing that you need!
➤ Or submit a pull request

10. USED BY GOOGLE, COMPANIES, AND DEVELOPERS AROUND THE WORLD

11. CLASSIC APPS: OEM SDKS

12. FIRST “CROSS-PLATFORM” SOLUTION: WEBVIEWS

13. BETTER “CROSS-PLATFORM” SOLUTION: REACTIVE VIEWS

14. AND NOW: FLUTTER!

15. WHAT MAKES FLUTTER UNIQUE?
➤ Flutter does not use WebView or the OEM widgets!
➤ No penalty crossing between inputs, app code and rendering engine
➤ Flutter uses Skia from Chrome to render its own widgets
➤ The widgets are all written in Dart
➤ Thin layer of C++ to talk to native APIs
➤ Dart code also handles compositing, gestures, animation, frameworks, and so on
➤ Code is easily inspectable, patchable, extendable
➤ Cross-platform look and feel easily provided
➤ or customized per platform for native feel

16. TECHNOLOGY

17. IS IT “BATTERIES-INCLUDED?”
➤ Heavily optimized, mobile-first 2D rendering engine with excellent text support
➤ Modern reactive-style framework
➤ Rich set of widgets for Android and iOS
➤ Ship Material apps to phones shipped before Material even existed
➤ APIs for unit and integration tests
➤ Interop and plugin APIs to connect to the system and third-party SDKs
➤ Headless test runner for running tests on Windows, Linux, Mac
➤ Command-line tools for creating, building, testing, compiling
➤ “Pub” provides code sharing

18. WHAT ABOUT EDITORS?
➤ Google builds plugins for IntelliJ IDEA, Android Studio, VSCode
➤ Fully integrated development experience
➤ IntelliJ works for both Ultimate (paid) and Community (gratis) editions
➤ Or, use command-line flutter tool, and any editor that supports Dart
➤ for example: Atom, Emacs, Sublime Text, Vim
➤ VSCode started as a third-party plugin
➤ Currently, for iOS development Apple requires macOS-only Xcode installation
➤ Android development requires Android Studio (mac, windows, linux)
➤ Flutter tool (or plugins) invoke compilers directly
➤ Typically, no need to learn the vendor tools except for deployment

19. FLUTTER’S FRAMEWORK AND WIDGETS
➤ Framework inspired by React and React Native
➤ Designed to be layered and customizable (and optional)
➤ Developers can use selected parts, or a completely different framework
➤ Easily create widgets from scratch, or customize existing widgets
➤ Widget layout is single-pass, and fast enough to be responsive during scrolling
➤ APIs for writing unit and integration tests
➤ Google uses the API to test the SDK
➤ Test coverage publicly available for every commit!

20. HOW DOES FLUTTER RUN ON THE PLATFORMS?
➤ Android: C++ code is compiled with Android’s NDK
➤ iOS: C++ code is compiled with LLVM
➤ Dart code is AOT-compiled to native code for deployment
➤ JITter is used for fast reload during development
➤ No interpreter or VM (JVM) is involved!
➤ OEM widgets are not used—instead, widgets are all native Dart code
➤ Higher performance, better binding to Dart code, better cross-platform
➤ Coded in open-source, so patchable, subclassable, understandable, inspiration
➤ Consistent behavior on all phones, all OS versions (no compat libraries)
➤ Ship Material Design apps to phones released even before Material came out!

21. WHY DART?
➤ Google mobile team chose Dart based on numerous criteria
➤ Two critical features:
➤ A JIT-based fast development cycle for shape changing and stateful hot reloads
➤ AOT compiler that emits efficient ARM code for fast startup and predictable speed
➤ Can also re-use code in Pub (except those that depend on dart:mirrors or dart:html)
➤ Flutter team has influenced Dart development
➤ AOT compiler (produce native binaries more directly)
➤ Optimizing VM for latency rather than throughput
➤ Strong mode (sound type system)

22. HOT RELOAD
➤ Sub-second reload times on a device or emulator
➤ Stateful: app state is retained after a reload
➤ Allows quick iteration, even on a screen deeply nested in your app
➤ Works by injecting updated source code into the running Dart VM
➤ Can add new classes, methods, and fields
➤ Cannot reload:
➤ Global variable initializers
➤ Static field initializers
➤ The main() method of the app
➤ For those, a full reload is required, but that is very fast too

23. REQUIREMENTS
➤ Android Jelly Bean, v16, 4.1.x or newer on ARM devices
➤ iOS 8 or newer on 64-bit devices (5S and newer)
➤ Live devices as well as iOS and Android emulators
➤ Google tests on a variety of phones, but has no device compatibility guarantee
➤ Google doesn’t test on tablets
➤ Possible to embed a Flutter view into an existing iOS and Android app
➤ Better documentation coming
➤ Desktop and web apps not on roadmap
➤ Third-parties are working on Desktop apps

24. PLATFORM SERVICES AND APIS
➤ Out-of-the-box access to some platform-specific services and APIs
➤ Not intended as “lowest common denominator”
➤ Some services and APIs will be unsupported or supported by third-party
➤ Many are already published in Dart’s “pub” repository
➤ Flutter’s async message passing system can be used to create your own integrations
➤ Developers can expose an appropriate level of platform APIs
➤ Build abstractions that are a best fit for the project

25. EXTENDING AND CUSTOMIZING WIDGETS
➤ Easy by design, based on composition
➤ Widgets built from smaller widgets
➤ Example: RaisedButton is composed from Material and GestureDetector
➤ Material gives look, GestureDetector gives interaction
➤ Composition gives you max control over visual and interaction design
➤ Also allows a increased amount of code reuse
➤ Many “Material” widgets have been decomposed into their pieces
➤ Allows for increased mix-n-match strategies

26. INTERACTION WITH PLATFORM LANGUAGES
➤ Flutter supports calling into the platform
➤ Integrates with Java and Kotlin code on Android
➤ Objective C or Swift on iOS
➤ Flexible message-passing style
➤ Flutter app can send and receive messages to and from the platform
➤ Can use the same API for both platforms
➤ Of course, specific code per-platform must be written using plugins

27. CONCURRENCY
➤ Isolates provide separate heaps in the VM
➤ Able to run parallel (usually implemented as system threads)
➤ Communication via sending/receiving async messages
➤ No shared-memory parallelism (no locks required)
➤ Can also run code on Android while app is in background
➤ No support for iOS at this time

28. WHY NO MARKUP SYNTAX?
➤ UIs are built with imperative OO language (Dart)
➤ Google finds this approach permits more flexibility
➤ Rigid markup language more difficult to coerce for custom widgets and behaviors
➤ Code-first works better for hot reload and dynamic environment adaptations
➤ Code refactoring can be used to break up complex objects
➤ Or reuse parts in different ways (it’s just code!)
➤ Possible to create a custom language to build widgets on fly at compile time

29. PROJECT
➤ Github (flutter/flutter) includes open issue tracker
➤ Stack Overflow for “howto” type questions
➤ Mailing list for more detailed discussions
➤ Very active Gitter channel (flutter/flutter and others)
➤ Often find Google people hanging out answering questions
➤ Open source
➤ Very relaxed license for core with some restrictions for included components
➤ Support for showing licenses directly in the app via widgets
➤ Bulk of work is being done by Google, with an active community

30. SUMMING IT UP: WHY FLUTTER?
➤ The advantages of reactive views, with no JavaScript bridge
➤ Fast, smooth, and predictable; code compiles AOT to native (ARM) code
➤ The developer has full control over the widgets and layout
➤ Comes with beautiful, customizable widgets
➤ Great developer tools, with amazing hot reload
➤ More performant, more compatibility, more fun
➤ And, by the way, you can develop for both iOS and Android from one code base
➤ But that’s insignificant compared to the other gains!
➤ In short, revolutionary!

31. FOR FURTHER INFO
➤ Blog: What’s Revolutionary about Flutter by Wm Leler: goo.gl/bZcFR9
➤ Video: Flutter's Rendering Pipeline by Adam Barth: youtu.be/UUfXWzp0-DU
➤ Video: The Mahogany Staircase by Ian Hickson: youtu.be/dkyY9WCGMi0
➤ And of course: github.com/flutter & flutter.io
➤ Try it out today!
➤ Many parts of this presentation come directly from http://flutter.io/faq/
➤ Check that out for more details!