Fork me on GitHub

2017-02-14 JS: V8 5.7와 ES2015+의 성능, npm입문, TypeScript 가이드라인

Translator: U-Yeong Ju Edit on GitHub See Revisions

JSer.info #318 - V8 version 5.7이 릴리즈됐습니다.

Promise와 RegExp 그리고 version 5.5에서 공개됐었던 async/await의 성능 개선이 이뤄졌습니다. 그리고 WebAssembly가 기본적으로 활성화 되도록 변경됐습니다.

ES6 code currently is substantially slower than ES
-- An update on strong mode

V8에서는 ES2015 이후의 기능을 충실히 구현하고는 있었지만 성능 최적화는 ES5에 비해 크게 진행되지 않았습니다.
때문에 네이티브의 ES2015+ 보다 해당 코드를 ES5으로 변환한 경우에 성능이 더 좋은 경우도 있습니다.
아래 문서에 그러한 경우에 대해 소개돼 있습니다.

그래서 V8에서는 네이티브 ES2015+ 기능의 실행 속도를 개선할 계획을 세우고 있으며 이번에 그 일부분이 반영된 것입니다.

(마이크로 벤치 같은)실행 속도만이 아닌 파일 사이즈나 파서 및 컴파일 속도가 성능에 미치는 영향에 관해서는 아래 문서를 읽어보면 좋을 것 같습니다.


npm for Beginners: A Guide for Front-end Developers에는 npm에 관해 자세하게 소개 및 설명 돼 있습니다.

npm이라는 단어는 웹 사이트, npm registry, npm client 이 세 가지를 가리킨다는 것과 npm의 사용법, 모듈의 설치 방법, 커멘드 사용법, npm과 관련된 도구 등이 자세히 소개돼 있습니다.


개인적인 TypeScript와 친해지는 가이드라인(일본어)라는 문서에는 평소 JavaScript를 사용하고 있는 사람이 TypeScript를 사용하게 될 경우 가져야할 관점이나 자세 그리고 기본 정보 등에 관해 작성돼 있습니다.

any를 다루는 방법, 컴파일 옵션, TypeScript 독자적인 키워드나 함께 읽으면 좋을 문서 등이 소개돼 있습니다.


헤드라인


V8 JavaScript Engine: V8 Release 5.7

v8project.blogspot.com/2017/02/v8-release-57.html

V8 ReleaseNote WebAssembly


V8 5.7이 릴리즈됐습니다.
async/await나 ES2015의 성능이 개선 됐으며 String#padStart, Intl.DateTimeFormat#formatToParts을 지원합니다. 또, wasm가 기본적으로 활성화 되는 등 다양한 변경 사항이 있습니다.


Release v4.3.0 · npm/npm

github.com/npm/npm/releases/tag/v4.3.0

npm ReleaseNote


npm 4.3.0이 프레스 릴리즈(Press release) 됐습니다.
--auth-type이 추가됐고 실행 속도가 개선됐습니다.


JS1k 2017 - A magical JavaScript golfing competition

js1k.com/2017-magic/

JavaScript 이벤트


JS1k의 2017년도 모집이 시작됐습니다. JS1k는 1024bytes로 JavaScript의 데모를 만들고 공개하는 컨테스트입니다.


아티클


npm for Beginners: A Guide for Front-end Developers

www.impressivewebs.com/npm-for-beginners-a-guide-for-front-end-developers/

npm tutorial article


npm의 정의와 사용법을 소개하는 튜토리얼 문서입니다.
보편적인 패키지 디렉터리 구조, node_modules 디렉터리, npm 커멘드와 옵션에 관해 소개돼 있습니다.


Snapshot testing the hard way | Better world by better software

glebbahmutov.com/blog/snapshot-testing/

JavaScript testing


Jest에는 Snapshot 테스트가 있습니다. 하지만 Jest와 같은 특정 테스트 프레임워크에 의존하지 않고 Snapshot 테스트를 시행하는 방법에 관해 소개돼 있습니다.


개인적인 TypeScript와 친해지는 가이드라인

blog.yux3.net/entry/2017/02/05/000805

TypeScript tutorial


평소 JavaScript를 사용하고 있는 사람이 TypeScript를 어떻게 바라봐야 하는지 소개하고 있습니다.

전형적인 에러의 의미나, 컴파일 옵션, _ prefix나 this에서의 타입 등 TypeScript의 특징적인 부분에 관해 작성돼 있습니다.
또, TypeScript 특징적인 키워드나 참고되는 문서에 관해서도 정리돼 있습니다.


JavaScript Start-up Performance – Dev Channel – Medium

medium.com/@addyosmani/javascript-start-up-performance-69200f43b201

JavaScript performance


