가상(Virtual)은 버리고,
진짜(Real) 반응성만 남겼습니다.
공장의 데이터는 1초에도 수십 번 변합니다.
SolidJS는 변화가 필요한 단 하나의 숫자만 직접 업데이트합니다.
The Evolution of Efficiency
우리는 왜 수많은 선택지를 거쳐 SolidJS에 도달했는가?
jQuery
"DOM 직접 제어의 시대"
간단한 웹사이트에는 좋았지만, 데이터가 복잡해지면 코드가 뒤엉키는 '스파게티 코드' 문제가 발생합니다. 대규모 관제 시스템 유지보수에는 부적합했습니다.
AngularJS
"양방향 바인딩의 시대"
프레임워크의 구조를 갖췄지만, 데이터 변화를 감지하기 위한 'Dirty Checking' 방식이 너무 무거웠습니다. 센서 데이터가 많아지면 브라우저가 느려집니다.
React & Vue.js
"가상 돔(Virtual DOM)의 시대"
혁신적이었습니다. 하지만 메모리 상에 가상의 화면을 만들고 비교(Diffing)하는 과정이 필요합니다. 1ms가 급한 스마트팩토리에서는 이 '비교 연산'조차 낭비입니다.
SolidJS (The Compiler)
"컴파일러와 반응형의 완성"
가상 돔을 버렸습니다. 코드를 미리 컴파일하여, 데이터가 변하면 해당 DOM 노드만 직접(Direct) 타격합니다.
Svelte의 간결함에 React의 유연함을 더해, 이론상 가장 빠른 성능을 구현했습니다.
Top Performance
JS Framework Benchmark에서 압도적인 1위를 기록했습니다. 무거운 런타임 없이 바닐라 JS에 근접한 속도를 냅니다.
Fine-Grained Reactivity
컴포넌트 전체를 다시 그리지 않습니다. 텍스트 노드, 스타일 속성 등 변경된 부분만 정밀하게 타격하여 수정합니다.
Small Bundle Size
컴파일 후 크기가 매우 작습니다. 네트워크 환경이 좋지 않은 공장 내부망에서도 즉각적인 로딩 속도를 보장합니다.
Why SolidJS?
전 세계가 사랑하는 React, 혁신적인 Svelte.
하지만 극한의 성능이 필요한 제조 현장에서는 '최적의 도구'가 다릅니다.
"데이터 하나가 변하면, 가상 돔(Virtual DOM)을 만들고 전체 트리를 비교(Diffing)합니다. 일반 웹엔 충분하지만, 실시간 관제 시스템에선 이 비교 연산조차 낭비입니다."
"컴포넌트는 오직 한 번만 실행됩니다. 그 이후엔 데이터와 연결된 화면 조각만 구독하여, 값이 변하는 순간 그곳만 즉시 업데이트합니다."
vs SvelteThe Other Compiler
Svelte 역시 가상 돔이 없는 훌륭한 도구입니다.
"Svelte는 훌륭하지만, 반응성이 컴포넌트 내부에 묶여 있습니다.
SolidJS는 JSX를 사용하여 TypeScript 호환성이 더 뛰어나며, 컴포넌트 경계를 넘어 데이터(Signal) 단위로 작동하는 'Fine-Grained Reactivity' 덕분에 복잡한 대시보드에서 더 예측 가능한 성능을 보여줍니다."
Reactive Primitives
SolidJS의 createSignal은 Rust 백엔드에서 오는 Tauri 이벤트와 완벽하게 결합됩니다.
- Rust에서 센서 데이터 수신 (WebSocket/Serial)
- Tauri가 프론트엔드로 이벤트 방출 (Emit)
- SolidJS Signal이 UI를 즉시 갱신
const [temp, setTemp] = createSignal(0);
// Listen to Rust backend
listen('sensor-data', (e) => {
// Updates DOM directly, no diffing
setTemp(e.payload.value);
});
return (
<div>
Current Temperature:
{temp()}°C
</div>
);