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ごろ)
JSer.infoをサポートするには
- 😘 知り合いにJSer.infoをおすすめする
- ❤️ GitHub Sponsorsで@azuのスポンサーになる
- 🐦 X(Twitter)で@jser_infoをフォローする
JSer.info Sponsors
JSer.info SponsorsはGitHub SponsorsとしてJSer.infoを支援してくれている方々です。
ヘッドライン
Node v0.10.35 (Stable)
blog.nodejs.org/2014/12/23/node-v0-10-35-stable/
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
Ember.js 1.9.1 リリース。
Handlebarsテンプレートはタグのエスケープは自動でやるが、属性値にjavascript:等を指定した場合にXSSとなる可能性があったため自動的にエスケープされるように変更された
Release v1.5.0 · eslint/espree
github.com/eslint/espree/releases/tag/v1.5.0
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
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
ES6のコードをES5に変換する6to5 2.0.0リリース。
FlowTypeのサポート、polyfill等をcore-jsに変更、Performanceの改善、6to5/registerにcacheオプションの追加等
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/
Brackets 1.1リリース。
クロスブラウザのLive Previewを実験的にサポート。
アーティクル
Shape Security Labs: Announcing the Shift JavaScript AST Specification
engineering.shapesecurity.com/2014/12/announcing-shift-javascript-ast.html
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/
パフォーマンス改善に役立つAPI、測定をするためのAPIのまとめ。
ブラウザのサポート状態について
HTMLBars - A Feature-by-Feature Review | colintoh.com
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
ES6のSymbolsについて。
Symbolの使い方、const Symbol()でのユニーク値としての利用、WeakMapと合わせてのプライベート値、メタ値との利用、iframe、なぜ文字列じゃなくてSymbolなのかについて
Smashing Magazineのパフォーマンス改善ケースが凄まじい件 — MOL
t32k.me/mol/log/style-class-conference/
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の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/
Web Notifications APIのevents周りの仕様がW3CとWHATWGで異なるが、それぞれのブラウザの実装はどうなっているかについて。
Javascript-globalization by rxaviers
rxaviers.github.io/javascript-globalization/
ECMA i18n APIやFormatJS等の国際化ライブラリなどの特徴や機能比較のまとめ
スライド、動画関係
Flux react現状確認会
www.slideshare.net/VOYAGE_GROUP/flux-react
FluxとReactについてのスライド。
アーキテクチャ = オブザーバパターン、データの一方通行性、メリット・デメリット、ViewライブラリとしてReactを選んだ理由について。
実際にFlux的にやっての本家との違いについて
Chrome 関連の動画に日本語字幕が付きました - Google Developer Japan Blog
googledevjp.blogspot.com/2014/12/chrome.html
I/O Bytes 2014のChrome関係の動画に日本語字幕がついた
ソフトウェア、ツール、ライブラリ関係
JSVerify — property based testing for JavaScript. Like QuickCheck.
QuickCheckを行うライブラリ。
MochaやJasmineとの連携も用意されている
azu/textlint
テキストやMarkdownをLintするツール。
ESLintのようにルールをJavaScriptで書いて拡張出来る。
mapbox/pbf
ファイルサイズの小さいprotocol buffersの実装ライブラリ
書籍関係
Knockout.js - O'Reilly Media
shop.oreilly.com/product/0636920035367.do
Knockout.jsについての書籍
