Flutter, Then Fly!

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!

5b392dc79d5b6d1dab580bf60e26fb7c?s=128

Nitya Narasimhan, PhD

January 12, 2018
Tweet

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”