OWL 2.x - The Complete Guide to Odoo OWL

Name: OWL 2.x - The Complete Guide to Odoo OWL
Rating: 3.7 (46 reviews)

Dive in and learn OWL JS from scratch. Learn one of the fastest UI Framework based on best aspects of Vue and React.

Created byMiracle Ayodele

Last updated 1/2025

English

English [Auto],

What you'll learn

Learn how to build apps with Owl
Use both basic & advanced Owl concepts
Build advanced & highly dynamic components in a safe way
Use Owl hooks to factorize code

Course content

5 sections • 23 lectures • 1h 51m total length

Welcome To The Course!1:28
Master the fundamentals of Odoo OWL, including life cycle components, templates, and building blocks, through hands-on exercises and module development with JavaScript.
Course Outline1:13
The Birth of OWL Framework: What is OWL and Why OWL2:42
Introduce the OWL framework, its purpose, and why it was created. Explain its small size, TypeScript implementation, XML-based rendering, and browser-based toolchain options for outside or inside Odoo.
Understanding OWL Framework Architecture3:57
Understand the five building blocks of the OWL architecture and how the virtual DOM, components, template compiler, runtime, and reactive system collaborate to render and update the UI efficiently.
Getting The Most Out of This Course2:37
Watch at your own pace with video controls, pause, and rewind, code along with provided resources, and repeat concepts.

Standard QWeb Directives plus OWL Directives3:30
Explore qweb templates in Odoo, the xml-based templating engine that renders a virtual dom of HTML through compiled functions. Master t directives like t-escape, t-if, t-for-each, and dynamic t attributes.
Outputting Data using t-esc, t-out2:38
Learn how to output data in OWL using t-escape and t-out, compare their behavior, and render HTML with the markup utility to display tags rather than code.
How to Set Variables with the Template: t-set, t-value1:09
Learn how to declare and use template variables with t-set and t-value in Qweb, perform rendering-time computations like 2 + 5, and reuse the variable bar throughout the view.
How to use Conditional Directives: t-if, t-elif, t-else2:20
Master conditional directives in Odoo OWL templates using t-if, t-elif, and t-else to render age-based messages, handling undeclared age and the exact 18 case with clear end of if syntax.
How to Loop in Owl Template t-foreach3:39
Dynamic Attributes in Owl Template: t-tag, t-att-class, t-att5:08
QWeb Translations (t-translation), Debugging (t-log) and Restrictions (block-)7:03
Explore QWeb translations (t-translation), debugging (t-log), and restrictions (block-). Learn how to set up a translations object, the translate function, and translatable attributes for templates.
Sub Template, Dynamic Sub Template with t-call4:08
Explore reusing templates in owl by defining sub templates with t-name and a main template, then render them dynamically using t-call, t-set, and interpolation.

Understanding OWL Component Lifecycles and its Hooks5:15
We will explore the lifecycle hooks like: setup, willStart, willRender, rendered, mounted, onWillUpdateProps, onWillPatch, onPatched, onWillUnmount, onWillDestroy and onError.
OWL Component Lifecycles in Action - A Short Demo9:56
Explore OWL component lifycles through a hands-on demo, toggling a demo component and observing mount, render, patch, update props, and destroy cycles using use state.
Other Hooks: useState, useRef, useEffect, useComponent, useExternalListener8:43
Explore OWL hooks such as useState, useRef, and useEffect to build reactive components, manage inputs, and fetch data with dependency-driven updates, plus custom hooks like use component.
Sub Components and Dynamic Sub Components (Task: Track Mouse Position)4:57
Create a custom mouse hook in the root component to track the pointer, render dynamic sub components (A or B) via t component, and display mouse x and y coordinates.

Requirements

Basic Javascript knowledge of core concepts is needed
NO prior Owl knowledge is required

Description

This course will be regularly updated with fresh content and new features, ensuring you stay current with the latest advancements introduced in the OWL framework.

Welcome to "The Complete Guide to OWL", the ultimate course for developers, and enthusiasts looking to build dynamic business applications with Odoo. Whether you are starting from scratch or have some prior experience, this course is designed to guide you step-by-step toward mastering OWL, Odoo's modern web component framework.

Throughout this comprehensive course, you will explore the fundamentals of OWL, gaining insights into its lifecycle, hooks, components, and templates. You'll learn how to work with OWL independently, outside of Odoo, and seamlessly integrate it within the Odoo platform.

With detailed video tutorials, hands-on exercises, and practical examples, you'll develop the skills to create efficient, scalable, and robust Odoo modules. By the end of the course, you'll be confident in building custom modules using OWL, whether it's for personal projects or professional deployment.

This course is perfect for both beginners and those with some experience in Odoo development. A basic understanding of JavaScript is all you need to get started.

Don’t miss the chance to future-proof your development skills and elevate your career. Enroll in "The Complete Guide to OWL" today and unlock the full potential of OWL for building high-quality Odoo applications!

Who this course is for:

Odoo developers who want to improve their knowledge on Odoo's UI Library
Anyone who wants a fast framework different from React and Vue

OWL 2.x - The Complete Guide to Odoo OWL

What you'll learn

Explore related topics

Course content

Introduction5 lectures • 12min

Getting Started with OWL - Environment Setup and Project Setup4 lectures • 28min

OWL Building Blocks with Templates8 lectures • 30min

OWL Components, Lifecycle and Hooks4 lectures • 29min

Form Input Binding, Reactivity, Slot2 lectures • 14min

Requirements

Description

Who this course is for: