Fork me on GitHub

2017-10-17 JS: Vue 2.5.0, E2E 테스트 프레임워크, Glimmer의 Binary Template

Translator: U-Yeong Ju Edit on GitHub See Revisions

JSer.info #353 - Vue 2.5.0이 릴리즈 됐습니다.

전부터 예고(Upcoming TypeScript Changes in Vue 2.5 – The Vue Point – Medium)된 TypeScript 관련 타입이 개선됐습니다.
또, React 16에 도입된 Error Boundaries와 같이 에러를 잡을 수 있는 errorCaptured hook이 추가 됐습니다.


E2E 테스트 프레임워크인 TestCafe v0.18.0이 릴리즈 됐습니다.

Angular를 대응한 testcafe-angular-selectorst.getBrowserConsoleMessages API가 추가됐습니다.
t.getBrowserConsoleMessages는 테스트를 실행한 브라우저 콘솔에 출력된 정보를 취득할 수 있는 API로, 라이브러리 등을 실행했을 때 deprecated warning이 발생 시 테스트를 실패하도록 작성하는 등의 경우에 사용할 수 있습니다.

{
    error: ["Cannot access the 'db' database. Wrong credentials.", '...'], // error messages
    warn: ['The setTimeout property is deprecated', '...'],                // warning messages
    log: ['[09:12:08] Logged in', '[09:25:43] Changes saved', '...'],      // log messages
    info: ['The application was updated since your last visit.', '...']    // info messages
}

이어서 E2E 테스트 프레임워크인 Cypress가 OSS로 공개됐습니다.
Cypress는 Time Travel, Automatic waiting 등의 기능을 제공하는 E2E 테스트 프레임워크입니다. 특히 Time Travel은 디버깅을 한결 수월하게 합니다.
또, 동명의 서비스인 cypress.io 대쉬보드와 연동도 가능합니다.


Ember.js - Glimmer.js Progress Report에는 독립적으로 사용할 수 있게 된 템플릿 엔진 Glimmer의 향후 변경에 대해 작성돼 있습니다.

태그를 <Button /> 처럼 Capital 스타일로 작성하도록 변경되고 요소의 프로퍼티와 속성을 @로 구별할 수 있도록 개선되며 또, Portal 지원하는 등 다양한 변경 내용이 소개돼 있습니다.
이 중에서도 장기적으로 Binary Templates이라고 불리는 구조를 도입하는 것에 대해 작성돼 있는데 주목해볼만 합니다.

Glimmer 는 템플릿의 컴파일과 런타임, 두 가지의 역할을 갖고 있습니다.
이번 변경에서 템플릿을 (최종적으로) 바이너리로 출력하고 런타임은 이 바이너리를 불러들여 DOM을 조립해 그릴 수 있도록 한다는 내용이 언급돼 있습니다.

Glimmer's Optimizing Compiler | Chad Hietala | Pulse | LinkedIn에는 그 Glimmer VM 구조에 관해 작성돼 있습니다.

현재 Glimmer 는 템플릿을 JSON 형식으로 컴파일하고 런타임에서 Opcode와 정수로 표현된 템플릿 정보를 만들어 이 정보를 바탕으로 실제 DOM을 구축합니다.

템플릿:

<h1>Hello World</h1>

컴파일러가 템플릿을 JSON 형식의 중간 표현(IR)로 변환합니다(현재의 Glimmer VM이 컴파일하는 것은 이 JSON 표현까지 입니다).

[
  ["open-element", "h1", []],
  ["text", "Hello World"],
  ["close-element"]
]

런타임에서 읽어 Opcode와 정수로 표현된 템플릿 정보를 만듭니다.

// OpCode
const Program = [25, 1, 0, 0, 22, 2, 0, 0, 32, 0, 0, 0]
const ConstantsPool = {
  strings: [... h1, Hello World]
  ...
}

마지막에 런타임이 템플릿 정보를 바탕으로 DOM을 생성 및 조립합니다.

APPEND_OPCODES.add(Op.OpenElement, (vm, { op1: tag }) => {
  vm.elements().openElement(vm.constants.getString(tag));
});

