execução interativa híbrida, código ao vivo e pré-renderizado, WebAssembly interativo
A execução híbrida é uma técnica avançada que permite otimizar documentos interativos por meio da pré-renderização de cálculos pesados em tempo de compilação, mantendo a interatividade ao vivo no lado do cliente. Essa abordagem melhora o tempo de carregamento e a capacidade de resposta do documento e, ao mesmo tempo, fornece recursos dinâmicos ao usuário.
Os documentos interativos geralmente exigem o equilíbrio entre desempenho e interatividade. Ao pré-computar dados e saídas durante a criação do documento (usando fontes de dados OJS) e, em seguida, passar esses dados para células de código em execução no navegador por meio de WebAssembly, você pode obter velocidade e interatividade.
Principais benefícios:
O Quarto Live suporta a exportação de dados como fontes de dados OJS. Isso significa que você pode avaliar o código em tempo de compilação (por exemplo, em um bloco de código R) e exportar os resultados para uso em células interativas posteriormente.
```{r}
# Visualizar o conjunto de dados ToothGrowth
head(ToothGrowth)
# Exportar ToothGrowth como uma fonte de dados OJS
ojs_define(ToothGrowth)
```
O conjunto de dados ToothGrowth agora está disponível como uma variável OJS:
```{ojs}
ToothGrowth
```ToothGrowth agora está acessível para processamento adicional no lado do cliente.# Visualizar o conjunto de dados 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 uma fonte de dados OJS
ojs_define(ToothGrowth)O conjunto de dados ToothGrowth agora está disponível como uma variável OJS:
ToothGrowthDepois de ter uma fonte de dados OJS, você pode importá-la de volta para um bloco de código R ou Python interativo usando a opção de célula input. Isso permite que você processe ou visualize ainda mais os dados pré-renderizados no lado do cliente.
hybrid.qmd
```{webr}
#| input:
#| - ToothGrowth
# Filtrar os dados do ToothGrowth para doses específicas e criar um gráfico
data_filtered <- ToothGrowth |> dplyr::filter(dose %in% c(0.5, 2))
boxplot(len ~ dose, data = data_filtered)
head(data_filtered)
```Neste exemplo, o conjunto de dados pré-renderizado ToothGrowth é importado de volta para a célula interativa R para análise posterior.
A abordagem híbrida também permite a comunicação entre diferentes mecanismos do WebAssembly (por exemplo, entre R e Python). Os dados processados em um mecanismo podem ser transferidos para outro, garantindo consistência e interatividade contínua.
```{webr}
#| edit: false
#| define:
#| - mpg
# Processar e exportar um subconjunto do conjunto de dados mtcars
mpg <- mtcars |>
dplyr::select(mpg, hp) |>
dplyr::filter(mpg < 25)
```
```{pyodide}
#| edit: false
#| input:
#| - mpg
# Importar os dados exportados em Python e plotá-los
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 é processado e exportado.mpg é importado e visualizado, demonstrando a passagem de dados entre mecanismos.Separar blocos estáticos e interativos:
Separe claramente os cálculos de tempo de compilação (que podem ser armazenados em cache) das células de código interativo em tempo real.
Usar variáveis OJS de forma eficaz:
Defina fontes de dados OJS para processamento de dados pesados e importe essas fontes para células interativas para visualização e análise adicional.
Otimização do desempenho:
Pré-renderize o máximo possível de conteúdo estático e limite os cálculos em tempo real ao que for necessário para a interatividade do usuário.
Teste em vários ambientes:
Verifique se os dados passam corretamente entre os blocos R e Python e se os elementos pré-renderizados e ao vivo funcionam conforme o esperado.
A execução híbrida permite que você aproveite o melhor dos dois mundos: saídas estáticas pré-renderizadas para cálculos pesados e elementos interativos ao vivo para exploração dinâmica. Ao transferir dados por meio de variáveis OJS e passar dados entre diferentes mecanismos do WebAssembly, você pode criar documentos interativos eficientes e altamente responsivos. Faça experiências com essas técnicas para criar conteúdo rico e interativo que tenha bom desempenho e seja facilmente dimensionado.
Aqui estão mais artigos da mesma categoria para ajudá-lo a se aprofundar no tópico.
@online{kassambara2025,
author = {Kassambara, Alboukadel},
title = {Execução híbrida: Combinação de conteúdo pré-renderizado e ao
vivo},
date = {2025-03-21},
url = {https://www.datanovia.com/pt/learn/interactive/advanced/hybrid-execution.html},
langid = {pt}
}