JSer.info #192 - 今週はnodeconfeuがあったのと、自分でも最適化についての記事を書いた影響でV8の最適化に関するものが多いです。
V8 Installation and d8 shell usage では、V8をビルドして起動オプションを使って最適化やトレースをする方法について分かりやすく紹介されています。
V8の最適化とIRHydraでの可視化とベンチマークについてのメモ では、Hidden Class等の著名な最適化がどうなると効かなくなるかをIRHydra2を使って見る方法等について書かれています。
V8の仕組みやプロファイリングについてはthlorenz/v8-perfに参考となる資料がまとめられていて、また同作者によるDemystifying v8 and JavaScript Performanceというスライドが公開されています。
(内容的にはv8-perfの一部)
Intro to Broccoli というスライドでは、ビルドツールであるBroccoliとは何かについて書かれています。
In Rails speak Broccoli is the asset pipeline, and Grunt and Gulp are rake
というように、Railsでいうasset piplineのような効率的なビルドを目的にしています。
ビルド対象はファイル単位ではなくTreeで扱うようになっていて、その仕組みについてはBroccoli: First Beta ReleaseやNo more grunt watch: Modern build workflows with Broccoli - Ember Fest!にて紹介されています。
See also : nodeca/mincer
お知らせ
今回で192回目の更新ですが、このままのペースだと11月10日(月)に200回目となるので、
それを記念して勉強会的なイベントをやろうかと思ってます。
詳細は(まだ詳細は決まってない)以下に書いてありますが、2014年11月09日(日)を予定しています。
まだ、参加人数とか会場も決まってないので(会場を募集しています!)、イベントページを作って詳細が決まったらもう一度お知らせします。
参加人数の参考にしたいので、参加するかもという人は を押しておいてもらえると助かります。
ヘッドライン
Intern 2.1 released | Blog | SitePen
www.sitepen.com/blog/2014/09/12/intern-2-1-released/
Intern 2.1リリース。
HTMLレポーター/JUnit XMLレポーターの追加。
Release 3.1 “Satyameva Jayate” · postcss/autoprefixer
github.com/postcss/autoprefixer/releases/tag/3.1.0
autoprefixer 3.1リリース
アーティクル
V8 Installation and d8 shell usage
gist.github.com/kevincennis/0cd2138c78a07412ef21
d8コマンドをインストールして、最適化/非最適化、プロファイリング、GCのトレース、Hidden Class等のチェック方法などについてまとまってるチュートリアル
V8の最適化とIRHydraでの可視化とベンチマークについてのメモ | Web Scratch
efcl.info/2014/09/13/v8-optimization-memo/
V8のHidden Class等のJavaScriptの最適化やhot codeについて。
IRHydra2を使った最適化されてない事の可視化や参考リソースについて。
「for やめろ」またはイベントループと nextTick() - Block Rockin’ Codes
jxck.hatenablog.com/entry/for-with-eventloop
node.jsにおけるイベントループとブロックについて。
setTimeout、process.nextTick、setImmediateの意味の違い。
I/Oイベントとそれぞれの実行タイミングについて分かりやすく解説してる。
Integrating D3.js visualizations in a React app - Nicolas Hery
nicolashery.com/integrating-d3js-visualizations-in-a-react-app/
D3.jsのデータ・ドリブンのデータ更新とReactのVirtual DOMを組み合わせた話
Firefox Add-on Enables Web Development Across Browsers and Devices ✩ Mozilla Hacks – the Web developer blog
hacks.mozilla.org/2014/09/firefox-tools-adapter/
Firefoxの開発者ツールを使ってChromeやSafariで表示してるページをデバッグするアダプタのアドオン。
remotedebug.org と似ているが、共有のプロトコルの提供ではなく、Firefoxのプロトコルをベースとしてる
スライド、動画関係
Intro to Broccoli
aexmachina.info/assets/talks/intro-to-broccoli/#1
ビルドツールであるBroccoliについてのスライド。 Railsで言えばBroccoliはasset pipelineで、GruntやGulpはrakeに当たるツール。
ビルドに焦点をおいているという特徴がある
Talk talks_12C5ADD371A9A5D4 - Ember Fest!
emberfest.eu/talks/talks_12C5ADD371A9A5D4
JavaScriptベースのビルドツールであるBroccoliについての動画
https://github.com/broccolijs/broccoli
Broccoliがどのようなプロセスでファイルを処理するかについて話されてる
9 anti-patterns for node.js teams
www.slideshare.net/jeharrell/9-antipatterns-for-nodejs-teams
node.jsにおける9つのアンチパターンについてのスライド http://efcl.hatenablog.com/entry/2014/09/11/212846
2014-09-09-performance-in-css-hikalab-yuya-saito.pdf • Droplr
CSSとパフォーマンスについてのスライド。CSSのスタイル変更がどのようなレンダリングツリーの変更/再描画を起こしてるか、それを計測する方法、回避する方法について詳しく書かれてる
OSCON - React Architecture // Speaker Deck
speakerdeck.com/vjeux/oscon-react-architecture
Reactの歴史とReactのDOM Diffについてのスライド
https://www.youtube.com/watch?v=eCf5CquV_Bw
ReactのVirtual DOM = DOMのバージョン管理という話やVirtual DOMのdiffの仕組みについて解説されてる
Building high quality services at Uber
raynos.github.io/nodeconfeu2014-talk/#/
Uber社のnode.jsを使ったプロダクションを運用するにあたってのスライド。
ログ、モニター、設定の管理、例外のログ、プロファイル、初期設定のscaffolding等のツールについて。
Asynchronous JavaScript & Promises
www.innoarchitech.com/asynchronous-javascript-promises/
JavaScriptの非同期処理、Promiseについての動画とスライド。
Promiseとはどういうものかについて
BSidesLA Managing Content Security Policy // Speaker Deck
speakerdeck.com/oreoshake/bsidesla-managing-content-security-policy
CSPについてのスライド。
CSPとは何か、どうやって適応するか、どうやって管理するかについてTwitterの人が発表した内容。
CSP Lv2のscript hashについてやCSPレポート解析と http://caspr.io/ について
サイト、サービス
Polyfill service
polyfillライブラリを配信してくれるCDNサービス。
クエリでfeaturesやuaを指定してそれに対するpolyfillをまとめくれたものを配信してくれる
srcset と sizes
terkel.github.io/srcset-sizes/
srcset と sizes 属性の入門の翻訳
http://ericportis.com/posts/2014/srcset-sizes/
thlorenz/v8-perf
V8のパフォーマンスに関するレポートや資料のまとめ。
Data type、コンパイラ、最適化、GC、メモリ、CPUプロファイリング。
またfast objectであるかどうかの確認方法やプロファイルの取り方などについて
Speed Hall of Fame - The Chromium Projects
www.chromium.org/developers/speed-hall-of-fame
ChromiumやV8のパフォーマンスの最適化/向上のIssue(内容)とその結果についてまとめられてるページ
DartLanguageSpecification_Japanese.pdf
www.cresc.co.jp/tech/java/GoogleDart/DartLanguageSpecificationJapanese.pdf
Dartの仕様書日本語訳
ECMA-408版
ソフトウェア、ツール、ライブラリ関係
ES6 right now
johnkpaul.github.io/presentations/jqcon/2014/es6-now/#/
ES6の動かせるサンプルと共に機能紹介と今スグ使う設定についてのスライド
traceur(+grunt/gulp/broccoli/browserify)やes6-shimの紹介
davidmarkclements/decofun
github.com/davidmarkclements/decofun
無名関数を自動的にそのコンテキストに応じた名前を付けるデバッグツール。
GraftJS/jschan · GitHub
libchanのJavaScriptポート。
ネットワークを超えてChannel同士でやり取りをする。
WebSocketsとSPDYをサポートしていて、msgpackを使う
uupaa/WMCache.js
FileSystem, IndexedDB, Quota Management APIを使って100MB超えのテンポラリなストレージを管理するライブラリ
hello.js - Javascript API for OAuth2 authentication and REST services
OAuth 2対応のアプリの認証やAPIを叩く機能を持ったライブラリ。
https://auth-server.herokuapp.com/ という認証のサーバを使っていて、クライアントサイドを書くだけでGitHubやFacebook等のAPIを利用できる
BlackDice/lill
es6-symbolを使った linked-listの実装ライブラリ
ブラウザ内で安全に文字列からDOMを組み立てるためのRickDOMというライブラリを書いた - 葉っぱ日記
d.hatena.ne.jp/hasegawayosuke/20140912/p1
DOMParserやcreateHTMLDocumentを使って文字列から安全にDOMを組み立てるライブラリ
thlorenz/proxyquireify
github.com/thlorenz/proxyquireify
requireをラップして読み込んだモジュールのメソッドのstubを行えるbrowserify plugin。
変換によってDIが行われるので元モジュールに特殊な仕組みが必要ない
書籍関係
JavaScript: Novice to Ninja - O'Reilly Media
shop.oreilly.com/product/9780992461225.do
2014年10月 発売
基礎から学ぶJavaScript
