Update

Author: mattqual

src/SUMMARY.md

@@ -3,7 +3,10 @@
 - [Overview](./overview.md)
   - [Iteration capabilities](./overview/iteration.md)
   - [Event model](./overview/event-model.md)
-  - [ActionScript 3 relationship](./overview/as3.md)
+  - [Relation](./overview/relation.md)
+    - [ActionScript 3](./overview/relation/as3.md)
+    - [MXML](./overview/relation/mxml.md)
+    - [React.js](./overview/relation/reactjs.md)
 - [Scope](./scope.md)
 - [Definitions](./definitions.md)
 - [Notational conventions](./notational-conventions.md)

src/overview/relation.md

@@ -0,0 +1 @@
+# Relation

src/overview/as3.md src/overview/relation/as3.mdsrc/overview/as3.md renamed to src/overview/relation/as3.md

@@ -1,4 +1,4 @@
-# ActionScript 3 relationship
+# ActionScript 3
 
 ShockScript looks like ActionScript 3. This section describes several details that changed on the language.
 

src/overview/relation/mxml.md

@@ -0,0 +1,28 @@
+# MXML
+
+The MXML language, as part of the Apache Flex framework, is used for describing UI components in an intuitive way. ShockScript uses XML expressions similiar to what is known as ECMAScript for XML (E4X) which implementations may use similiarly to MXML.
+
+Note however that the ShockScript approach is more related to the React.js framework which is often combined with the JSX language extension for TypeScript.
+
+The following demonstrates a basic UI component in Jet Engine:
+
+```
+package com.business.components {
+    import j = jet.**;
+
+    /** App bar */
+    public function AppBar() {
+        return (
+            <j:HGroup>
+                <j:Button click&={trace("clicked!")}>button 1</j:Button>
+            </j:HGroup>
+        );
+    }
+}
+```
+
+## Event handlers
+
+In MXML, event handlers were expressed as `e="statementList"`. In ShockScript, they are expressed as `e&={statementList}` (note the ampersand **\&**) as a shorthand to `e={function(event){statementList}}`.
+
+> **Note**: Although not demanded as such, as opposed to React.js + DOM, event handlers are conventionally expressed without a `on` prefix, such as `click&={trace("clicked!")}` rather than React.js `onClick={console.log("clicked!")}`. Event parameters are conventionally given the `@event` tag in the documentation comments. Classes continue using the `Event` meta-data, though without needing the `@eventType` tag.

src/overview/relation/reactjs.md

@@ -0,0 +1,41 @@
+# React.js
+
+ShockScript incorporates XML capabilities, and XML expressions allow for implementations to produce anything desired, similiar to JSX. There are certain differences to JSX or React.js.
+
+The following demonstrates a basic XML expression for Jet Engine:
+
+```
+import j = jet.**;
+
+<j:HGroup>
+    <j:Button click&={trace("clicked!")}>button 1</j:Button>
+</j:HGroup>
+```
+
+## Event handlers
+
+In ShockScript, event handlers are expressed as `e&={statementList}` (note the ampersand **\&**) as a shorthand to `e={function(event){statementList}}`. Furthermore, event handlers are conventionally expressed without an `on` prefix (for instance, `click` instead of `onClick`), and they are documented with the `@event` tag.
+
+## Prefixes
+
+ShockScript allows for `<q:N>`, whose name resolution equals `q::N`. Dots may be used for entities other than namespaces, as in:
+
+```
+<com.business.components.AppBar/>
+```
+
+For brevity, you do either:
+
+```
+import bComps = com.business.components.**
+
+<bComps:AppBar/>
+```
+
+or:
+
+```
+import com.business.components.*
+
+<AppBar/>
+```