Fork me on GitHub

2017-07-03のJS: ECMAScript 2017、Prettier 1.5.0、UXのパフォーマンスメトリクス

Edit on GitHub 編集履歴を見る

JSer.info #338 - ECMAScript 2017が正式リリースされました。

ECMA-262 8th edition - ECMAScript® 2017 Language Specification
-- Ecma latest news

ES2017ではasync/await、shared memory and atomic、Object.entires/Object.valuesString#padStart/String#padEndObject.getOwnPropertyDescriptors()や関数内での末尾カンマの許容などが追加されています。

詳細は次のサイトを見るといいかもしれません。

今後(ES2018~)で策定していくProposalについては次のページにまとめられています。


整形ツールのPrettier 1.5.0がリリースされました。

GraphQL、CSS in JS、JSONの対応、CSSやTypeScript、JSX周りバグ修正などが行われています。


Leveraging the Performance Metrics that Most Affect User Experience  |  Web  |  Google Developersという記事では、ユーザー体験への影響を見るパフォーマンスのメトリクスについて書かれています。

単純にDOMContentLoadedloadの時間を見るだけでは体験を計測できないという問題があります。
そのため、First Paint/First Meaningful Paing/Time to Interactive(TTI)/Longtasksなどの指標やその意味についてかかれています。

記事の元は、Google I/Oでの発表となっているので併せて動画の方も見るといいかもしれません。


ヘッドライン


Release 1.5.0: GraphQL, CSS-in-JS & JSON · prettier/prettier

github.com/prettier/prettier/releases/tag/1.5.0

JavaScript Tools

prettier 1.5.0リリース。
GraphQL、CSS in JS、JSONの対応、CSSやTypeScript、JSX周りバグ修正など


Release v7.0.0-beta.16 · babel/babylon

github.com/babel/babylon/releases/tag/v7.0.0-beta.16

babel AST TypeScript ReleaseNote

Babylon 7.0.0 beta16リリース。
TypeScriptパーサの追加、BigInt(Stage 2)のサポートなど


Ecma latest news

ecma-international.org/news/index.html

ECMAScript news

"ECMA-262 8th edition - ECMAScript® 2017 Language Specification" ES2017がGAで承認されて正式リリースされた。


Release Notes for Safari Technology Preview 34 | WebKit

webkit.org/blog/7760/release-notes-for-safari-technology-preview-34/

safari ReleaseNote

Safari Technology Preview Release 34リリース。
RTCRtpTransceiver#addTransceiverをサポートしトラック単位での片方向通信を使えるように、W3C Secure Contextsの実装、SRIを試験的にサポートなど


アーティクル


Leveraging the Performance Metrics that Most Affect User Experience  |  Web  |  Google Developers

developers.google.com/web/updates/2017/06/user-centric-performance-metrics

Chrome performance browser article

ユーザー体験への影響を見るパフォーマンスのメトリクスについて。
ロード時間だけでは体験を計測できないため。
そのため、First Paint/First Meaningful Paing/Time to Interactive/Longtasksを指標にそれぞれ何を意味するかや計測方法について


Chrome 60 DevTools の新機能/変更点 - Qiita

qiita.com/kyoshidajp/items/e3f9be02a7ccd00aa7d7

Chrome debug

Chrome 60の開発者ツールの変更点について


NYTimes/kyt: Starting a new JS app? Build, test and run advanced apps with kyt 🔥

github.com/nytimes/kyt

JavaScript Tools

JavaScriptアプリのツールキット。
Babel/webpack/Jest/Stylelint/ESlint/protoなどのセットアップをまとめて行うツール


Supercharged Live Stream Blog: Code Splitting  |  Web  |  Google Developers

developers.google.com/web/updates/2017/06/supercharged-codesplit

babel article plugin video

Code Splittingを行うBabelプラグインを作成するスクリーンキャスト


サイト、サービス、ドキュメント


Building m.uber: Engineering a High-Performance Web App for the Global Market - Uber Engineering Blog

eng.uber.com/m-uber/

browser mobile JavaScript performance

Uberのモバイル向けの最適化について。
Reactを使っているが、mobileではPreactに置き換えて利用している。
また、サーバサイドレンダリングや、初期bundleサイズを小さくするためのcode split、依存が小さなJustの利用、SWやIndexedDBを使ったキャッシュなどについて。
問題を見つけるためのエラーハンドリングについて。


GraphQL Network Communication Framework

graphql-io.com/

GraphQL library JavaScript

クライアント <-> サーバのコミュニケーションを行うGraphQLフレームワーク。
Apollo/WebSocketベース


HTML Standard

html.spec.whatwg.org/dev/

HTML WHATWG spec

WHATWG HTML仕様のDeveloper's Edition。
ブラウザベンダー向けの情報は削除し、ウェブ開発者向けの情報に絞ったHTML仕様。


babel/proposals: (WIP) Tracking the status of Babel's implementation of TC39 proposals

github.com/babel/proposals

ECMAScript babel plugin

ECMAScript proposalとBabelの実装の対応をまとめたもの


ソフトウェア、ツール、ライブラリ関係


roman01la/js-memory-usage: Data Structures Memory Usage in JavaScript

github.com/roman01la/js-memory-usage

JavaScript library まとめ performance

JavaScriptのデータ構造別/ライブラリごとのメモリ消費量をまとめたもの。List/Array/Map/SetをJavaScript/ImmutableJS/ClojureScript/GopherJS/Reasonなど色々な実装ごと比較


pinterest/esprint: Fast eslint runner

github.com/pinterest/esprint

ESLint Tools

ESLintをparallelで実行できるツール


anvilresearch/webcrypto: W3C Web Cryptography API for Node.js

github.com/anvilresearch/webcrypto

node.js security library

Node.jsでWeb Cryptography APIに対応するpolyfill(ponyfill)ライブラリ


coast-team/netflux: JavaScript client and server side transport API based on WebRTC & WebSocket

github.com/coast-team/netflux

WebRTC WebSocket node.js browser

WebRTC、WebSocketを使ったP2Pライブラリ。
ブラウザ、Node.jsでデータのやり取りを行える


OnetapInc/chromy: Chromy is a library for operating headless chrome. 🍺🍺🍺

github.com/OnetapInc/chromy

Chrome node.js library

Headless ChromeをNightmare.jsのように操作するAPIを提供するライブラリ。
Chrome DevTools Protocolを使って処理をやり取りしている。


dollarshaveclub/study: A Simple, progressive, client/server AB testing library ⚡️

github.com/dollarshaveclub/study

JavaScript library

A/Bテストティングライブラリ。
universalで動き、storage driverでデータの保存先を指定できる。


egoist/dom-dom: JSX to actual DOM.

github.com/egoist/dom-dom

JavaScript jsx DOM library

JSXをdocument APIを使ってDOMオブジェクトにするライブラリ


yahoo/mendel: Build toolchain for experimentation on isomorphic web applications with tree-inheritance and multivariate support.

github.com/yahoo/mendel

設計 JavaScript Tools

コードのフラグではなくルールファイルベースでプロジェクト構造を管理できるツール。
試験的な機能を取り入れたA/Bテストを管理しやすくするためのフレームワーク。
フラグ管理は技術的負債となりやすく、持続可能性をYahooで調査した結果作成されたデザイン。


jaredpalmer/formik: Forms in React, without tears

github.com/jaredpalmer/formik

React library

React向けのフォームライブラリ


この記事へ修正リクエストをする
記事を紹介する