owl/doc/quick_start.md

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:

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:

...

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);