러스트 (그리고 모든 언어)에서 웹어셈블리를 더 좋게만들기

러스트 (그리고 모든 언어)에서 웹어셈블리를 더 좋게만들기

2018년 웹 언어를 목표로하는 러스트 커뮤니티는 이를 위해 다양한 노력을 하고있다. 그리고 이를 실현시키기 위해 러스트로 작성한 웹 어셈블리 도구들을 만들고 있다. 자바스크립트와 오브젝트를 주고 받고, npm 모듈로 패키징 할 수 있으며, ES 모듈과의 호환까지. wasm-bindgen, wasm-pack 이 어떤 원리로 무슨 일을 해주고 있는지 알아본다. 그리고 이러한 노력들은 러스트 이외의 언어까지 지원할 수 있는 가능성을 넓혀주고 있다.

프로그래시브 웹앱 성능에 대한 리엑트, 프리엑트 케이스 스터디 : Treebo

프로그래시브 웹앱 성능에 대한 리엑트, 프리엑트 케이스 스터디 : Treebo

프론트엔드 리엑트 성능 케이스 스터디. Treebo는 장고로 만들어져 있던 기존 모바일 사이트의 성능을 개선하며 얻은 경험을 케이스 스터디로 공유한다. 프로그래시브 웹 앱의 성능 감사 포인트로 First Meaningful Paint, First Interactive, Consistenly Interactive 등을 기준으로, 서버사이드 렌더링, 코드 분할, HTML 스트리밍, 스타일 인라이닝 등의 적용이 어떻게 영향을 미치는지 알아본다.

웹 컴포넌트(5) — lit-html로 리엑트처럼 코딩하기

웹 컴포넌트(5) — lit-html로 리엑트처럼 코딩하기

커스텀 엘리먼트와 쉐도우 돔 그리고 lit-html을 사용하여 웹 컴포넌트 TODO앱을 만들어 본다. 이 방식으로 여러분은 익숙한 리엑트와 같은 방식으로 웹 컴포넌트 앱을 작성할 수 있다. lit-html은 단지 25kb를 차지할 뿐이며, 모든 코드는 #useThePlatform의 모토를 따라 브라우저 표준을 따른다.

웹 컴포넌트(4) — 템플릿 엘리먼트(Template Element)와 HTML Imports

웹 컴포넌트(4) — 템플릿 엘리먼트(Template Element)와 HTML Imports

웹 컴포넌트의 표준으로서 템플릿 엘리먼트(Template Element)와 HTML Import가 필요한 이유, 그리고 이 두 표준이 어려움을 겪고 있는 사연. 이에 새로이 대두되고 있는 ES6 템플릿 리터럴을 이용한 솔루션을 소개한다. 이 이야기를 자바스크립트에서 HTML 템플릿의 변화로 이야기한다.