Hello, Flutter

hijiangtao   / 2019.1

watch anywhere

©hijiangtao

Table of Contents

1 / RECAP of Mobile Development

2 / Problems

3 / What's Flutter

4 / How Flutter Performs

5 / WHY USE FLUTTER

6 / CODE WITH DART

7 / TAKE AWAY

 

watch anywhere

1 / RECAP OF MOBILE DEVELOPMENT

  1. Good at accessing system functionalities,  fast and responsive software performance, etc.

  2. Bad at time spent on multiple builds, cost for multiple code bases, etc.

* Definition from https://en.wikipedia.org/wiki/Mobile_app_development

©hijiangtao

Definition - The act or process by which a mobile app is developed for mobile devices

©hijiangtao

1 / RECAP OF MOBILE DEVELOPMENT

Cross-platform Development Era

  1. Bronze / Webview + Webview JavaScript Bridge

  2. Silver / JavaScript VM + Native Modules

  3. Gold / Self-graphics Engine + Platform Specific

©hijiangtao

2 / Problem

For example

  1. Bronze / Complex gestures and layouts in webview

  2. Silver / JavaScript cost, JIT and platform specific widgets 

  3. Gold / Use C++ in mobile development and QT-for-mobile Community

©hijiangtao

2 / Problem

Others

  • Is one codebase for one platform too expensive today?

  • Why self-graphics engine became indifferent in the past? 

  • Code fast and deploy anywhere, will JavaScript go on in the future?

©hijiangtao

3 / What is Flutter

Definition

Flutter allows you to build beautiful native apps on iOS and Android from a single codebase.

Milestone

  • 2017.5 / Alpha (v0.0.6)

  • 2018.2 / Beta 1

  • 2018.5 / Beta 3

  • 2018.6 / Preview

  • 2018.12 / Flutter Live with 1.0.0

* GitHub StartTrends from https://www.timqian.com/star-history/

©hijiangtao

3 / What is Flutter

History of Everything

Another Flutter App
Zhihu App

* Another Flutter App from https://github.com/Solido/awesome-flutter

* Zhihu screenshot with iPhone XR simulator, authored by HackSoul

* History of Everything is a product created by 2Dimensions, Inc.

©hijiangtao

4 / How is Flutter

FEATURES

©hijiangtao

4 / HOW IS FLUTTER

4.1 Beautiful

  • Control every pixel on the screen
  • Overlay and animate graphics, video, text and controls without limitation
  • 60fps and beyond

©hijiangtao

4 / HOW IS FLUTTER

4.2 Fast

  • Skia 2D graphics engine
  • Compilation to native 32-bit and 64-bit ARM code

* Part of screenshots from "Introduction to Skia, a modern 2D graphics library"

©hijiangtao

4 / HOW IS FLUTTER

4.3 productive

  • Stateful hot reload
  • Single codebase
  • JIT-based development cycle and AOT compilation result

©hijiangtao

4 / HOW IS FLUTTER

4.4 Open

©hijiangtao

5 / Why choose Flutter

Portable UI Toolkit for Fuchsia

©hijiangtao

5 / Why choose Flutter

Flutter System Architecture

* Picture from https://102.alibaba.com/detail/?id=141

Framework - the thing that matters for you most
Skia + Dart Runtime (JIT/AOT) + Text (FreeType/CoreGraphics)
Render Surface / Plugins / Threads

©hijiangtao

5 / Why choose Flutter

Animations built with Flare

©hijiangtao

5 / Why choose Flutter

Learn from Java and JavaScript, and Beyond

* Picture 1 / Fewer malloc from Dart, from Yuqian Li's slides at D2 2019, Experiments conducted on Linux x64 4.18.10, Intel(R) Xeon(R) CPU E5-2690 v4 @ 2.60GHz, Dart 2.2.0-edge.0797d6ef695739aafd3759096f4143c7440f0213, gcc version 7.3.0 (Debian 7.3.0-5) with -O3, openjdk version 1.8.0_161

* Picture 2 / Skip Android & Chromium, from Yuqian Li's slides at GDD China 2018

* Picture 3 / Fewer tree walks, Tree diagrams copied from Xiao’s GDD China 2018 slides.

1 / Malloc

2 / Skip

3 / Walk

©hijiangtao

5 / Why choose Flutter

Mobile and Beyond

Stay tuned for Google I/O 2019!

©hijiangtao

6 / Code with Dart

import 'package:flutter/material.dart';
import 'package:english_words/english_words.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // final wordPair = WordPair.random();

    return MaterialApp(
      title: 'Startup Name Generator',
      home: RandomWords(),
    );
  }
}

class RandomWordsState extends State<RandomWords> {
  final _suggestions = <WordPair>[];
  final _biggerFont = const TextStyle(fontSize: 18.0);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Startup Name Generator'),
      ),
      body: _buildSuggestions(),
    );
  }

  Widget _buildSuggestions() {
    return ListView.builder(
      padding: const EdgeInsets.all(16.0),
      itemBuilder: /*1*/ (context, i) {
        if (i.isOdd) return Divider(); /*2*/

        final index = i ~/ 2; /*3*/
        if (index >= _suggestions.length) {
          _suggestions.addAll(generateWordPairs().take(10)); /*4*/
        }
        return _buildRow(_suggestions[index]);
      }
    );
  }

  Widget _buildRow(WordPair pair) {
    return ListTile(
      title: Text(
        pair.asPascalCase,
        style: _biggerFont,
      ),
    );
  }
}

class RandomWords extends StatefulWidget {
  @override
  RandomWordsState createState() => new RandomWordsState();
}
name: startup_namer
description: A new Flutter project.

version: 1.0.0+1

environment:
  sdk: ">=2.1.0 <3.0.0"

dependencies:
  flutter:
    sdk: flutter

  cupertino_icons: ^0.1.2
  english_words: ^3.1.0

dev_dependencies:
  flutter_test:
    sdk: flutter

...

main.dart

pubspec.yaml

* Full code can be accessed at https://gist.github.com/hijiangtao/2b58ab07d3d7ed96aa0f868140c906e5

©hijiangtao

7 / Take away

  1. RECAP / Cross-Platform Mobile App Development

  2. WHAT / Google’s Portable UI Toolkit, mobile and beyond

  3. HOW / Fast, beautiful, productive and open. Dart, skia and more

  4. WHY / Come from Web, take the essence and discard the dregs

  5. END / Stay tuned to Google I/O and keep curious about surroundings

thanks

hijiangtao

hijiangtao@gmail.com