Real Time Updates for Displays

Español:

Bienvenida y breve introducción al tema de las actualizaciones en tiempo real para aplicaciones web, cruciales para mejorar la interactividad y la capacidad de respuesta del usuario.

Français:

Bienvenue et brève introduction au sujet des mises à jour en temps réel des applications Web, cruciales pour améliorer l'interactivité et la réactivité des utilisateurs.

Outline

Menú

Visualizaciones de Datos en Tiempo Real

Español:

Los datos en tiempo real desempeñan un papel crucial en el desarrollo web moderno debido a su capacidad para proporcionar información inmediata, mejorando la experiencia del usuario y permitiendo aplicaciones web dinámicas e interactivas. Aquí hay algunos puntos clave:

Experiencia de Usuario *🧑‍💻: Los datos en tiempo real pueden mejorar significativamente la experiencia del usuario.
Análisis en Tiempo Real *📊: Los análisis en tiempo real permiten a las empresas tomar decisiones inmediatas basadas en datos actuales.
Herramientas Colaborativas *🤝: Los datos en tiempo real son esenciales para herramientas colaborativas como Google Docs, donde múltiples usuarios pueden editar un documento simultáneamente.
Notificaciones *🔔: Los datos en tiempo real permiten notificaciones inmediatas.
Actualizaciones en vivo *📡: En aplicaciones de noticias o financieras, los datos en tiempo real proporcionan actualizaciones en vivo sobre eventos actuales o precios de acciones, manteniendo a los usuarios informados en todo momento.
Dispositivos IoT *🌐: Los dispositivos del Internet de las Cosas (IoT) dependen en gran medida de los datos en tiempo real para funcionar eficazmente. Por ejemplo, un termostato inteligente necesita conocer la temperatura en tiempo real para ajustar la calefacción o refrigeración en una casa.

Français:

Les données en temps réel jouent un rôle crucial dans le développement Web moderne en raison de leur capacité à fournir des informations immédiates, à améliorer l'expérience utilisateur et à permettre des applications Web dynamiques et interactives. Voici quelques points clés :

Expérience utilisateur *🧑‍💻 : Les données en temps réel peuvent améliorer considérablement l'expérience utilisateur.
Análisis en tiempo real *📊 : Los análisis en tiempo real permiten a las empresas tomar decisiones inmediatas basadas en datos actuales.
Herramientas colaborativas *🤝 : los datos en tiempo real son esenciales para herramientas colaborativas como Google Docs, donde varios usuarios pueden editar un documento simultáneamente.
Notificaciones *🔔 : los datos en tiempo real permiten notificaciones inmediatas.
Actualizaciones en vivo *📡 : en aplicaciones de noticias o financieras, los datos en tiempo real proporcionan actualizaciones en vivo sobre eventos actuales o precios de acciones, manteniendo a los usuarios informados en todo momento.
Dispositivos IoT *🌐 : los dispositivos de Internet de las cosas (IoT) dependen en gran medida de los datos en tiempo real para funcionar de manera eficiente. Por ejemplo, un termostato inteligente necesita conocer la temperatura en tiempo real para ajustar la calefacción o el aire acondicionado de una casa.

Arquitectura

Español:

Backend de FastAPI *: FastAPI es un framework web moderno, rápido (de alto rendimiento) para construir APIs con Python 3.6+ basado en las sugerencias de tipo estándar de Python. Está diseñado para facilitar y agilizar el inicio, con la capacidad de escalar a aplicaciones complejas. En esta configuración, FastAPI se utiliza para manejar todas las operaciones de backend, incluyendo el servicio de páginas web, el manejo de solicitudes y la interacción con la base de datos.
PostgreSQL como sistema de base de datos *: PostgreSQL es un potente sistema de base de datos objeto-relacional de código abierto. Es conocido por su robustez, funcionalidad y cumplimiento de estándares. En esta configuración, PostgreSQL se utiliza para almacenar y recuperar datos para la aplicación.
SQLAlchemy para operaciones de base de datos *: SQLAlchemy es un kit de herramientas SQL y un sistema de Mapeo Objeto-Relacional (ORM) para Python. Proporciona un conjunto completo de patrones de persistencia de nivel empresarial bien conocidos, diseñados para un acceso eficiente y de alto rendimiento a la base de datos. En esta configuración, SQLAlchemy se utiliza para interactuar con la base de datos PostgreSQL de una manera "pythónica".
SSE para enviar actualizaciones al frontend *: Server-Sent Events (SSE) es un estándar que permite a un servidor web enviar actualizaciones al cliente a través de HTTP. En esta configuración, SSE se utiliza para enviar actualizaciones en tiempo real desde el servidor (aplicación Flask) al cliente (navegador web).
HTMX para manejar actualizaciones en el frontend con JavaScript mínimo *: HTMX es una biblioteca moderna, primero HTML, segundo JavaScript, para construir aplicaciones web impulsadas por AJAX. Permite acceder a AJAX, transiciones CSS, WebSockets y Server Sent Events directamente en HTML, utilizando atributos, para que pueda construir interfaces de usuario modernas con la simplicidad y el poder del hipertexto. En esta configuración, HTMX se utiliza para manejar las actualizaciones enviadas desde el servidor y actualizar el contenido HTML dinámicamente.
Plantillas Jinja2 para renderizar HTML inicial con datos de Python: Jinja2 es un lenguaje de plantillas moderno y amigable para diseñadores para Python. Se utiliza para crear plantillas HTML que pueden ser renderizadas con datos de Python. En esta configuración, Jinja2 se utiliza para renderizar el HTML inicial de las páginas web, rellenando los datos de la aplicación Flask.

