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.values、String#padStart/String#padEnd、Object.getOwnPropertyDescriptors()や関数内での末尾カンマの許容などが追加されています。
詳細は次のサイトを見るといいかもしれません。
今後(ES2018~)で策定していくProposalについては次のページにまとめられています。
- tc39/proposals: Tracking ECMAScript Proposals
- babel/proposals: (WIP) Tracking the status of Babel's implementation of TC39 proposals
- Babelの対応
整形ツールのPrettier 1.5.0がリリースされました。
GraphQL、CSS in JS、JSONの対応、CSSやTypeScript、JSX周りバグ修正などが行われています。
Leveraging the Performance Metrics that Most Affect User Experience | Web | Google Developersという記事では、ユーザー体験への影響を見るパフォーマンスのメトリクスについて書かれています。
単純にDOMContentLoadedやloadの時間を見るだけでは体験を計測できないという問題があります。
そのため、First Paint/First Meaningful Paing/Time to Interactive(TTI)/Longtasksなどの指標やその意味についてかかれています。
記事の元は、Google I/Oでの発表となっているので併せて動画の方も見るといいかもしれません。
JSer.infoをサポートするには
- 😘 知り合いにJSer.infoをおすすめする
- 💸 GitHub Sponsorsで@azuのスポンサーになる
- 🐦 Twitterで@jser_infoをフォローする
- 🔁 JSer.infoについての最新のTweetをRetweetする
ヘッドライン
Release 1.5.0: GraphQL, CSS-in-JS & JSON · prettier/prettier
github.com/prettier/prettier/releases/tag/1.5.0
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
Babylon 7.0.0 beta16リリース。
TypeScriptパーサの追加、BigInt(Stage 2)のサポートなど
Ecma latest news
ecma-international.org/news/index.html
"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 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
ユーザー体験への影響を見るパフォーマンスのメトリクスについて。
ロード時間だけでは体験を計測できないため。
そのため、First Paint/First Meaningful Paing/Time to Interactive/Longtasksを指標にそれぞれ何を意味するかや計測方法について
Chrome 60 DevTools の新機能/変更点 - Qiita
qiita.com/kyoshidajp/items/e3f9be02a7ccd00aa7d7
Chrome 60の開発者ツールの変更点について
NYTimes/kyt: Starting a new JS app? Build, test and run advanced apps with kyt 🔥
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
Code Splittingを行うBabelプラグインを作成するスクリーンキャスト
サイト、サービス、ドキュメント
Building m.uber: Engineering a High-Performance Web App for the Global Market - Uber Engineering Blog
Uberのモバイル向けの最適化について。
Reactを使っているが、mobileではPreactに置き換えて利用している。
また、サーバサイドレンダリングや、初期bundleサイズを小さくするためのcode split、依存が小さなJustの利用、SWやIndexedDBを使ったキャッシュなどについて。
問題を見つけるためのエラーハンドリングについて。
GraphQL Network Communication Framework
クライアント <-> サーバのコミュニケーションを行うGraphQLフレームワーク。
Apollo/WebSocketベース
HTML Standard
WHATWG HTML仕様のDeveloper's Edition。
ブラウザベンダー向けの情報は削除し、ウェブ開発者向けの情報に絞ったHTML仕様。
- HTML Standard 日本語訳
- Review on utilization of `w-nodev` annotation · Issue #1488 · whatwg/html
- WHATWG HTML Standard Developer Editionの話 - 水底の血
- HTML5 for Web Developers | HTML5 Doctor
babel/proposals: (WIP) Tracking the status of Babel's implementation of TC39 proposals
ECMAScript proposalとBabelの実装の対応をまとめたもの
ソフトウェア、ツール、ライブラリ関係
roman01la/js-memory-usage: Data Structures Memory Usage in JavaScript
github.com/roman01la/js-memory-usage
JavaScriptのデータ構造別/ライブラリごとのメモリ消費量をまとめたもの。List/Array/Map/SetをJavaScript/ImmutableJS/ClojureScript/GopherJS/Reasonなど色々な実装ごと比較
pinterest/esprint: Fast eslint runner
ESLintをparallelで実行できるツール
anvilresearch/webcrypto: W3C Web Cryptography API for Node.js
github.com/anvilresearch/webcrypto
Node.jsでWeb Cryptography APIに対応するpolyfill(ponyfill)ライブラリ
coast-team/netflux: JavaScript client and server side transport API based on WebRTC & WebSocket
WebRTC、WebSocketを使ったP2Pライブラリ。
ブラウザ、Node.jsでデータのやり取りを行える
OnetapInc/chromy: Chromy is a library for operating headless chrome. 🍺🍺🍺
Headless ChromeをNightmare.jsのように操作するAPIを提供するライブラリ。
Chrome DevTools Protocolを使って処理をやり取りしている。
dollarshaveclub/study: A Simple, progressive, client/server AB testing library ⚡️
github.com/dollarshaveclub/study
A/Bテストティングライブラリ。
universalで動き、storage driverでデータの保存先を指定できる。
egoist/dom-dom: JSX to actual DOM.
JSXをdocument APIを使ってDOMオブジェクトにするライブラリ
yahoo/mendel: Build toolchain for experimentation on isomorphic web applications with tree-inheritance and multivariate support.
コードのフラグではなくルールファイルベースでプロジェクト構造を管理できるツール。
試験的な機能を取り入れたA/Bテストを管理しやすくするためのフレームワーク。
フラグ管理は技術的負債となりやすく、持続可能性をYahooで調査した結果作成されたデザイン。
jaredpalmer/formik: Forms in React, without tears
React向けのフォームライブラリ
