App development workflows, for web devs, using Flutter and Dart

Hi, I'm Andy

Who?

Who?...

  • Web developer from the UK with 20 years experience
  • From London, living in Aberdeen via Edinburgh, Sydney and Glasgow
  • Developing with Joomla for 10 years, mainly doing App backends & APIs last 5 years
  • twitter: AndyGasman
  • email: ag@ssofb.co.uk

What?...

What the Flutter?

  • A UI SDK for mobile apps
  • An open source project run by Google
  • Project started in May 2017
  • Version 1.0 released in Nov 2018
  • Current version is 1.5.4
  • Write code in Dart
  • Dart was started in 2011, v1 in 2013, currently v2.3
  • Everything is lovely and native

Benefits of native

  • Better looking
  • Fits familair user interface paradigms
  • Works well with new dark modes in Android Q and iOS 13
  • Faster UI, more responsive feeling, 120fps

The basic idea

  • Single codebase, dev team and skill set
  • Make it easier to build high quality apps
  • Build for iOS, Android and Fucia
  • Also iPadOS, OSX, WatchOS, ChromeOS
  • Have consistent high quality Material design UI

Alternatives?

Fairly mixed competative landscape

  • Apache Cordova
  • Ionic: Angular / React / Vue + Cordova
  • PhoneGap: JS + Cordova, by Adobe
  • Appcelerator Titanium: JS
  • Xamarin: C#
  • ReactNative: JavaScript and React
  • NativeScript: TypeScript / Angular / Vue / JS

Why the move?

Our dev team

  • Team of three/four devs
  • 5 year old startup
  • Lean and Agile
  • Keen to have more overlap in skillsets
  • Currently using Appcelerator

Why the shift?

  • Appcelerator looks like not a good long term bet now
  • Keen to increase developer velocity
  • Flutter seems like a long term bet
  • Need better support for new mobile OS versions

So, what's it like

Getting started

  • Read the docs (a bit)
  • Install toolchain, OSX, Linux, Windows or ChromeOS
  • Try the Udacity course, two 4 hour parts
  • Try out the gallery app
  • Use with a device or an emulator
  • Get ideas from the Flutter cookbook
  • Codelabs in the docs
  • Good tutorials in the docs

Toolchain options

Lots of options...

  • VS Code Android SDK
  • Android Studio (by JetBrains)
  • Xcode and Android SDK
  • Bare terminal

All of the above can be done on Windows, Linux or OSX (except Xcode)

Computer doesn't really need to be a beast

Installing the toolchain

I decided to go for...

  • VS Code
  • VS Code flutter extension
  • Android Studio (for dependencies)
  • Run on Hardware via ADB

Flutter doctor is really useful, run "flutter doctor"

Code example: Hello world

import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
        return MaterialApp(
            title: 'Welcome to Flutter',
            home: Scaffold(
                appBar: AppBar(
                    title: Text('Welcome to Flutter'),
                ),
                body: Center(
                    child: Text('Hello World'),
                ),
            ),
        );
    }
}

Lets dive in...

Testing

A wee bit about testing

  • Easy to write unit tests for each class
  • Can group unit tests
  • Can mock test data with Mockito
  • Can write unit tests for each widget

Wrap up

Conclusions...

  • Not really a quick win
  • Great docs
  • Flutter toolchain is nice
  • Dart learning curve
  • Immutable, bit different
  • Declarative UI, bit different
  • Asynchronous programming (Futures and Streams), easier from JS
  • Easy to integrate with Firebase services
  • Yaml project files are nice

Links & Refs

General links

Flutter links

Dart links

Questions?

Thank you :)

Slides

http://ssofb.co.uk/slides/flutter

TBC

  • TBC
  • TBC
  • TBC