From 5d87ee5c9eb317e75a4d64f7a87381272ee17518 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?G=C3=A9ry=20Debongnie?= <ged@odoo.com>
Date: Thu, 14 Mar 2019 14:12:51 +0100
Subject: [PATCH] add quick start section to doc

---
 README.md          |  5 ++--
 doc/quick_start.md | 61 ++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 64 insertions(+), 2 deletions(-)
 create mode 100644 doc/quick_start.md

diff --git a/README.md b/README.md
index 0f373746..d2397b6c 100644
--- a/README.md
+++ b/README.md
@@ -72,5 +72,6 @@ that assets are properly rebuilt if necessary, and then reloaded.
 
 ## Documentation
 
-[Component](doc/component.md)
-[QWeb](doc/qweb.md)
+- [Quick Start](doc/quick_start.md)
+- [Component](doc/component.md)
+- [QWeb](doc/qweb.md)
diff --git a/doc/quick_start.md b/doc/quick_start.md
new file mode 100644
index 00000000..ff1db227
--- /dev/null
+++ b/doc/quick_start.md
@@ -0,0 +1,61 @@
+# Quick Start
+
+To build an application (or a sub-part of an application), we need two things:
+
+- an environment
+- a root widget
+
+Here are a few steps that may be useful to get started:
+
+- get the templates
+- create a qweb engine, with the templates
+- create an environment
+- create an instance of the root widget
+- mount the root widget to a DOM element
+
+## Simple example
+
+In a oversimplified example, here is what it could look like:
+
+```javascript
+const templates = await loadTemplates();
+
+const qweb = new QWeb();
+qweb.loadTemplates(templates);
+
+const env = {
+  qweb: qweb
+};
+
+const root = new RootWidget(env, { initialState: 17 });
+
+const target = document.getElementById("app");
+root.mount(target);
+```
+
+## Managing state
+
+The environment is propagated to each subchildren. So, it is convenient to use
+to give a reference to some global object. This is potentially very useful
+in a redux-like architecture:
+
+```javascript
+...
+
+const store = new Store();
+
+const env = {
+    qweb: qweb,
+    store: store,
+};
+
+const state = store.getState()
+const root = new RootWidget(env, state);
+
+store.on('state_change', nextState => {
+    root.updateProps(nextState);
+});
+
+const target = document.getElementById('app');
+root.mount(target);
+```