Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(1122)

Unified Diff: sky/README.md

Issue 1030063003: Update Sky README.md (Closed) Base URL: git@github.com:domokit/mojo.git@master
Patch Set: Move SDK.md into sky/sdk Created 5 years, 9 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View side-by-side diff with in-line comments
Download patch
« no previous file with comments | « no previous file | sky/SDK.md » ('j') | no next file with comments »
Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
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).
« no previous file with comments | « no previous file | sky/SDK.md » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698