Cloudflare Workflows, 코드에서 다이어그램으로: AST 기반 시각화 도입
Cloudflare Workflows의 코드 기반 워크플로우(Workflow)를 시각적으로 표현하기 위해 AST(Abstract Syntax Trees) 기반 다이어그램을 도입
동적 실행 모델(Dynamic Execution Model)을 분석하여 병렬 실행 및 종속성 관계를 파악, 정확한 다이어그램 생성
Rust 기반의 Worker를 활용하여 minified JS 코드를 파싱하고, AST 노드를 그래프 형태로 변환
향후 실시간 추적, 오류 발견, 로컬 개발 환경 지원 등 디버깅 기능 강화(Debugging Feature Enhancement)를 목표로 함
AST(Abstract Syntax Trees)를 활용한 코드 분석
Cloudflare는 Workflows 코드를 시각화하기 위해 AST(Abstract Syntax Trees)를 활용하여 코드 구조를 분석한다. 특히, minified된 JavaScript 코드를 정확하게 파싱하기 위해 JavaScript Oxidation Compiler(OXC)의 oxc-parser를 선택했다.
배경: minified된 코드는 가독성이 떨어지므로, 정확한 파싱을 위해 특화된 도구 필요
구현: Rust로 작성된 Worker를 통해 AST 노드를 생성하고, 이를 그래프 형태로 변환
결과: 복잡한 코드 구조를 시각적으로 표현하여 디버깅 및 이해도를 높임
동적 실행 모델(Dynamic Execution Model) 분석
Cloudflare Workflows는 동적 실행 모델(Dynamic Execution Model)을 채택하여, 코드 내 await, Promise.all() 등의 비동기 연산을 처리한다. 이는 코드의 병렬 실행을 가능하게 하지만, 다이어그램 생성에는 복잡성을 더한다.
문제점: 실행 순서가 코드 작성 순서와 다를 수 있어, 정확한 시각화 어려움
해결책: 각 노드에 starts, resolves 필드를 추가하여 실행 순서 및 종속성 관계 추적
영향: 병렬 실행(Parallel Execution) 및 종속성(Dependency) 관계를 시각적으로 표현하여, 워크플로우의 흐름을 직관적으로 파악 가능
Rust 기반 Worker의 역할
Cloudflare는 minified된 JavaScript 코드를 파싱하고, AST 노드를 그래프 형태로 변환하기 위해 Rust 기반의 Worker를 사용한다. Rust는 WebAssembly를 지원하여 Worker 환경에서 효율적인 코드 실행을 가능하게 한다.
장점: 높은 성능(High Performance)과 안정성(Stability), 그리고 WebAssembly를 통한 이식성
과정: minified JS를 AST 노드로 변환 후, 그래프 형태로 변환하여 다이어그램 생성
결론: Rust Worker는 코드 시각화의 핵심 엔진 역할을 수행하며, 향후 기능 확장의 기반이 됨
다이어그램 렌더링의 기술적 과제
워크플로우 다이어그램을 렌더링하기 위해 Cloudflare는 Step과 Function 간의 관계를 정확하게 추적하고, 다양한 코드 패턴을 처리해야 했다. 특히, 함수 내에서 step.do()가 호출되는 경우와 같은 복잡한 상황을 고려해야 했다.
문제: 함수 호출 관계, 루프, 조건문 등 다양한 코드 패턴 처리
해결: 각 노드 타입별로 가능한 모든 사용 사례를 고려하여, Node Type 정의 및 API 설계
결과: 개발자가 워크플로우의 흐름을 쉽게 이해하고, 디버깅할 수 있는 시각적 도구 제공
