preactjs - react의 subset, simple, lightweight library

Fast 3kB alternative to React with the same modern API

관련 자료

https://preactjs.com/

https://github.com/developit/preact/

https://www.slant.co/versus/10513/15409/~react_vs_preact

A different kind of library.

Closer to the Metal

Preact provides the thinnest possible Virtual DOM abstraction on top of the DOM. The web is a stable platform, it's time we stopped reimplementing it in the name of safety.

Preact is also a first-class citizen of the web platform. It diffs Virtual DOM against the DOM itself, registers real event handlers, and plays nicely with other libraries.

Small Size

Most UI frameworks are large enough to be the majority of an app's JavaScript size. Preact is different: it's small enough that your code is the largest part of your application.

That means less JavaScript to download, parse and execute - leaving more time for your code, so you can build an experience you define without fighting to keep a framework under control.

Big Performance

Preact is fast, and not just because of its size. It's one of the fastest Virtual DOM libraries out there, thanks to a simple and predictable diff implementation.

It even includes extra performance features like customizable update batching, optional async rendering, DOM recycling, and optimized event handling via Linked State.

Portable & Embeddable

Preact's tiny footprint means you can take the powerful Virtual DOM Component paradigm to new places it couldn't otherwise go.

Use Preact to build parts of an app without complex integration. Embed Preact into a widget and apply the same tools and techniques that you would to build a full app.

Instantly Productive

Lightweight is a lot more fun when you don't have to sacrifice productivity to get there. Preact gets you productive right away. It even has a few bonus features:

• props, state and context are passed to render()
• Use standard HTML attributes like class and for
• Works with React DevTools right out of the box

Ecosystem Compatible

Virtual DOM Components make it easy to share reusable things - everything from buttons to data providers. Preact's design means you can seamlessly use thousands of Components available in the React ecosystem.

Adding a simple preact-compat alias to your bundler provides a compatibility layer that enables even the most complex React components to be used in your application.

preact의 목표

Preact는 몇 가지 주요 목표를 달성하는 것을 목표로합니다.

성능 : 빨리고 효율적으로 렌더링
크기 : 작은 크기, (3.5kb 약) 경량
효율성 : 효과적인 메모리 사용 (재활용, GC 쓰레기 방지)
이해 : 코드베이스를 이해하는 데 몇 시간 이상 걸리지 않아야합니다.
호환성 : Preact는 반작용 API와 대부분 호환되도록하는 것을 목표로하고있다. preact-compat은 가능한 한 React와 많은 호환성을 달성하려고 시도합니다.

• A component model for building composable UI
• Routing
• Layouts
• Forms and validation
• Dependency injection
• JavaScript interop
• Live reloading in the browser during development
• Server-side rendering
• Full .NET debugging both in browsers and in the IDE
• Rich IntelliSense and tooling
• Ability to run on older (non-WebAssembly) browsers via asm.js
• Publishing and app size trimming

Babel - Use next generation JavaScript, today

(javascript compiler)

 현재 최신의 브라우저에서 지원되지 않는 ECMAScript 6 문법으로 작성된 자바스크립트를 변환, 컴파일하여 브라우저가 인식할 수 있는 스크립트를 만들어 주는 라이브러리다.

[ 그림 1 ] Babel 변환 예

webpack - module bundler

 자바스크립트의 모듈을 묶어주는 node기반 툴이다.

Respond.js - IE 6 ~ 8 에서 미디어 쿼리를 지원

IE 6 ~ 8에서는 미디어 쿼리를 지원하지 않지만 'Respond.js'을 이용하면 부분적으로 나마 지원하게 할 수 있다. 아래와 같이 코드를 수정하면 된다.

그리고 실제 미디어 쿼리에 맞는 CSS 파일을 아래와 같이 HTML에 추가하면 된다.

Backbone + Chaplinjs 채플린

Backbone으로 큰 규모의 SPA를 구현하기 위해 지원하는 프레임워크가 Chaplinjs 프레임워크다. 

Amazing Web Library

АWeb library is a powerful, compact and incredibly fast and convenient javascript-library that combines the most advanced technologies to create professional web sites on pure html. Site development will be similar to putting together a puzzle. Beautifully designed visual components cover most of the requirements of the modern internet. Smooth and impressive animations will amaze your users. Mastering the library does not take much of your time, but you will feel the benefit from its use immediately.

애니메이션 라이브러리이자 소량의 Visual Component가 내재되어 있다.

Moment.js

( 시간이나 날짜 관련 라이브러리 )

시간이나 날짜 관련 라이브러리다.

웹 페이지에서 언어에 따르는 날짜 포맷을 지원해야 한다면 Moment.js를 사용해 보면 좋을 것이다.