App development workflows, for web devs, using Flutter and Dart
Hi, I'm Andy
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 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
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
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'),
),
),
);
}
}
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
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
Slides
http://ssofb.co.uk/slides/flutter