Français:

Backend FastAPI: FastAPI est un framework Web moderne et rapide (haute performance) pour créer des API avec Python 3.6+ basé sur le type Python standard. astuces. Il est conçu pour faciliter et accélérer le démarrage, avec la possibilité d'évoluer vers des applications complexes. Dans cette configuration, FastAPI est utilisé pour gérer toutes les opérations backend, y compris la diffusion de pages Web, la gestion des demandes et l'interaction avec la base de données.
PostgreSQL como sistema de base de datos: PostgreSQL es un potente sistema de base de datos relacional de objetos de código abierto. Es conocido por su robustez, funcionalidad y cumplimiento de estándares. En esta configuración, PostgreSQL se utiliza para almacenar y recuperar datos para la aplicación.
SQLAlchemy para operaciones de base de datos: SQLAlchemy es un conjunto de herramientas SQL y un sistema de mapeo objeto-relacional (ORM) para Python. Proporciona un conjunto completo de patrones de persistencia empresariales bien conocidos, diseñados para un acceso eficiente y de alto rendimiento a las bases de datos. En esta configuración, SQLAlchemy se utiliza para interactuar con la base de datos PostgreSQL de una manera Pythonica.
SSE para el envío de actualizaciones al frontend: Server-Sent Events (SSE) es un estándar que permite a un servidor web enviar actualizaciones al cliente a través de HTTP. En esta configuración, SSE se utiliza para enviar actualizaciones en tiempo real desde el servidor (aplicación Flask) al cliente (navegador web).
HTMX para gestionar las actualizaciones en el frontend con un mínimo de JavaScript: HTMX es una biblioteca moderna, primero HTML y luego JavaScript, para crear aplicaciones web basadas en AJAX. Permite acceder a AJAX, transiciones CSS, WebSockets y eventos enviados por el servidor directamente en HTML, utilizando atributos, para que pueda crear interfaces de usuario modernas con la simplicidad y el poder del hipertexto. En esta configuración, HTMX se utiliza para gestionar las actualizaciones enviadas desde el servidor y actualizar el contenido HTML de forma dinámica.
Plantillas Jinja2 para renderizar HTML inicial con datos de Python: Jinja2 es un lenguaje de plantillas moderno y fácil de usar para Python. Se utiliza para crear plantillas HTML que pueden ser renderizadas con datos de Python. En esta configuración, Jinja2 se utiliza para renderizar el código HTML inicial de las páginas web, rellenando los datos de la aplicación Flask.

Ilustración

graph LR
A [FastAPI] -->|Fetches Data| B [PostgreSQL]
A -->|Sends Updates| C [SSE]
B -->|Database Operations| D [SQLAlchemy]
C -->|Updates Frontend| E [HTMX]
A -->|Renders Initial HTML| F [Jinja2]

Python 🐍

Inglés:

Python es un lenguaje de programación de alto nivel, interpretado, creado por Guido van Rossum y lanzado por primera vez en 1991. La filosofía de diseño de Python enfatiza la legibilidad del código con su notable uso de indentación significativa. Soporta múltiples paradigmas de programación, incluyendo estructurado (particularmente, procedural), orientado a objetos y programación funcional.

Casos de Uso *: Python se utiliza en una amplia variedad de aplicaciones, incluyendo:

Desarrollo Web *: La legibilidad y simplicidad de Python, junto con potentes frameworks como Django y Flask, lo convierten en una opción popular para el desarrollo web.
Análisis y Visualización de Datos *: Librerías como Pandas, NumPy y Matplotlib hacen de Python una herramienta poderosa para el análisis y la visualización de datos.
Aprendizaje Automático e IA *: Python es uno de los lenguajes líderes en aprendizaje automático, con bibliotecas como TensorFlow, PyTorch y Scikit-learn.
Scripting y Automatización *: La simplicidad de Python lo convierte en un gran lenguaje para scripting y automatización de tareas.

Pros *:

Legibilidad *: La sintaxis de Python está diseñada para ser legible y sencilla, lo que lo convierte en un gran lenguaje para principiantes.
Versatilidad *: Python se utiliza en muchas áreas de desarrollo, desde aplicaciones web hasta análisis de datos.
Comunidad Fuerte *: Python tiene una comunidad grande y activa de usuarios y desarrolladores que contribuyen a una vasta biblioteca de bibliotecas y frameworks de código abierto.

Contras *:

Velocidad *: Python es un lenguaje interpretado y puede ser más lento que lenguajes compilados como C o Java.
Desarrollo móvil: Si bien es posible desarrollar aplicaciones móviles en Python, no es tan sencillo como usar un lenguaje diseñado específicamente para el desarrollo móvil, como Swift o Java.
Consumo de memoria: La flexibilidad de Python puede llevar a un mayor consumo de memoria en comparación con otros lenguajes.

Français:

Python est un langage de programmation interprété de haut niveau créé par Guido van Rossum et publié pour la première fois en 1991. La philosophie de conception de Python met l'accent sur la lisibilité du code avec son utilisation notable d'une indentation significative. Il prend en charge plusieurs paradigmes de programmation, notamment la programmation structurée (en particulier procédurale), orientée objet et fonctionnelle.

