Building a performant, cross-platform mobile UI with Flutter!

Flutter is a new open source SDK from Google that allows developers to build highly performant and customizable native Android and iOS apps from a single codebase.

In this talk:
Nitya Narasimhan offers an overview of Flutter, covering its architecture and its widget-centric approach to mobile UI design. Nitya then walks you through the process of creating and deploying a simple Flutter app simultaneously for Android and iOS and explores the structure and semantics of Flutter widgets. You’ll learn the benefits and limitations of this new technology. And because Flutter is fully open source, Nitya also shares opportunities for community contributions that can combine personal learning with professional impact.

Transcript

1. #FlutterFYI @nitya | OSCON ‘18 https://oscon18.flutter.fyi Building a cross-platform performant mobile UI with Flutter #FlutterFYI Nitya Narasimhan, PhD July 18, 2018 | O’Reilly OSCON Building a performant, cross-platform mobile UI with Flutter!
2. #FlutterFYI @nitya | OSCON ‘18 https://oscon18.flutter.fyi Building a cross-platform performant mobile UI with Flutter #FlutterFYI Nitya Narasimhan https://nityan.me +NityaNarasimhan #in/nityan PhD / Research 10+ yrs / Distributed Systems Ubiquitous Computing Development 5+ yrs / Mobile & Web Apps, Machine Learning & AI Community 4+ yrs / Google Developer Group (GDG) New York City @nitya
3. #FlutterFYI @nitya | OSCON ‘18 https://oscon18.flutter.fyi Building a cross-platform performant mobile UI with Flutter #FlutterFYI DevFest NYC ‘16 DevFest NYC ‘17 FlutterCamp / Jun Google IO18 / May IWDNYC 2018 / Apr DevFest 2018 / Jan MWC 2018 / Feb 6200+members / Mobile, Web, Cloud, ML/AI
4. #FlutterFYI @nitya | OSCON ‘18 https://oscon18.flutter.fyi Building a cross-platform performant mobile UI with Flutter Why Flutter? What is Flutter?
5. #FlutterFYI @nitya | OSCON ‘18 https://oscon18.flutter.fyi Building a cross-platform performant mobile UI with Flutter Why Flutter? An open source mobile UI framework from Google to build performant & customizable native Android and iOS apps from a unified codebase
6. #FlutterFYI @nitya | OSCON ‘18 https://oscon18.flutter.fyi Building a cross-platform performant mobile UI with Flutter Why Flutter? Why Flutter now?
7. #FlutterFYI @nitya | OSCON ‘18 https://oscon18.flutter.fyi Building a cross-platform performant mobile UI with Flutter 2016 / Hello, Flutter! 2017 / Flutter enters Alpha 2018 / Beta 1 = Feb 2018 / Beta 2 = Apr 2018 / Beta 3 = May 2018 / Release Preview 1 = Jun
8. #FlutterFYI @nitya | OSCON ‘18 https://oscon18.flutter.fyi Building a cross-platform performant mobile UI with Flutter Why Flutter? The Big Picture
9. #FlutterFYI @nitya | OSCON ‘18 https://oscon18.flutter.fyi Building a cross-platform performant mobile UI with Flutter Why Flutter? Mobile usage is growing But ecosystem is fragmented
10. #FlutterFYI @nitya | OSCON ‘18 https://oscon18.flutter.fyi Building a cross-platform performant mobile UI with Flutter Performance, Reach & Cost What are the driving factors?
11. #FlutterFYI @nitya | OSCON ‘18 https://oscon18.flutter.fyi Building a cross-platform performant mobile UI with Flutter Why Flutter? Native / Web / Hybrid What are my development options?
12. #FlutterFYI @nitya | OSCON ‘18 https://oscon18.flutter.fyi Building a cross-platform performant mobile UI with Flutter PhoneGap, Titanium, .. Android iOS React Native COMPILED INTERPRETED MV-* REACTIVE
13. #FlutterFYI @nitya | OSCON ‘18 https://oscon18.flutter.fyi Building a cross-platform performant mobile UI with Flutter Why Flutter? Build Beautiful Apps in Record Time
14. #FlutterFYI @nitya | OSCON ‘18 https://oscon18.flutter.fyi Building a cross-platform performant mobile UI with Flutter Why Flutter? Flutter Gallery Demo “Build Beautiful Apps” “Hello World” Demo “In Record Time”
15. #FlutterFYI @nitya | OSCON ‘18 https://oscon18.flutter.fyi Building a cross-platform performant mobile UI with Flutter #FlutterFYI Flutter Gallery UX Demo
16. #FlutterFYI @nitya | OSCON ‘18 https://oscon18.flutter.fyi Building a cross-platform performant mobile UI with Flutter #FlutterFYI Hello World DX Demo
17. #FlutterFYI @nitya | OSCON ‘18 https://oscon18.flutter.fyi Building a cross-platform performant mobile UI with Flutter Why Flutter? Flutter Gallery Demo Platform Aware Layouts & Routes Custom Animations “Hello World” Demo Multi-platform Rich Tooling Hot Reload
18. #FlutterFYI @nitya | OSCON ‘18 https://oscon18.flutter.fyi Building a cross-platform performant mobile UI with Flutter Why Flutter? Under The Hood
19. #FlutterFYI @nitya | OSCON ‘18 https://oscon18.flutter.fyi Building a cross-platform performant mobile UI with Flutter Performance & Cost Reactive / Multi-platform
20. #FlutterFYI @nitya | OSCON ‘18 https://oscon18.flutter.fyi Building a cross-platform performant mobile UI with Flutter Can we make “reactive” performant?
21. #FlutterFYI @nitya | OSCON ‘18 https://oscon18.flutter.fyi Building a cross-platform performant mobile UI with Flutter Compare Update Real DOM Virtual DOM Application Platform R e n d e r Canvas Events Reactive “on web”
22. #FlutterFYI @nitya | OSCON ‘18 https://oscon18.flutter.fyi Building a cross-platform performant mobile UI with Flutter Compare Update OEM WIDGETS Virtual WIDGETS Application Platform R e n d e r Canvas Events Reactive “on mobile” today
23. #FlutterFYI @nitya | OSCON ‘18 https://oscon18.flutter.fyi Building a cross-platform performant mobile UI with Flutter Widget Tree Application Platform R e n d e r Canvas Events Reactive “with Flutter” No OEM Widgets Compiles to Native ARM code Paints updates effiiciently to Canvas
24. #FlutterFYI @nitya | OSCON ‘18 https://oscon18.flutter.fyi Building a cross-platform performant mobile UI with Flutter Development / Framework Deployment / Native App
25. #FlutterFYI @nitya | OSCON ‘18 https://oscon18.flutter.fyi Building a cross-platform performant mobile UI with Flutter #FlutterFYI Custom is hard But layered architectures can help! All open-source. Extensible everywhere. Engine (C++) Framework (Dart) Material Cupertino Widgets Rendering Animation Painting Gestures Foundation Skia Dart Text
26. #FlutterFYI @nitya | OSCON ‘18 https://oscon18.flutter.fyi Building a cross-platform performant mobile UI with Flutter #FlutterFYI Battle- Tested engines Used or developed by Chrome and Android teams Engine (C++) Skia Dart Text • Skia: Hardware accelerated 2D graphics engine. • Dart: JIT-compiler (hot reload). AOT-compiler (deploy). OOP. Generational GC (render objects) • Text: Efficient text rendering
27. #FlutterFYI @nitya | OSCON ‘18 https://oscon18.flutter.fyi Building a cross-platform performant mobile UI with Flutter #FlutterFYI Dart- Powered fmwrk Material for Android Cupertino for iOS Core Widgets for custom Framework (Dart) Material Cupertino Widgets Rendering Animation Painting Gestures Foundation • Open Source. Learn by exploring • Customizable. Modify/replace layers
28. #FlutterFYI @nitya | OSCON ‘18 https://oscon18.flutter.fyi Building a cross-platform performant mobile UI with Flutter #FlutterFYI Why Dart? OOP, Strongly Typed, Familiar Syntax, dartpub AOT & JIT, Tree-Shaking Generational Garbage Collector Dartpad Example Dart Package Repository
29. #FlutterFYI @nitya | OSCON ‘18 https://oscon18.flutter.fyi Building a cross-platform performant mobile UI with Flutter #FlutterFYI Easy to Learn Dartpad Playground Effective Dart & Tutorials Source: “Intro to Dart For Java Developers” Codelab store & run Dart code / apps from gist https://gist.github.com/nitya/b4dff86411cd147ec7de1582da95754f https://dartpad.dartlang.org/b4dff86411cd147ec7de1582da95754f
30. #FlutterFYI @nitya | OSCON ‘18 https://oscon18.flutter.fyi Building a cross-platform performant mobile UI with Flutter #FlutterFYI Platform Channels What if we wanted to access or write native code for platforms? Think message passing interfaces Like intents.
31. #FlutterFYI @nitya | OSCON ‘18 https://oscon18.flutter.fyi Building a cross-platform performant mobile UI with Flutter #FlutterFYI Tree of Widgets Config flows down Callbacks flow up Everything’s a Widget
32. #FlutterFYI @nitya | OSCON ‘18 https://oscon18.flutter.fyi Building a cross-platform performant mobile UI with Flutter #FlutterFYI Widget Catalog Basic Widgets (must-known) Material Widgets (good to know)
33. #FlutterFYI @nitya | OSCON ‘18 https://oscon18.flutter.fyi Building a cross-platform performant mobile UI with Flutter #FlutterFYI Layout Widgets Handle size & positioning of children Wrap-and-Roll for rapid prototyping
34. #FlutterFYI @nitya | OSCON ‘18 https://oscon18.flutter.fyi Building a cross-platform performant mobile UI with Flutter #FlutterFYI StatelessWidget constructor build StatefulWidget constructor createState StatelessWidget can build in many different BuildContexts StatefulWidget creates new State object per BuildContext Life Cycle Stateless Widgets don’t persist across build contexts State Objects do
35. #FlutterFYI @nitya | OSCON ‘18 https://oscon18.flutter.fyi Building a cross-platform performant mobile UI with Flutter #FlutterFYI State Objects Critical to driving reactive rendering Managing state flow in large apps is complex (created) initState dispose (dirty) build (clean) didUpdateConfig setState (defunct) A State<T> object can rebuild if ... ... it receives a new configuration … it changes its internal state
36. #FlutterFYI @nitya | OSCON ‘18 https://oscon18.flutter.fyi Building a cross-platform performant mobile UI with Flutter #FlutterFYI Code & Tooling Walkthrough (time permitting) Flutter CLI upgrade / build / run Hot Reload stateful / JIT compiled Multi-Platform iOS & Android devices Dartfmt built-in code formatting Error Screens meaningful messages Widget Inspector Like Chrome DevTools
37. #FlutterFYI @nitya | OSCON ‘18 https://oscon18.flutter.fyi Building a cross-platform performant mobile UI with Flutter #FlutterFYI Tooling Flutter CLI + any editor Android Studio IntelliJ IDEA VS Code (plugins) Available commands: analyze Analyze the project's Dart code. build Flutter build commands. channel List or switch flutter channels. clean Delete the build/ directory. config Configure Flutter settings. create Create a new Flutter project. devices List all connected devices. doctor Show information about the installed tooling. drive Runs Flutter Driver tests for the current project. emulators List and launch available emulators. format Format one or more dart files. fuchsia_reload Hot reload on Fuchsia. help Display help information for flutter. install Install a Flutter app on an attached device. logs Show log output for running Flutter apps. packages Commands for managing Flutter packages. precache Populates the Flutter tool's cache of binary artifacts. run Run your Flutter app on an attached device. screenshot Take a screenshot from a connected device. stop Stop your Flutter app on an attached device. test Run Flutter unit tests for the current project. trace Start and stop tracing for a running Flutter app. upgrade Upgrade your copy of Flutter.
38. #FlutterFYI @nitya | OSCON ‘18 https://oscon18.flutter.fyi Building a cross-platform performant mobile UI with Flutter #FlutterFYI Tooling Flutter CLI + any editor Android Studio IntelliJ IDEA VS Code (plugins) Widget Inspector
39. #FlutterFYI @nitya | OSCON ‘18 https://oscon18.flutter.fyi Building a cross-platform performant mobile UI with Flutter Why Flutter? Advanced Topics
40. #FlutterFYI @nitya | OSCON ‘18 https://oscon18.flutter.fyi Building a cross-platform performant mobile UI with Flutter #FlutterFYI State Mgmt Arch.
41. #FlutterFYI @nitya | OSCON ‘18 https://oscon18.flutter.fyi Building a cross-platform performant mobile UI with Flutter #FlutterFYI Flutter Cookbook
42. #FlutterFYI @nitya | OSCON ‘18 https://oscon18.flutter.fyi Building a cross-platform performant mobile UI with Flutter #FlutterFYI Packages (reuse)
43. #FlutterFYI @nitya | OSCON ‘18 https://oscon18.flutter.fyi Building a cross-platform performant mobile UI with Flutter #FlutterFYI Plugins (platform)
44. #FlutterFYI @nitya | OSCON ‘18 https://oscon18.flutter.fyi Building a cross-platform performant mobile UI with Flutter #FlutterFYI Flutter + Firebase
45. #FlutterFYI @nitya | OSCON ‘18 https://oscon18.flutter.fyi Building a cross-platform performant mobile UI with Flutter #FlutterFYI Why Firebase
46. #FlutterFYI @nitya | OSCON ‘18 https://oscon18.flutter.fyi Building a cross-platform performant mobile UI with Flutter #FlutterFYI Using Firebase
47. #FlutterFYI @nitya | OSCON ‘18 https://oscon18.flutter.fyi Building a cross-platform performant mobile UI with Flutter #FlutterFYI Getting Started
48. #FlutterFYI @nitya | OSCON ‘18 https://oscon18.flutter.fyi Building a cross-platform performant mobile UI with Flutter Why Flutter? Next Steps
49. #FlutterFYI @nitya | OSCON ‘18 https://oscon18.flutter.fyi Building a cross-platform performant mobile UI with Flutter #FlutterFYI @nitya | OSCON ‘18 How can I learn more? https://flutter.io/docs/ | Documentation http://bit.ly/github-flutter-examples | Examples http://bit.ly/udacity-flutter-2018 | Course http://bit.ly/google-codelabs-flutter | Codelabs https://flutterweekly.net/ | Newsletter https://gitter.im/flutter/flutter | Chat http://bit.ly/flutter-dev-mailinglist | Mailing List https://bit.ly/youtube-fluttery-challenges | Challenges https://resources.flutter.camp | Resources @nitya nityan.me dev.to/nitya @flutterfyi oscon18.flutter.fyi @gdg_nyc studyjams.flutter.camp meetup.com/gdgnyc
50. #FlutterFYI @nitya | OSCON ‘18 https://oscon18.flutter.fyi Building a cross-platform performant mobile UI with Flutter #FlutterFYI @nitya | OSCON ‘18 How can I contribute with impact? https://flutter.io/docs/ | Review Documentation https://flutter.io/cookbook/ | Add to Cookbook https://medium.com/flutter-community | Share Insights https://pub.dartlang.org/flutter/packages | Build Plugins https://github.com/flutter/flutter/issues | File Issues https://stackoverflow.com/tags/flutter/info | Answer Questions (Flutter Team Survey) https://t.co/WMZgdsIYvE | Give Feedback @flutterfyi @flutterio @r_FlutterDev @FlutterFlakes | Amplify Others @nitya nityan.me dev.to/nitya @flutterfyi oscon18.flutter.fyi @gdg_nyc studyjams.flutter.camp meetup.com/gdgnyc
51. #FlutterFYI @nitya | OSCON ‘18 https://oscon18.flutter.fyi Building a cross-platform performant mobile UI with Flutter #FlutterFYI @nitya https://nityan.me Nitya Narasimhan, PhD Questions?
52. #FlutterFYI @nitya | OSCON ‘18 https://oscon18.flutter.fyi Building a cross-platform performant mobile UI with Flutter #FlutterFYI Attribution Emojis from Emojipedia Animated Gifs from Giphy Art from Unsplash, Nitya Fonts from Google Fonts Icons from NounProject (Pro) Some content from Google Developers