<aside> 💎 Rutile.js는 ES표준 기능과 Web API만으로 선언적 UI 개발이 가능한 바닐라 친화 라이브러리입니다.

</aside>

💡 제작 배경

• 저는 회사에서 랜드셀: 가상 부동산 시스템을 개발시, 회사 기술 스택인 바닐라 JS만을 사용하여 한 페이지에서 리렌더링이 잦은 페이지를 개발해야했습니다.
• 기존 개발 방식대로는 이 거대한 프로젝트가 감당하기 어려웠고, React 같은 JSX 기반 라이브러리는 Babel과 같은 트랜스파일러의 도움을 받아야했기에, 회사에 도입하기 어려웠습니다.
• 위의 이유로 저는 별도의 트랜스파일링 없이 브라우저 레벨에서 충분히 해석 가능하고, 모듈화 개발이 가능한 라이브러리를 만들었고, 덕분에 React와 같은 컴포넌트형, 선언형 UI 개발이 가능하게 했습니다.

⭐️ Rutile.js의 특징

• Babel과 같은 트랜스파일러를 사용하지 않기에, JSX 대신 HTML string 기반으로 UI를 개발합니다.
• Virtual DOM을 사용하지 않고 Real DOM을 사용합니다. 때문에 DOM API 이용이 보다 자유롭습니다.
• 전역 상태 관리를 기본으로 지원합니다. (createGlobalState 기능)
• StylePrepare 기능으로 css-in-js을 지원합니다.
• d.ts 파일 내장으로 타입 추론에 큰 도움을 받을 수 있습니다.

💎 Rutile Component

import Rutile from './index.js'

export default function Counter() {

    const [count, setCount] = Rutile.createState(0);
    const onIncrease = () => { setCount(count.getState() + 1) };

    return Rutile.build(`
        <div>
            현재 카운트: ${count.subs()}
            <button onClick="{onIncrease}">+1</button>
        </div>
    `, {
        eventPrepare: {
            onIncrease
        }
    });
}

• Rutile Component는 React Component와 유사한 방법으로 컴포넌트를 작성할 수 있습니다.
• 브라우저 레벨에서 해석이 가능해야하므로 React Component와 몇가지 차이점이 존재하는데 아래와 같은 차이점이 존재합니다.
  • JSX가 아닌 Backtick(`)을 이용하여 HTML string을 작성해야합니다.
  • createState 리턴값의 0번 인덱스는 subs, getState 프로퍼티로 이루어진 객체입니다.
  • 상태값이 변화하는 것을 구독하려면 subs() 함수를 이용합니다.
  • 상태값을 js에서 사용하려면 getState() 함수를 이용합니다.
  • 이벤트 바인딩은 Rutile.build()의 옵션 파라미터를 이용하여 바인딩합니다.

🔥 핵심 기능