JSer.info #203 - Chrome 39がリリースされました。
実装された機能などについてはβ時のリリースノートを参照して下さい。
ES6 Generatorがデフォルトで有効になったり、Web Animationsの実装が進められています。
また Web Application Manifestの対応やBeacon APIが実装されています。
通常のXHRを使った非同期通信ではページを閉じてしまうとそのデータを送ることが保証出来ませんが、 Beacon APIを使うことでUIをブロックすることなくちゃんとデータを送れるようになります(ビーコンというぐらいなので大きなデータを送る用途ではありません)
例えば、リンクがクリックされた計測データを画面が遷移する前に送ろうとした時にXHRでは一度Clickをキャンセル->XHRでデータを送る->遷移し直すという事(もしくは同期XHR)をしていましたが、 Beacon APIを使えば単純にデータをnavigator.sendBeaconで送ればよくなります。
Modern Debugging Experience: Part 2 - Tuts+ Code Tutorial という連載では(Chromeの)開発者ツールを使ったJavaScriptのデバッグテクニックについて色々な手法が書かれています。
- Modern Debugging Experience 連載シリーズページ
debuggerステートメントを使った単純なbreakだけではなく、Object.observeやgetter/setterなどと組み合わせて使う方法等新しい方法も紹介しています。
また、条件付きのBreakpoints(コード、DOM、Event)やコールスタックの読み方、Node.jsのデバッグツールについても書かれています。
FacebookからJavaScriptの型チェックツールであるFlowがリリースされました。
Flowは同じくFacebookが公開してるHackと似た部分があり、並列に処理する事で高速でインクリメンタルな型チェックを行う事を目的としています。
/* @flow */ というコメントで宣言した箇所についてのみ型チェックを行うため、段階的に型付けをしていけるようになっています。
まだバージョンがv0.1.1なので、標準の型定義に足りないものがあったり、Windowsで動かすには非公式のビルドのみだったりしますが色々期待できるツールとなりそうです。
今後の方針についてはFlow | Future Plansに書かれています。
JSer.infoをサポートするには
- 😘 知り合いにJSer.infoをおすすめする
- ❤️ GitHub Sponsorsで@azuのスポンサーになる
- 🐦 X(Twitter)で@jser_infoをフォローする
JSer.info Sponsors
JSer.info SponsorsはGitHub SponsorsとしてJSer.infoを支援してくれている方々です。
ヘッドライン
Chromium Blog: Chrome 39 Beta: JS Generators, Animation Playback Control, and the WebApp Manifest
blog.chromium.org/2014/10/chrome-39-beta-js-generators-animation.html
Chrome 39リリース。(Stableのリリースノートはこちら)
Generatorがデフォルトで有効、Web Animationのplay()やpause()のサポート、 Web Application Manifest、 Beacon API のサポート
アーティクル
Send beacon data in Chrome 39
updates.html5rocks.com/2014/10/Send-beacon-data-in-Chrome-39
Chrome 39でBeacon APIが入った。
Beacon APIを使えばクリックしてページ移動するときのクリックのログも非同期でちゃんと送ることが出来る。(単純なXHRだと送り終わる前に遷移してしまう)
Modern Debugging Experience: Part 2 - Tuts+ Code Tutorial
code.tutsplus.com/tutorials/modern-debugging-experience-part-2--cms-22584
開発者ツールを使ったデバッグ方法のTips。
debuggerステートメント、コールスタック、getter/setter/Object.observe等を使ったアクセス時にBreakさせる方法やWatch Expression、イベントリスナーのデバッグ等について書かれている
My five promise patterns
remysharp.com/2014/11/19/my-five-promise-patterns
Promiseパターンについて
Node.jsスタイルの高階関数をPromiseを返すようにするdenodeify、bindによる引数の固定、コールバックとの併用、rejectではなく常にthrowする、処理の終わりでいつもcatchする
Property testing in JavaScript with quick_check.js - RightScale Engineering Blog
eng.rightscale.com/2014/07/18/quick-check-js.html
JavaScriptのQuickCheck実装である quick_check.js について
uxebu/mocha-sinon-traceur-example
github.com/uxebu/mocha-sinon-traceur-example
ES6でテストを書いてTDDするサンプルプロジェクト
スライド、動画関係
Nodevember - YouTube
www.youtube.com/user/nodevember/feed
http://nodevember.org/ の動画が公開されている
Real World React - YouTube
www.youtube.com/watch?v=uZgAq1CZ1N8
ReactのComponentの作り方やテストについて詳しい発表
DOM Performance (JSNext Bulgaria)
www.slideshare.net/ickatanet/dom-performance-jsnext-bulgaria
DOM操作のパフォーマンスTips的なスライド。
Event Delegate、Style操作、DOM Nodeの作成(clone、DocumentFragment)、DOM Nodeの削除について。
KnowThen – Screencasts For Developers
JavaScriptについてのスクリーンキャストをするサイト
ソフトウェア、ツール、ライブラリ関係
newton-software/devil
github.com/newton-software/devil
node-inspectorのようにGUIでNode.jsアプリのデバッグを行う事が出来るツール。
Flow | A static type checker for JavaScript
Facebookの静的型チェックツール。
OCamlで書かれていて、TypeScriptと大体互換性のある型定義を行える。
サーバとして動かす事もできる。HHVM/Hackみたいなインクリメンタルな型付けを行える
axemclion/protractor-perf
github.com/axemclion/protractor-perf
Protractorのパフォーマンス測定版のようなツール
inikulin/ineed
HTMLのスクレイピング、変換処理(Reprocessing)を行えるNode.jsモジュール
jas-/secStore.js
localStorage/sessionStorage/Cookieで暗号化をサポートするラッパーライブラリ
janmonschke/Web-Audio-Editor
github.com/janmonschke/Web-Audio-Editor
ウェブベースのWeb Audio Editor
SpoonX/useuses
@usesアノテーションコメントでそのJSファイルが依存するファイルパスを記述して使うモジュール管理ルール、ビルドツール
concatする程度にはシンプルで、CommonJSのような強い依存関係ではなく、単純にコメントを追加するだけなので余計にファイルは必要ない。
techlayer/espresso.js
github.com/techlayer/espresso.js
BackboneとReactをインスパイアしたMV*ライブラリ。
Fluxのデータフローを一方向にするアイデアをBackboneに持ってきた感じのライブラリ
書籍関係
Discover AngularJS by Adam Burak [Leanpub PDF/iPad/Kindle]
AngularJSチュートリアル本
