OWL 🦉
El framework de Odoo para interfaces dinámicas
FLISoL | Presentado por Cesar J. Santacruz
¿Quién soy?
Cesar J. Santacruz
- Ingeniero de Software.
- Cursando Maestría en Desarrollo de Apps y Servicios Web.
- +4 años de experiencia con Odoo.
- Senior Developer en Trescloud (Odoo Gold Partner).
Conoce a Trescloud
Espíritu FLISoL 🐧
Esta presentación está construida con código abierto.
Reveal.js
El contexto: Odoo
Un sistema ERP masivo con +10 millones de usuarios.
🔌 DEMO TIME: Runbot
Escanea para probar Odoo gratis
El Problema: ¿Para qué crear algo nuevo? 🤯
La pesadilla de las interfaces masivas
- Interfaces con miles de registros moviéndose a la vez.
- Necesidad de carga ultra rápida (bajo peso en KB).
- Integración estricta con el backend (Python y XML).
Librerías como React o Vue son excelentes, pero añadían una capa de complejidad y peso innecesario a la arquitectura nativa de Odoo. Había que crear una solución a la medida.
El Motor Secreto: OWL
Odoo Web Library
Un framework moderno escrito en TypeScript.
Los 3 Pilares
- 1. Componentes: UI basada en clases nativas (ES6+).
- 2. QWeb: Plantillas XML declarativas.
- 3. Reactividad: Sistema de Hooks propio para actualizar el DOM.
OWL en el mundo real ✨
Impactando la operación diaria de miles de empresas.
Punto de Venta
Cajas registradoras que funcionan offline y sin interrupciones.
Dashboards
Gráficos gerenciales que se actualizan en tiempo real.
Tableros Ágiles
Gestión visual de procesos complejos, justo como veremos hoy.
¿Cómo se ve OWL?
Un vistazo antes de construir nuestra app
import { Component, useState } from "@odoo/owl";
import { xml } from "@odoo/owl";
class Contador extends Component {
setup() {
// 1. Hook de Reactividad
this.state = useState({ valor: 0 });
}
}
// 2. Plantilla QWeb incrustada
Contador.template = xml`
Clics: Manos a la obra 🛠️
Tablero Kanban interactivo con OWL puro
Lo que veremos en el editor:
- Estructura del proyecto.
- Creación de Tarjetas (Componentes hijos).
- Manejo de estado global (Columnas).
Conclusiones
- OWL nos da el poder de Odoo, de forma autónoma.
- Rendimiento extremo con su DOM Virtual.
- Curva de aprendizaje suave si ya conoces React o Vue.
¡Gracias!
¿Preguntas? 🙋♂️
Documentación OWL
Mi Web Personal