THE EVOLUTION AWAY FROM VENDOR LOCK-IN

The new cross-platform app

development framework
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
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
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, Flutter 2.10.5 is live!
➤ 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
FLUTTER
FLUTTER
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

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
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
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!
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
USED BY GOOGLE, COMPANIES, AND
DEVELOPERS AROUND THE WORLD
CLASSIC APPS: OEM SDKS
FIRST “CROSS-PLATFORM” SOLUTION:
WEBVIEWS
BETTER “CROSS-PLATFORM” SOLUTION:
REACTIVE VIEWS
AND NOW: FLUTTER!
AND NOW: FLUTTER!
AND NOW: FLUTTER!
AND NOW: FLUTTER!
AND NOW: FLUTTER!
Native Android: Github và PlayStore
Flutter: Github và PlayStore

Android: 179 (.java và .xml)

Flutter: 31 (.dart)
Woww! and Number of lines, we have:
Android: 12176
Flutter: 1735
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
TECHNOLOGY
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
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

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!
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)
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
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

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
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
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
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
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
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
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
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!