ejecución interactiva híbrida, código en vivo y pre-renderizado, WebAssembly interactivo
La ejecución híbrida es una técnica avanzada que permite optimizar los documentos interactivos mediante la renderización previa de cálculos pesados en el momento de la compilación, al tiempo que se mantiene la interactividad en tiempo real en el lado del cliente. Este enfoque mejora los tiempos de carga del documento y la capacidad de respuesta, al tiempo que sigue proporcionando funciones dinámicas al usuario.
Los documentos interactivos a menudo requieren equilibrar el rendimiento y la interactividad. Al precomputar los datos y los resultados durante la construcción del documento (utilizando fuentes de datos OJS) y luego pasar esos datos a las celdas de código en vivo que se ejecutan en el navegador a través de WebAssembly, puede lograr velocidad e interactividad.
Principales ventajas:
Quarto Live soporta la exportación de datos como fuentes de datos OJS. Esto significa que puede evaluar el código en tiempo de compilación (por ejemplo, en un bloque de código R) y exportar los resultados para su uso en celdas interactivas más tarde.
```{r}
# Vista previa del conjunto de datos ToothGrowth
head(ToothGrowth)
# Exportar ToothGrowth como fuente de datos OJS
ojs_define(ToothGrowth)
```
El conjunto de datos ToothGrowth está ahora disponible como una variable OJS:
```{ojs}
ToothGrowth
```ToothGrowth es ahora accesible para su posterior procesamiento en el lado del cliente.# Vista previa del conjunto de datos ToothGrowth
head(ToothGrowth) len supp dose
1 4.2 VC 0.5
2 11.5 VC 0.5
3 7.3 VC 0.5
4 5.8 VC 0.5
5 6.4 VC 0.5
6 10.0 VC 0.5# Exportar ToothGrowth como fuente de datos OJS
ojs_define(ToothGrowth)El conjunto de datos ToothGrowth está ahora disponible como una variable OJS:
ToothGrowthUna vez que tenga una fuente de datos OJS, puede importarla de nuevo a un bloque de código interactivo R o Python utilizando la opción de celda input. Esto permite seguir procesando o visualizando datos prerrenderizados en el lado del cliente.
hybrid.qmd
```{webr}
#| input:
#| - ToothGrowth
# Filtrar los datos de ToothGrowth para dosis específicas y crear un gráfico
data_filtered <- ToothGrowth |> dplyr::filter(dose %in% c(0.5, 2))
boxplot(len ~ dose, data = data_filtered)
head(data_filtered)
```En este ejemplo, el conjunto de datos ToothGrowth pre-renderizado se importa de nuevo a la celda interactiva R para su posterior análisis.
El enfoque híbrido también permite la comunicación entre diferentes motores WebAssembly (por ejemplo, entre R y Python). Los datos procesados en un motor pueden pasarse a otro, lo que garantiza la coherencia y una interactividad sin fisuras.
```{webr}
#| edit: false
#| define:
#| - mpg
# Procesar y exportar un subconjunto del conjunto de datos mtcars
mpg <- mtcars |>
dplyr::select(mpg, hp) |>
dplyr::filter(mpg < 25)
```
```{pyodide}
#| edit: false
#| input:
#| - mpg
# Importe los datos exportados en Python y tracítelos
import matplotlib.pyplot as plt
import pandas as pd
df = pd.DataFrame(mpg)
plt.plot(df['mpg'], df['hp'], 'o')
plt.title("MPG vs HP")
plt.xlabel("Miles Per Gallon")
plt.ylabel("Horsepower")
plt.show()
```mpg se procesa y exporta.mpg, lo que demuestra el paso de datos entre motores.Separar bloques estáticos e interactivos:
Se separan claramente los cálculos en tiempo de compilación (que pueden almacenarse en caché) de las celdas de código interactivo en vivo.
Uso eficaz de las variables OJS:
Defina fuentes de datos OJS para el procesamiento de datos pesados y, a continuación, importe estas fuentes en celdas interactivas para su visualización y análisis posterior.
Optimizar el rendimiento:
Preprocese tanto contenido estático como sea posible y limite los cálculos en tiempo real a lo necesario para la interactividad del usuario.
Pruebas en distintos entornos:
Verifique que los datos pasan correctamente entre los bloques R y Python, y que tanto los elementos pre-renderizados como los vivos funcionan como se esperaba.
La ejecución híbrida permite aprovechar lo mejor de ambos mundos: resultados estáticos prerrenderizados para cálculos pesados y elementos interactivos en vivo para la exploración dinámica. Mediante la transferencia de datos a través de variables OJS y el paso de datos entre diferentes motores WebAssembly, puede crear documentos interactivos eficaces y con gran capacidad de respuesta. Experimenta con estas técnicas para crear contenidos ricos e interactivos que funcionen bien y se adapten fácilmente.
Aquí hay más artículos de la misma categoría para ayudarte a profundizar en el tema.
@online{kassambara2025,
author = {Kassambara, Alboukadel},
title = {Ejecución híbrida: mezcla de contenido prerenderizado y en
vivo},
date = {2025-03-21},
url = {https://www.datanovia.com/es/learn/interactive/advanced/hybrid-execution.html},
langid = {es}
}