▲

GN⁺: 데이터 앱을 위한 정적 사이트 생성기, Observable 2.0

 (observablehq.com)
14P by neo 3달전 | favorite | 댓글 1개

Observable Framework 발표

  • Observable 2.0 출시: 오픈 소스 정적 사이트 생성기로 빠르고 아름다운 데이터 앱, 대시보드 및 보고서 구축 가능.
  • 데이터를 효과적으로 소통하는 것을 목표로 하며, Observable 노트북은 일시적인 데이터 탐색에 적합하지만 대시보드와 앱에는 적합하지 않음.
  • Observable Framework를 통해 최고의 데이터 앱을 구축할 수 있으며, 프론트엔드의 JavaScript와 백엔드의 다양한 언어를 결합하여 사용 가능.

Beyond notebooks 📓

  • Observable 2.0은 여러 해에 걸친 경험을 반영함.
  • 계산 노트북의 가벼움과 협업성은 데이터 탐색과 즉각적인 질문에 대한 답변에 이상적이지만, 모든 작업에 최적화된 인터페이스는 아님.
  • 노트북은 단일 열, 낮은 시각적 정보 밀도, 항상 보이는 편집기 인터페이스로 인해 제한적이며, 이러한 제한은 학습과 실험에는 적합하지만 프레젠테이션에는 적합하지 않음.
  • 데이터 앱은 공유된 이해를 촉진하고, 팀에게 더 자주 사용되며, 시간이 지남에 따라 가치를 유지함.

A better developer workflow 👩‍💻

  • 현대 개발은 파일 기반으로 이루어지며, 파일은 상호운용성을 가짐.
  • 개발자는 선호하는 텍스트 편집기, 소스 컨트롤, 코드 리뷰 시스템을 사용할 수 있으며, 유닛 테스트와 린터를 실행하고, CI/CD를 자동화할 수 있음.
  • Observable Framework는 바닐라 JavaScript 문법을 채택하고, require 대신 현대적인 ES import를 사용하여 학습과 코드 공유를 용이하게 함.

A better user experience 😍

  • 개발자 경험뿐만 아니라 사용자 경험도 중요하며, 창의적 도구의 가치는 생성물의 질로 평가되어야 함.
  • Framework는 빠른 시작을 위한 기본값과 편의성을 제공하며, 필요에 따라 맞춤 설정이 가능함.
  • Framework의 데이터 아키텍처는 데이터를 사전 계산하여 앱의 속도를 높임.

A better data architecture

  • 데이터 시각화에는 특정 데이터 준비가 필요하며, 대부분의 작업은 데이터 준비에 있음.
  • 개발자는 다양한 언어, 라이브러리, 데이터 소스를 사용하고, 데이터를 오프라인으로 미리 처리하면서 브라우저에서 JavaScript를 사용하여 상호작용하는 그래픽을 활용하고자 함.
  • Framework의 데이터 로더는 빌드 시간에 정적 데이터 스냅샷을 계산하여 페이지 로딩 속도를 높이고, 서버에서 실행되므로 보안과 개인 정보 보호를 제어할 수 있음.

감사의 말

  • 커뮤니티의 지원, 피드백, 격려 덕분에 여기까지 올 수 있었으며, Observable Framework를 공유하게 되어 기쁨.
  • Framework에 대해 더 알고 싶다면 문서를 읽거나 포럼을 방문할 것을 권장함.

GN⁺의 의견:

  • Observable Framework는 데이터 중심의 웹 애플리케이션 개발에 혁신을 가져올 것으로 보임. 특히 데이터 로더를 통한 사전 데이터 처리는 사용자 경험을 크게 향상시킬 수 있는 중요한 기능.
  • 개발자와 사용자 모두에게 유익한 도구를 제공하려는 Observable의 접근 방식은 협업과 효율성을 중시하는 현대적 개발 문화에 잘 부합함.
  • 오픈 소스이며, 다양한 언어와 도구를 지원하는 유연성은 개발자 커뮤니티에게 매력적인 선택지가 될 것으로 예상됨.
