JSer.info #329 - Chrome 59βがリリースされました。
Service Workerのnavigation preloadsのサポート、MediaError.messageのサポート、Image Capture APIの試験的サポートなどが行われています。
また、Headless Chromiumが追加されています。
詳しくは次の記事で解説されていますが、PhantomJSのようにXvfbなどが不要なChromeを動かすことができるモードです。
また、このHeadless Chromeのリリースをうけて、PhantomJSのコアメンテナー(唯一のアクティブメンテナー)が開発の終了を宣言しています。
- [Announcement] Stepping down as maintainer - Google グループ
- [Release] PhantomJS 2.5.0 Beta - Google グループ
- 少し前に公開されたα版(QtWebKitのアップデートが含まれている)
PhantomJSはQtWebKitを利用しており、QtWebKitは一度削除され最近また復活しています。
QtWebKitのAlternativeとしてChromiumベースのQtWebEngineが提供されています。
どちらを利用した場合もPhantomJSには大量の修正が必要となり、サポートコストが高いためPhantomJSのメンテナンスを終了するとのことです。
別方向の話としては、PhantomJSをHeadless Chromeベースで動かすことについてのIssueが立てられています。
PhantomJSとHeadless Chromeの違いについては次の記事でも書かれています。
レンダリングエンジン以外の違いとして、PhantomJSの持つAPIとHeadless Chromeの操作に使うChrome DevTools Protocolの違いがあります。
Headless Chrome is similar to tools like PhantomJS. Both can be used for automated testing in a headless environment. The main difference between the two is that Phantom uses an older version of WebKit as its rendering engine while Headless Chrome uses the latest version of Blink.
-- https://developers.google.com/web/updates/2017/04/headless-chrome
Headless SlimerJS with Firefox – Codingの記事では、Firefox NightlyでHeadlessサポートに向けて開発されている点について書かれています。
また、FirefoxベースのPhantomJSといえるSlimerJSが、このHeadless Firefoxをサポートする方向について書かれています。
(SlimerJSはPhantomJSの持つAPIとよく似ているAPIを持つ)
まとめ: Headless Browser
ECMAScript modules in browsers - JakeArchibald.comという記事では、ブラウザのES modulesのサポート状況と挙動について書かれています。
Node.jsで扱うモジュールとは異なる点や、<script type="module">のデフォルトの挙動などについて書かれています。
次の記事も併せてみると良さそうです。
JSer.infoをサポートするには
- 😘 知り合いにJSer.infoをおすすめする
- ❤️ GitHub Sponsorsで@azuのスポンサーになる
- 🐦 X(Twitter)で@jser_infoをフォローする
JSer.info Sponsors
JSer.info SponsorsはGitHub SponsorsとしてJSer.infoを支援してくれている方々です。
ヘッドライン
Headless SlimerJS with Firefox – Coding
adriftwith.me/coding/2017/04/21/headless-slimerjs-with-firefox/
Firefox Nightlyでheadlessサポートが行われたため、SlimerJSでヘッドレスなテストをおこなえるようになったという話
TestCafe v0.15.0 Released | TestCafe
devexpress.github.io/testcafe/blog/testcafe-v0-15-0-released.html
TestCafe 0.15.0リリース。
Selector()#withTextの仕様を変更、ReactとVue向けのSelector拡張のサポート、セットアップ済みのDocker imageの提供。
--proxyと--debug-modeの追加、RoleにpreserveUrlオプションの追加など
Angular: Angular 4.1.0 Now Available
angularjs.blogspot.com/2017/04/angular-410-now-available.html
Angular 4.1.0リリース。
StrictNullChecksを有効化したTypeScript 2.2/2.3のサポート。
Release v2.3.0 JoJo's Bizarre Adventure · vuejs/vue
github.com/vuejs/vue/releases/tag/v2.3.0
Vue.js 2.3.0リリース。
サーバサイドレンダリングの改善、コンポーネントの非同期ローディングの改善、passive event listenerのサポートなど
Release v0.45.0 · facebook/flow
github.com/facebook/flow/releases/tag/v0.45.0
Flow 0.45.0リリース。
Unicodeサポートの改善、Dynamic Importのサポート、export type * from ...に対応など
Announcing TypeScript 2.3 | TypeScript
blogs.msdn.microsoft.com/typescript/2017/04/27/announcing-typescript-2-3/
TypeScript 2.3リリース。
--checkJsで// @ts-checkと書かれたJavaScriptのJSDocをtype checkできるように。
Default type argumentsのサポート、--downlevelIterationの追加、tsc --initで生成されるtsconfig.jsonの整理など
Ember.js - Ember 2.13 and 2.14 Beta Released
emberjs.com/blog/2017/04/29/ember-2-13-released.html
Ember 2.14リリース。
Ember CLIでyarnのサポート、BabelやAutoprefixerで利用できるtargetsを指定するconfig/target.jsが生成されるようになるなど
Netflix/unleash: Professionally publish your JavaScript modules in one keystroke
npm publishバージョン管理ツール。
semverでのバージョン付け、テストの実行、CHANGELOGの生成、publish時のpreview、gh-pagesへのドキュメントのデプロイなどpublish周りの処理をまとめたツール
Chromium Blog: Chrome 59 Beta: Headless Chromium, native notifications on macOS, and service worker navigation preload
blog.chromium.org/2017/05/chrome-59-beta-headless-chromium-native.html
Chrome 59 Betaリリース。
Headless Chrome、SWのnavigation preloadsのサポート、MediaError.messageのサポート、Image Capture APIの試験的サポートなど
アーティクル
Introducing a faster BBC News front page | Wildly Inaccurate
wildlyinaccurate.com/introducing-a-faster-bbc-news-front-page
BBC Newsのパフォーマンス改善について。 SpeedCurveを使って計測を行い、画像遅延ロード、Reactをサーバサイドレンダリングのみに利用してる。 まだ改善の1段階で、Reactをブラウザ側で動かしたときにモバイルだと重たい問題
Internationalize your keyboard controls ★ Mozilla Hacks – the Web developer blog
hacks.mozilla.org/2017/03/internationalize-your-keyboard-controls/
キーボードイベントについて。
keyCode/charCode/whichを置き換えるkeyとcodeプロパティについて。
また、その他のKeyboardEvent周りのTipsについて。
- KeyboardEvent.key mapping of each browser - Google スプレッドシート
- cvan/keyboardevent-key-polyfill: polyfill for `KeyboardEvent.prototype.key`
- UI Events
Everything you need to know about BabelJS
kleopetrov.me/2016/03/18/everything-about-babel/
Babelの設定やCLIについての概要解説
Functional pattern: flatMap
2ality.com/2017/04/flatmap.html
flatMapと呼ばれるものはどのようなものを言っているのかについて。
またそれに関連するECMAScriptのStage 1のProposalについて
Getting Started with Headless Chrome | Web | Google Developers
developers.google.com/web/updates/2017/04/headless-chrome
Headless Chromeの使い方について。
コマンドラインからDOMのダンプ、PDFの作成、スクリーンショット、remote debuggingの方法などについて
ECMAScript modules in browsers - JakeArchibald.com
jakearchibald.com/2017/es-modules-in-browsers/
ES modulesのブラウザサポートとNode.jsのモジュールと異なる点などについて。
また、モジュールが未サポート環境へのfallbackとしてのnonmodule、デフォルトがdeferである点や実行順、CORSやMIME typeなどについて
Node.js 8.0.0 has been delayed and will ship on or around May 30th
Node.js 8.0.0のリリース日が5月30日になった件について。
V8のTurboFan + Ignition pipelineのデフォルト化リリースを待ってからにする点について
サイト、サービス、ドキュメント
bevacqua/prop-tc39: Scraping microservice for TC39 proposals 😸
ECMAScriptのProposalsの一覧とそれをJSONとして取得できるAPIとパッケージ
Performance best practices for Firefox front-end engineers - Mozilla | MDN
developer.mozilla.org/en-US/docs/Mozilla/Firefox/Performance_best_practices_for_Firefox_fe_engineers
Firefoxのフロントエンド向けに書かれたパフォーマンスガイド。
requestIdleCallback、reflow、repaint、パフォーマンス計測などについて
ソフトウェア、ツール、ライブラリ関係
Introduction · react-sketchapp
React ComponentをSketchへレンダリングするrenderer
Create Next App
open.segment.com/create-next-app
Next.js版create react app
ktsn/houl: Gulp compatible build tool for huge static sites
gulp pluginを利用できるビルド/dev serverツール
書籍関係
わか(った気にな)るWebRTC 紙＋電子版セット - Route 312 - BOOTH（同人誌通販・ダウンロード）
WebRTCの入門書
Webフロントエンド ハイパフォーマンス チューニング | 久保田 光則 |本 | 通販 | Amazon
2017年5月26日発売
ウェブサイトのフロントエンドのパフォーマンスについての書籍
