Bonsai

Bonsai는 OCaml에서 성능이 뛰어나고 반응형(reactive)인 웹 애플리케이션을 구축하기 위한 UI 라이브러리로, 부분적으로 Elm에서 영감을 받았습니다. 이는 Jane Street 내부의 거의 모든 웹 애플리케이션을 구축하는 데 사용되며, 기업 디렉토리부터 우리의 트레이딩 시스템을 모니터링하고 상호작용하는 도구에 이르기까지 다양합니다. 약간의 상호작용성이 있는 간단한 Bonsai 컴포넌트는 다음과 같습니다:

module Dice = struct
  let faces =
    [ "⚀"; "⚁"; "⚂"; "⚃"; "⚄"; "⚅" ]
...

컴포넌트는 순수 함수형 상태 머신(purely functional state machines)으로 구현되며, 쉽게 조합(composable)할 수 있습니다. 프레임워크 내부의 증분 처리(Incrementalization)는 값이 필요할 때까지 재계산되지 않음을 의미합니다. 이는 단순히 뷰(view)뿐만 아니라 모든 값에 적용됩니다.

왜 Bonsai인가?

다른 웹 프레임워크들은 상태(state), 증분성(incrementality), 그리고 렌더링(rendering)을 UI 컴포넌트라는 하나의 추상화로 묶는 경향이 있습니다. 이와 대조적으로, Bonsai는 상태와 증분성 프리미티브(primitives)를 별도로(a la carte) 조합할 수 있게 해줍니다. 사용자 상호작용 중에 페이지 전체가 다시 렌더링되는 것을 방지하는 것과 동일한 프리미티브를 실시간으로 업데이트되는 데이터셋에 대한 비용이 많이 드는 비즈니스 로직 계산을 증분 처리하는 데에도 사용할 수 있습니다. (만약 React에 익숙하다면, 모든 것이 hooks와 매우 유사한 것을 사용하고 상태가 컴포넌트 계층 구조 외부에서 관리된다고 상상해 보세요.)

상태(state)가 명시적인 컴포넌트와 연관되지 않기 때문에, 사용자가 페이지와 상호작용함에 따라 상태의 생명주기(lifecycle)와 범위(scoping)를 관리할 수 있는 광범위한 API가 제공됩니다. 예를 들어, (탭 인터페이스와 같이) 다른 UI 컴포넌트 내부에 상태를 가진 UI 컴포넌트 모음을 임베드하고 싶을 때, Bonsai는 모든 내부 컴포넌트의 상태를 앱의 최상위 모델(top-level model)로 수동으로 호이스팅(hoist)할 필요 없이 상태 관리를 대신 처리해 줍니다. 상태가 어떻게 구성되는지에 대한 더 많은 예시는 Bonsai의 제작자가 작성한 이 구성 비교 (composition comparison)를 참조하세요.

또한 Bonsai는 OCaml로 작성되었기 때문에, 백엔드(backend)와 프론트엔드(frontend) 모두에서 동일한 언어와 타입(types)을 사용하는 것이 가능합니다. 특히 오류를 줄이기 위해 OCaml의 타입 시스템(type system)을 광범위하게 사용할 때, 이것이 코드의 가독성(legibility)과 대규모 웹 앱의 코드베이스를 관리 가능한 수준으로 유지하는 데 미치는 영향은 아무리 강조해도 지나치지 않습니다. Jane Street의 많은 내부 시스템은 이전에는 터미널 UI만 존재했으나, 이 프레임워크 덕분에 기존의 타입과 비즈니스 로직(business logic)을 웹으로 쉽게 이식할 수 있게 되었습니다.

Bonsai는 또한 강력한 템플릿 언어(templating language), 컴포넌트별 스타일시트(stylesheets) 지원, 그리고 앱 전체에 대한 자동화된 테스트 시스템을 제공합니다.

앱을 일일이 클릭할 필요가 없는 표현력 있는 테스트

Bonsai의 가장 강력한 기능 중 하나는 UI 요소를 프로그래밍 방식으로 조작하고 DOM이 진화하는 과정을 관찰할 수 있는, 현실적인 테스트를 쉽게 작성할 수 있는 능력입니다.