JavaScript의 실행 속도에 관해 작성돼 있습니다.
모바일 같은 저사양의 CPU일 경우 파서와 컴파일 속도가 상대적으로 더 걸리게 됩니다. 따라서 CPU나 메모리 자원이 한정된 디바이스 일 경우 파일사이즈 뿐만 아니라 파서와 컴파일 시간도 더욱 중요해집니다.
해당 글에는 이러한 사실과 함께 개발자 도구를 사용해 파서나 컴파일 시간을 측정하는 방법, User Timing API, V8의 Code Caching, script의 로드 방법을 최적화 하는 방법 등에 관해 작성돼 있습니다.


이벤트 구동형 서비스 환경에서의 Service Worker - Qiita

qiita.com/nhiroki/items/65efc9e41ec1d928afcd(일본어)

JavaScript ServiceWorker 역사 opinion


Better AppCache에서 시작된 Service Worker가 페이지에 의존하지 않고 생명 주기에 따라 변화하도록 발전하여 fetch 이외에도 이벤트를 핸들링 할 수 있는 기반 기술이 된 과정 즉, Service Worker의 발전 흐름에 관해 정리돼 있습니다.


Roundup: Vue.js State Management Libraries ← Alligator.io

alligator.io/vuejs/roundup-state-management-libraries/

JavaScript Vue library article


Vue.js에서 사용할 수 있는 스테이트 관리 라이브러리를 비교한 글입니다. 각 라이브러리의 특징이나 장점 및 단점 등에 관해 작성돼 있습니다.


Advanced JavaScript ES2015 Template Strings with Tagged Templates | appendTo

appendto.com/2017/02/advanced-javascript-es2015-template-strings-with-tagged-templates/

JavaScript template article


Tagged Template Literal에 관해 설명돼 있는 글입니다. 예제 코드와 함께 태그 함수의 인수가 어떻게 동작하는지 소개합니다.


슬라이드, 영상


Progressive Transpilation at Netflix and the road to running native ES2015 in production // Speaker Deck

speakerdeck.com/betaorbust/progressive-transpilation-at-netflix-and-the-road-to-running-native-es2015-in-production

JavaScript slide ECMAScript browser


Netfilx의 브라우저 용으로 Transpile한 JavaScript를 전달하기 위해 하고 있는 처리에 관해 소개합니다.
모던한 브라우저는 ES2015를 대응하고 있기 때문에 변환이나 polyfill 등을 제거해 20 ~ 40% 정도 payload 사이즈를 줄일 수 있다고 합니다. 또, 압축 도구와 ES2015를 대응하고 있는지를 판정하는 문제 등에 관해서도 소개돼 있습니다.


AVA Casts

avacasts.com/

JavaScript testing video


AVA에 관한 스크린캐스트입니다.


사이트, 서비스, 문서


bahmutov/snap-shot: Jest-like snapshot feature for the rest of us, works magically by finding the right caller function

github.com/bahmutov/snap-shot

JavaScript React library testing


Jest 같은 Snapshot 테스트를 지원하는 테스트 라이브러리입니다.


Mnemonist

yomguithereal.github.io/mnemonist/

JavaScript library


여러가지 데이터 구조를 구현한 JavaScript 라이브러리입니다.
Queue, Trie, Linked List, Bloom Filter 등이 구현돼 있습니다.


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


harksys/npmvet: A simple CLI tool for vetting npm package versions

github.com/harksys/npmvet

JavaScript node.js Tools console npm


package.jsonnode_modules에 설치돼 있는 패키지의 버전을 비교하고 해당 패키지가 잠겨(lock)있는지 검사할 수 있는 도구입니다. 직접 또는 매번 새롭게 설치되는 CI에서 패키지의 버전을 맞추는데 목적을 두고 있습니다.


Simple Statistics

simplestatistics.org/

JavaScript 통계 library


sum, sort, quantile, mean 등 통계 용 메서드를 구현 및 제공하는 자바스크립트 라이브러리입니다.


abrahamjagadeesh/npm-module-stats: Get recursive file size and dependencies of any NPM module without installing the module

github.com/abrahamjagadeesh/npm-module-stats

npm Tools library


특정 모듈이 의존하고 있는 각 npm 모듈의 파일 사이즈를 테이블로 정리해 볼 수 있는 도구입니다.


davidmfoley/node-trucker: Hauls your node.js source files around

github.com/davidmfoley/node-trucker

JavaScript CoffeeScript Tools 리팩터링


JavaScript 파일 간의 의존 관계를 고려해 파일을 이동시킬 수 있는 리팩터링 도구입니다.
특정 파일을 이동 시키면 해당 파일을 의존하고 있는 각 파일의 import 구문도 함께 수정됩니다.

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