Cas d'utilisation: Python est utilisé dans une grande variété d'applications, notamment :

Desarrollo Web: la legibilidad y simplicidad de Python, junto con potentes frameworks como Django y Flask, lo convierten en una opción popular para el desarrollo web.
Análisis y visualización de datos: bibliotecas como Pandas, NumPy y Matplotlib hacen de Python una herramienta potente para el análisis y la visualización de datos.
Machine Learning e IA: Python es uno de los principales lenguajes de aprendizaje automático, con bibliotecas como TensorFlow, PyTorch y Scikit-learn.
Scripts y automatización: la simplicidad de Python lo convierte en un excelente lenguaje para la creación de scripts y la automatización de tareas.

Ventajas *:

Legibilidad: la sintaxis de Python está diseñada para ser legible y simple, lo que lo convierte en un excelente lenguaje para principiantes.
Versatilidad: Python se utiliza en muchos campos de desarrollo, desde aplicaciones web hasta análisis de datos.
Comunidad fuerte: Python cuenta con una comunidad vasta y activa de usuarios y desarrolladores que contribuyen a una extensa biblioteca de librerías y frameworks de código abierto.

Desventajas *:

Velocidad: Python es un lenguaje interpretado y puede ser más lento que lenguajes compilados como C o Java.
Desarrollo móvil: aunque es posible desarrollar aplicaciones móviles en Python, no es tan sencillo como usar un lenguaje diseñado específicamente para el desarrollo móvil, como Swift o Java.
Consumo de memoria: la flexibilidad de Python puede resultar en un mayor consumo de memoria en comparación con otros lenguajes.

FastAPI

Español:

Visión general *: FastAPI es un framework web moderno, rápido (de alto rendimiento), para construir APIs con Python 3.6+ basado en las sugerencias de tipo estándar de Python. Está diseñado para que empezar sea rápido y fácil, con la capacidad de escalar a aplicaciones complejas. Se ha convertido en uno de los frameworks de aplicaciones web de Python más populares.

Casos de uso *: FastAPI se utiliza en una variedad de aplicaciones, incluyendo:

Desarrollo web *: La simplicidad de FastAPI y la documentación interactiva automática de la API lo convierten en una excelente opción para construir aplicaciones y servicios web.
Desarrollo de API *: FastAPI se puede utilizar para construir APIs RESTful con documentación interactiva automática de la API.
Microservicios *: El diseño ligero y modular de FastAPI lo convierte en una buena opción para arquitecturas de microservicios.

Ventajas *:

Simplicidad *: FastAPI es fácil de usar y de empezar a trabajar con él. No requiere ningún proyecto o diseño de código particular, por lo que es fácil empezar con algo pequeño y escalar.
Flexibilidad *: FastAPI se puede utilizar para construir una variedad de aplicaciones web, desde simples aplicaciones de una sola página hasta sitios complejos basados en bases de datos.
Extensible *: FastAPI se puede extender con "plugins" que añaden funcionalidad a tus aplicaciones. Hay plugins para la validación de formularios, manejo de subidas, varias tecnologías de autenticación abierta y varias herramientas comunes relacionadas con frameworks.

Contras *:

Falta de Convenciones *: FastAPI deja muchas decisiones y detalles de implementación al desarrollador, lo que puede llevar a problemas al construir aplicaciones más grandes o trabajar en equipo.
Escalabilidad: Si bien FastAPI es excelente para aplicaciones pequeñas, puede ser menos adecuado para aplicaciones grandes y complejas.
Soporte Asíncrono: El manejo de solicitudes de FastAPI es asíncrono. Otros frameworks como Node.js podrían ser una mejor opción para aplicaciones que requieren manejar muchas conexiones simultáneas.

Français:

Présentation: FastAPI est un framework Web moderne et rapide (hautes performances) permettant de créer des API avec Python 3.6+, basé sur des astuces de type Python standard. Il est conçu pour faciliter et accélérer le démarrage, avec la possibilité d'évoluer vers des applications complexes. Il est devenu l’un des frameworks d’applications Web Python les plus populaires.

Cas d'utilisation: FastAPI est utilisé dans diverses applications, notamment :

Desarrollo Web: la simplicidad de FastAPI y la documentación interactiva automática de la API lo convierten en una excelente opción para crear aplicaciones y servicios web.
Desarrollo de API: FastAPI se puede utilizar para crear API RESTful con documentación de API interactiva automática.
Microservicios: el diseño ligero y modular de FastAPI lo convierte en una buena opción para arquitecturas de microservicios.

Ventajas *:

Simplicidad: FastAPI es fácil de usar y de empezar. No requiere ningún proyecto o disposición de código particular, por lo que es fácil empezar poco a poco y escalar.
Flexibilidad: FastAPI se puede utilizar para crear una variedad de aplicaciones web, desde simples aplicaciones de una sola página hasta sitios complejos basados en bases de datos.
Extensible: FastAPI se puede extender con "plugins" que añaden funcionalidades a tus aplicaciones. Existen plugins para la validación de formularios, la gestión de descargas, diversas tecnologías de autenticación abiertas y varias herramientas comunes relacionadas con el framework.
Desventajas:
Falta de convenciones: FastAPI deja muchas decisiones y detalles de implementación al desarrollador, lo que puede generar problemas al crear aplicaciones más grandes o al trabajar en equipo.
Escalabilidad: aunque FastAPI es ideal para aplicaciones pequeñas, puede ser menos adecuado para aplicaciones grandes y complejas.
Support asynchrone: la gestion des requêtes de FastAPI est asynchrone. D'autres frameworks comme Node.js pourraient être un meilleur choix pour les applications nécessitant la gestion de nombreuses connexions simultanées.