다음 예제에서는 사용자 선택기(user-selector)의 동작을 테스트하고 있습니다. 텍스트 박스에 입력하는 모든 내용은 작은 "hello" 메시지에 추가됩니다.

let%expect_test "shows hello to a specified user" =
  let handle = Handle.create (Result_spec.vdom Fn.id) hello_textbox in
  Handle.show handle;
...

두 개의 expect blocks가 있다는 점에 주목하세요. (이를 통해 주어진 시나리오 내에서 여러 개의 단언 (assertion)을 수행할 수 있으며, 설정 (setup) 또는 헬퍼 (helper) 코드를 해당 시나리오로만 제한할 수 있습니다.)

첫 번째 블록은 UI를 가시화하며, diff가 포함된 두 번째 블록은 프로그래밍 방식으로 텍스트를 입력한 후의 동작을 보여줍니다. Bonsai는 심지어 사용자 입력에 따라 HTML 속성 (attributes)이나 클래스 이름 (class names)이 어떻게 변하는지도 보여줍니다. 테스트에는 모의 서버 호출 (mock server calls)을 포함할 수 있으며, UI뿐만 아니라 UI를 구동하는 상태 (state)의 변경도 포함될 수 있습니다. 이러한 테스트를 통해 브라우저를 열지 않고도 컴포넌트 (component) 전체를 작성할 수 있습니다.

Documentation (문서)

Bonsai Quick Start와 Thinking in Bonsai는 Bonsai에 대한 실습 중심의 소개를 제공하며, 학습을 시작하기에 가장 좋은 곳입니다. 또한 다음과 같은 자료들이 있습니다:

• 일련의 how-to articles.
• Bonsai의 history에 관한 짧은 포스트 시리즈.
• "Building a UI Framework"에 관한 저희 Signals & Threads 팟캐스트의 episode. "Building Tools for Traders"를 다룬 또 다른 episode에서는 Bonsai 사용의 이점 중 일부를 논의했습니다.
• Bonsai로 구축된 예제 웹사이트들이 가득한 library.
• API 문서는 cont.mli 파일에서 확인할 수 있습니다.

Bonsai is really a collection of libraries (Bonsai는 실제로 라이브러리들의 집합입니다)

음, 한 가지 짚고 넘어갈 점이 있습니다. Bonsai 자체, 즉 이 라이브러리는 사실 위에서 설명한 것보다 더 범용적입니다. Bonsai는 범용적인 증분형(incremental), 합성 가능한(composable) 상태 머신(state machines)을 구축할 수 있게 해줍니다. Bonsai_web은 이 핵심 라이브러리를 기반으로 구축되어 상호작용이 가능한 브라우저 기반 UI에 특화되어 있지만, 상호작용이 가능한 터미널(terminal) 기반 UI를 구축하기 위한 Bonsai_term도 있습니다. 심지어 반응형 가상 현실(virtual-reality) UI를 위한 Bonsai_vr 프로토타입이 만우절용으로 나온 적도 있습니다.

Bonsai 라이브러리 전체 제품군:

범용 라이브러리 (General-purpose libraries)

Bonsai는 증분형(incremental), 합성 가능한(composable) 상태 머신(state machines)을 구축하기 위한 라이브러리입니다.

• Testing

브라우저 기반 UI 라이브러리 (Browser-based UI Libraries)

Bonsai_web은 bonsai를 사용하여 상호작용이 가능한 브라우저 기반 UI를 구축하기 위한 라이브러리입니다.

• Examples
• Components
• Testing
• Benchmarking

터미널 기반 UI 라이브러리 (Terminal-based UI Libraries)

Bonsai_term은 bonsai를 사용하여 상호작용이 가능한 터미널 기반 UI를 구축하기 위한 라이브러리입니다.

• Examples
• Components
• Testing

전처리기 (Pre-processors)

Bonsai 웹 애플리케이션은 종종 다음과 같은 전처리기(preprocessors)를 사용합니다:

• ppx_html은 JSX와 유사한 방식으로 HTML을 작성하기 위한 전처리기입니다.
• ppx_css는 CSS를 작성하기 위한 전처리기입니다.