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

Side by Side Diff: sky/README.md

Issue 672963002: Add a README.md for Sky (Closed) Base URL: https://github.com/domokit/mojo.git@master
Patch Set: Created 6 years, 2 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
(Empty)
1 Sky
2 ===
3
4 Sky is an experiment in building a UI framework for Mojo. The approach we're
5 exploring is to create a layered framework based around a retained hierarchy of
6 semantic elements. We're experimenting with different ideas and exploring
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
10 Sky has three layers, each of which also adds progressively more opinion. At
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
17 Elements
18 --------
19
20 The Sky engine contains a handful of primitive elements and the tools with which
21 to create custom elements. The following elements are built into the engine:
22
23 - ``script``: Executes script
24 - ``style``: Defines style rules
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 - ``image``: Displays an image
31 - ``a``: Links to another Mojo application
32 - ``title``: Briefly describes the current application state to the user
33
34 ### Additional Elements ###
35
36 In addition to the built-in elements, frameworks and applications can define
37 custom elements. The Sky framework contains a number of general-purpose
38 elements, including ``input``, ``button``, ``menu``, ``toolbar``, ``video``, and
39 ``dialog``. However, developers are free to implement their own input fields,
40 buttons, menus, toolbars, videos, or dialogs with access to all the same engine
41 features as the frame because the framework does not occupy a privileged
42 position in Sky.
43
44 ### Custom Layout ###
45
46 TODO: Describe the approach for customizing layout.
47
48 ### Custom Painting ###
49
50 TODO: Describe the approach for customizing painting.
51
52 Modules
53 -------
54
55 Sky applications consist of a collection of modules. Each module can describe
56 its dependencies, register custom elements, and export objects for use in other
57 modules.
58
59 Below is a sketch of a typical module. The first ``import`` element imports the
60 Sky framework, which defines the ``sky-element`` element. This module then uses
61 ``sky-element`` to define another element, ``my-element``. The second ``import``
62 element imports another module and gives it the name ``foo`` within this module.
63 For example, the ``AnnualReport`` constructor uses the ``BalanceSheet`` class
64 exported by that module.
65
66 ```html
67 <import href=”/sky/framework” />
68 <import href=”/another/module.sky” as=”foo” />
69 <sky-element name=”my-element”>
70 [ ... custom element definition ... ]
71 </sky-element>
72 <script>
73 class AnnualReport {
74 constructor(bar) {
75 this.sheet = new foo.BalanceSheet(bar);
76 }
77 frobinate() {
78 this.sheet.balance();
79 }
80 }
81
82 function mult(x, y) {
83 return x * y;
84 }
85
86 function multiplyByTwo(x) {
87 return mult(x, 2);
88 }
89
90 module.exports = {
91 AnnualReport: AnnualReport,
92 multiplyByTwo: multiplyByTwo,
93 };
94 </script>
95 ```
96
97 The script definitions are local to each module and cannot be referenced by
98 other modules unless exported. For example, the ``mult`` function is private to
99 this module whereas the ``multiplyByTwo`` function can be used by other modules
100 because it is exported. Similarly, this module exports the ``AnnualReport``
101 class.
102
103 Services
104 --------
105
106 Sky applications can access Mojo services and can provide services to other Mojo
107 applications. For example, Sky applications can access the network using Mojo's
108 ``network_service``. Typically, however, Sky applications access services via
109 frameworks that provide idiomatic interfaces to the underlying Mojo services.
110 These idiomatic interfaces are layered on top of the underlying Mojo service,
111 and developers are free to use the underlying service directly.
112
113 As an example, the following is a sketch of a module that wraps Mojo's
114 ``network_service`` in a simpler functional interface:
115
116 ```html
117 <import href=”mojo://shell” as=”shell” />
118 <import href="/mojo/network/network_service.mojom.sky" as="net" />
119 <import href="/mojo/network/url_loader.mojom.sky" as="loader" />
120 <script>
121 module.exports = function fetch(url) {
122 return new Promise(function(resolve, reject) {
123 var networkService = shell.connectToService(
124 "mojo://network_service", net.NetworkService);
125 var request = new loader.URLRequest({
126 url: url, method: "GET", auto_follow_redirects: true});
127 var urlLoader = networkService.createURLLoader();
128 urlLoader.start(request).then(function(response) {
129 if (response.status_code == 200)
130 resolve(response.body);
131 else
132 reject(response);
133 });
134 };
135 };
136 </script>
137 ```
138
139 Notice that the ``shell`` module is built-in and provides access to the
140 underlying Mojo fabric but the ``net`` and ``loader`` modules run inside Sky and
141 encode and decode messages sent over Mojo pipes.
142
143 Specifications
144 --------------
145
146 TODO: Link to the specs.
147
148 Contributing
149 ------------
150
151 TODO: Link to HACKING.md, which contains the instructions for hacking on Sky.
152 TODO: Link to mailing list and IRC channel.
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