Flutter, Then Fly!

As mobile and web developers we face growing challenges in delivering user experiences that are not only performant across diverse devices, but also maintainable by small teams and extensible to custom needs.

Flutter is a new mobile SDK from Google that is open source, reactive and customizable by default, allowing developers to craft rich user experiences and build native Android & iOS apps from a single codebase. More importantly, it introduces a new way of thinking about UI/UX that makes it immediately applicable to mobile and web developers alike.

In this talk, I'll talk about the underlying UI/UX philosophy of Flutter ("everything is a widget"), review its rich tooling, and dive into core features to build a simple app. You'll walk away with an interest in learning more and links to resources to help you get there!

Transcript

1. #FlutterDev #WCDF18 bit.ly/flutterdev-jan2018 @nitya Flutter, Then Fly! BUILD PERFORMANT, REACTIVE UI, FOR MODERN MOBILE PLATFORMS, WITH ONE CODEBASE NITYA NARASIMHAN / WINDY CITY DEVFEST / JAN 12, 2018 Image Credit: Unsplash / @firstmohican
2. #FlutterDev #WCDF18 bit.ly/flutterdev-jan2018 @nitya What is Flutter?
3. #FlutterDev #WCDF18 bit.ly/flutterdev-jan2018 @nitya Flutter in a nutshell An open-source SDK for building performant & customizable apps for Android & iOS* platforms from one codebase. * Google’s “Fuschia” smartphone OS also rumored to be using Flutter SDK for its UI. ( Ars Technica 05/17) CURRENTLY BETA 2** Used in production at Google & few partners ** Announced Apr 2018
4. #FlutterDev #WCDF18 bit.ly/flutterdev-jan2018 @nitya Who is it meant for?
5. #FlutterDev #WCDF18 bit.ly/flutterdev-jan2018 @nitya DESIGNERS OPEN SOURCERS DEVELOPERS RAPID PROTOTYPERS Faster transfer from design to code, with active iteration & consistency Rich tooling, Performant Rendering, Unified codebase Everything in framework is customizable. Huge potential for impact. Ready-to-use widgets, Hot reloads, Frictionless Flutter-Fire deploys EVERYONE
6. #FlutterDev #WCDF18 bit.ly/flutterdev-jan2018 @nitya Framework Fatigue
7. #FlutterDev #WCDF18 bit.ly/flutterdev-jan2018 @nitya THE PESSIMIST Another framework that promises to solve everything? Noooo. IGNORANCE IS BLISS THE PRAGMATIST Hmm… what new ideas, insights or solutions does this give me? KNOWLEDEGE IS POWER
8. #FlutterDev #WCDF18 bit.ly/flutterdev-jan2018 @nitya PRAGMATIC SOFTWARE @ bitnbot / SUNY INCLUSIVE COMMUNITIES @ GDG NYC / GDGHV Education (PhD, Comp. Eng) / survivable distributed systems Experience (20+ years) / systems & software, research & development Industry (Ex-Motorolan) / mobile, tv, social & ubiquitous computing Academia (SUNY New Paltz) / Engineering Advisory Board, Android & IoT Startups (Consulting/Lead) / mobile web, machine learning & voice Community (GDG NYC & Hudson Valley) / DevFest, StudyCamps, WTM
9. #FlutterDev #WCDF18 bit.ly/flutterdev-jan2018 @nitya What do clients want?
10. #FlutterDev #WCDF18 bit.ly/flutterdev-jan2018 @nitya #FlutterDev @nitya FAST PROTOTYPING FLEXIBLE EVOLUTION COMPONENTIZED ARCHITECTURES CUSTOMIZABLE USER EXPERIENCES CROSS-PLATFORM DEPLOYMENTS
11. #FlutterDev #WCDF18 bit.ly/flutterdev-jan2018 @nitya Custom is hard Cross-platform is costly
12. #FlutterDev #WCDF18 bit.ly/flutterdev-jan2018 @nitya “Hold my drink” https://flutter.io
13. #FlutterDev #WCDF18 bit.ly/flutterdev-jan2018 @nitya Demo Time! #MurphysLaw FLUTTER GALLERY APP: GIVES SENSE OF MOBILE UI POSSIBILITIES
14. #FlutterDev #WCDF18 bit.ly/flutterdev-jan2018 @nitya WHAT YOU SAW CUSTOM TRANSITIONS & ANIMATIONS / ONE CODEBASE
15. #FlutterDev #WCDF18 bit.ly/flutterdev-jan2018 @nitya SDK & Tools for developers Open Source from Google Fast & Flexible Performance / Architecture Unified Codebase for Android + iOS
16. #FlutterDev #WCDF18 bit.ly/flutterdev-jan2018 @nitya How’d they do that? FAST & FLEXIBLE
17. #FlutterDev #WCDF18 bit.ly/flutterdev-jan2018 @nitya FLUTTER BEGAN AS AN EXPERIMENT Can we take web views & shrink them to work on mobile by rethinking .. not retrofitting (KASPER LUND / GOOGLE)
18. #FlutterDev #WCDF18 bit.ly/flutterdev-jan2018 @nitya Web layouts are slow, support complex uses, use global rules PERFORMANCE Mobile users expect richer ux, fast transitions & animations REACTIVITY CUSTOM IS HARD
19. #FlutterDev #WCDF18 bit.ly/flutterdev-jan2018 @nitya Mobile layouts are simpler.. TEXT ON SCROLLING PAGE FIXED RECTANGLES SOME TABLES NEED = PERFORMANCE & layout is local to subtree
20. #FlutterDev #WCDF18 bit.ly/flutterdev-jan2018 @nitya Automate propagation of changes across entire stack PUSH NOTIFICAITONS TO SUBSCRIBERS SYNC DISTRIBUTED DATA AUTO-REFRESH VIEWS NEED = REACTIVITY
21. #FlutterDev #WCDF18 bit.ly/flutterdev-jan2018 @nitya MVC / MVVM REACTIVE COMPILED INTERPRETED Native iOS & Android Titanium PhoneGap Cordova React Native MOBILE UI LANDSCAPE
22. #FlutterDev #WCDF18 bit.ly/flutterdev-jan2018 @nitya BRIDGES HAVE TOLLS JAVASCRIPT REALM ⇦ Context Switch ⇨ Your Mobile App NATIVE REALM Platform Services, Events & Widgets
23. #FlutterDev #WCDF18 bit.ly/flutterdev-jan2018 @nitya How can you make ‘reactive’ performant?
24. #FlutterDev #WCDF18 bit.ly/flutterdev-jan2018 @nitya REACTIVE FRAMEWORKS ON THE WEB Compare Update Real DOM Virtual DOM Application Platform R e n d e r Canvas Events Tim Messerschmidt / Google “The Magic of Flutter”
25. #FlutterDev #WCDF18 bit.ly/flutterdev-jan2018 @nitya REACTIVE FRAMEWORKS ON MOBILE Compare Update Platform Widgets Virtual Widgets Application Platform R e n d e r Canvas Events Tim Messerschmidt / Google “The Magic of Flutter”
26. #FlutterDev #WCDF18 bit.ly/flutterdev-jan2018 @nitya REACTIVE WITH FLUTTER Widget Tree Application Platform R e n d e r Canvas Events Tim Messerschmidt / Google “The Magic of Flutter” No OEM Widgets Compiles to ARM code Structural Repainting (bit blt)
27. #FlutterDev #WCDF18 bit.ly/flutterdev-jan2018 @nitya Layered Architectures can make it easier CUSTOM IS HARD BUT
28. #FlutterDev #WCDF18 bit.ly/flutterdev-jan2018 @nitya FLUTTER’S LAYERED ARCHITECTURE Skia Dart Text Foundation Animation Painting Rendering Widgets Material Gestures Engine (C++) Framework (Dart) Cupertino Dev space customize anything System Space
29. #FlutterDev #WCDF18 bit.ly/flutterdev-jan2018 @nitya How do I get started? TOOLS &DK
30. #FlutterDev #WCDF18 bit.ly/flutterdev-jan2018 @nitya FLUTTER INSTALL https://flutter.io/setup/
31. #FlutterDev #WCDF18 bit.ly/flutterdev-jan2018 @nitya CLI / flutter $ flutter doctor $ flutter format $ flutter run $ flutter upgrade
32. #FlutterDev #WCDF18 bit.ly/flutterdev-jan2018 @nitya IDE / INTELLIJ IDEA + FLUTTER PLUGINS
33. #FlutterDev #WCDF18 bit.ly/flutterdev-jan2018 @nitya EMULATOR / SIMULATOR OR DEVICE $ flutter devices Use IDE or CLI to start 1. iOS Simulator 2. Android Emulator $ flutter run -d “iPhone X” Scaffold a new app Build examples
34. #FlutterDev #WCDF18 bit.ly/flutterdev-jan2018 @nitya Demo Time! #MurphysLaw SCAFFOLD A NEW APP: HOT RELOAD, TWO APPS WITH ONE CODEBASE
35. #FlutterDev #WCDF18 bit.ly/flutterdev-jan2018 @nitya “EVERYTHING’S A WIDGET” Tim Messerschmidt / Google “The Magic of Flutter”
36. #FlutterDev #WCDF18 bit.ly/flutterdev-jan2018 @nitya StatelessWidget StatefulWidget A single StatelessWidget can build in many different BuildContexts A StatefulWidget creates a new State object for each BuildContext constructor build constructor createState Flutter Documentation “Architecture Diagrams” WIDGET LIFECYCLE
37. #FlutterDev #WCDF18 bit.ly/flutterdev-jan2018 @nitya Flutter Documentation “Architecture Diagrams” (created) initState dispose (dirty) build (clean) didUpdateConfig setState (defunct) A State<T> object can rebuild if ... ... it receives a new configuration (from parent) … it changes its internal state (from interaction) STATE<T> LIFECYCLE
38. #FlutterDev #WCDF18 bit.ly/flutterdev-jan2018 @nitya ADVANCED: PLATFORM CHANNELS Can we write or access native platform code? Access native services Reuse our other assets Flutter Documentation “Writing Custom Platform Specific Code” Yes. Think “message passing” Like intents on Android
39. #FlutterDev #WCDF18 bit.ly/flutterdev-jan2018 @nitya Let’s Recap! #AlmostDone
40. #FlutterDev #WCDF18 bit.ly/flutterdev-jan2018 @nitya • IntelliJ IDE / Flutter Plugins • $ flutter CLI • $ flutter doctor • Easy Deploy (iOS / Android) • Hot Reload (Stateful / Rapid Prototyping) • Rich Widgets (Material / Cupertino) WHAT WE SAW / EFFECTIVE TOOLING
41. #FlutterDev #WCDF18 bit.ly/flutterdev-jan2018 @nitya • Dart Lang (familiar syntax, dartfmt ftw!) • Everything’s a widget ◦ Stateless (one build context for all) ◦ Stateful (one build conext per instance ) • Reactive Rebuild on ◦ Configuration Change (parent) ◦ Internal State Change (interaction ) WHAT WE SAW / EASY DEVELOP
42. #FlutterDev #WCDF18 bit.ly/flutterdev-jan2018 @nitya • Build in Dart (one source) • Compiled to Android (package/run) • Compiled to iOS (package/run) • Override platform UI/UX WHAT WE SAW / UNIFIED CODEBASE
43. #FlutterDev #WCDF18 bit.ly/flutterdev-jan2018 @nitya MULTIPLE PERSPECTIVES DESIGNERS OPEN SOURCERS DEVELOPERS RAPID PROTOTYPERS “Mobile first” UI thinking Unify native ‘branding’ Easy Design/Code transfer Interactive (hot reload) One codebase, two apps Reactive views Performant renders Rich Tools & SDK Layered architecture Everything is extensible Reuse Android/iOS skills Contribute with impact Hot Reload Ready-to-use Widgets Composability friendly Flutter-Fire deploys SINGULAR PROPOSITION
44. #FlutterDev #WCDF18 bit.ly/flutterdev-jan2018 @nitya Self-Guided Tutorials 1. Building Beautiful UIs with Flutter ( ~90mins codelab ) 2. Firebase with Flutter (~75mins codelab) 1. Intro to Dart for Java Developers (~20mins codelab ) 2. Material Design AngularDart App (~20mins codelab ) 3. AngularDart with Firebase (~30mins codelab ) 4. AngularDart Components
45. #FlutterDev #WCDF18 bit.ly/flutterdev-jan2018 @nitya Attribution & Thanks Emojis from Emojipedia Animated Gifs from Giphy Art from Unsplash, Nitya Fonts from Google Fonts Icons from NounProject (Pro) Some content from Google Developers
46. #FlutterDev #WCDF18 bit.ly/flutterdev-jan2018 @nitya THANK YOU FOR LISTENING Flutter is new but exciting for all stakeholders. Connect with me to keep in touch on updates: @nitya +NityaNarasimhan Flutter, Then Fly: Performant, Reactive, Customizable Mobile Apps “http://bit.ly/flutterDev-jan2018”