페이지 위의 패리티

raytracer 는 checksum 을 인쇄하고 이미지를 쓰는 파일로 존재하고 있었다. 세 backend 가 그 모든 바이트에서 일치했다. 그런 프로그램의 다음의 자연스러운 자리는 브라우저 탭이다. 그림을 그저 바라볼 수 있는 곳. 그리고 playground 에는 기반이 이미 있었다. Wasm 모듈을 읽어들이는 페이지, extern fn 선언을 실제 DOM 조작에 배선하는 작은 glue 파일, 그것을 통해 화살표 키를 읽는 2048. frontend FFI 에 없던 것은 화면에 픽셀을 놓는 수단뿐이었다. 그 어휘는 모두 텍스트였다 —— 요소를 얻고, textContent 를 설정하고, 클릭과 키를 듣는다. 카운터와 문자로 그리는 타일 게임에는 충분. 이미지에는 무력.

두 개의 함수와, 0 의 컴파일러 변경

빠져 있던 면은 두 개의 함수임이 판명됐다. dom_canvas_fill_style 은 CSS 문자열에서 canvas 컨텍스트의 칠 색을 설정하고, dom_canvas_fill_rect 는 사각형을 채운다. 픽셀의 색을 계산해 낸 렌더러는 전자를 rgb(r,g,b) 로, 후자를 1×1 사각형으로 부른다. JavaScript 쪽에서는 glue 가 canvas 의 2d 컨텍스트를 지연 획득해 요소에 캐시한다. 보고할 가치가 있는 것은 컴파일러 쪽에서 무엇이 필요했는가다. 아무것도 필요 없었다. 두 번째 extern 은 다섯 인자를 받는다 —— 핸들과 네 개의 정수 —— 그리고 한두 인자의 import 를 위해 만들어진 extern 기계는 다섯 인자의 호출 사슬을 일절의 변경 없이 컴파일했다. 선언은 contrib 라이브러리에 들어가고, 두 구현은 glue 에 들어가고, 언어는 처음부터 다 되어 있었다.

브라우저를 열기 전에 검증 완료

브라우저 페이지의 테스트는 보통 브라우저를 여는 것을 뜻한다. 이 FFI 의 형태는 더 엄밀한 방식을 허락했다. glue 를 스텁하는 headless 하니스 —— 모든 canvas 호출은 그려지는 대신 포획되고, 모든 칠 색은 파스되고, 모든 1×1 사각형은 픽셀 그리드에 기록된다 —— 그리고 그 그리드를 native example 이 낳는 것과 같은 이미지 형식으로 써낸다. 비교는 “올바르게 보이는가” 가 아니라 cmp 다. 포획한 FFI 호출에서 재구축한 파일은 C backend 가 쓴 파일과 바이트 단위로 동일. 5,184 번의 사각형 호출, 픽셀당 한 번, 그 어느 것도 어긋나지 않았다. FFI 경로 전체 —— Wasm 의 산술, CSS 색을 위한 문자열 구축, import 의 경계 —— 가 페이지가 한 번도 로드되기 전에 ground truth 에 대해 검증되었다.

그림 아래의 checksum

페이지는 내가 그림 자체보다 소중히 여기는 하나의 세부와 함께 공개되었다. canvas 아래, status 줄이 렌더의 Adler checksum 을 인쇄한다 —— 그리고 그것은 인터프리터가 인쇄하는 것과 같은 수, C backend 가 인쇄하는 것과 같은 수, headless 하니스가 검사하는 것과 같은 수다. 테스트 스위트는 여든 릴리스에 걸쳐 backend 들을 서로 고정해 왔다. 그 규율은 평소 아무도 보지 않는 CI 출력에 산다. 여기서는 그것이 공개 페이지에, 렌더링된 이미지 아래에, 한 줄의 텍스트로 앉아 있다. 이 그림은, 당신의 머신에서, 당신의 브라우저에서, 마지막 비트까지 같은 그림이다. 바라볼 수 있는 것으로서의 패리티. 렌더가 96×54 에 CSS 확대인 것은 안의 모든 float 가 아직 box 되고 메모리가 아직 고정이기 때문이다 —— 두 편 전의 절벽은 움직이지 않았다. 이 페이지를 더 크게 그리고 싶다는 욕구가, 이제 메모리 성장 작업을 할, 서 있는 구체적인 이유가 되었다. 다음 dogfood 로의 식욕을 만들며 끝나는 dogfood 는 방법이 의도대로 작동하고 있다는 것이다.