Fork me on GitHub

2015-03-23のJS: IEのアップデート、RxJS入門、Chrome DevToolsの新機能と計測の仕方

Edit on GitHub 編集履歴を見る

JSer.info #220 - Windows 10 Technical Previewがアップデートされ、IEのレンダリングエンジンもアップデートされています。
Rendering engine updates in March for the Windows 10 Technical Preview - IEBlog - Site Home - MSDN Blogsでは Web Audio APIやTouch Eventsなど最近サポートされた機能についてまとめられています。


「RxJS」初心者入門 - JavaScriptの非同期処理の常識を変えるライブラリ | 株式会社LIGという記事ではReactive ExtensionsのJavaScript実装であるRxJSについて書かれています。

Rxとはどういう概念やパターンを持っているか、ObserverとObservable、オペレーターといったRxJSを構成する要素について色々なサンプルコード共に解説されています。


Addy Osmani氏によるChrome開発者ツールの新しい機能の紹介がされている発表の動画です。
以前話題となったWikipediaとjQueryのユースケースを例にどうやってパフォーマンスの問題を計測していくかなど実践的なツールの使い方について話されています。

動画は時間内に終わらなかったためスライドの最後まで話されてないですが、どういう所が描画のボトルネックになっているのかを見ていく話としても面白いので見ておくといいかもしれません。


ヘッドライン


Rendering engine updates in March for the Windows 10 Technical Preview - IEBlog - Site Home - MSDN Blogs

blogs.msdn.com/b/ie/archive/2015/03/18/rendering-engine-updates-in-march-for-the-windows-10-technical-preview.aspx

IE ReleaseNote

Windows 10 Technical Previewのアップデートが行われて、ブラウザのレンダリングエンジンもアップデートされている。
WAI-ARIA Landmark Roles、Web Audio API、Touch Events、Fullscreen APIなどのサポートなど


flow/Changelog at v0.7.0 · facebook/flow

github.com/facebook/flow/blob/v0.7.0/Changelog

JavaScript flowtype Tools ReleaseNote

FlowType 0.7.0リリース。
ES6 modulesのサポート開始、null/undefinedとの比較するケースの対応改善、hasOwnPropertyを呼び出してるケースの対応改善


React v0.13.1 | React

facebook.github.io/react/blog/2015/03/16/react-v0.13.1.html

React ReleaseNote

React v0.13.1リリース


harmony:specification_drafts [ES Wiki]

wiki.ecmascript.org/doku.php?id=harmony:specification_drafts#march_17_2015_rev_36_release_candidate_3

ECMAScript ReleaseNote

ES6仕様書RC3リリース


アーティクル


Explore React

x-team.github.io/explore-react/

React コードリーディング

Reactのコードリーディングをしながら内部的な仕組みを見ていく話


Moving Codecademy to ECMAScript 6, Webpack, and React

artur.co/articles/moving-codecademy-to-es6-webpack-and-react/

JavaScript ECMAScript React

Codecademyのクライアントサイドのアーキテクチャの変遷について


Chromium Blog: New JavaScript techniques for rapid page loads

blog.chromium.org/2015/03/new-javascript-techniques-for-rapid.html

Chrome JavaScript

Chrome 41でasync属性をつけたスクリプトはダウンロードが始まった瞬間にパーサ用の別スレッドでパースされるためより高速になるとの話


「RxJS」初心者入門 - JavaScriptの非同期処理の常識を変えるライブラリ | 株式会社LIG

liginc.co.jp/web/js/151272

JavaScript Rx

RxJSの入門記事。
Rxのパラダイム的な話やサンプルなどがまとまってる


ES5の範囲でOption型を表すライブラリ、option-t を作った - snyk_s log

saneyukis.hatenablog.com/entry/2015/03/20/191424

JavaScript library Rust Promises

(初期状態)未選択を状態として保存したい時に使うOption typeの実装ライブラリ(like Rust)


JavaScript - 4パターンのWebWorker生成方法とインラインワーカーの技法 - Qiita

qiita.com/mohayonao/items/872166cf364e007cf83d

JavaScript webworker

WebWorkerの生成方法についてのまとめ


material-fluxというFluxライブラリをREADME駆動で開発した | Web Scratch

efcl.info/2015/03/17/material-flux/

JavaScript library Flux ECMAScript

特殊なハックをできるだけ排除したFluxライブラリを作った話とREADME駆動について。
またES6 ClassesをベースとしたAPIについて


RemoteDebug and cross-browser DevTools. One year later. — Kenneth Auchenberg

kenneth.io/blog/2015/03/12/remotedebug-one-year-later

JavaScript browser debug

ブラウザ間の共通デバッグプロトコルを作るプロジェクトであるRemoteDebugを公開して1年経ってどのような変化があったかについて


スライド、動画関係


DevTools: State Of The Union 2015 // Speaker Deck

speakerdeck.com/addyosmani/devtools-state-of-the-union-2015

Chrome debug Tools スライド

Chromeの開発者ツールの新しい機能や実際のパフォーマンス計測、問題の見つけ方について。
WikipediaとjQueryの例、一つの処理が100ms以上取ってるなら危険、hide()のボトルネック、まずは計測することから始めるという話


egghead.io/lessons/node-js-using-npm-link-to-use-node-modules-that-are-in-progress

node.js npm 動画

npm linkを使った開発についてのスクリーンキャスト


jQuery UK Conference - Oxford 2015

jqueryuk.com/2015/videos.php

jQuery 動画 まとめ

jQuery UK 2015の動画が公開された


ウェブパフォーマンスの基礎とこれから

www.slideshare.net/kawada_hiroshi/ss-46149727

web performance スライド

通信についてを中心に扱うパフォーマンスについてのスライド
ウェブサイトの表示までにどういう通信が起きてるか、ブラウザ上でどうやって計測するかやPerformance Timelineなどの仕様について、HTTP/2での戦略の違いなど


サイト、サービス


Jank Free: Let's Make the Web Silky Smooth!

jankfree.org/

JavaScript browser Chrome V8 performance 動画 まとめ

ウェブサイトで60FPSの描画をするためのパフォーマンスチューニング等についてのスライド、動画や記事のまとめサイト。


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


eatcodeplay/Konsole.js

github.com/eatcodeplay/Konsole.js

JavaScript debug library

画面内にコンソールを表示できるFirebug Lite的なライブラリ。
console APIの上書き、DOMのインスペクト、CSSの操作、FPSの表示など


Hamsa

gethamsa.com/

JavaScript library

Object.observe()(又はpolyfill)を使ったモデルライブラリ。
スキーマ的なプロパティの型やデフォルト値の定義、class継承、Object.observe()を使った変更監視、find系の探査メソッドを持つ


書籍関係


O'Reilly Japan - 入門 React

www.oreilly.co.jp/books/9784873117195/

React book

2015年03月27日発売
Developing a React Edgeの翻訳本。


HTML5 & CSS3 For The Real World, 2nd Edition - O'Reilly Media

shop.oreilly.com/product/9780987467485.do

HTML5 CSS book

広義のHTMLとCSSの新しいAPIなどを見ていく書籍


Functional Programming in JavaScript - O'Reilly Media

shop.oreilly.com/product/9781784398224.do

JavaScript book

2015年3月発売。
関数型JavaScriptについての書籍


React+d3.js by Swizec Teller [Leanpub PDF/iPad/Kindle]

leanpub.com/reactd3js

React d3.js book

ReactとD3.jsについての書籍


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