React로 쓰고, Rust로 내보내다

현대의 인터페이스는 React로 설계됩니다. 그래서 제어 패널부터 발권기까지 아주 많은 전용 장치가 브라우저 엔진을 통째로 싣고 있습니다. 세상에서 가장 크고 가장 많이 공격받는 프로그램 가운데 하나를, 버튼 몇 개와 “Touch Start to begin”이라는 글자를 그리기 위해서 말입니다.

저희는 브라우저 없이 현대적인 디자인 작업 방식을 쓰고 싶었습니다. 그래서 Screen Compiler를 만들었습니다.

화면은 React로 작성합니다

디자이너와 프런트엔드 개발자는 쓰던 도구를 그대로 씁니다. 컴포넌트, props, 디자인 토큰, 쓰던 편집기까지. 화면은 TSX로 작성합니다(아래는 Screen Compiler의 테스트 화면 가운데 하나를 줄인 것입니다).

<Column gap={SPACE_SM} padding={SPACE_LG}>
  <Text id="title">Welcome</Text>
  <Text>Touch Start to begin.</Text>
  <Spacer />
  <Button id="start" onPress={onStart}>Start</Button>
</Column>

내보내는 것은 평범한 Rust입니다

빌드 시점에, 사용자의 컴퓨터나 CI에서, Screen Compiler는 이것을 NoWayOS의 사용자 인터페이스 런타임용 Rust로 바꿉니다.

let n1 = b.text("Welcome")?; // welcome.tsx:17:9 <Text>
let n2 = b.text("Touch Start to begin.")?; // welcome.tsx:18:9 <Text>
let n4 = b.spacer(None)?; // welcome.tsx:20:9 <Spacer>
let n5 = b.button("Start", actions::START)?; // welcome.tsx:21:9 <Button>

모든 줄은 자신이 나온 TSX의 위치를 가리킵니다. 장치는 이 코드만 받습니다. JavaScript 엔진도, 브라우저도, 공격할 웹 페이지도 없습니다. Screen Compiler 자체는 장치에 실리지 않습니다.

정확하게, 아니면 아예 하지 않습니다

짐작으로 변환하는 변환기는 믿을 수 없습니다. Screen Compiler는 선언된 TSX 부분집합을 정확하게 변환하고, 그 밖의 것은 모두 파일, 줄, 열을 밝히며 거부합니다. 근사치로 처리하는 일은 없습니다. 생성하는 Rust에는 unsafe도, unwrap도, panic도 없습니다.

그런 다음 변환된 모든 화면을 NoWayOS의 렌더러로 그려, 승인된 이미지와 픽셀 단위로 비교합니다. 픽셀 하나라도 움직이면 빌드가 알려 줍니다.

현재 상태

Screen Compiler는 개발 중입니다. 첫 번째 부분집합은 만들어졌고, 다음 부분집합을 진행하고 있습니다. MIT 라이선스의 오픈 소스이며, GitHub에서 NoWayOS와 나란히 공개되어 있습니다. React로 설계하고 중요한 장치를 만드는 팀이라면, 연락을 기다리겠습니다.