| Index: sky/README.md
|
| diff --git a/sky/README.md b/sky/README.md
|
| index 402f0741a7e7cb3764e8777be293ee144c938c85..b515e2774514c4273c6c62234689556b0d2361a0 100644
|
| --- a/sky/README.md
|
| +++ b/sky/README.md
|
| @@ -1,156 +1,81 @@
|
| Sky
|
| ===
|
|
|
| -Sky is an experiment in building a UI framework for Mojo. The approach we're
|
| -exploring is to create a layered framework based around a retained hierarchy of
|
| -semantic elements. We're experimenting with different ideas and exploring
|
| -various approaches, many of which won't work and will need to be discarded, but,
|
| -if we're lucky, some of which might turn out to be useful.
|
| -
|
| -Sky has three layers, each of which also adds progressively more opinion. At
|
| -the lowest layer, Sky contains a rendering engine that parses markup, executes
|
| -script, and applies styling information. Layered above the engine is a
|
| -collection of components that define the interactive behavior of a suite of
|
| -widgets, such as input fields, buttons, and menus. Above the widget layer is a
|
| -theme layer that gives each widget a concrete visual and interactive design.
|
| -
|
| -Elements
|
| +Sky is an experimental, high-performance UI framework for mobile apps. Sky helps
|
| +you create apps with beautiful user interfaces and high-quality interactive
|
| +design that run smoothly at 120 Hz.
|
| +
|
| +Sky consists of two components:
|
| +
|
| +1. *The Sky engine.* The [engine](engine) is the core of the system system.
|
| + Written in C++, the engine provides the muscle of the Sky system. The engine
|
| + provides several primatives, including a soft real-time scheduler and a
|
| + hierarchial, retained-mode graphics system, that let you build high-quality
|
| + apps.
|
| +
|
| +2. *The Sky framework.* The [framework](framework) makes it easy to build apps
|
| + using Sky by providing familiar user interface widgets, such as buttons,
|
| + infinite lists, and animations, on top of the engine using Dart. These
|
| + extensible components follow a functional programming style inspired by
|
| + React.
|
| +
|
| +Sky is still experimental. We're experimenting with different ideas and
|
| +exploring various approaches, many of which won't work and will need to be
|
| +discarded, but, if we're lucky, some of which might turn out to be useful.
|
| +
|
| +Examples
|
| --------
|
|
|
| -The Sky engine contains [a handful of primitive elements](specs/markup.md) and the tools with which
|
| -to create custom elements. The following elements are built into the engine:
|
| -
|
| - - ``script``: Executes script
|
| - - ``style``: Defines style rules
|
| - - ``import``: Loads a module
|
| - - ``iframe``: Embeds another Mojo application
|
| - - ``template``: Captures descendants for use as a template
|
| - - ``content``: Visually projects descendents of the shadow host
|
| - - ``shadow``: Visually projects older shadow roots of the shadow host
|
| - - ``img``: Displays an image
|
| - - ``div``: Neutral element for hooking styles in shadow trees
|
| - - ``span``: Neutral element for hooking styles in shadow trees
|
| - - ``a``: Links to another Mojo application
|
| - - ``title``: Briefly describes the current application state to the user
|
| - - ``t``: Preserve whitespace (by default, whitespace nodes are dropped)
|
| - - ``error``: Represents a parse error
|
| -
|
| -### Additional Elements ###
|
| -
|
| -In addition to the built-in elements, frameworks and applications can define
|
| -custom elements. The Sky framework contains a number of general-purpose
|
| -elements, including ``input``, ``button``, ``menu``, ``toolbar``, ``video``, and
|
| -``dialog``. However, developers are free to implement their own input fields,
|
| -buttons, menus, toolbars, videos, or dialogs with access to all the same engine
|
| -features as the frame because the framework does not occupy a privileged
|
| -position in Sky.
|
| -
|
| -### Custom Layout ###
|
| -
|
| -TODO: Describe the approach for customizing layout.
|
| -
|
| -### Custom Painting ###
|
| -
|
| -TODO: Describe the approach for customizing painting.
|
| -
|
| -Modules
|
| --------
|
| -
|
| -Sky applications consist of a collection of modules. Each module can describe
|
| -its dependencies, register custom elements, and export objects for use in other
|
| -modules.
|
| -
|
| -Below is a sketch of a typical module. The first ``import`` element imports the
|
| -Sky framework, which defines the ``sky-element`` element. This module then uses
|
| -``sky-element`` to define another element, ``my-element``. The second ``import``
|
| -element imports another module and gives it the name ``foo`` within this module.
|
| -For example, the ``AnnualReport`` constructor uses the ``BalanceSheet`` class
|
| -exported by that module.
|
| -
|
| -```html
|
| -SKY MODULE
|
| -<import src=”/sky/framework” />
|
| -<import src=”/another/module.sky” as=”foo” />
|
| -<sky-element name=”my-element”>
|
| -class extends SkyElement {
|
| - constructor () {
|
| - this.addEventListener('click', (event) => this.updateTime());
|
| - this.shadowRoot.appendChild('Click to show the time');
|
| - }
|
| - updateTime() {
|
| - this.shadowRoot.firstChild.replaceWith(new Date());
|
| - }
|
| -}
|
| -</sky-element>
|
| -<script>
|
| -class AnnualReport {
|
| - constructor(bar) {
|
| - this.sheet = new foo.BalanceSheet(bar);
|
| - }
|
| - frobinate() {
|
| - this.sheet.balance();
|
| - }
|
| -}
|
| +The simplest Sky app is, appropriately, HelloWorldApp:
|
|
|
| -function mult(x, y) {
|
| - return x * y;
|
| -}
|
| +```dart
|
| +import 'package:sky/framework/fn.dart';
|
|
|
| -function multiplyByTwo(x) {
|
| - return mult(x, 2);
|
| +class HelloWorldApp extends App {
|
| + Node build() {
|
| + return new Text('Hello, world!');
|
| + }
|
| }
|
|
|
| -module.exports = {
|
| - AnnualReport: AnnualReport,
|
| - multiplyByTwo: multiplyByTwo,
|
| -};
|
| -</script>
|
| +void main() {
|
| + new HelloWorldApp();
|
| +}
|
| ```
|
|
|
| -The script definitions are local to each module and cannot be referenced by
|
| -other modules unless exported. For example, the ``mult`` function is private to
|
| -this module whereas the ``multiplyByTwo`` function can be used by other modules
|
| -because it is exported. Similarly, this module exports the ``AnnualReport``
|
| -class.
|
| +Execution starts in `main`, which creates the `HelloWorldApp`. The framework
|
| +then marks `HelloWorldApp` as dirty, which schedules it to build during the next
|
| +animation frame. Each animation frame, the framework calls `build` on all the
|
| +dirty components and diffs the virtual `Node` hiearchy returned this frame with
|
| +the hiearchy returned last frame. Any differences are then applied as mutations
|
| +to the physical heiarchy retained by the engine.
|
| +
|
| +For a more featureful example, please see the
|
| +[example stocks app](examples/stocks-fn/lib/stocks_app.dart).
|
|
|
| Services
|
| --------
|
|
|
| -Sky applications can access Mojo services and can provide services to other Mojo
|
| -applications. For example, Sky applications can access the network using Mojo's
|
| -``network_service``. Typically, however, Sky applications access services via
|
| -frameworks that provide idiomatic interfaces to the underlying Mojo services.
|
| -These idiomatic interfaces are layered on top of the underlying Mojo service,
|
| -and developers are free to use the underlying service directly.
|
| -
|
| -As an example, the following is a sketch of a module that wraps Mojo's
|
| -``network_service`` in a simpler functional interface:
|
| -
|
| -```html
|
| -SKY MODULE
|
| -<import src=”mojo:shell” as=”shell” />
|
| -<import src="/mojo/network/network_service.mojom.sky" as="net" />
|
| -<import src="/mojo/network/url_loader.mojom.sky" as="loader" />
|
| -<script>
|
| -module.exports = function fetch(url) {
|
| - var networkService = shell.connectToService(
|
| - "mojo:network_service", net.NetworkService);
|
| - var request = new loader.URLRequest({
|
| - url: url, method: "GET", auto_follow_redirects: true});
|
| - var urlLoader = networkService.createURLLoader();
|
| - return urlLoader.start(request).then(function(response) {
|
| - if (response.status_code == 200)
|
| - return response.body;
|
| - else
|
| - throw response;
|
| +Sky apps can access services from the host operating system using Mojo. For
|
| +example, you can access the network using the `network_service.mojom` interface.
|
| +Although you can use these low-level interfaces directly, you might prefer to
|
| +access these services via libraries in the framework. For example, the
|
| +`fetch.dart` library wraps the underlying `network_service.mojom` in an
|
| +ergonomic interface:
|
| +
|
| +```dart
|
| +import 'package:sky/framework/net/fetch.dart';
|
| +
|
| +void foo() {
|
| + fetch('example.txt').then((Response response) {
|
| + print(response.bodyAsString());
|
| });
|
| -};
|
| -</script>
|
| +}
|
| ```
|
|
|
| -Notice that the ``shell`` module is built-in and provides access to the
|
| -underlying Mojo fabric but the ``net`` and ``loader`` modules run inside Sky and
|
| -encode and decode messages sent over Mojo pipes.
|
| +Supported platforms
|
| +-------------------
|
| +
|
| +Currently, Sky support the Android and Mojo operating systems.
|
|
|
| Specifications
|
| --------------
|
| @@ -162,11 +87,4 @@ and the specification are in flux, but hopefully they'll converge over time.
|
| Contributing
|
| ------------
|
|
|
| -Instructions for building and testing Sky are contained in [HACKING.md](HACKING.md). For
|
| -coordination, we use the ``#mojo`` IRC channel on
|
| -[Freenode](https://freenode.net/).
|
| -
|
| -History
|
| --------
|
| -Sky started from the Blink codebase r181355:
|
| -http://blink.lc/blink/tree/?id=086acdd04cbe6fcb89b2fc6bd438fb8819a26776
|
| +Instructions for building and testing Sky are contained in [HACKING.md](HACKING.md).
|
|
|