Bonsai - Jane Street의 UI 라이브러리

Bonsai는 Elm에서 일부 영감을 받아 OCaml로 고성능 반응형 웹 애플리케이션을 만드는 UI 라이브러리로, Jane Street의 사내 웹 애플리케이션 대부분에 사용됨 컴포넌트를 순수 함수형 상태 머신으로 구현하며, 상태·증분 계산·렌더링을 하나로 묶지 않고 필요한 기본 요소를 조합할 수 있음 관련 상태가 바뀔 때만 값을 다시 계산하며, 이 증분화는 화면뿐 아니라 실시간 데이터셋을 처리하는 고비용 비즈니스 로직에도 적용됨 백엔드와 프론트엔드에서 동일한 OCaml 타입과 비즈니스 로직을 사용할 수 있어 기존 터미널 UI를 웹으로 옮기고 대규모 코드베이스를 관리하기 쉬움 DOM 변화, 상태, 모의 서버 호출을 프로그래밍 방식으로 검증하는 expect 테스트를 지원해 브라우저를 열지 않고도 컴포넌트 전체를 개발할 수 있음 상태 머신과 증분 계산 Bonsai 컴포넌트는 쉽게 조합할 수 있는 순수 함수형 상태 머신으로 구현됨 프레임워크 내부의 증분화는 관련 상태가 변할 때만 값을 다시 계산하며, 뷰에 한정되지 않고 모든 값에 적용됨 예제 주사위 컴포넌트는 Bonsai.state로 현재 면과 갱신 함수를 만들고, 버튼 클릭 시 무작위 면을 선택해 화면을 갱신함 Bonsai가 상태를 다루는 방식 일반적인 웹 프레임워크가 상태, 증분 계산, 렌더링을 UI 컴포넌트 하나에 결합하는 것과 달리, Bonsai는 이 요소들을 개별 기본 요소로 조합하게 함 페이지 전체의 재렌더링을 막는 기본 요소를 실시간 갱신 데이터셋의 고비용 비즈니스 계산을 증분화하는 데도 사용할 수 있음 React에 비유하면 거의 모든 것이 훅과 유사한 방식을 사용하면서, 상태는 컴포넌트 계층 밖에서 관리되는 구조임 상태가 명시적 컴포넌트에 연결되지 않으므로 사용자 상호작용에 따른 상태의 수명 주기와 범위를 관리하는 광범위한 API를 제공함 탭 인터페이스처럼 상태를 가진 여러 UI 컴포넌트를 다른 컴포넌트 안에 넣어도 내부 상태를 최상위 모델로 수동 승격할 필요가 없음 상태 조합 방식은 Bonsai 제작자가 작성한 composition comparison에서 비교해 볼 수 있음 OCaml을 프론트엔드와 백엔드에 적용 동일한 언어와 타입을 백엔드와 프론트엔드에서 함께 사용할 수 있음 OCaml 타입 시스템을 폭넓게 활용해 오류를 줄이고, 대규모 웹 애플리케이션 코드베이스의 가독성과 관리 가능성을 높임 Jane Street에서는 기존 타입과 비즈니스 로직을 ...