Observable 2.0, um gerador de sites estáticos para apps de dados

Anúncio do Observable Framework

• Lançamento do Observable 2.0: um gerador de sites estáticos de código aberto que permite criar apps de dados, dashboards e relatórios rápidos e bonitos.
• O objetivo é comunicar dados de forma eficaz, e os notebooks do Observable são adequados para exploração de dados pontual, mas não para dashboards e apps.
• Com o Observable Framework, é possível criar os melhores apps de dados, combinando JavaScript no frontend com várias linguagens no backend.

Beyond notebooks 📓

• O Observable 2.0 reflete vários anos de experiência.
• A leveza e a colaboração dos notebooks computacionais são ideais para explorar dados e responder a perguntas imediatas, mas não representam a interface otimizada para todo tipo de trabalho.
• Os notebooks têm limitações como coluna única, baixa densidade de informação visual e uma interface de editor sempre visível; essas limitações são adequadas para aprendizado e experimentação, mas não para apresentação.
• Apps de dados promovem um entendimento compartilhado, são usados com mais frequência pelas equipes e mantêm seu valor ao longo do tempo.

Um fluxo de trabalho melhor para desenvolvedores 👩‍💻

• O desenvolvimento moderno é baseado em arquivos, e arquivos são interoperáveis.
• Desenvolvedores podem usar seu editor de texto preferido, controle de versão e sistema de revisão de código, além de executar testes unitários e linters e automatizar CI/CD.
• O Observable Framework adota sintaxe JavaScript vanilla e usa o moderno ES import em vez de require, facilitando o aprendizado e o compartilhamento de código.

Uma experiência melhor para o usuário 😍

• Não só a experiência do desenvolvedor importa; a experiência do usuário também é importante, e o valor de uma ferramenta criativa deve ser avaliado pela qualidade do que ela produz.
• O Framework oferece padrões e conveniências para um início rápido, além de permitir personalização quando necessário.
• A arquitetura de dados do Framework acelera os apps ao pré-calcular os dados.

Uma arquitetura de dados melhor

• Visualização de dados exige preparação específica dos dados, e a maior parte do trabalho está nessa preparação.
• Desenvolvedores querem usar várias linguagens, bibliotecas e fontes de dados, além de pré-processar dados offline e aproveitar gráficos interativos com JavaScript no navegador.
• O data loader do Framework calcula snapshots estáticos dos dados em tempo de build para acelerar o carregamento das páginas e, por rodar no servidor, permite controlar segurança e privacidade.

Agradecimentos

• Foi graças ao apoio, feedback e incentivo da comunidade que foi possível chegar até aqui, e há entusiasmo em compartilhar o Observable Framework.
• Para saber mais sobre o Framework, recomenda-se ler a documentação ou visitar o fórum.

Opinião do GN⁺:

• O Observable Framework parece trazer inovação para o desenvolvimento de aplicações web centradas em dados. Em especial, o pré-processamento de dados por meio do data loader é um recurso importante que pode melhorar bastante a experiência do usuário.
• A abordagem da Observable de oferecer uma ferramenta útil tanto para desenvolvedores quanto para usuários combina bem com a cultura moderna de desenvolvimento, que valoriza colaboração e eficiência.
• Por ser open source e oferecer flexibilidade com suporte a várias linguagens e ferramentas, deve se tornar uma opção atraente para a comunidade de desenvolvedores.

[GN⁺]

Comentários no Hacker News

• Anúncio do lançamento do Observable Framework

  • O Observable Framework é uma nova ferramenta open source para desenvolvimento de apps de dados.
  • Recomenda ver o relatório de exemplo que analisa logs da web em um dashboard interno.
  • Usa a técnica de "transformar tudo em gráficos" para obter insights que ajudam na otimização de servidores e no controle de tráfego.
  • Também compartilha um dashboard tradicional que visualiza a adoção de uma nova biblioteca open source de visualização chamada Observable Plot.
  • Junto com o lançamento do Observable Framework, o Observable voltou a ser gratuito para uso pessoal, incluindo notebooks privados e conectores de banco de dados.

• Características do Observable Framework

  • O Observable Framework usa sintaxe 100% vanilla JavaScript.
  • É possível usar o runtime reativo do Observable sem sintaxe incomum.
  • É possível usar imports ES estáticos de npm ou módulos locais, e declarar várias variáveis de nível superior em blocos de código.
  • É possível exibir conteúdo na página chamando a função embutida display(…).
  • O uso de sintaxe vanilla melhora bastante a interoperabilidade.
  • Estão procurando maneiras de portar essas melhorias para os notebooks do Observable em um futuro próximo.