HTMX

Español:

HTMX es una herramienta moderna que permite acceder a AJAX, WebSockets, Server Sent Events y otros comportamientos dinámicos directamente en HTML, sin necesidad de escribir JavaScript. Es una herramienta potente para desarrolladores que desean crear páginas web interactivas con menos complejidad.

Antecedentes y Casos de Uso *: HTMX se utiliza en escenarios donde los desarrolladores quieren mantener la simplicidad del HTML renderizado por el servidor, pero también necesitan la interactividad típicamente asociada con las Aplicaciones de Página Única (SPAs). Es excelente para añadir características como actualizaciones en tiempo real, carga perezosa y desplazamiento infinito a sus páginas web.

Ventajas *:

Simplicidad *: HTMX mantiene las cosas simples. No necesitas escribir JavaScript, solo HTML.
Ligero *: Es una biblioteca pequeña, por lo que no añade mucho a los tiempos de carga de tu página.
Compatibilidad *: Funciona con cualquier back-end que pueda servir HTML, lo que lo hace muy versátil.

Contras *:

Comunidad Limitada *: Como herramienta relativamente nueva, la comunidad en torno a HTMX aún está creciendo. Esto puede dificultar la búsqueda de soluciones a problemas específicos.
Curva de Aprendizaje *: Aunque HTMX simplifica muchos aspectos del desarrollo web dinámico, todavía hay una curva de aprendizaje involucrada, especialmente para desarrolladores acostumbrados a SPAs con mucho JavaScript.
No es un Reemplazo Completo: Para aplicaciones complejas con lógica pesada del lado del cliente, JavaScript tradicional o un framework aún podrían ser necesarios. HTMX es mejor para mejorar páginas renderizadas por el servidor con características interactivas. ** Simplificando la Interactividad Web: Cómo HTMX Alivia las Complejidades de JavaScript**

JavaScript, aunque potente, a veces puede introducir complejidad y desafíos en el desarrollo web. HTMX busca aliviar algunas de estas dificultades.

Simplicidad: JavaScript, especialmente cuando se usa con frameworks modernos, puede volverse complejo y difícil de manejar. HTMX, por otro lado, permite agregar comportamiento dinámico directamente en HTML, reduciendo la necesidad de código JavaScript complejo.
Tiempos de Carga Reducidos: Los archivos JavaScript, particularmente para aplicaciones grandes, pueden ser voluminosos e impactar los tiempos de carga de la página. Como una biblioteca ligera, HTMX minimiza este problema.
Facilidad de Aprendizaje *: JavaScript tiene una curva de aprendizaje pronunciada, especialmente para principiantes. HTMX lo simplifica al permitir a los desarrolladores trabajar con la sintaxis HTML familiar.
Compatibilidad *: JavaScript a veces puede tener problemas de compatibilidad entre diferentes navegadores. HTMX funciona con cualquier back-end que pueda servir HTML, lo que lo hace muy versátil y menos propenso a problemas de compatibilidad.
Renderizado del Lado del Servidor *: Con las aplicaciones pesadas en JavaScript, gran parte de la lógica de renderizado se traslada al lado del cliente, lo que puede consumir muchos recursos. HTMX permite el renderizado del lado del servidor, lo que puede ser más eficiente y fácil de gestionar.

Sin embargo, es importante señalar que, si bien HTMX puede aliviar algunos de los problemas asociados con JavaScript, no es un reemplazo completo. Para aplicaciones complejas con lógica pesada del lado del cliente, JavaScript o un framework de JavaScript aún podrían ser necesarios. HTMX se utiliza mejor para mejorar las páginas renderizadas en el servidor con características interactivas.

Français:

HTMX es una herramienta moderna que le permite acceder a AJAX, WebSockets, eventos enviados por el servidor y otros comportamientos dinámicos directamente en HTML, sin necesidad de escribir JavaScript. Es una herramienta potente para los desarrolladores que desean crear páginas web interactivas con menos complejidad.

Contexto y casos de uso: HTMX se utiliza en escenarios en los que los desarrolladores desean mantener la simplicidad del HTML renderizado por el servidor, pero también necesitan la interactividad generalmente asociada con las aplicaciones de una sola página (SPA). Es ideal para añadir funcionalidades como actualizaciones en tiempo real, carga perezosa y desplazamiento infinito en sus páginas web.

Ventajas *:

Simplicidad: HTMX simplifica las cosas. No necesita escribir JavaScript, solo HTML.
Ligero: es una biblioteca pequeña, por lo que no añade mucho a los tiempos de carga de sus páginas.
Compatibilidad: funciona con cualquier back-end capaz de servir HTML, lo que lo hace muy versátil.

Desventajas *:

Comunidad limitada: como una herramienta relativamente nueva, la comunidad en torno a HTMX sigue creciendo. Esto puede dificultar la búsqueda de soluciones a problemas específicos.
Curva de aprendizaje: aunque HTMX simplifica muchos aspectos del desarrollo web dinámico, todavía existe una curva de aprendizaje, especialmente para los desarrolladores acostumbrados a las SPA con mucho JavaScript.
No es un reemplazo completo: para aplicaciones complejas con una lógica pesada del lado del cliente, JavaScript tradicional o un framework aún pueden ser necesarios. HTMX es ideal para mejorar las páginas renderizadas por el servidor con funcionalidades interactivas. ** Simplificando la interactividad web: cómo HTMX facilita las complejidades de JavaScript** *

JavaScript, aunque potente, a veces puede introducir complejidad y desafíos en el desarrollo web. HTMX tiene como objetivo aliviar algunos de estos problemas.

Simplicidad: JavaScript, especialmente cuando se usa con frameworks modernos, puede volverse complejo y difícil de manejar. HTMX, por otro lado, le permite agregar comportamiento dinámico directamente en HTML, reduciendo la necesidad de código JavaScript complejo.
Tiempos de carga reducidos: los archivos JavaScript, especialmente para aplicaciones grandes, pueden ser voluminosos y afectar los tiempos de carga de la página. Como una biblioteca ligera, HTMX minimiza este problema.
Facilidad de aprendizaje: JavaScript tiene una curva de aprendizaje pronunciada, especialmente para los principiantes. HTML simplifica esto al permitir a los desarrolladores trabajar con una sintaxis HTML familiar.
Compatibilidad: JavaScript a veces puede encontrar problemas de compatibilidad entre diferentes navegadores. HTMX funciona con cualquier back-end capaz de servir HTML, lo que lo hace muy versátil y menos propenso a problemas de compatibilidad.
Renderizado del lado del servidor: con las aplicaciones pesadas en JavaScript, gran parte de la lógica de renderizado se traslada al lado del cliente, lo que puede consumir muchos recursos. HTMX permite el renderizado del lado del servidor, lo que puede ser más eficiente y fácil de gestionar.

Sin embargo, es importante tener en cuenta que, aunque HTMX puede mitigar algunos de los problemas asociados con JavaScript, no es un reemplazo completo. Para aplicaciones complejas con una lógica pesada del lado del cliente, JavaScript o un framework de JavaScript aún pueden ser necesarios. HTMX se utiliza mejor para mejorar las páginas renderizadas por el servidor con funcionalidades interactivas.

Server Sent Events

English:

Server Sent Events (SSE) es un estándar que permite a un servidor web enviar actualizaciones en tiempo real al cliente. Esta tecnología forma parte de la especificación HTML5 y está diseñada para mejorar el modelo tradicional de solicitud-respuesta, permitiendo al servidor enviar nuevos datos al cliente siempre que estén disponibles.

Español:

Ilustración

sequenceDiagram
participant Client
participant Server
Client-->>Server: GET /stream
Note over Client: Encabezado: Accept: text/event-stream
Note over Server: Establece conexión de flujo
loop Transmisión de datos
Server-->>Client: data: {"event": "message", "data": "JSON payload"}
Note over Server: Encabezado: Content-Type: text/event-stream
end
Note over Client: Procesa cada evento recibido

Inglés:

Antecedentes *: Antes de SSE, los desarrolladores a menudo usaban long-polling o WebSockets para lograr comunicación en tiempo real. Sin embargo, estos métodos pueden ser complejos y consumir muchos recursos. SSE se introdujo como una alternativa más simple y eficiente para la comunicación unidireccional en tiempo real del servidor al cliente.

Implementación *: Para implementar SSE, el servidor envía una respuesta con el tipo MIMEtext/event-stream. El cliente escucha estos eventos usando la APIEventSourceen JavaScript. El servidor puede entonces enviar eventos al cliente cada vez que haya nuevos datos disponibles.

Ventajas *:

Simplicidad *: SSE es más fácil de implementar que WebSockets ya que no requiere una conexión full-duplex.
Eficiencia *: SSE es más eficiente que long-polling ya que no requiere que el cliente verifique constantemente si hay nuevos datos.
Reconexión incorporada: Si la conexión se pierde, SSE intenta reconectarse automáticamente.
Contras:
Comunicación unidireccional: SSE solo admite comunicación unidireccional del servidor al cliente. Si se necesita comunicación bidireccional, otras tecnologías como WebSockets podrían ser más adecuadas.
Soporte limitado del navegador: No todos los navegadores son compatibles con SSE. Por ejemplo, Internet Explorer no es compatible con SSE.
Sobrecarga: Cada conexión SSE requiere una conexión HTTP separada, lo que puede añadir sobrecarga si hay muchas conexiones.

Más información MDN Web Docs

Français:

Contexto: Antes de SSE, los desarrolladores a menudo usaban sondeos largos o WebSockets para establecer comunicación en tiempo real. Sin embargo, estos métodos pueden ser complejos y consumir muchos recursos. SSE se introdujo como una alternativa más simple y eficiente para la comunicación unidireccional en tiempo real del servidor al cliente.

Implementación: Para implementar SSE, el servidor envía una respuesta con el tipo MIMEtext/event-stream. El cliente escucha estos eventos usando la APIEventSourceen JavaScript. El servidor puede entonces enviar eventos al cliente cada vez que haya nuevos datos disponibles.

Ventajas *:

Simplicidad: SSE es más fácil de implementar que WebSockets porque no requiere una conexión full-duplex.
Eficiencia: SSE es más eficiente que el sondeo largo porque no obliga al cliente a comprobar constantemente nuevos datos.
Reconexión integrada: si la conexión se pierde, SSE intenta automáticamente reconectarse.

