Show HN: Coi – WASM으로 컴파일되며 React/Vue를 능가하는 언어

저는 보통 C++로 웹 게임을 제작하지만, 제가 하는 작업에 Emscripten을 사용하는 것은 항상 과하다는 느낌을 받았습니다. 단순히 캔버스(Canvas)에 무언가를 렌더링하고 기본적인 UI를 처리하기 위해 전체 POSIX 에뮬레이션이나 거대한 표준 라이브러리(Standard Library)가 필요하지는 않기 때문입니다.

제가 해결하고 싶었던 주요 문제는 JS/WASM 상호 운용성(Interop) 병목 현상이었습니다. 모든 호출에 표준 글루 코드(Glue code)를 사용하는 대신, 저는 명령(Command) 및 이벤트(Event) 버퍼를 사용하는 공유 메모리(Shared Memory) 아키텍처로 모든 것을 옮겼습니다.

작동 방식은 WASM 내의 모든 명령을 배치(Batch) 처리한 다음 JS에 단일 "플러시(Flush)" 신호만 보내는 것입니다. 그러면 JS 측에서 공유 메모리로부터 모든 데이터를 한 번에 직접 읽어옵니다. 이는 훨씬 더 효율적입니다. 캔버스에 10,000개의 사각형을 렌더링하는 벤치마크를 실행해 본 결과 차이가 엄청났습니다. Emscripten은 약 40 FPS를 기록한 반면, 제 설정은 100 FPS를 기록했습니다.

하지만 C++로 DOM 로직을 작성하는 것은 고통스럽기 때문에 Coi를 만들었습니다. Coi는 컴파일 타임에 변경 사항을 정적 분석하여 O(1) 반응성(Reactivity)을 가능하게 하는 컴포넌트 기반 언어입니다. 전통적인 프레임워크와 달리 가상 DOM (Virtual DOM) 오버헤드가 없습니다. 컴파일러가 상태 변경을 명령 버퍼 내의 특정 핸들(Handle)로 직접 매핑합니다.

최근 1,000행 테이블을 대상으로 React 및 Vue와 비교 벤치마크를 수행했습니다. Coi는 "디핑(Diffing)" 단계를 완전히 피하고 브리지 교차(Bridge crossings)를 최소화하기 때문에 행 생성, 행 업데이트 및 요소 교체에서 가장 뛰어난 성능을 보였습니다. 번들 크기 또한 세 가지 중 가장 작았습니다.

이 아키텍처의 가장 멋진 점 중 하나는 표준 라이브러리가 작동하는 방식입니다. 새로운 브라우저 API(Web Audio 또는 새로운 Canvas 기능 등)를 지원하고 싶다면, WebCC 스키마 파일에 정의만 추가하면 됩니다. Coi 컴파일러를 다시 컴파일하면, 언어는 해당 API에 접근할 수 있는 새로운 표준 라이브러리 함수를 자동으로 갖게 됩니다. 수동으로 래핑(Wrapping)하는 과정이 전혀 필요 없습니다.

저는 이 프로젝트가 진행되는 방식이 정말 자랑스럽습니다. 커스텀 WASM 스택의 성능과 실제로 작성할 때 느낌이 좋은(적어도 저에게는 그렇습니다 :P) 구문(Syntax)을 결합했습니다. 또한, 중간 단계가 C++이기 때문에 서버 측에서도 작동할 수 있도록 만드는 방안을 검토 중이며, 이를 통해 전체 스택(Stack)에 걸쳐 컴포넌트를 공유할 수 있게 될 것입니다.

예시 (Coi 코드):

component Counter(string label, mut int& value) {

def add(int i) : void {
value += i;
}
...

}

component App {
mut int score = 0;

style {
.app {
padding: 24px;
...

}

app {
root = App;
title = "My Counter App";
description = "A simple counter built with Coi";
lang = "en";
}

라이브 데모: https://io-eric.github.io/coi

Coi (언어): https://github.com/io-eric/coi

WebCC: https://github.com/io-eric/webcc

여러분의 의견을 듣고 싶습니다. 아직 완성되려면 멀었지만, 사이드 프로젝트로서 정말 기대가 됩니다 :)