GN⁺: Observable Framework에서 나타난 흥미로운 아이디어들
(simonwillison.net)Observable Framework의 새로운 아이디어
- Observable Framework는 정적 사이트 생성기로, 마크다운과 자바스크립트를 혼합하여 빠르게 로딩되는 인터랙티브 페이지로 컴파일함.
- 실시간으로 파일을 편집하고 저장하여 브라우저에서 즉시 변경 사항을 볼 수 있는 핫 리로딩 서버를 제공함.
- 작업이 완료되면 정적 파일로 변환하여 서버에 배포하거나 Observable의 공유 플랫폼에 직접 배포할 수 있음.
마크다운 내의 자바스크립트
- 마크다운 내의
js
태그가 붙은 코드 블록은 사용자의 브라우저에서 자바스크립트로 실행됨. -
now
라는 특별한 변수는 에포크 이후 현재 시간을 밀리초 단위로 제공하며 지속적으로 업데이트됨. - Observable Framework는 마크다운과 자바스크립트를 하나의 텍스트 문서로 통합하여 인터랙티브 문서를 생성함.
모든 것은 여전히 반응적임
- Observable Framework는 Observable 노트북의 반응성을 유지하며, 의존하는 다른 셀이 변경될 때 자동으로 새로고침됨.
- 폼 입력과 함께 작업할 때 특히 유용하며, 문서에 실시간 인터랙티비티를 쉽게 추가할 수 있음.
사용하는 코드만 포함
- Observable Framework는 개발 모드에서 지연 로딩을 구현하여 사용하는 코드만 로드함.
- 애플리케이션을 빌드하고 배포할 때, 참조된 라이브러리 코드만 jsdelivr CDN에서 자동으로 로드함.
빌드 시간에 데이터 캐시
- Framework는 데이터 로더 메커니즘을 통해 빌드 시간에 대시보드 데이터를 빌드하여 정적 파일로 번들링함.
- 데이터 로더는 어떤 프로그래밍 언어로든 작성할 수 있는 스크립트로, 빌드 시간에 실행되어 출력을 파일로 저장함.
Observable 노트북과의 비교
- Observable Framework는 Observable 노트북의 아이디어와 코드를 재사용하지만, 단일 텍스트 파일로 구성되며 모두 오픈 소스임.
- 표준 자바스크립트를 사용하며, 더 간단한 파일 형식으로 Git에 체크인할 수 있음.
전략의 변화
- Observable Framework는 개발자 도구 공간으로 더 많이 기울어지는 Observable 회사의 전략적 변화를 나타냄.
- Observable Framework는 Observable 노트북의 기술에 대한 존중과 함께, 플랫폼의 독점적인 성격과 무료 계정의 제한 때문에 사용을 제한했던 문제를 해결함.
GN⁺의 의견
- Observable Framework는 데이터 시각화와 대시보드 구축을 위한 새로운 도구로, 개발자들에게 더 나은 협업과 효율성을 제공할 수 있는 잠재력을 가짐.
- 이 플랫폼은 데이터 기반 의사결정을 지원하는 인터랙티브한 문서와 대시보드를 쉽게 만들 수 있게 해주어, 데이터 과학자와 개발자 모두에게 유용할 것임.
- 그러나 Observable Framework의 성공은 개발자 커뮤니티의 채택과 기존 도구들과의 통합 정도에 크게 의존할 것임.
- 비슷한 기능을 제공하는 다른 프로젝트로는 Jupyter Notebook이나 R Shiny가 있으며, 이들과의 비교를 통해 Observable Framework의 장단점을 더 잘 이해할 수 있음.
- Observable Framework를 도입할 때는 기존 데이터 파이프라인과의 호환성, 성능 최적화, 그리고 커뮤니티 지원과 같은 요소들을 고려해야 함.
Hacker News 의견
-
Observable Framework을 마이크 보스톡(Mike Bostock)의 시네마틱 유니버스에서 "어벤져스: 엔드게임"에 비유함.
- d3, Observable, Observable Plot, HTL을 결합하고 새로운 아이디어를 추가한 것으로 설명됨.
-
Observable Framework 사용 시 문제점으로 d3 예제 리소스로서의 기능이 언급됨.
- 해당 프레임워크에서만 실행되도록 설계되어 있어 코드를 그대로 복사-붙여넣기 할 수 없음.
- d3 자체가 사용하기 쉽지 않고 버전 간 호환성 문제가 있지만, 사이트에서 놀라운 그래픽을 찾을 수 있음.
-
Observable Framework를 GitHub 사이트에 쉽게 게시할 수 있다고 언급함.
- 게시 방법에 대한 단계와 샘플 GitHub 액션을 작성한 노트 링크 제공.
-
Observable 노트북을 사용하여 첫 프로젝트를 완성한 경험을 공유함.
- Observable Plot, Arquero, 자바스크립트의 일부 재학습, Rust 기반 시뮬레이터와의 통합 등 다양한 도구 학습에 상당한 에너지가 소모됨.
- 마크다운과 반응성을 사용하여 노트북이 실제로 사용 가능하게 느껴짐.
- Jupyter의 사용자 정의 포맷과 반응성 부재로 인한 버전 관리 문제와 상태 기반 혼란을 해결함.
- Quarto와의 Observable 통합 시도도 있었으나, 이는 불완전하고 조각난 느낌이었음.
- 노트북 작성과 공유에 대해 기쁘고 흥미진진한 경험을 했으며, 앞으로도 첫 선택 도구로 사용할 것임.
-
Observable Framework에 대한 긍정적인 경험을 공유함.
- 인터랙티브한 플롯을 쉽게 설정하고 데이터를 플로팅하는 과정이 매우 간단했다고 언급.
- Python 데이터 로더가 virtualenvs를 사용하도록 설정할 수 있으면 좋겠다는 바람을 표현함.
-
Jupyter 노트북에서 Observable로 이동해야 하는지에 대한 질문이 제기됨.
-
코드 블록 내 'js' 콘텐츠 힌트가 있으면 사용자의 브라우저에서 즉시 실행됨을 설명함.
- 코드를 보여주기 위해서는 'js echo' 힌트를 사용해야 함.
- 기존 앱에 렌더러를 통합할 때 실행을 관리해야 하는 문제를 제기함.
-
Observable이 ClickHouse의 REST API와 잘 통합되며, 데이터베이스를 실시간으로 쿼리하는 예제가 흥미롭다고 언급함.
- 앱이 상호작용적이어야 하므로 데이터를 사전 로딩하고 캐싱하는 것이 유일한 옵션이 아니길 바람.
-
브라우저에서 Framework를 빠르게 시도하고 조작할 수 있도록 Node와 Python 환경이 자동으로 설정된 Codespace devcontainers를 설정함.
-
Observable이 자바스크립트만 지원함으로써 사용자 기반을 제한한다는 의견을 제시함.
- 자바스크립트가 브라우저에서 대화형 디스플레이에 필수적인 언어이지만, 데이터 과학과 데이터 분석에는 Python이나 R에 비해 불편한 언어라고 평가함.