미래의 Glimmer 의 Binary Template에서는 컴파일러가 템플릿을 바이너리 형식(.gbx라는 파일 형식)으로 컴파일 합니다.런타임은 바이너리를 ArrayBuffer](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer "ArrayBuffer")로 읽어 템플릿 정보를 만들어 DOM을 생성 및 조립하며 파일 크기와 파싱 속도 등에 개선이 있을 것으로 기대하고 있습니다.
한편, HTML이나 JavaScript에는 바이너리를 저장할 수 없기 때문에 바이너리 파일을 link rel=prefetch나 HTTP/2 Push 등을 이용해 먼저 불러드릴 수 있는 방안도 함께 고민이 필요합니다.

많은 템플릿 엔진은 JSON이나 JavaScript 형식으로 템플릿을 컴파일합니다.
웹 애플리케이션의 사이즈가 점점 커지게 된 현재엔 JavaScript 파일의 파싱 시 시간이나 파일 사이즈가 동작 시간에 병목을 주는 요인 중 하나가 됐습니다(특히 모바일 디바이스에서는 영향이 큽니다).

이에 대해 바이너리 형식의 파일을 사용하는 것으로 파싱 시간이나 파일 사이즈를 줄일 수 있게 됩니다.
이 접근법과 관련한 기술로써 WebAssembly나 ECMAScript의 Stage 1 Proposal인 Binary AST 등이 있습니다.

Glimmer의 Binary Template는 유저랜드(Userland)로 바이너리 접근법을 실현하고자 한다고 생각합니다.


헤드라인


TestCafe v0.18.0 Released - Angular Selectors, Using Multiple Reporters, etc | TestCafe

devexpress.github.io/testcafe/blog/testcafe-v0-18-0-released.html

testing E2E ReleaseNote

TestCafe v0.18.0이 릴리즈 됐습니다.
Angular Selector 지원하고 복수의 reporter를 지정해 출력 가능하도록 변경됐습니다. 그리고 Firefox와 Chrome에서 깨끗한 프로파일(Clean profiles)을 사용하도록 개선됐고 t.getBrowserConsoleMessages로 콘솔에 출력된 내용을 취득할 수 있도록 변경되는 등 다양한 변경 사항이 있습니다.


Announcing TypeScript 2.6 RC | TypeScript

blogs.msdn.microsoft.com/typescript/2017/10/12/announcing-typescript-2-6-rc/

TypeScript ReleaseNote

TypeScript 2.6 RC이 릴리즈 됐습니다.
--strictFunctionTypes 플래그가 추가 됐고 // @ts-ignore로 에러를 무력화하는 코멘트 지원합니다. 또, CLI에서 다국어 대응하는 --locale 플래그 가 추가됐으며 tsc --watch의 속도 개선이 이뤄졌습니다.


Release v2.5.0 Level E · vuejs/vue

github.com/vuejs/vue/releases/tag/v2.5.0

Vue ReleaseNote

Vue 2.5.0이 릴리즈 됐습니다.
errorCaptured hook으로 에러를 핸들링할 수 있도록 변경됐습니다. 그리고 TypeScript의 타입이 개선(비호환 변경) 됐고 v-on.exact modifier가 추가 됐습니다.


ESLint v4.9.0 released - ESLint - Pluggable JavaScript linter

eslint.org/blog/2017/10/eslint-v4.9.0-released

ESLint ReleaseNote

ESLint 4.9.0이 릴리즈 됐습니다.
--fix에서 dry-run을 실행할 수 있는 --fix-dry-run 옵션이 추가됐습니다.


Eloquent JavaScript Third Edition

eloquentjavascript.net/3rd_edition/

book JavaScript news

Eloquent JavaScrip 세번째 판에 대한 Crowdfunding이 시작 됐습니다.


ProseMirror 1.0

marijnhaverbeke.nl/blog/prosemirror-1.html

JavaScript editor library ReleaseNote

ProseMirror 1.0이 릴리즈 됐습니다.
ProseMirror는 보다 좋은 WYSIWYG-style 에디터를 설치할 수 있는 코어 라이브러리로, ProseMirror 자체는 특정 문서 형식에 의존하지 않는 것이 특징입니다.
1.x 부터는 안정 버전과 RFC 프로세스를 닮은 방식으로 개발한다고 이야기합니다.


Release v3.7.0 · webpack/webpack

github.com/webpack/webpack/releases/tag/v3.7.0

webpack ReleaseNote

webpack v3.7.0이 릴리즈 됐습니다.
CommonChunkPlugin 플러그인에 deepChildren 옵션이 추가됐으며 ES modules chunk graph의 리팩터링으로 성능이 개선 됐습니다.

Added deepChildren support from ArcEglos' pull request by ljcrapo · Pull Request #5764 · webpack/webpack


