Chromium Code Reviews| 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 |
|
ojan
2015/03/26 17:12:35
primitives
|
| + 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 |
|
ojan
2015/03/26 17:12:35
hierarchy
|
| +to the physical heiarchy retained by the engine. |
|
ojan
2015/03/26 17:12:35
ditto
|
| + |
| +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. |
|
ojan
2015/03/26 17:12:35
supports
|
| 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). |