Fork me on GitHub

JavaScriptの最新情報を紹介する週刊ブログ

2015-05-19のJS: Firefox 38、Backbone.js 1.2.0、マイクロベンチマークの問題

2015年05月19日 Edit on GitHub 編集履歴を見る

JSer.info #228 - Firefox 38.0がリリースされました。

タブやウィンドウ間でデータのやり取りができるBroadcastChannel APIやHTML5 ruby tags、<picture>や<img srcset>のサポートなどが追加されています。

また、performance.measureやFirefoxの開発者ツールでcopy()メソッドのサポート、JavaScriptエンジンの最適化により削除されている変数を表示する機能など開発者ツールにも色々機能が増えています。

詳細は以下から確認できます。

Backbone.js 1.2.0がリリースされました。
1年ぶりのアップデートになりますが、コミット数が多いので内部コードレベルでは結構変化しています。

Viewの作成などをhookする機能の追加、モデルの"update"イベントの追加、ユニークidとなるmodeldの追加、Strict Modeだと動かない問題の修正などがされています。

一部互換性のない変更も含まれているようです。

V8について色々な記事を書いてる@mralephさんによるDo not Measure the Weatherというスライドでは、JavaScriptエンジンの最適化によってマイクロベンチマークが意図したものを計測できていない事がある点について実例と共に解説しています。

よくあるのがループの中で計測した処理を書いていてその結果を使っていないため、ループの中身が最適化によって空になってしまう問題などが起きています。(dead code elimination)

以下のような原則で最適化によって無意味なベンチマークにならないような方法について書かれています。

  1. verify results
  2. no constants
  3. no loop invariants
  4. no dead code
  5. http://mrale.ph/talks/goto2015/#/74

しかし、最近のJavaScriptエンジンはホントに賢いので、それでも最適化により意図とは異なるものを計測してる場合があり、
実際にどういう事が起きているのかをIRHydra2を使って見ていく方法についても書かれています。

IRHydra2については以前V8の最適化とIRHydraでの可視化とベンチマークについてのメモ | Web Scratchという記事を書いたのでこちらも見てみるといいかもしれません。

algorithms first, µbenchmarks last

とも書かれています。

ヘッドライン

Node v0.12.3 (Stable)

blog.nodejs.org/2015/05/13/node-v0-12-3-0.12.3/

node.js ReleaseNote


Node v0.12.3リリース

0.9 released!

blog.polymer-project.org/announcements/2015/05/14/0.9-release/

WebComponents JavaScript library


Polymer 0.9リリース。
0.8でexperimentalだった機能がデフォルトサポートされている。
:rootセレクタ、Gesture、CSPのサポートやUtilの追加など。
Breaking Changeもあり、Migration guideが用意されている

Ember.js - Ember.js 1.12 and 1.13 Beta (Glimmer!) Released

emberjs.com/blog/2015/05/13/ember-1-12-released.html

JavaScript library ReleaseNote


Ember.js 1.12と1.13 Betaリリース。
computeにgetter/setterを使った方法を追加、併せてDecoratorsを使った方法をサポートする予定

Backbone.js

backbonejs.org

backbone.js library ReleaseNote


Backbone.js 1.2.0リリース
Viewの作成などをhookする機能の追加、モデルの"update"イベントの追加、ユニークidとなるmodeldの追加、ES6 modulesとして読み込んでも使えるように修正

Firefox — Notes (38.0) — Mozilla

www.mozilla.org/en-US/firefox/38.0/releasenotes/

firefox ReleaseNote


Firefox 38.0リリース。
Ruby要素のサポート、WebSocketがWeb Workerで動作するように、BroadcastChannel API、srcset属性とpicture要素のサポート、開発者ツールでcopy関数のサポートなど

babel/CHANGELOG.md at v5.3.0 · babel/babel

github.com/babel/babel/blob/v5.3.0/CHANGELOG.md#530

JavaScript Tools ReleaseNote


Babel 5.3.0リリース。
5.2.0からの主な変更点としてはes7.trailingCommas transformerの仕様追従、retainLinesのオプション追加など

アーティクル

Why Babel Matters

codemix.com/blog/why-babel-matters

JavaScript