• Uso do conceito de "arquivo vs app"

  • Há uma menção ao conceito de "arquivo vs app" no anúncio.
  • É possível criar visualizações de dados complexas e dashboards usando blocos de código em arquivos Markdown.
  • Essa interoperabilidade é muito interessante.
  • Testaram editar um site Observable no Obsidian e confirmaram que funciona bem.

• Elogios à abordagem do Observable

  • A abordagem de separar o Observable do observablehq.com é excelente.
  • Isso permite que qualquer repórter crie facilmente blogs dinâmicos e orientados por informação.
  • O fundador do Observable tem histórico de criar visualizações de dados incríveis no NYTimes.
  • Ferramentas assim devolvem poder aos jornalistas e permitem uma mudança para longe de empresas duvidosas.
  • Svekyll é um gerador de sites estáticos inspirado no Jekyll, para quem quer usar Svelte em blogs.

• Várias ideias sobre o Observable Framework

  • Um data loader é um script que pode imprimir dados, como JSON, na saída padrão.
  • Um arquivo Markdown com blocos ```js que são executados.
  • Uma recriação dos notebooks do Observable para evitar sintaxe customizada.
  • Esses pontos são muito importantes.

• Pedido sobre o uso do Observable Framework

  • Gostam da separação clara entre carregar/preparar dados e exibi-los.
  • Pedem exemplos simples e mais clareza na documentação de deploy.
  • Partem do pressuposto de que a maioria das pessoas vai preferir fazer deploy via GitHub Actions e pedem que a documentação inclua o exemplo mais simples possível, em vez de um arquivo de deploy complexo.
  • Sugerem uma interface para conectar a um repositório GitHub e fazer build/deploy quando houver mudanças.

• Perguntas sobre o Observable Framework

  • Pergunta se a flexibilidade de linguagem usada no data loader/backend também se aplicará ao frontend/UI, ou se o paradigma continuará sendo usar qualquer linguagem que o usuário quiser para carregamento de dados e construir os dashboards com observablejs/observable plot.
  • Pergunta se, considerando que o ObservableJS é suportado pelo Quarto, dá para esperar um Observable Framework integrado ao Quarto, ou se a versão mais recente do Quarto com foco em dashboards se tornará concorrente do Framework.
  • Viram comparações com o Evidence.dev e sentiram semelhanças na experiência de desenvolvimento centrada em Markdown, mas lembram que o Evidence escolheu Apache Echarts como principal biblioteca de gráficos. Perguntam sobre os prós e contras de Echarts versus ObservableJS/Plot.

• Evolução histórica do Observable

  • Voltando à história do Observable, ele começou como uma empresa que criava geradores de sites estáticos para dashboards, depois tentou levar ciência de dados para gerentes intermediários, teve dificuldade para encontrar product-market fit e, por fim, passou a focar em uma ferramenta simples e elegante para programação exploratória, visualização de dados e escrita de documentos interativos em JavaScript.

• Perguntas adicionais sobre o uso do Observable Framework

  • Pergunta como essa interação é alcançada se você quiser criar gráficos/tabelas que busquem e exibam apenas parte dos dados por vez, usando sliders/filtros em um arquivo de banco de dados Sqlite/Duckdb no servidor.
  • Pergunta se, caso o Observable Framework forneça o frontend, seria possível usar qualquer biblioteca de autenticação para criar um site com login e opções de assinatura.
  • Pergunta se, por ser uma página web estática, os usuários poderiam baixar o arquivo de dados por trás da visualização usando Dev Tools sempre que visualizassem o gráfico.
  • Pergunta a data prevista de lançamento das interações do Plot, como zoom, pan, legenda interativa e brush.
  • Pergunta se há planos de oferecer um serviço de hospedagem para esses arquivos e para gerar o runtime, já que com arquivos grandes em parquet, sqlite ou csv, CI/CD via GitHub ou Vercel se torna inviável.

• Observação sobre ideias semelhantes

  • Estão desenvolvendo uma ferramenta muito parecida, embora bastante diferente em alguns aspectos, em rysana.com.
  • A ideia parece surgir em ondas, como se tivesse acontecido sem nenhuma coordenação, como na primeira invenção do cálculo.
  • Há muita tecnologia prévia aqui, mas ao mesmo tempo é interessante ver esse salto específico para um "app" Markdown de arquivo único usando várias linguagens acontecer simultaneamente.