Desventajas *:

Comunicación unidireccional: SSE solo admite la comunicación unidireccional del servidor al cliente. Si se necesita comunicación bidireccional, otras tecnologías como WebSockets podrían ser más adecuadas.
Soporte limitado del navegador: No todos los navegadores son compatibles con SSE. Por ejemplo, Internet Explorer no es compatible con SSE.
Sobrecarga: cada conexión SSE requiere una conexión HTTP distinta, lo que puede añadir una sobrecarga si hay muchas conexiones.

Más información MDN Web Docs

Generadores de Python

Español: Python Generators son un tipo especial de función en Python que te permiten crear un iterador de una manera rápida, fácil y limpia. Fueron introducidos como parte de la Propuesta de Mejora de Python (PEP) 255.

Antecedentes *: En Python, un iterador es un objeto que puede ser iterado (recorrido) sobre él. Un objeto que devolverá datos, un elemento a la vez. Los generadores proporcionan una forma conveniente de implementar el protocolo de iterador.

Implementación *: Un generador de Python se implementa como una función, pero en lugar de devolver valores usando la instrucciónreturn, usayield. Cuando se llama a la función generadora, devuelve un objeto generador sin siquiera comenzar la ejecución de la función. Cuando se llama anext()por primera vez, la función comienza a ejecutarse hasta que llega a la instrucciónyield, que devuelve el valor generado. La ejecución de la función se detiene en este punto y el control se devuelve a la persona que llama.

Français:

Los generadores de Python son un tipo especial de función en Python que le permite crear un iterador de manera rápida, sencilla y limpia. Fueron introducidos como parte de la Propuesta de Mejora de Python (PEP) 255.

Contexto: en Python, un iterador es un objeto que puede ser iterado (recorrido en bucle). Un objeto que devolverá datos, un elemento a la vez. Los generadores son una forma conveniente de implementar el protocolo iterador.

Implementación: un generador Python se implementa como una función, pero en lugar de devolver valores usando la instrucción return, utiliza yield. Cuando se llama a la función generadora, devuelve un objeto generador sin siquiera comenzar la ejecución de la función. Cuando se llama a next() por primera vez, la función comienza a ejecutarse hasta que llega a la instrucción yield, que devuelve el valor obtenido. La ejecución de la función se interrumpe en este punto y el control se devuelve al llamador.

def count_up_to(n):
  count = 1
  while count <= n:
    yield count
    count += 1

# Crear un generador
counter = count_up_to(5)

# Use the generator
for num in counter:
  print(num)

Español:

Caso de uso *: Los generadores son particularmente útiles cuando se trabaja con grandes conjuntos de datos que no se desean almacenar en la memoria de una sola vez. También son bastante útiles cuando se trabaja con series extremadamente grandes o incluso infinitas.

Ventajas *:

Eficiencia de memoria *: Los generadores son una excelente manera de optimizar la memoria. Dado que producen un elemento a la vez, no necesitan cargar todo en la memoria.
Evaluación perezosa *: Los generadores son perezosos, lo que significa que generan valores sobre la marcha. Esta evaluación perezosa puede conducir a mejoras significativas en el rendimiento para grandes conjuntos de datos.
Código limpio *: Los generadores ayudan a escribir código limpio y legible.

Desventajas *:

Uso único: Los generadores solo pueden ser iterados una vez. Después de haber recorrido los valores, no puedes iterar sobre ellos de nuevo.
Complejidad: Los generadores pueden hacer el código más complejo y difícil de entender para los principiantes.

Français:

Cas d'utilisation: les générateurs sont particulièrement utiles lorsque vous traitez de grands ensembles de données que vous ne souhaitez pas stocker en mémoire d'un seul coup. C’est également très utile lorsqu’il s’agit de séries extrêmement grandes, voire infinies.

Avantages *:

Efficacité de la mémoire: les générateurs sont un excellent moyen d'optimiser la mémoire. Puisqu’ils génèrent un élément à la fois, ils n’ont pas besoin de tout charger en mémoire.
Pereza: los generadores son perezosos, lo que significa que generan valores sobre la marcha. Esta pereza puede conducir a mejoras significativas en el rendimiento para grandes conjuntos de datos.
Código Limpio: los generadores ayudan a escribir código limpio y legible.

Desventajas *:

Uso único: los generadores solo pueden ser iterados una vez. Una vez que ha recorrido los valores, no puede volver a recorrerlos.
Complejidad: los generadores pueden hacer que el código sea más complejo y difícil de entender para los principiantes.

SQLAlchemy

Español:

SQLAlchemy es un kit de herramientas SQL y un sistema de Mapeo Objeto-Relacional (ORM) para Python. Proporciona un conjunto completo de patrones de persistencia de nivel empresarial bien conocidos, diseñados para un acceso a bases de datos eficiente y de alto rendimiento.

Resumen *: Introducida en 2005, SQLAlchemy es una biblioteca completa para trabajar con bases de datos SQL en Python. Incluye un ORM de alto nivel, acceso SQL directo de bajo nivel y más.

Casos de Uso *: SQLAlchemy se utiliza en una variedad de aplicaciones para:

Interactuar con Bases de Datos *: SQLAlchemy proporciona una API consistente y unificada para interactuar con diferentes sistemas de bases de datos.
Mapeo de Datos *: El ORM de SQLAlchemy permite a los usuarios mapear clases de Python a tablas de bases de datos, proporcionando una forma más intuitiva de interactuar con las bases de datos.
Análisis de Datos *: SQLAlchemy se puede utilizar con bibliotecas como Pandas para tareas de análisis de datos.

Ventajas *:

Versatilidad *: SQLAlchemy es compatible con una amplia gama de bases de datos SQL, no solo SQLite.
Eficiencia *: El ORM y el lenguaje de expresiones de SQLAlchemy permiten operaciones de base de datos eficientes.
Madurez: Como una biblioteca bien establecida, SQLAlchemy cuenta con un soporte robusto y una gran comunidad.
Contras:
Complejidad: La amplia gama de características y la flexibilidad de SQLAlchemy pueden hacer que sea complejo de aprender, especialmente para principiantes.
Rendimiento: Si bien el ORM de SQLAlchemy hace que las operaciones de base de datos sean más convenientes, a veces puede llevar a un rendimiento más lento en comparación con SQL puro.
Sobrecarga: La abstracción proporcionada por SQLAlchemy introduce cierta sobrecarga, lo que podría no ser ideal para aplicaciones que requieren el máximo rendimiento.

Français:

SQLAlchemy est une boîte à outils SQL et un système de mappage objet-relationnel (ORM) pour Python. Il fournit une suite complète de modèles de persistance bien connus au niveau de l'entreprise, conçus pour un accès efficace et performant aux bases de données.

Introducción: introducida en 2005, SQLAlchemy es una biblioteca completa para trabajar con bases de datos SQL en Python. Incluye un ORM de alto nivel, acceso SQL directo de bajo nivel y mucho más.

Casos de uso: SQLAlchemy se utiliza en diversas aplicaciones para:

Interactuar con bases de datos: SQLAlchemy proporciona una API coherente y unificada para interactuar con diferentes sistemas de bases de datos.
Mapeo de datos: el ORM de SQLAlchemy permite a los usuarios mapear clases de Python a tablas de bases de datos, ofreciendo una forma más intuitiva de interactuar con las bases de datos.
Análisis de datos: SQLAlchemy se puede utilizar con bibliotecas como Pandas para tareas de análisis de datos.

Ventajas *:

Versatilidad: SQLAlchemy es compatible con una amplia gama de bases de datos SQL, no solo SQLite.
Eficiencia: el ORM y el lenguaje de expresiones de SQLAlchemy permiten operaciones de base de datos eficientes.
Madurez: como una biblioteca bien establecida, SQLAlchemy cuenta con un soporte robusto y una gran comunidad.

Desventajas *:

Complejidad: la amplia gama de funcionalidades y la flexibilidad de SQLAlchemy pueden hacer que su aprendizaje sea complejo, especialmente para principiantes.
Rendimiento: aunque el ORM de SQLAlchemy hace que las operaciones de base de datos sean más prácticas, a veces puede provocar una ralentización del rendimiento en comparación con el SQL puro.
Sobrecarga: la abstracción proporcionada por SQLAlchemy introduce cierta sobrecarga, que podría no ser ideal para aplicaciones que requieren el máximo rendimiento.

class EnergyDataTable(Base):
    __tablename__ = "energy_data"
    id = Column(Integer, primary_key=True, autoincrement=True)
    period = Column(DateTime, nullable=False)
    respondent = Column(String, nullable=True)
    respondent_name = Column(String, nullable=True)
    type = Column(String, nullable=True)
    type_name = Column(String, nullable=True)
    value = Column(Float, nullable=True)
    value_units = Column(String, nullable=True)

__table_args__ = (
        UniqueConstraint(
            "period", "respondent", "type", name="uix_period_respondent_type"
        ),
    )

def __repr__(self):
        return f"{self.id}, period={self.period}, respondent={self.respondent}, respondent_name={self.respondent_name}, type={self.type}, type_name={self.type_name}, value={self.value}, value_units={self.value_units})>"

Jinja2

Español: Jinja2 es un potente motor de plantillas para Python que permite generar HTML, XML u otros formatos de marcado dinámicos. Proporciona una forma flexible y eficiente de renderizar datos en el lado del servidor y generar contenido dinámico para aplicaciones web.

Jinja2 está inspirado en el motor de plantillas de Django y es ampliamente utilizado en el desarrollo web con frameworks como Flask y Django. Separa la lógica de presentación de la lógica de negocio, facilitando el mantenimiento y la actualización del frontend de su aplicación.

Caso de Uso *: Jinja2 se usa comúnmente en escenarios donde necesitas renderizar contenido dinámico en el lado del servidor. Es particularmente útil para generar páginas HTML con datos dinámicos, como mostrar información de usuario, generar informes o renderizar actualizaciones en tiempo real.

Ventajas *:

Flexible y Expresivo *: Jinja2 ofrece un amplio conjunto de características, incluyendo condicionales, bucles, filtros y macros, lo que te permite crear plantillas complejas con facilidad.
Separación de Preocupaciones *: Al separar la lógica de presentación de la lógica de negocio, Jinja2 promueve una arquitectura de código limpia y la mantenibilidad.
Extensibilidad *: Jinja2 te permite definir filtros, funciones y etiquetas personalizadas, dándote control total sobre el proceso de renderizado de plantillas.
Integración con Python *: Dado que Jinja2 está escrito en Python, se integra perfectamente con el código Python, lo que facilita el paso de datos del backend a las plantillas.

