Fork me on GitHub

2019-02-19: Mocha 6.0.0, Fly(Edge Applications), 서드파티 JavaScript 실행 비용

Translator: U-Yeong Ju Edit on GitHub See Revisions

JSer.info #423 - Mocha 6.0.0이 릴리스됐습니다.

Node.js 4 지원을 종료했고 --compiler 등 비권장한 명령줄 옵션 삭제됐습니다.
또, require 캐시를 삭제하는 Mocha.unloadFile 추가, .mocharc.jspackage.json에 모카 설정을 선언할 수 있는 RC 파일을 지원합니다.


Fly · Edge Applications는 CDN의 Edge Location에서 JavaScript Application을 실행합니다.
Fly는 V8을 기반으로 한 실행 환경으로 Fly runtime을 사용해 LB, Cache, TLS, Network와 관련한 처리를 Edge에서 실행할 수 있습니다.
Cloudflare Workers와 같이 Service Worker 호환 API와 로컬에서 테스트 실행 등도 지원하고 있습니다.


patrickhulce/third-party-web 저장소에는 HTTP Archive의 크롤링 결과를 이용해 조사한 서드 파티 스크립트 실행 비용이 정리돼 있습니다.
광고, 엑세스 해석, SNS, 동영상 등 항목별로 사용량(usage)과 실행에 걸린 평균 시간(average impact) 등을 제공합니다.

서드 파티 스크립트가 웹페이지를 차지하는 비율에 대해서 정리한 글이 있으니 함께 살펴보면 도움이 될 것 같습니다.


헤드라인


Bootstrap 4.3.0 | Bootstrap Blog

blog.getbootstrap.com/2019/02/11/bootstrap-4-3-0/

CSS ReleaseNote

Bootstrap 4.3.0이 릴리스됐습니다.
.stretched-link, .text-break, .rounded-sm, .modal-dialog-scrollable, .list-group-horizontal 클래스가 추가됐습니다.


Release: [email protected] - 📣 announcements - npm forum

npm.community/t/release-npm-6-8-0/5352

npm ReleaseNote

npm 6.8.0이 릴리스됐습니다.
monorepo 내의 패키지 디렉터리 경로를 지정하는데 사용할 수 있는 repository 필드의 directory 프로퍼티에 관한 문서가 추가됐습니다.


Node v11.10.0 (Current) | Node.js

nodejs.org/en/blog/release/v11.10.0/

node.js ReleaseNote

Node v11.10.0이 릴리스됐습니다.
npm 6.7.0이 포함됐고 perf_hooks에 histogram 기반 API가 추가됐습니다. 또, tls 모듈의 클라이언트에 session 이벤트가 추가됐습니다.


Release v1.2.0 · rollup/rollup

github.com/rollup/rollup/releases/tag/v1.2.0

JavaScript bundler ReleaseNote

Rollup 1.2.0가 릴리스됐습니다.
Hoisting 시 변수명이 충돌하지 않도록 이름 변경 로직이 재구현됐고 config 파일을 CJS로 export 하더라도 정상적으로 동작하도록 수정됐습니다.


Release v6.0.0 · mochajs/mocha

github.com/mochajs/mocha/releases/tag/v6.0.0

node.js testing ReleaseNote

Mocha 6.0.0이 릴리스됐습니다.
Node.js 4 지원 종료, 비권장 명령줄 옵션 제거, Mocha.unloadFile 추가, RC 파일을 이용한 설정 지원 등이 이뤄졌습니다.


아티클


Replacing a hot path in your app's JavaScript with WebAssembly  |  Web  |  Google Developers

developers.google.com/web/updates/2019/02/hotpath-with-wasm

WebAssembly article JavaScript

처리 속도가 중요한 부분 만을 wasm으로 실행시키는 전략에 대해서 이야기합니다.
그리고 JavaScript, C, AssemblyScript, Rust 각 성능에 대해서도 비교돼 있습니다.


Trusted Types help prevent Cross-Site Scripting  |  Web  |  Google Developers

developers.google.com/web/updates/2019/02/trusted-types

Chrome XSS HTML JavaScript article

Chrome 73에서 Trusted Types가 시범적(flag)으로 지원되며 76까지 Origin Trial로 사용해 볼 수 있습니다.
TrustTypes는 XSS의 sink가 되는 부분을 관련된 정책(policy)으로 검사합니다.
정책에 부합하지 않을 경우 에러를 발생시켜 회피할 수 있는 API와 구조를 제공합니다.


Constructable Stylesheets: seamless reusable styles  |  Web  |  Google Developers

developers.google.com/web/updates/2019/02/constructable-stylesheets

CSS JavaScript article

Chrome 73에 구현된 Constructable Stylesheets에 관해 소개합니다.
공유 가능한 CSS 객체를 생성해 여러개의 Shadow Roots나 Document에 적용할 수 있는 API입니다.


Rendering on the Web  |  Web  |  Google Developers

developers.google.com/web/updates/2019/02/rendering-on-the-web

JavaScript browser performance article ServiceWorker

CSR(틀라이언트 사이드 렌더링), SSR(서버 사이드 렌더링) 등 여러 웹사이트 렌더링 전략과 장/단점에 대해 정리돼 있습니다.
또, Service Worker를 사용한 Trisomorphic Rendering에 대해서도 이야기합니다.


슬라이드, 영상


cerebral/overmind: Overmind - Frictionless state management

github.com/cerebral/overmind

JavaScript library React Vue Angular TypeScript

상태 관리 라이브러리입니다.
사이드 이펙트를 effects로 구현하고 action 발행하며 Proxy를 사용해 상태 변경을 감지하고 View를 갱신합니다.
React, Vue, Angular에 대응한 바인딩과 개발자 도구를 제공합니다.


사이트, 서비스, 문서


patrickhulce/third-party-web: Summary of which third party scripts are most responsible for excessive JavaScript execution on the web.

github.com/patrickhulce/third-party-web

performance browser JavaScript

HTTP Archive의 데이터를 이용해 여러 웹사이트의 서드 파티 실행 비용에 대한 조사 결과가 정리돼 있습니다.
광고, 엑세스 해석, SNS, 영상 등 항목별로 사용량과 실행에 걸린 평균 시간 등을 제공합니다.


Fly · Edge Applications

fly.io/

JavaScript cdn webservice V8

Edge Application을 JavaScript로 작성할 수 있는 CDN 서비스입니다.
OSS로 공개돼 있는 fly runtime를 사용해 LB, Cache, TLS, Network 관한 처리를 Edge에서 실행할 수 있습니다.
Service Worker 호환 API도 제공하고 있으며 로컬에서도 server를 실행해 테스트할 수 있습니다.


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


postlight/mercury-parser: 📜 Extracting content from the chaos of the web.

github.com/postlight/mercury-parser

JavaScript library

웹사이트에서 메타데이터와 메인 컨텐츠를 추출하는 라이브러리입니다.


transloadit/uppy: The next open source file uploader for web browsers

github.com/transloadit/uppy

JavaScript library

플러그인으로 확장할 수 있는 파일 업로드 라이브러리입니다.
UI, 로컬이나 리모트에서 리소스를 가져오거나 업로드 할 장소를 플러그인으로 지정할 수 있습니다.


modernserf/zebu: A compiler for little languages in tagged template strings

github.com/modernserf/zebu

JavaScript library document

tagged template literal를 사용해 미니 언어를 작성하는 라이브러리입니다. 구문을 정의하고 그것을 다루는 tagged funciton을 작성하는 방식으로 미니 언어를 개발합니다.


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