Fork me on GitHub

2017-05-03のJS: Headless Chrome/FirefoxとPhantomJS/SlimerJS、ES modules

Edit on GitHub 編集履歴を見る

JSer.info #329 - Chrome 59βがリリースされました。

Service Workerのnavigation preloadsのサポート、MediaError.messageのサポート、Image Capture APIの試験的サポートなどが行われています。

また、Headless Chromiumが追加されています。

詳しくは次の記事で解説されていますが、PhantomJSのようにXvfbなどが不要なChromeを動かすことができるモードです。

また、このHeadless Chromeのリリースをうけて、PhantomJSのコアメンテナー(唯一のアクティブメンテナー)が開発の終了を宣言しています。

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をサポートする方向について書かれています。
(SlimerJSPhantomJSの持つAPIとよく似ているAPIを持つ)

まとめ: Headless Browser


ECMAScript modules in browsers - JakeArchibald.comという記事では、ブラウザのES modulesのサポート状況と挙動について書かれています。

Node.jsで扱うモジュールとは異なる点や、<script type="module">のデフォルトの挙動などについて書かれています。
次の記事も併せてみると良さそうです。


JSer.infoをサポートするには

JSer.info Sponsors

JSer.info SponsorsGitHub SponsorsとしてJSer.infoを支援してくれている方々です。


ヘッドライン


Headless SlimerJS with Firefox – Coding

adriftwith.me/coding/2017/04/21/headless-slimerjs-with-firefox/

firefox E2E webdriver

Firefox Nightlyでheadlessサポートが行われたため、SlimerJSでヘッドレスなテストをおこなえるようになったという話


TestCafe v0.15.0 Released | TestCafe

devexpress.github.io/testcafe/blog/testcafe-v0-15-0-released.html

testing E2E JavaScript React library

TestCafe 0.15.0リリース。
Selector()#withTextの仕様を変更、ReactとVue向けのSelector拡張のサポート、セットアップ済みのDocker imageの提供。
--proxy--debug-modeの追加、RolepreserveUrlオプションの追加など


Angular: Angular 4.1.0 Now Available

angularjs.blogspot.com/2017/04/angular-410-now-available.html

TypeScript AngularJS ReleaseNote

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 ReleaseNote

Vue.js 2.3.0リリース。
サーバサイドレンダリングの改善、コンポーネントの非同期ローディングの改善、passive event listenerのサポートなど


Release v0.45.0 · facebook/flow

github.com/facebook/flow/releases/tag/v0.45.0

flowtype ReleaseNote

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 ReleaseNote

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 ReleaseNote

Ember 2.14リリース。
Ember CLIでyarnのサポート、BabelやAutoprefixerで利用できるtargetsを指定するconfig/target.jsが生成されるようになるなど


Netflix/unleash: Professionally publish your JavaScript modules in one keystroke

github.com/Netflix/unleash

JavaScript Tools node.js npm

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 ReleaseNote

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

React browser performance opinion article

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/

JavaScript キーボード browser WebPlatformAPI

キーボードイベントについて。
keyCode/charCode/whichを置き換えるkeycodeプロパティについて。
また、その他のKeyboardEvent周りのTipsについて。


Everything you need to know about BabelJS

kleopetrov.me/2016/03/18/everything-about-babel/

babel article

Babelの設定やCLIについての概要解説


Functional pattern: flatMap

2ality.com/2017/04/flatmap.html

JavaScript ECMAScript

flatMapと呼ばれるものはどのようなものを言っているのかについて。
またそれに関連するECMAScriptのStage 1のProposalについて


Getting Started with Headless Chrome  |  Web  |  Google Developers

developers.google.com/web/updates/2017/04/headless-chrome

Chrome article

Headless Chromeの使い方について。
コマンドラインからDOMのダンプ、PDFの作成、スクリーンショット、remote debuggingの方法などについて


ECMAScript modules in browsers - JakeArchibald.com

jakearchibald.com/2017/es-modules-in-browsers/

ECMAScript JavaScript module

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

medium.com/the-node-js-collection/node-js-8-0-0-has-been-delayed-and-will-ship-on-or-around-may-30th-cd38ba96980d

nodev V8 article

Node.js 8.0.0のリリース日が5月30日になった件について。
V8のTurboFan + Ignition pipelineのデフォルト化リリースを待ってからにする点について


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


bevacqua/prop-tc39: Scraping microservice for TC39 proposals 😸

github.com/bevacqua/prop-tc39

ECMAScript proposal API

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 debug performance JavaScript

Firefoxのフロントエンド向けに書かれたパフォーマンスガイド。
requestIdleCallback、reflow、repaint、パフォーマンス計測などについて


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


Introduction · react-sketchapp

airbnb.io/react-sketchapp/

React Sketch library

React ComponentをSketchへレンダリングするrenderer


Create Next App

open.segment.com/create-next-app

Tools node.js React

Next.js版create react app


ktsn/houl: Gulp compatible build tool for huge static sites

github.com/ktsn/houl

Tools node.js gulp debug

gulp pluginを利用できるビルド/dev serverツール


書籍関係


わか(った気にな)るWebRTC 紙+電子版セット - Route 312 - BOOTH(同人誌通販・ダウンロード)

booth.pm/ja/items/504677

WebRTC book

WebRTCの入門書


Webフロントエンド ハイパフォーマンス チューニング | 久保田 光則 |本 | 通販 | Amazon

www.amazon.co.jp/Web%E3%83%95%E3%83%AD%E3%83%B3%E3%83%88%E3%82%A8%E3%83%B3%E3%83%89-%E3%83%8F%E3%82%A4%E3%83%91%E3%83%95%E3%82%A9%E3%83%BC%E3%83%9E%E3%83%B3%E3%82%B9-%E3%83%81%E3%83%A5%E3%83%BC%E3%83%8B%E3%83%B3%E3%82%B0-%E4%B9%85%E4%BF%9D%E7%94%B0-%E5%85%89%E5%89%87/dp/4774189677

browser performance book

2017年5月26日発売
ウェブサイトのフロントエンドのパフォーマンスについての書籍


この記事へ修正リクエストをする
JSer.info Slackに参加する