Contras *:

Curva de aprendizaje *: Jinja2 tiene su propia sintaxis y conceptos, por lo que hay una curva de aprendizaje involucrada en comprenderlo y usarlo de manera efectiva.
Interactividad limitada en el frontend *: Jinja2 se enfoca principalmente en la renderización del lado del servidor, por lo que puede que no sea la mejor opción para componentes de frontend altamente interactivos que requieren actualizaciones frecuentes sin recargas de página. En tales casos, un framework de JavaScript como React o Vue.js podría ser más adecuado.

Francés: Jinja2 es un potente motor de plantillas para Python que le permite generar HTML, XML u otros formatos de marcado dinámicos. Proporciona una forma flexible y eficiente de renderizar datos del lado del servidor y generar contenido dinámico para aplicaciones web.

Jinja2 se inspira en el motor de plantillas de Django y es ampliamente utilizado en el desarrollo web con frameworks como Flask y Django. Separa la lógica de presentación de la lógica de negocio, facilitando el mantenimiento y la actualización del frontend de su aplicación.

Caso de uso: Jinja2 se usa comúnmente en escenarios donde necesita renderizar contenido dinámico del lado del servidor. Es particularmente útil para generar páginas HTML con datos dinámicos, como mostrar información de usuario, generar informes o renderizar actualizaciones en tiempo real. ** Ventajas**:

Flexible y expresivo: Jinja2 proporciona un rico conjunto de características, incluyendo condiciones, bucles, filtros y macros, lo que le permite crear fácilmente plantillas complejas.
Separación de preocupaciones: al separar la lógica de presentación de la lógica de negocio, Jinja2 promueve una arquitectura de código limpia y la mantenibilidad.
Extensibilidad: Jinja2 le permite definir filtros, funciones y etiquetas personalizadas, dándole control total sobre el proceso de renderizado de la plantilla.
Integración con Python: Dado que Jinja2 está escrito en Python, se integra perfectamente con el código Python, lo que facilita la transmisión de datos del backend a las plantillas.

Las desventajas *:

Curva de aprendizaje: Jinja2 tiene su propia sintaxis y conceptos, por lo que hay una curva de aprendizaje involucrada para comprenderlo y usarlo de manera efectiva.
Interactividad limitada del frontend: Jinja2 se enfoca principalmente en el renderizado del lado del servidor, por lo que podría no ser la mejor opción para componentes de frontend altamente interactivos que requieren actualizaciones frecuentes sin recargar la página. En tales casos, un framework de JavaScript como React o Vue.js podría ser más adecuado.

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <div class="container-fluid">
        <a class="navbar-brand" href="{{ url_for('index') }}">
            <i class="bi bi-lightning-charge-fill me-2">i</i>Panel de Energía
        a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
                aria-controls="navbarNav" aria-expanded="false" aria-label="Alternar navegación">
            <span class="navbar-toggler-icon">span</span>
        button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav ml-auto">
                <li class="nav-item">
                    <a class="nav-link" href="{{ url_for('index') }}">Inicioa</a>
                li>
                <li class="nav-item">
                    <a class="nav-link" href="{{ url_for('instruct') }}">Instruir (con Energía LLM)a</a>

li>
            ul>
        div>
    div>
nav>

¿Qué tal usar LLMs para generar consultas SQL?

English:

Primero, obtengamos el script DDL de nuestra tabla de datos de energía de SQLAlchemy:

Français:

Tout d'abord, obtenons le script DDL de notre table de données énergétiques auprès de SQLAlchemy :

def get_energy_data_schema() -> str:
    """
    Get the schema of the Database
    """
    schema_ddl = CreateTable(EnergyDataTable.__table__).compile(engine)
    log.info(schema_ddl)
    return schema_ddl

English:

Luego, aprovechamos la capacidad de llamada a funciones de nuestros LLM configurados a través de Instructor para que nos proporcionen la consulta SQL:

Français:

A continuación, avanzamos y aprovechamos la capacidad de llamada a funciones de nuestros LLM configurados a través de Instructor para proporcionarnos la consulta SQL:

def gen_select_query(
    ai_client: Instructor, schema, parametre: str, model=LLMModel.GPT4_Omni
) -> SqlSelectQuery:
    system_msg = f"""
    Issue a valid SQL statement based on the following table schema:
    '''sql
    {schema}
    '''
    """
    log.info(f"system_msg: {system_msg}")
    log.info(f"parametre: {parametre}")
    query = ai_client.chat.completions.create(
        model=model,
        response_model=SqlSelectQuery,
        messages= [
            {"role": "system", "content": system_msg},
            {"role": "user", "content": parametre},
        ],
    )
    return query

Inglés:

Con la siguiente estructura Pydantic:

Francés:

Con la siguiente estructura Pydantic :

class SqlSelectQuery(BaseModel):
    select_stmt: str = Field(..., description="La declaración select para la consulta")
    explain_stmt: str = Field(..., description="La declaración explain para la consulta")
    start_date: str = Field(..., description="La fecha de inicio para los datos")
    end_date: str = Field(..., description="La fecha de fin para los datos")

Referencias

HTMX *

Eventos Enviados por el Servidor (SSE) *

Python *

SQLAlchemy *

Jinja2 *

Bokeh *