아티클


Ember.js - Glimmer.js Progress Report

emberjs.com/blog/2017/10/10/glimmer-progress-report.html

JavaScript article

Glimmer.js에 관한 상황이 정리돼 있습니다.
태그를 <Button /> 처럼 Capital 스타일로 작성하도록 변경되고 요소의 프로퍼티와 속성을 @로 구별할 수 있도록 개선되며 Portal 지원하는 등 다양한 변경 내용이 소개돼 있습니다.
또, 템플릿을 파이너리로 컴파일하여 Binary Templates 지원 예정 소식과 SSR에 대한 내용도 소개돼 있습니다.


Cypress.io | JavaScript End to End Testing | Cypress is now public beta

www.cypress.io/blog/2017/10/10/cypress-is-now-public-beta/

testing browser library

E2E 테스트 프레임워크인 Cypress가 오픈 소스로 공개 됐습니다.


Dependency Inversion with Redux-Thunk & Typescript – Dave L. – Medium

medium.com/@david.losert_73564/dependency-inversion-with-redux-thunk-typescript-e09cebabdc1f

redux testing article

redux-thunk의 thunk.withExtraArgument(deps)를 사용해 의존 관계 역전 원칙(DIP)을 적용하는 방법에 대해 소개돼 있습니다.


What's New In DevTools (Chrome 63)  |  Web  |  Google Developers

developers.google.com/web/updates/2017/10/devtools-release-notes

Chrome debug article

Chrome 63 개발자 도구에 관해 작성돼 있습니다.
Audits 패널에서 보안 취약성 정보를 제공하며 Workspaces 2.0에 대해 소개돼 있습니다. 또, remote debugging가 복수의 클라이언트 동시 접속에 대응하는 등 다양한 변경 사항이 작성돼 있습니다.


NPM Task Running Techniques – Netscape – Medium

medium.com/netscape/npm-task-running-techniques-15fe5b697f15

npm console Tools article

npm-run-all을 사용한 npm-run-scripts의 실행 관리와 wait-on을 사용한 서버가 동작하기를 기다렸다 커멘드를 입력하는 방법에 대해 소개돼 있습니다.


Node.js - a tale of two bugs

dev.to/mikeralphson/nodejs---a-tale-of-two-bugs-18c

node.js issue performance article

Node.js 7.x 이후에 성능 저하를 발견하고 어떻게 디버깅하고 재현 했는지 소개되어 있습니다.
문제의 원인은 V8의 Error.captureStackTrace에서 발생했으며 Node.js 8.7.0에서 수정될 예정입니다.


슬라이드, 영상


The productive developer guide to React

www.slideshare.net/mauricedb/the-productive-developer-guide-to-react-80642342

React slide

React를 사용한 개발에 관한 슬라이드입니다.
입문적인 내용으로 React의 장점과 문제점 create-react-app나 Redux, 라우팅 등에 대해 이야기합니다.


사이트, 서비스, 문서


GoogleChrome/confluence: Service and API for Web API Confluence: Metrics for web platform health

github.com/GoogleChrome/confluence

browser WebPlatformAPI

각 브라우저 고유의 API 수나 삭제된 API 수, Ship에 실패한 API 수, API Velocity 등을 시각화 해주는 사이트입니다.


소프트웨어, 도구, 라이브러리


dt-fe/number-precision: 🚀1K tiny & fast lib for doing addition, subtraction, multiplication and division operations precisely

github.com/dt-fe/number-precision

JavaScript library

부동소수점 연산 시 사용할 수 있는 라이브러리입니다.


SpireTeam/whitelister: Simple, basic filtering and validation tool for Node.js.

github.com/SpireTeam/whitelister

JavaScript library

의존 라이브러리 없이 작성된 필터링 / 검증 라이브러리입니다.
기본적으로 결과를 Promise로 반환하며 sync 메서드를 이용해 동기적으로 처리할 수 있습니다.
규칙을 위반한 경우엔 커스텀 에러를 발생하게 디자인돼 있습니다.


planttheidea/fast-equals: A blazing fast equality comparison, either shallow or deep

github.com/planttheidea/fast-equals

JavaScript library

deep-equal, shallow-equal를 제공하는 라이브러리입니다.


도서


Atomic Design by Brad Frost

atomicdesign.bradfrost.com/

GUI CSS book

Atomic Design를 주제로 한 서적입니다.


Pull Request to this article
JSer.info Slackに参加する