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

Unified 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 side-by-side diff with in-line comments
Download patch
« no previous file with comments | « no previous file | no next file » | 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
new file mode 100644
index 0000000000000000000000000000000000000000..b750fc08dc5a318568fbc89c2846c0823c325ec6
--- /dev/null
+++ b/sky/README.md
@@ -0,0 +1,152 @@
+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
+--------
+
+The Sky engine contains a handful of primitive elements 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
+ - ``image``: Displays an image
+ - ``a``: Links to another Mojo application
+ - ``title``: Briefly describes the current application state to the user
+
+### 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
+<import href=”/sky/framework” />
+<import href=”/another/module.sky” as=”foo” />
+<sky-element name=”my-element”>
+ [ ... custom element definition ... ]
+</sky-element>
+<script>
+class AnnualReport {
+ constructor(bar) {
+ this.sheet = new foo.BalanceSheet(bar);
+ }
+ frobinate() {
+ this.sheet.balance();
+ }
+}
+
+function mult(x, y) {
+ return x * y;
+}
+
+function multiplyByTwo(x) {
+ return mult(x, 2);
+}
+
+module.exports = {
+ AnnualReport: AnnualReport,
+ multiplyByTwo: multiplyByTwo,
+};
+</script>
+```
+
+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.
+
+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
+<import href=”mojo://shell” as=”shell” />
+<import href="/mojo/network/network_service.mojom.sky" as="net" />
+<import href="/mojo/network/url_loader.mojom.sky" as="loader" />
+<script>
+module.exports = function fetch(url) {
+ return new Promise(function(resolve, reject) {
+ 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();
+ urlLoader.start(request).then(function(response) {
+ if (response.status_code == 200)
+ resolve(response.body);
+ else
+ reject(response);
+ });
+ };
+};
+</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.
+
+Specifications
+--------------
+
+TODO: Link to the specs.
+
+Contributing
+------------
+
+TODO: Link to HACKING.md, which contains the instructions for hacking on Sky.
+TODO: Link to mailing list and IRC channel.
« 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