Fork me on GitHub

2014-12-30のJS: jsdom 2.0.0、6to5 2.0.0、HTMLBars

Edit on GitHub 編集履歴を見る

JSer.info #208 - DOMのJavaScript実装(Node.jsでも動くDOMの実装)であるjsdom 2.0.0がリリースされました。

機能的な追加ではないですが、2.0.0となったのは今までDOM Level{1,2,3}別で実装されていたが、今後はLiving Standardモデルで実装していくという方針を示すためだそうです。

バージョン番号をつけるのはメリットよりもデメリットのほうが多いという過去の経験やjsdom内部でもlevel別だと辛い感じになってきたので、Living Standardモデルへと変えていくことになったようです。

公開APIについては殆ど変更はありませんが、内部的にかなり構造を変更していくリファクタリングをして行くようです。


ES6のコードをES5へ変換するツールである6to5 2.0.0(現時点で2.2.0まで出ていますが)がリリースされました。

詳しくはCHANGELOGを参照してもらうといいですが、Flowの型アノテーションがあってもパースして取り除けるように、ES5,6のpolyfillとして使用するライブラリをCore.jsに変更、パフォーマンスの改善等が行われています。


HTMLBars - A Feature-by-Feature Review | colintoh.comという記事では次期Emberが採用するHTMLBarsというテンプレートエンジンの仕組みについて書かれています。

現在のEmberはHandlebarsをそのまま使っていて、レンダリングまでに以下のようなフローが発生します。

テンプレート -> AST -> HTML String -> DOM

HTMLBarsではHandlebarsのSyntax自体はほぼ同じですが、レンダリングまでのフローが以下のように変更されます。

テンプレート (HTMLBarsがコンパイル)-> JavaScript関数 -> DOM

これは、今のReactがJSX(テンプレート)からReact.createElementのような関数に変換するのと似ていると思います。

これにより"HTML String"をパースしなおす必要がないため、パフォーマンスが改善できるという話が書かれています。

同じような話を#13 Virtual DOM | mozaic.fm@mizchiさんが話していたと思うので、一緒に聞くといいのかもしれません。(28:00ごろ)


ヘッドライン


Node v0.10.35 (Stable)

blog.nodejs.org/2014/12/23/node-v0-10-35-stable/

node.js ReleaseNote

Node v0.10.35リリース。

http://d.hatena.ne.jp/jovi0608/20141222/1419265270 の修正が入った


Ember.js - Ember.js 1.9.1 Released

emberjs.com/blog/2014/12/23/ember-1-9-1-released.html

JavaScript library ReleaseNote XSS

Ember.js 1.9.1 リリース。

Handlebarsテンプレートはタグのエスケープは自動でやるが、属性値にjavascript:等を指定した場合にXSSとなる可能性があったため自動的にエスケープされるように変更された


Release v1.5.0 · eslint/espree

github.com/eslint/espree/releases/tag/v1.5.0

JavaScript AST library ReleaseNote

esprima forkのespree 1.5.0リリース。

JSXのパースをサポート


jsdom/Changelog.md at 2.0.0 · tmpvar/jsdom

github.com/tmpvar/jsdom/blob/2.0.0/Changelog.md

JavaScript DOM library

jsdom 2.0.0リリース。

リファクタリング、内部構造を大きく変えていくリリース。

levelsという概念を捨ててLiving Standard Modelに従うように。

非標準なAPIを標準化されたものへ変更など


6to5/CHANGELOG.md at master · 6to5/6to5

github.com/6to5/6to5/blob/master/CHANGELOG.md#200

JavaScript ECMAScript Tools ReleaseNote

ES6のコードをES5に変換する6to5 2.0.0リリース。

FlowTypeのサポート、polyfill等をcore-jsに変更、Performanceの改善、6to5/registercacheオプションの追加等


Brackets Blog - The Free, Open Source Code Editor for the Web

blog.brackets.io/2014/12/18/brackets-1-1-and-extract-for-brackets-0-6-now-available/

editor ReleaseNote

Brackets 1.1リリース。

クロスブラウザのLive Previewを実験的にサポート。


アーティクル


Shape Security Labs: Announcing the Shift JavaScript AST Specification

engineering.shapesecurity.com/2014/12/announcing-shift-javascript-ast.html

JavaScript AST spec