Babelの基本的な機能の紹介、ES.nextと言われるようなまだ標準化されてない仕様の対応、Babel pluginでのコードの最適化や型チェック、マクロなどASTを扱うプラットフォームとして見るBabelについて

Function Bind Syntax · Babel

babeljs.io/blog/2015/05/14/function-bind

ECMAScript JavaScript


Babel 5.4でES.nextで提案されているStage 0の::によるBind構文の変換をサポート。
Function Bind Syntaxの挙動についての解説

We Tested How Googlebot Crawls Javascript And Here's What We Learned

searchengineland.com/tested-googlebot-crawls-javascript-heres-learned-220157

JavaScript google 検索


Google検索botがどこまでJavaScript等を解釈してクロールしているかの調査

ES6 In Depth: Template strings ✩ Mozilla Hacks – the Web developer blog

hacks.mozilla.org/2015/05/es6-in-depth-template-strings-2/

JavaScript ECMAScript


Template stringsについて。
Backtickから始まるtemplate literalやtagged templateについて

Dev.Opera — The State of Web Type

dev.opera.com/articles/state-of-web-type/

browser fonts まとめ


OpenTypeフォントに関する機能のブラウザサポートの状況についてのまとめ。
JustificationとHyphenation、Font Loadingについてなど

ブラウザでビジュアルテストをするreftest-runnerを作った | Web Scratch

efcl.info/2015/05/14/reftest-runner/

browser testing canvas JavaScript library webdriver


ブラウザの描画結果を比較する自動テストライブラリとコマンドラインツール。
2つのHTMLを用意して表示結果が一致するかどうかテストをするので、Canvasのテストなどに利用できる

A Complete Guide to SVG Fallbacks | CSS-Tricks

css-tricks.com/a-complete-guide-to-svg-fallbacks/

SVG まとめ


SVG Fallbackのまとめ

Bringing Node.js to Windows 10 IoT Core

blogs.windows.com/buildingapps/2015/05/12/bringing-node-js-to-windows-10-iot-core/

node.js JavaScript


Chakra JavaScriptエンジンを使ったNode.jsのforkが公開された。

BroadcastChannel API in Firefox 38 ✩ Mozilla Hacks – the Web developer blog

hacks.mozilla.org/2015/02/broadcastchannel-api-in-firefox-38/

firefox JavaScript WebPlatformAPI


Firefox 38.0でBroadcastChannel APIが実装された。
同じchannelを指定すれば、異なるタブやウィンドウ間でもメッセージのやり取りができるようになるAPI。
Blobデータのやりとりも可能

スライド、動画関係

Do not Measure the Weather

mrale.ph/talks/goto2015/#/

JavaScript performance スライド


計測と最適化の問題についてのスライド。
JSエンジンはJITコンパイルするため計測結果は未最適化+最適化になる。
場合によっては計測対象がdead codeとなり最適化によって消えているかもしれないので、計測できていないケースも存在する。
そのことを実際にIRHydra2を使って検証する話

Making a Silky Smooth Web // Speaker Deck

speakerdeck.com/paullewis/making-a-silky-smooth-web

browser performance CSS JavaScript スライド


JavaScript->Style->Layout->Paint->Compositeという表示までの流れをきれいに行う方法や開発者ツールの使い方について。
requestAnimationFrameの活用

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

State of Web Type

stateofwebtype.com/

fonts まとめ 検索


ウェブフォントとtypographic機能別のブラウザサポート状況をまとめているサイト

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

codemix/babel-plugin-typecheck · GitHub

github.com/codemix/babel-plugin-typecheck

JavaScript babel flowtype


flowtypeアノテーションからランタイム型チェックのコードへ変換するBabel plugin

hit9/ntt

github.com/hit9/ntt

JavaScript testing library


小さなテストモジュール。
テストコードそのもので実行できるので、Mochaなどのようにrunnerにあたる部分は不要となってる

watermark.js - watermarks in the browser

brianium.github.io/watermarkjs/

JavaScript 画像 library


画像のwatermarkを付けるライブラリ

Quench: The Gulp file generator.

quenchjs.com/

gulp webservice Tools


CSS、JavaScript、Imageについての項目を入力してgulpfileを生成してくれるツール。

leebyron/testcheck-js

github.com/leebyron/testcheck-js

JavaScript testing


QuickCheckライブラリ。
JasmineとMochaの拡張が用意されてる

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