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

Side by Side Diff: sky/README.md

Issue 1030063003: Update Sky README.md (Closed) Base URL: git@github.com:domokit/mojo.git@master
Patch Set: 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 unified diff | Download patch
« no previous file with comments | « no previous file | no next file » | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
1 Sky 1 Sky
2 === 2 ===
3 3
4 Sky is an experiment in building a UI framework for Mojo. The approach we're 4 Sky is an experimental, high-performance UI framework for mobile apps. Sky helps
5 exploring is to create a layered framework based around a retained hierarchy of 5 you create apps with beautiful user interfaces and high-quality interactive
6 semantic elements. We're experimenting with different ideas and exploring 6 design that run smoothly at 120 Hz.
7 various approaches, many of which won't work and will need to be discarded, but,
8 if we're lucky, some of which might turn out to be useful.
9 7
10 Sky has three layers, each of which also adds progressively more opinion. At 8 Sky consists of two components:
11 the lowest layer, Sky contains a rendering engine that parses markup, executes
12 script, and applies styling information. Layered above the engine is a
13 collection of components that define the interactive behavior of a suite of
14 widgets, such as input fields, buttons, and menus. Above the widget layer is a
15 theme layer that gives each widget a concrete visual and interactive design.
16 9
17 Elements 10 1. *The Sky engine.* The [engine](engine) is the core of the system system.
11 Written in C++, the engine provides the muscle of the Sky system. The engine
12 provides several primatives, including a soft real-time scheduler and a
ojan 2015/03/26 17:12:35 primitives
13 hierarchial, retained-mode graphics system, that let you build high-quality
14 apps.
15
16 2. *The Sky framework.* The [framework](framework) makes it easy to build apps
17 using Sky by providing familiar user interface widgets, such as buttons,
18 infinite lists, and animations, on top of the engine using Dart. These
19 extensible components follow a functional programming style inspired by
20 React.
21
22 Sky is still experimental. We're experimenting with different ideas and
23 exploring various approaches, many of which won't work and will need to be
24 discarded, but, if we're lucky, some of which might turn out to be useful.
25
26 Examples
18 -------- 27 --------
19 28
20 The Sky engine contains [a handful of primitive elements](specs/markup.md) and t he tools with which 29 The simplest Sky app is, appropriately, HelloWorldApp:
21 to create custom elements. The following elements are built into the engine:
22 30
23 - ``script``: Executes script 31 ```dart
24 - ``style``: Defines style rules 32 import 'package:sky/framework/fn.dart';
25 - ``import``: Loads a module
26 - ``iframe``: Embeds another Mojo application
27 - ``template``: Captures descendants for use as a template
28 - ``content``: Visually projects descendents of the shadow host
29 - ``shadow``: Visually projects older shadow roots of the shadow host
30 - ``img``: Displays an image
31 - ``div``: Neutral element for hooking styles in shadow trees
32 - ``span``: Neutral element for hooking styles in shadow trees
33 - ``a``: Links to another Mojo application
34 - ``title``: Briefly describes the current application state to the user
35 - ``t``: Preserve whitespace (by default, whitespace nodes are dropped)
36 - ``error``: Represents a parse error
37 33
38 ### Additional Elements ### 34 class HelloWorldApp extends App {
39 35 Node build() {
40 In addition to the built-in elements, frameworks and applications can define 36 return new Text('Hello, world!');
41 custom elements. The Sky framework contains a number of general-purpose
42 elements, including ``input``, ``button``, ``menu``, ``toolbar``, ``video``, and
43 ``dialog``. However, developers are free to implement their own input fields,
44 buttons, menus, toolbars, videos, or dialogs with access to all the same engine
45 features as the frame because the framework does not occupy a privileged
46 position in Sky.
47
48 ### Custom Layout ###
49
50 TODO: Describe the approach for customizing layout.
51
52 ### Custom Painting ###
53
54 TODO: Describe the approach for customizing painting.
55
56 Modules
57 -------
58
59 Sky applications consist of a collection of modules. Each module can describe
60 its dependencies, register custom elements, and export objects for use in other
61 modules.
62
63 Below is a sketch of a typical module. The first ``import`` element imports the
64 Sky framework, which defines the ``sky-element`` element. This module then uses
65 ``sky-element`` to define another element, ``my-element``. The second ``import``
66 element imports another module and gives it the name ``foo`` within this module.
67 For example, the ``AnnualReport`` constructor uses the ``BalanceSheet`` class
68 exported by that module.
69
70 ```html
71 SKY MODULE
72 <import src=”/sky/framework” />
73 <import src=”/another/module.sky” as=”foo” />
74 <sky-element name=”my-element”>
75 class extends SkyElement {
76 constructor () {
77 this.addEventListener('click', (event) => this.updateTime());
78 this.shadowRoot.appendChild('Click to show the time');
79 }
80 updateTime() {
81 this.shadowRoot.firstChild.replaceWith(new Date());
82 }
83 }
84 </sky-element>
85 <script>
86 class AnnualReport {
87 constructor(bar) {
88 this.sheet = new foo.BalanceSheet(bar);
89 }
90 frobinate() {
91 this.sheet.balance();
92 } 37 }
93 } 38 }
94 39
95 function mult(x, y) { 40 void main() {
96 return x * y; 41 new HelloWorldApp();
97 } 42 }
98
99 function multiplyByTwo(x) {
100 return mult(x, 2);
101 }
102
103 module.exports = {
104 AnnualReport: AnnualReport,
105 multiplyByTwo: multiplyByTwo,
106 };
107 </script>
108 ``` 43 ```
109 44
110 The script definitions are local to each module and cannot be referenced by 45 Execution starts in `main`, which creates the `HelloWorldApp`. The framework
111 other modules unless exported. For example, the ``mult`` function is private to 46 then marks `HelloWorldApp` as dirty, which schedules it to build during the next
112 this module whereas the ``multiplyByTwo`` function can be used by other modules 47 animation frame. Each animation frame, the framework calls `build` on all the
113 because it is exported. Similarly, this module exports the ``AnnualReport`` 48 dirty components and diffs the virtual `Node` hiearchy returned this frame with
114 class. 49 the hiearchy returned last frame. Any differences are then applied as mutations
ojan 2015/03/26 17:12:35 hierarchy
50 to the physical heiarchy retained by the engine.
ojan 2015/03/26 17:12:35 ditto
51
52 For a more featureful example, please see the
53 [example stocks app](examples/stocks-fn/lib/stocks_app.dart).
115 54
116 Services 55 Services
117 -------- 56 --------
118 57
119 Sky applications can access Mojo services and can provide services to other Mojo 58 Sky apps can access services from the host operating system using Mojo. For
120 applications. For example, Sky applications can access the network using Mojo's 59 example, you can access the network using the `network_service.mojom` interface.
121 ``network_service``. Typically, however, Sky applications access services via 60 Although you can use these low-level interfaces directly, you might prefer to
122 frameworks that provide idiomatic interfaces to the underlying Mojo services. 61 access these services via libraries in the framework. For example, the
123 These idiomatic interfaces are layered on top of the underlying Mojo service, 62 `fetch.dart` library wraps the underlying `network_service.mojom` in an
124 and developers are free to use the underlying service directly. 63 ergonomic interface:
125 64
126 As an example, the following is a sketch of a module that wraps Mojo's 65 ```dart
127 ``network_service`` in a simpler functional interface: 66 import 'package:sky/framework/net/fetch.dart';
128 67
129 ```html 68 void foo() {
130 SKY MODULE 69 fetch('example.txt').then((Response response) {
131 <import src=”mojo:shell” as=”shell” /> 70 print(response.bodyAsString());
132 <import src="/mojo/network/network_service.mojom.sky" as="net" />
133 <import src="/mojo/network/url_loader.mojom.sky" as="loader" />
134 <script>
135 module.exports = function fetch(url) {
136 var networkService = shell.connectToService(
137 "mojo:network_service", net.NetworkService);
138 var request = new loader.URLRequest({
139 url: url, method: "GET", auto_follow_redirects: true});
140 var urlLoader = networkService.createURLLoader();
141 return urlLoader.start(request).then(function(response) {
142 if (response.status_code == 200)
143 return response.body;
144 else
145 throw response;
146 }); 71 });
147 }; 72 }
148 </script>
149 ``` 73 ```
150 74
151 Notice that the ``shell`` module is built-in and provides access to the 75 Supported platforms
152 underlying Mojo fabric but the ``net`` and ``loader`` modules run inside Sky and 76 -------------------
153 encode and decode messages sent over Mojo pipes. 77
78 Currently, Sky support the Android and Mojo operating systems.
ojan 2015/03/26 17:12:35 supports
154 79
155 Specifications 80 Specifications
156 -------------- 81 --------------
157 82
158 We're documenting Sky with a [set of technical specifications](specs) that 83 We're documenting Sky with a [set of technical specifications](specs) that
159 define precisely the behavior of the engine. Currently both the implementation 84 define precisely the behavior of the engine. Currently both the implementation
160 and the specification are in flux, but hopefully they'll converge over time. 85 and the specification are in flux, but hopefully they'll converge over time.
161 86
162 Contributing 87 Contributing
163 ------------ 88 ------------
164 89
165 Instructions for building and testing Sky are contained in [HACKING.md](HACKING. md). For 90 Instructions for building and testing Sky are contained in [HACKING.md](HACKING. md).
166 coordination, we use the ``#mojo`` IRC channel on
167 [Freenode](https://freenode.net/).
168
169 History
170 -------
171 Sky started from the Blink codebase r181355:
172 http://blink.lc/blink/tree/?id=086acdd04cbe6fcb89b2fc6bd438fb8819a26776
OLDNEW
« no previous file with comments | « no previous file | no next file » | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698