OLD | NEW |
---|---|
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 | |
OLD | NEW |