Download as PDF, PPTX
Uploaded byRandal Schwartz
Native mobile application development with Flutter (Dart)
The document discusses the evolution of mobile application development, highlighting Flutter as a significant advancement in creating cross-platform apps with a single codebase using Dart. Flutter simplifies the development process, allows for beautiful UI design, and enables rapid iteration through features like hot reload, making it accessible for developers without prior mobile experience. It is an open-source project supported by Google, offering a modern approach without vendor lock-in, with capabilities to access native device services while ensuring high performance.
Native mobile application development with Flutter (Dart)
- 1. NATIVE MOBILE APPLICATIONDEVELOPMENT 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 AWAYFROM 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 isa 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 FLUTTERDO? ➤ 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 DOESA 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 OFAPPS 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 ANDUSES 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 PRODUCTIONREADY? ➤ 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.
- 12. FIRST “CROSS-PLATFORM” SOLUTION:WEBVIEWS
- 13. BETTER “CROSS-PLATFORM” SOLUTION:REACTIVE VIEWS
- 14.
- 15. WHAT MAKES FLUTTERUNIQUE? ➤ 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.
- 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 ANDWIDGETS ➤ 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 FLUTTERRUN 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? ➤ Googlemobile 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-secondreload 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 JellyBean, 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 ANDAPIS ➤ 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 CUSTOMIZINGWIDGETS ➤ 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 PLATFORMLANGUAGES ➤ 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 provideseparate 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 MARKUPSYNTAX? ➤ 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!