이 대화형 튜토리얼을 구현하기 위한 핵심 기술 요소는 다음과 같습니다. 첫째, WebAssembly (Wasm)는 고수준 언어 컴파일을 위한 타겟으로, Ruby 인터프리터를 Wasm 바이너리로 변환하여 웹 환경에서 실행 가능하게 합니다. 둘째, WASI (WebAssembly System Interface)는 Wasm 모듈이 파일 시스템이나 네트워킹과 같은 호스트 자원에 접근할 수 있도록 하는 인터페이스를 제공하여, Wasm의 기본 보안 샌드박스 제약을 극복합니다. 셋째, Ruby WASM 프로젝트는 Ruby 런타임을 WebAssembly 환경에 맞춰 패키징하고, 필요한 Gem들을 번들링하며, Wasm 환경과 호환되지 않는 Ruby 기능을 패치하거나 비활성화합니다. 넷째, Wasmify Rails는 Rails 애플리케이션을 WebAssembly 환경에 맞게 패키징하고, 필요한 설정과 패치를 적용하여 브라우저에서 올바르게 동작하도록 합니다.
이 외에도 브라우저 내에서 Rails 서버와 데이터베이스를 구동하는 기술적 도전 과제와 해결책이 제시됩니다. PGlite와 같은 WebAssembly로 컴파일된 데이터베이스 엔진을 활용하여 브라우저 내에서 데이터베이스를 실행하며, Web Containers 기술을 통해 브라우저 탭 내에서 미니 운영체제처럼 작동하는 개발 환경을 구축합니다. Web Containers는 NodeJS 런타임, 가상 파일 시스템, 네트워크 프록시 (Service Worker) 등을 제공하여 Rails 애플리케이션이 브라우저에서 완벽하게 작동하도록 지원합니다. 특히, ExpressJS 서버와 Rails 서버 간의 통신(Bridge) 구현 방식과 Rails 콘솔(Console)의 브라우저 내 구현 방식 등 구체적인 기술적 세부 사항들이 설명됩니다.
사용자 인터페이스는 StackBlitz의 오픈소스 프레임워크인 Tutorial Kit을 활용하여 구축되었으며, 이는 Web Containers를 기반으로 하여 Rails on Wasm 설정을 쉽게 통합할 수 있게 합니다. 이 모든 요소들이 결합되어 사용자는 브라우저에서 라이브 터미널과 실행 중인 Rails 애플리케이션 미리보기를 통해 대화형 학습 경험을 할 수 있습니다.