Building with Flutter - Speaker Deck

Slide 1

Slide 1 text

Building with Flutter Shuaib Afegbua, @afegbuas Code Kraft Google IO Extended - Minna June 2019

Slide 2

Slide 2 text

THE PROMISE

Slide 3

Slide 3 text

ABOUT ME Technology enthusiast |> Software craftsman |> Loves building stuff Long love affair with Java. Also writes Elixir, Scala and some others • Computer Science major (FUTMINNA and ABU) • Worked at Mott Macdonald/Cambridge Education for a long time and some other places • Got tired, quit and stayed at home. • Built some stuff later

Slide 4

Slide 4 text

What is flutter?

Slide 5

Slide 5 text

Flutter is Google’s portable UI toolkit for building beautiful, natively-compiled applications for mobile, web, and desktop from a single codebase. - flutter.dev

Slide 6

Slide 6 text

APPROACHES ANDROID VS NATIVE

Slide 7

Slide 7 text

why flutter?

Slide 8

Slide 8 text

Flutter empowers the developer.

Slide 9

Slide 9 text

Awesome UI Library EVERYTHING IS A WIDGET • Excellent look and feel • Performs very fast • Extensible and customisable

Slide 10

Slide 10 text

Write once, deploy cross platform SINGLE CODE BASE • One language for UI and Backend • Bundled Framework • Mobile • Web • Desktop • Embedded devices

Slide 11

Slide 11 text

Reactive EVENT DRIVEN • JIT • AOT • Isolate and Event stream

Slide 12

Slide 12 text

Fast Build • Sub seconds fast reloads • Native android with Gradle takes about 10 seconds

Slide 13

Slide 13 text

Native • No bridge • Compiles AOT into Native ARM

Slide 14

Slide 14 text

Efficient • Fast and easy developments • Integrate into existing apps

Slide 15

Slide 15 text

Amazing toolsets • Excellent build tools and IDE intellisense • Growing community • Pub Packages • Cool documentation

Slide 16

Slide 16 text

How flutter does it!

Slide 17

Slide 17 text

Image credits: Flutter Team

Slide 18

Slide 18 text

How to flutter?

Slide 19

Slide 19 text

Set up is easy and well documented. https://flutter.dev/docs

Slide 20

Slide 20 text

flutter create gdg_app cd gdg_app open -a simulator flutter run

Slide 21

Slide 21 text

Just enough Dart?

Slide 22

Slide 22 text

Dart is a language optimized for client-side development for web and mobile. Dart helps you craft beautiful, high-quality experiences across all screens. A client-optimized language Rich, powerful frameworks Delightful, flexible tooling

Slide 23

Slide 23 text

Dart • Data Types • Collections • Functions • Anonymous and first class functions • Classes • Asynchronous programming • HTTP Programming • Mixins • Isolates

Slide 24

Slide 24 text

The building block

Slide 25

Slide 25 text

A tree of widgets and some other stuff

Slide 26

Slide 26 text

Stateless widgets Stateful widgets

Slide 27

Slide 27 text

just when you get started ?

Slide 28

Slide 28 text

Dos and Don’ts.

Slide 29

Slide 29 text

AVOID FAT CLASSES WIDGETS • Widgets are easily composable • Avoid the the temptation of long nested widgets • Abstract common functionalities to custom widgets • Many files has never broken an app • Care about maintainabilty

Slide 30

Slide 30 text

SMALL FUNCTIONS NEVER KILLED ANYONE • Single responsibility principle • Easily testable • Use ⇒ for short functions and methods

Slide 31

Slide 31 text

ADOPT A PATTERN • Take for example state management “madness” • Good old setState() and StatefulWidgets • ScopedModel, Redux, MobX , BLoC • New school - Provider

Slide 32

Slide 32 text

ENSURE CODE CONSISTENCY • Use code formatters – dartformat • Don’t forget to test and test always • Do code reviews

Slide 33

Slide 33 text

TEST OR DIE • Ensures app quality • Unit test your function, method, or class • Carry out component test • Verify app behaviours with Integration tests • Tools: Package test, mockito

Slide 34

Slide 34 text

EMBRACE TOOLS • Superb IDE support VSCODE, IntelliJ • Code completion and Intellisence

Slide 35

Slide 35 text

DOCUMENTATION • Dartdoc exist • They got you a guide - https://dart.dev/guides/language/effective- dart/documentation#doc-comments • Avoid useless documentation • Just save the unfortunate developer that will inherit your code

Slide 36

Slide 36 text

A GOOD NAME IS BETTER ? • Meaningful names • Spell words in identifiers and comments correctly

Slide 37

Slide 37 text

PACKAGES • Maybe that package exist • Growing number of packages • https://pub.dev is your friend. 2,636 and counting • We need more. Start building • Think 3rd party packages before use

Slide 38

Slide 38 text

GETTING HELP • Google is your friend • Don’t we all love stackoverflow • Flutter docs, YouTube, reddit, medium • Just let it crash

Slide 39

Slide 39 text

LINKS • https://github.com/flutter/flutter/wiki/Style-guide-for-Flutter-repo • https://dart.dev/guides/language/effective-dart/documentation#doc- comments • https://flutter.dev/docs/testing • https://medium.com/@afegbua/flutter-thursday-series- 9564d04e63a7