1 of 25

Act 1: Inspiration

2 of 25

3 of 25

August 2013: Bravo

Universal app that fetched pure JavaScript code from a URL

Ran directly against OpenGL and networking APIs

Self-hosted framework in JavaScript

  • Familiar to web developers (e.g., DOM tree with nodes and elements)
  • No HTML parser – JSON as serialization format.
  • Layer tree as a first-class concept.
  • Considering layout models. Floats definitely out.

4 of 25

Example Bravo apps

​

Started a DOM-like framework in CoffeeScript but never published

​

5 of 25

2013-2014: Talking to web customers

  • Summer 2013: Started working with Inbox, Search
  • October 2013: No way to parse HTML (even tiny amounts) without Jank
  • April 2014: Blink scheduling (getting low-priority work out of the critical path)
    • Blink Scheduling
  • May 2014: Repaint After Layout (minimizing repaint work)

6 of 25

Act 2: Experimentation & Creation

7 of 25

September 2014: Razor

  • Approach: Strip down Blink (Chrome rendering engine)
  • Performance
    • HTML parsing: 19x faster
    • Style recalculation: 3.7x faster
    • Link breaking: no change
    • Block layout: 2.9x-12.5x faster, depending on workload
  • Binary size: 11MB (5.4MB gziped) 33% smaller; Blink shrunk by 52%
  • Removed:
    • Element-specific parsing and document.write
    • Tree-traversing CSS selectors: descendent, child, sibling (win: delete bloom filter)
    • Slow layout primitives (floats, tables, multicolumn, vertical writing mode)

8 of 25

October & November 2014: Open the Sky

commit 00882d626a478a3ce391b736234a768b762c853a

Author: Adam Barth <abarth@chromium.org>

Date: Thu Oct 23 11:15:41 2014 -0700

Open the Sky

​

​

Still Blink/Razor, still .sky files, lots of code deletion.

Sky Spinning Square

Turned on all the JS bells and whistles we could.

9 of 25

December 2014: Sky framework

commit be756e732950978364b240ea3aafd53a88f53e98

Author: Eric Seidel <eseidel@chromium.org>

Date: Thu Dec 18 13:01:43 2014 -0800

Add super-basic sky widgets.

​

sky-element.sky

XHTMLRequest.sky

10 of 25

January 2015: Still leaning very heavily on Blink legacy

sky-input.sky

<div id="control" contenteditable on-keydown="handleKeyDown">{{ value }}</div>

Even this early, cracks the approach:

handleKeyDown(event) {

// TODO(abarth): You can still get newlines if the user pastes them.

if (event.keyCode == 0xD)

event.preventDefault();

}

​

11 of 25

January 2015: SkyShell

Add a standalone SkyShell.apk for testing

This CL adds a SkyShell.apk, which will become a direct embedding of Sky on Android that will let us run performance tests on the Sky engine in a self-contained environment on a real device.

SkyShell was a universal app that loaded Sky apps over the network. We did all our development and demos on a live server.

12 of 25

Act 3: Finding Flutter

13 of 25

February 2015: Leaving JavaScript-land

We were iterating very quickly, but was JavaScript tied to web ecosystem

Lots of positive talk—no code lands:

Considered many other languages, picked Dart—code lands:

14 of 25

February 2015: Dart: 2++ = 3

Feb 1: sky_use_dart

Feb 12: Merge SkyDart branch

Feb 23: Stocks app

15 of 25

March 2015: Effen

Effen reactive framework experiment for Sky

Rafael starts working on a reactive framework:

class MyComp extends Component {

Node render() {

return new Container(

onClick: onClick,

onScrollStart: _handleScroll // direct handler

);

}

}

​

… in the “examples” directory

16 of 25

March 2015: Shake to reload

Still running everything from a live server

Development process involves shake to reload

Caused SkyShell to reload the app from the dev server

17 of 25

March 2015: Effen & Getting to carry

  • Fitness app created
    • Wanted to Flutter use every day
  • Graduated examples/fn to framework/
  • Added SkyDemo to play store
  • Introduced Custom Painting
    • Needed to draw graphs in the Fitness app

18 of 25

April 2015: Dart Summit, Hello Sky!

https://www.youtube.com/watch?v=PnIWl33YMwA

19 of 25

May 2015: Goodbye DOM, Hello Canvas API

20 of 25

June 2015: Scaling up

21 of 25

JIT Jank

  • Stocks app janky shortly after launching
  • Animations become smooth after a few seconds of use
  • Needed to warm up JIT
  • iOS much worse
    • Running in an interpreter
  • Asked the Dart team to add AOT support to Dart

22 of 25

State confusion bugs in fn2

  • Configuration and state stored on the same object
    • Object initialized its state when inserted into the tree
    • If parent rebuilt, object notified of new configuration
    • If parent moves object, state carried to the new location
  • Problem: Object can be included in the tree twice
    • Object can be moved forward or backward in tree order
    • Difficult to distinguish between multiple inclusion
  • Solution: Separate configuration and state into two objects: Widget and State
    • Required rewriting the entire framework
    • New framework called fn3

23 of 25

September 2015: fn3

  • Prototype of fn3

This patch contains a prototype of a new widget framework. In this framework, Components can be reused in the tree as many times as the author desires. Also, StatefulComponent is split into two pieces, a ComponentConfiguration and a ComponentState. The ComponentConfiguration is created by the author and can be reused as many times as desired. When mounted into the tree, the ComponentConfiguration creates a ComponentState to hold the state for the component. The state remains in the tree and cannot be reused.

​

24 of 25

October 2015: fn3 is Flutter

This concludes the fn3 port!

Renamed the project to Flutter

At this point, we have the framework we all know and love today!

… modulo a few massive name cleanups

25 of 25