SpiderMonkey ASTは内部表現として始まったので、ツールから扱いにくい部分やES6のサポートの問題がでてきた。 "Shift"プロジェクトではそのASTの仕様策定、パーサ、ジェネレータ、バリデータ、SpiderMonkey ASTからの変換ツール、Javaの実装などが公開されている。


Performance Calendar » Fast-Forward Performance – The Future Looks Bright

calendar.perfplanet.com/2014/fast-forward-performance-the-future-looks-bright/

browser JavaScript API performance

パフォーマンス改善に役立つAPI、測定をするためのAPIのまとめ。

ブラウザのサポート状態について


HTMLBars - A Feature-by-Feature Review | colintoh.com

colintoh.com/blog/htmlbars

JavaScript

Emberが採用するHTMLBarsについて。

以前のEmberのレンダリングはHandlebarsをそのまま使っていたため

テンプレート -> AST -> HTML String -> DOM

というレンダリングのフローとなっていて遅かった。

HTMLBarsはHandlebarsのテンプレート記法を使うのは同様だが、上記のフローを以下のように行える。

テンプレート (HTMLBarsがコンパイル)-> JavaScript関数(DOM API) -> DOM

このようなフローとなった理由や仕組みについて書かれている。

内部的にはHTMLBars ASTというものがあるが、レンダリングのフローではコンパイル結果の関数を使うので、HTML Stringのパースがなくなる点が大きな違い。


Symbols in ECMAScript 6

www.2ality.com/2014/12/es6-symbols.html

ECMAScript JavaScript

ES6のSymbolsについて。

Symbolの使い方、const Symbol()でのユニーク値としての利用、WeakMapと合わせてのプライベート値、メタ値との利用、iframe、なぜ文字列じゃなくてSymbolなのかについて


Smashing Magazineのパフォーマンス改善ケースが凄まじい件 — MOL

t32k.me/mol/log/style-class-conference/

JavaScript CSS performance

Smashing Magazineのパフォーマンス改善について。

Critical Rendering Pathの最適化、パフォーマンス改善の指標をSpeed Index <= 1000としている点について等


Functional Reactive Programming with the Power of Node.js Streams

blog.risingstack.com/functional-reactive-programming-with-the-power-of-nodejs-streams/

node.js stream 関数型プログラミング

NodeのStreamとFRPの導入的な記事。

リアクティブプログラミングはどのようなケースで有用なのか、FRPのライブラリとしてRxJSやBacon等が既にある。

またNodeのStreamとの互換性を高めたHighland.jsというライブラリの紹介記事


The state of the Web Notifications API - Aurelio De Rosa blog

aurelio.audero.it/blog/2014/10/18/state-web-notifications-api/

JavaScript WebPlatformAPI

Web Notifications APIのevents周りの仕様がW3CとWHATWGで異なるが、それぞれのブラウザの実装はどうなっているかについて。


Javascript-globalization by rxaviers

rxaviers.github.io/javascript-globalization/

JavaScript i18n library まとめ

ECMA i18n APIやFormatJS等の国際化ライブラリなどの特徴や機能比較のまとめ


スライド、動画関係


Flux react現状確認会

www.slideshare.net/VOYAGE_GROUP/flux-react

React Flux スライド

FluxとReactについてのスライド。

アーキテクチャ = オブザーバパターン、データの一方通行性、メリット・デメリット、ViewライブラリとしてReactを選んだ理由について。

実際にFlux的にやっての本家との違いについて


Chrome 関連の動画に日本語字幕が付きました - Google Developer Japan Blog

googledevjp.blogspot.com/2014/12/chrome.html

Chrome 翻訳

I/O Bytes 2014のChrome関係の動画に日本語字幕がついた


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


JSVerify — property based testing for JavaScript. Like QuickCheck.

jsverify.github.io/#jsverify

JavaScript testing library

QuickCheckを行うライブラリ。

MochaやJasmineとの連携も用意されている


azu/textlint

github.com/azu/textlint

JavaScript Markdown Tools library node.js

テキストやMarkdownをLintするツール。

ESLintのようにルールをJavaScriptで書いて拡張出来る。


mapbox/pbf

github.com/mapbox/pbf

JavaScript library

ファイルサイズの小さいprotocol buffersの実装ライブラリ


書籍関係


Knockout.js - O'Reilly Media

shop.oreilly.com/product/0636920035367.do

JavaScript library book

Knockout.jsについての書籍


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