owl/docs/index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>OWL Framework</title>
  <link rel="icon" href="data:,">
  <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:300,300italic,700,700italic">
  <link rel="stylesheet" href="assets/normalize.css">
  <link rel="stylesheet" href="assets/milligram.css">
  <link rel="stylesheet" href="assets/highlight.tomorrow.css">
  <link rel="stylesheet" href="assets/main.css">
  <script type="importmap">{ "imports": { "@odoo/owl": "./owl.js" } }</script>
</head>
<body>
  <header class="container">
    <img class="homepage-logo" src="assets/owl_1f989.png" alt="OWL Logo">
    <hgroup>
      <h1>OWL Framework</h1>
      <p>Mysterious OWL: A web framework for structured, dynamic and maintainable applications</p>
    </hgroup>
  </header>
  <nav class="container">
    <p>
      <a href="https://github.com/odoo/owl" title="https://github.com/odoo/owl">Github</a>
      &bull;
      <a href="https://github.com/odoo/owl/blob/master/doc/readme.md">Documentation</a>
      &bull;
      <a href="playground/">Playground</a>
    </p>
  </nav>
  <main>
    <article class="design">
      <div class="container">
        <h2>Why OWL?</h2>
        <div class="row">
          <section class="column">
            <h3>XML based</h3>
            <p>Templates are based on the XML format, which allows interesting applications. For example, they could be stored in a database and modified dynamically with <tt>xpaths</tt>.</p>
          </section>
          <section class="column">
            <h3>Templates compiled in the browser</h3>
            <p>This may not be a good fit for all applications, but if you need to generate dynamically user interfaces in the browser, this is very powerful. For example, a generic form view component could generate a specific form user interface for each various models, from a XML view.</p>
          </section>
          <section class="column">
            <h3>No toolchain required</h3>
            <p>This is extremely useful for some applications, if, for various reasons (security/deployment/dynamic modules/specific assets tools), it is not ok to use standard web tools based on <tt>npm</tt>.</p>
          </section>
        </div>
      </div>
    </article>
    <article class="example">
      <div class="container">
        <h2>Example</h2>
        <div class="row">
          <section class="column">
            <pre><code class="javascript"></code></pre>
          </section>
          <section class="column">
            <pre><code class="xml"></code></pre>
            <div id="app-container"></div>
          </section>
        </div>
      </div>
    </article>
  </main>
  <footer>
    <p><a href=".">OWL</a> is licensed under LGPLv3.<br>Logo from <a href="https://github.com/googlefonts/noto-emoji">Google Noto Emoji Font</a>, licensed under Apache License 2.0</p>
  </footer>
  <script src="assets/highlight.pack.js"></script>
  <script type="module" src="display_code.js"></script>
  <script type="module" src="counter.js"></script>
</body>
</html>