2013-11-18のJS: Dart 1.0、jQuery 2.1.0 Beta 2、60fpsのスクロール

JSer.info #149 - Dartが発表されてから約2年、 Dart SDK 1.0がリリースされました。

jQuery 1.11.0/2.1.0 Beta 2がリリースされました。
結構大きそうな変更としてはAMDへの移行進めたのと関係ありそうですが、“lazy feature detects”が行えるようになり、
jQueryは読み込み時にfeature detectをするためにDOMをいじったりしていて時間がかかっていた部分が、
それらの機能を使う時に初めてfeature detectするような遅延処理がはいったみたいです。

0-9, Android, iOSでのjQuery, jquip, zepto, jQ.Mobi, riddle初期化時間比較
結構前のやつですが、mobileだとこの辺で初期化にかかる時間の差が結構でていた。

詳細は以下あたりのチケットを見ていくといい気がします。(多分2.1.0正式リリース時にちゃんと解説される気がします)

VelocityConf: Rendering Performance Case Studies // Speaker Deckというスライドでは、スクロールのパフォーマンスをどう改善するかについて、
最近見かけるCSSのGPUレイヤーの話などがよくまとまっていて面白いと思います。

—-

後、tkbjsでJavaScript ASTについて発表してきました | Web scratchで少しだけここ最近のJSer.infoについても書きましたが、
要はazu/jser.infoにissueとか自由に立てていいよという話なので大したことは書いてないです。

ヘッドライン

Dart News & Updates: Dart 1.0: A stable SDK for structured web apps
http://news.dartlang.org/2013/11/dart-10-stable-sdk-for-structured-web.html

dart ReleaseNote

Dart 1.0リリース.

jQuery 1.11.0/2.1.0 Beta 2 Released | Official jQuery Blog
http://blog.jquery.com/2013/11/15/jquery-1-11-02-1-0-beta-2-released/

jQuery ReleaseNote

jQuery 1.11.0/2.1.0 Beta 2 リリース.
npmからインストールできるように、起動時にチェックしていた処理をlazyに出来るように変更、SouceMapコメントがCDNのものからは取り除かれるように

Changelog · lodash/lodash Wiki
https://github.com/lodash/lodash/wiki/Changelog#v230

JavaScript library ReleaseNote

lodash 2.3.0リリース.
_.createと _.noopの追加、_.debounce と _.throttleのメモリリークの解消やメソッドの最適化等

WebStorm 7.0.2 is available: Mocha integration and improved Dart support | JetBrains WebStorm Blog
http://blog.jetbrains.com/webstorm/2013/11/webstorm-7-0-2-is-available/

WebStorm ReleaseNote

WebStorm 7.0.2リリース.
Dart対応の改善、Mochaをサポート、CSS Flexbxへの対応

アーティクル

VelocityConf: Rendering Performance Case Studies // Speaker Deck
https://speakerdeck.com/addyosmani/velocityconf-rendering-performance-case-studies

performance browser スライド

60fpsでのスクロールを実現するために、どのような問題(jank)があるのかをみていくレンダリングのパフォーマンスについて書かれているスライド。
reflowや画像のデコード等重たい箇所をChrome Dev Toolsで見つけて解決していく方法についてや、
ケーススタディとしてパララックスなサイトで、
スクロールする度に描画必要な要素をCSS translate3d等を使ってGPUレイヤーを分ける事で高速化する話。

またGoogle+の例にtranslate3dをやり過ぎると逆に合成に時間がかかりすぎる問題を生む話など。

Angular.jsのngAnimateについての簡単なデモと1.2.0 - 車輪を再発明 / koba04の日記
http://d.hatena.ne.jp/koba04/20131114/1384355889

AngularJS

Angular.js 1.2のngRepeat、ngAnimateについて

AbsurdJS fundamentals
http://krasimirtsonev.com/blog/article/AbsurdJS-fundamentals

JavaScript CSS

JavaScriptで書くCSSプリプロセッサのAbsurdJS について

An Introduction To DOM Events | Smashing Coding
http://coding.smashingmagazine.com/2013/11/12/an-introduction-to-dom-events/

JavaScript DOM event

DOMイベントについて詳しく書かれてる記事.
eventオブジェクトの中身や、キャプチャー/バブリングフェーズについて、stopPropagation/preventDefaultの違い、カスタムイベントについて書かれてる

Grunt Tips and Tricks - Pony Foo
http://blog.ponyfoo.com/2013/11/13/grunt-tips-and-tricks

Grunt Tips

Grunt Tips集。
loadNpmTasksをまとめる、watchをまとめすぎると遅くなるので分ける、JSHintレポーター、ファイル分割について

Functional data structures in JavaScript with Mori - sitr.us
http://sitr.us/2013/11/04/functional-data-structures.html

JavaScript 関数型言語 library

moriというClojureの関数型を模したデータ構造とそれを扱うAPIを持つJavaScriptライブラリについての紹介記事.

Modules: The Right Way | dontkry.com
http://dontkry.com/posts/code/modules-the-right-way.html

node.js

nodeでのモジュールの構造的な管理について

Live editing WebGL shaders with Firefox Developer Tools ✩ Mozilla Hacks – the Web developer blog
https://hacks.mozilla.org/2013/11/live-editing-webgl-shaders-with-firefox-developer-tools/

WebGL firefox デバック

Firefox 27に追加されたShader Editorについて。
WebGLのシェーダー部分を編集等できるデバッグツールが開発者ツールに追加された

HTML Imports: #include for the web - HTML5 Rocks
http://www.html5rocks.com/en/tutorials/webcomponents/imports/

HTML

HTML importについて特徴や使い方、機能判定、Web Components <template>と一緒に使う場合やCORSについて。
importを使ったライブラリの依存管理、importはメインHTMLのパースをブロッキングしない特徴などについて

スライド、動画関係

Angular University Devoxx 2013 - Google ドライブ
https://docs.google.com/presentation/d/1eQ3q_Y3Q2ra4PzWHrQ_E60Ar1-2IRooXI4P-fW0npzQ/preview#slide=id.p49

AngularJS スライド

AngularJSの構成要素について詳しく書かれてるスライド