@dooboostore두부가게
StartComponentsSSREcosystem
GitHub
Ecosystem생태계
Fourteen packages, about 85,000 lines of TypeScript — written from scratch, no framework underneath.
패키지 열네 개, TypeScript 약 85,000줄 — 밑바닥부터, 아래에 다른 프레임워크 없이.
14
packages, one philosophy패키지, 하나의 철학
11/14
with zero third-party runtime dependencies서드파티 런타임 의존성 0인 패키지
1
DI (dependency injection) container — browser and serverDI(의존성 주입) 컨테이너 — 브라우저와 서버
85k
lines of TypeScript, no framework underneath줄의 TypeScript, 밑에 프레임워크 없음
How they stack
어떻게 쌓였나
Read from the top: everything
stands on a zero-dependency core.
위에서부터 읽으세요: 전부 의존성 0인
core 위에 서 있습니다.
graph TD simple_web_component["simple-web-component"]:::fw simple_boot_http_server_ssr["simple-boot-http-server-ssr"]:::fw simple_boot_http_server["simple-boot-http-server"]:::fw simple_boot["simple-boot"]:::fw simple_boot_front["simple-boot-front"]:::fw dom_parser["dom-parser"]:::render dom_render["dom-render"]:::render core["core"]:::found core_web["core-web"]:::found core_node["core-node"]:::found simple_web_component_library["simple-web-component-library"]:::lib algorithm["algorithm"]:::lib lib_web["lib-web"]:::lib lib_node["lib-node"]:::lib core --> core_web core --> core_node core --> simple_boot core --> dom_parser core --> algorithm core_web --> dom_render core_web --> simple_web_component core_web --> lib_web core_node --> simple_boot_http_server core_node --> lib_node simple_boot --> simple_web_component simple_boot --> simple_boot_http_server simple_boot --> simple_boot_front dom_render --> simple_boot_front dom_render --> simple_boot_http_server simple_web_component --> simple_boot_http_server_ssr simple_web_component --> simple_web_component_library algorithm --> simple_web_component_library simple_boot_http_server --> simple_boot_http_server_ssr simple_boot_front --> simple_boot_http_server_ssr dom_parser --> simple_boot_http_server_ssr classDef fw fill:#2A0F16,stroke:#FF385C,color:#FFF classDef render fill:#1A1A1A,stroke:#FF6B86,color:#FFF classDef found fill:#141414,stroke:#555,color:#DDD classDef lib fill:#101010,stroke:#333,color:#AAA
Full-stack Framework풀스택 프레임워크Rendering렌더링Foundation기반Libraries라이브러리
Pick your path
어디서 시작할까
What do you want to build?
뭘 만들고 싶으세요?
A UI from standard Web Components표준 Web Components로 UI
Decorator-stack elements, a message bus and a router on one DI container.데코레이터 스택 엘리먼트, 메시지 버스, 라우터 — DI 컨테이너 하나 위에서.
simple-web-componentcore-websimple-boot
A full-stack app with zero re-render SSR다시 안 그리는 SSR 풀스택 앱
The same components render on the server in dom-parser; the browser only wires behavior.같은 컴포넌트를 서버의 dom-parser에서 렌더, 브라우저는 행위만 붙임.
simple-boot-http-server-ssrsimple-web-componentsimple-boot-http-serverdom-parser
A Node API with DI and symbol RPCDI와 Symbol RPC를 갖춘 Node API
The server is the DI container; one interface is called over HTTP or in-process.서버 자체가 DI 컨테이너. 인터페이스 하나를 HTTP로도 프로세스 안에서도 호출.
simple-boot-http-serversimple-bootcore-node
Real DOM on the server, without a browser브라우저 없이 서버에서 진짜 DOM
Window, Document, custom elements and Declarative Shadow DOM — no third-party dependencies.Window, Document, 커스텀 엘리먼트, Declarative Shadow DOM — 서드파티 의존성 없음.
dom-parser
Just a standard library그냥 표준 라이브러리
Observables, a fetch pipeline, validators, expressions, AOP — zero dependencies.Observable, fetch 파이프라인, 검증기, 표현식, AOP — 의존성 0.
core
Charts and controls, ready-made바로 쓰는 차트와 컨트롤
Cartesian, 3D, radar, bubble and stock charts, built with simple-web-component.카테시안, 3D, 레이더, 버블, 주식 차트 — simple-web-component로 만든 것.
simple-web-component-libraryalgorithm
This site eats its own cooking. 이 사이트는 자기 요리를 먹습니다.
Every page you are reading was pre-rendered at build time bydom-parserand woke up in your browser withsimple-web-component.
지금 읽는 모든 페이지는 빌드 때dom-parser로 미리 렌더됐고, 브라우저에선simple-web-component으로 깨어났습니다.
Full-stack Framework풀스택 프레임워크
One DI container, from the browser to the server.브라우저부터 서버까지, 하나의 DI 컨테이너.
@dooboostore/simple-web-component
Decorator-stack Web Components. Methods return values; stacked decorators decide where they go.데코레이터 스택 Web Components. 메서드는 값을 반환하고, 데코레이터가 둘 곳을 정합니다.
@dooboostore/simple-boot-http-server-ssr
Browserless SSR that boots the same app on the server — and skips re-rendering on the client.브라우저 없는 SSR. 서버에서 같은 앱을 부팅하고, 클라이언트는 다시 그리지 않습니다.
@dooboostore/simple-boot-http-server
An HTTP server that is its own DI container — with symbol RPC: one interface, one call.자체가 DI 컨테이너인 HTTP 서버 — Symbol RPC: 인터페이스 하나, 호출 한 번.
@dooboostore/simple-boot
Symbol-based DI with AOP, an intent bus and a router — one object graph, browser or Node.Symbol 기반 DI에 AOP, 인텐트 버스, 라우터 — 브라우저든 Node든 하나의 객체 그래프.
@dooboostore/simple-boot-front
SPA bootstrap on top of simple-boot and dom-render.simple-boot와 dom-render 위의 SPA 부트스트랩.
Rendering렌더링
A DOM for the server and a view engine without a virtual DOM.서버용 DOM과 가상 DOM 없는 뷰 엔진.
@dooboostore/dom-parser
A zero-dependency DOM for Node — enough to run real web components on the server.Node용 무의존성 DOM — 서버에서 진짜 웹 컴포넌트를 돌리기에 충분.
@dooboostore/dom-render
Proxy-based reactive templates that re-render only what changed. No virtual DOM, no build step.바뀐 것만 다시 그리는 프록시 기반 리액티브 템플릿. 가상 DOM도 빌드도 없음.
Foundation기반
A standard library written from scratch, plus platform adapters.밑바닥부터 쓴 표준 라이브러리, 그리고 플랫폼 어댑터.
@dooboostore/core
A zero-dependency standard library: reactive streams, fetch, expressions, validation, AOP.무의존성 표준 라이브러리: 리액티브 스트림, fetch, 표현식, 검증, AOP.
@dooboostore/core-web
Browser adapters: path/hash routers, element apply, events, clipboard.브라우저 어댑터: path/hash 라우터, 엘리먼트 적용, 이벤트, 클립보드.
@dooboostore/core-node
Node.js adapters: files, paths, processes, page downloads.Node.js 어댑터: 파일, 경로, 프로세스, 페이지 다운로드.
Libraries라이브러리
Ready-made pieces built on the stack.스택 위에 지은 완성품들.
@dooboostore/simple-web-component-library
Charts and controls built with simple-web-component.simple-web-component으로 만든 차트와 컨트롤.
@dooboostore/algorithm
Market-data algorithms: candles, trends and trading simulation.시장 데이터 알고리즘: 캔들, 추세, 트레이딩 시뮬레이션.
@dooboostore/lib-web
Canvas tools for the web: image editing, cropping, GPS markers.웹용 캔버스 도구: 이미지 편집, 자르기, GPS 마커.
@dooboostore/lib-node
Node.js utilities.Node.js 유틸리티.
Double-check한 번 더 확인
The numbers above, straight from npm위 숫자들, npm에서 바로@dooboostore/*
Press the button — your browser asks registry.npmjs.org directly.버튼을 누르면 브라우저가 registry.npmjs.org에 직접 물어봅니다.