▲
neo 3달전  [-]
Hacker News 의견

  • Observable Framework 출시 소식

    • Observable Framework은 데이터 앱 개발을 위한 새로운 오픈 소스 도구임.
    • 내부 대시보드에서 웹 로그를 분석한 예제 보고서를 보는 것을 추천함.
    • "모든 것을 그래프로 표현하기" 기법을 사용하여 서버 최적화와 트래픽 제어에 도움이 되는 통찰을 얻음.
    • Observable Plot이라는 새로운 오픈 소스 시각화 라이브러리의 채택을 시각화하는 전통적인 대시보드도 공유함.
    • Observable Framework 출시와 함께 개인 사용자를 위해 Observable을 다시 무료로 제공함(비공개 노트북과 데이터베이스 커넥터 포함).

  • Observable Framework의 특징

    • Observable Framework는 100% 바닐라 자바스크립트 문법을 사용함.
    • Observable의 반응형 런타임을 특이한 문법 없이 사용할 수 있음.
    • npm이나 로컬 모듈에서 정적 ES 임포트를 사용할 수 있고, 코드 블록에서 여러 상위 레벨 변수를 선언할 수 있음.
    • 내장된 display(…) 함수를 호출하여 페이지에 내용을 표시할 수 있음.
    • 바닐라 문법을 사용함으로써 상호운용성이 크게 향상됨.
    • 이러한 개선 사항을 가까운 미래에 Observable 노트북으로 포팅하는 방법을 모색 중임.

  • "파일 대 앱" 개념의 활용

    • 발표에서 "파일 대 앱" 개념에 대한 언급이 있음.
    • 마크다운 파일에 코드 블록을 사용하여 복잡한 데이터 시각화와 대시보드를 만들 수 있음.
    • 이러한 상호운용성은 매우 흥미로움.
    • Obsidian에서 Observable 사이트를 편집하는 것을 시도해보고 잘 작동함을 확인함.

  • Observable의 접근 방식에 대한 호평

    • Observable을 observablehq.com에서 분리하는 접근 방식이 훌륭함.
    • 모든 기자가 동적이고 정보 기반의 블로그를 쉽게 만들 수 있게 됨.
    • Observable의 창시자가 NYTimes에서 놀라운 데이터 시각화를 한 경력이 있음.
    • 이러한 도구는 저널리스트에게 힘을 되돌려주고 의심스러운 기업으로부터 멀어지게 하는 전환을 가능하게 함.
    • Svekyll은 Jekyll에서 영감을 받은 정적 사이트 생성기로, Svelte를 블로그에 사용하고자 하는 사람들을 위한 것임.

  • Observable Framework에 대한 다양한 아이디어

    • 데이터 로더는 표준 출력으로 데이터(JSON 등)를 출력할 수 있는 스크립트임.
    • 실행되는 ```js 블록이 포함된 마크다운 파일.
    • 커스텀 문법을 피하기 위한 Observable 노트북의 재창조.
    • 이러한 점들은 매우 중요함.

  • Observable Framework 사용에 대한 요청

    • 데이터를 로드/준비하고 표시하는 명확한 구분이 마음에 듦.
    • 간단한 예제와 배포 문서에 대한 명확성을 요청함.
    • 대부분의 사람들이 GitHub Actions를 통해 배포하기를 선호할 것으로 가정하고, 복잡한 배포 파일 대신 가장 간단한 배포 파일의 예를 문서에 추가해달라고 요청함.
    • GitHub 저장소에 연결하고 변경 사항이 있을 때 빌드/배포하는 인터페이스 사용 가능 여부에 대한 제안.

  • Observable Framework에 대한 질문

    • 데이터 로더/백엔드에서 사용되는 언어의 유연성이 프론트엔드/UI에도 적용될지, 아니면 데이터 로딩에만 사용자가 원하는 언어를 사용하고 대시보드는 observablejs/observable plot으로 구축하는 패러다임이 유지될지에 대한 질문.
    • ObservableJS가 Quarto에 의해 지원되는 것을 고려할 때, Quarto와 통합된 Observable Framework를 기대할 수 있는지, 아니면 최신 Quarto 버전이 대시보드를 특징으로 하여 Framework의 경쟁자가 되는지에 대한 질문.
    • Evidence.dev와의 비교를 보았고, 마크다운 중심의 개발 경험에서도 유사성을 느꼈지만, Evidence가 주요 차트 라이브러리로 Apache Echarts를 선택한 것을 기억함. Echarts와 ObservableJS/Plot의 장단점에 대한 생각.

  • Observable의 역사적 발전

    • Observable의 역사를 거슬러 올라가면, 대시보드용 정적 사이트 생성기를 만드는 회사에서 시작하여, 중간 관리자에게 데이터 과학을 도입하려고 시도하다가 시장 적합성을 찾기 어려워하고, 결국 자바스크립트에서 탐색적 프로그래밍, 데이터 시각화, 대화형 문서 작성을 위한 단순하고 우아한 도구로 집중됨.

  • Observable Framework 사용에 대한 추가 질문

    • 서버에 있는 Sqlite/Duckdb 데이터베이스 파일에서 슬라이더/필터를 사용하여 한 번에 일부 데이터만 가져오고 표시하는 플롯/테이블을 만들고 싶은 경우, 이러한 상호작용이 어떻게 달성되는지에 대한 질문.
    • Observable Framework가 프론트엔드를 제공한다면, 로그인과 구독 옵션이 있는 웹사이트를 만들기 위해 어떤 인증 라이브러리도 사용할 수 있는지에 대한 질문.
    • 정적 웹 페이지인 경우, 사용자가 차트를 볼 때마다 Dev Tools를 사용하여 시각화 뒤에 있는 데이터 파일을 다운로드할 수 있는지에 대한 질문.
    • Plot의 상호작용(줌, 팬, 대화형 범례, 브러시) 출시 예정일에 대한 질문.
    • 큰 parquet, sqlite, csv 파일을 가지고 있을 때, GitHub이나 Vercel을 통한 CI/CO가 불가능하므로, 이러한 파일과 런타임을 생성하기 위한 호스팅 서비스를 제공할 예정인지에 대한 질문.

  • 유사한 아이디어에 대한 관찰

    • 매우 유사한(일부 측면에서는 매우 다른) 도구를 rysana.com에서 개발 중임.
    • 아이디어가 마치 미적분이 처음 발명되었을 때처럼 아무런 조정 없이 파도처럼 나타남.
    • 여기에는 많은 선행 기술이 있지만, 동시에 다양한 언어를 사용하는 단일 파일 마크다운 '앱'으로의 특정 점프가 동시에 일어나는 것이 흥미로움.
답변달기