정보실

웹학교

정보실

javascript 작고 빠른 반응형 UI 라이브러리

본문

Sinuous는 선언적 뷰의 명확성과 직접 DOM 조작 성능을 제공합니다. 이 아이디어를 염두에 두고 만들어졌습니다.

  • 작음 : 사용자 정의 요소와 같은 다른 미니 라이브러리에서 사용합니다.
  • 단순함 : 평범한 자바 스크립트 느낌; 템플릿 리터럴, 표준 HTML.
  • 성능 : 80 개 이상의 UI 라이브러리 중 최상위

https://github.com/luwes/sinuous 

https://sinuous.netlify.com/


Counter Example (1.4kB gzip) (Codesandbox) 

Sinuous는 하이퍼 스크립트 (h) 호출을 통해 DOM 요소를 만듭니다. 이를 통해 개발자는 뷰 구문을 자유롭게 선택할 수 있습니다. 태그가 지정된 템플릿을 사용하면 런타임시 html ''태그로 또는 빌드 할 때 sinuous / babel-plugin-htm을 사용하여 HTML을 h 호출로 변환 할 수 있습니다. JSX는 빌드시 @ babel / plugin-transform-react-jsx로 변환해야 합니다.


태그가 지정된 템플릿 


import { observable, html } from 'sinuous';

const counter = observable(0);
const view = () => html`
  <div>Counter ${counter}</div>
`;

document.body.append(view());
setInterval(() => counter(counter() + 1), 1000);


Hyperscript 


import { observable, h } from 'sinuous';

const counter = observable(0);
const view = () => h('div', 'Counter ', counter);

document.body.append(view());
setInterval(() => counter(counter() + 1), 1000);


JSX 


/** @jsx h */
import { observable, h } from 'sinuous';

const counter = observable(0);
const view = () => (
  <div>Counter {counter}</div>
);

document.body.append(view());
setInterval(() => counter(counter() + 1), 1000);


 


동기 


Sinuous의 동기는 Vimeo의 비디오 플레이어에서 사용할 매우 가벼운 UI 라이브러리를 만드는 것이었습니다. 플레이어의 뷰 레이어는 성능 및 번들 크기 측면에서 가장 좋은 innerHTML 및 기본 DOM 작업으로 렌더링 됩니다. 그러나 보다 선언적인 방법으로 작업해야 할 필요성이 커지고 있습니다. 인체 공학적인 경우에도 마찬가지입니다.


기본 요구 사항은 작은 라이브러리 크기, 작은 응용 프로그램 크기 증가, 빠른 TTI, 결정적이지 않지만 우수한 렌더링 성능 (DOM 노드 생성 및 업데이트)입니다.


더 중요한 것은 개발자 경험입니다. Sinuous의 핵심 목표는 가능한 한 적은 특수 구문을 사용하여 금속에 가까이 작업하는 것입니다. html`` 태그는 기본 노드 인스턴스를 반환하며 컴포넌트는 뷰에서 단순한 함수 호출에 지나지 않습니다.


또 다른 필수 요소는 모듈성입니다. Sinuous는 사용한 만큼만 지불하는 방식으로 구성됩니다.


개념 


Sinuous는 잉여와 비슷한 동작을 얻기 위해 작은 실험으로 시작했지만 JSX 대신 템플릿 리터럴을 사용했습니다. HTM은 h 태그로 컴파일 됩니다. Ryan Solid의 dom 표현 + 반응성 라이브러리의 적응 코드는 반응성을 제공합니다.


Sinuous는 반응 라이브러리에서 콜백 함수를 처리하도록 구성된 하이퍼 스크립트 함수를 반환하고 이에 따라 DOM을 업데이트합니다.


브라우저 지원 


Sinuous는 최신 브라우저 및 IE9 +를 지원하지만 IE9 및 IE10에는 Map and Set 컬렉션 유형에 대한 폴리필이 필요합니다.


Sauce Test Status 




페이지 정보

조회 42회 ]  작성일19-10-26 09:13

웹학교