Fork me on GitHub

2016-03-23のJS: Chrome 50β、Reactのパフォーマンス調査改善、Node.js compat table

Edit on GitHub 編集履歴を見る

JSer.info #271 - Chrome 50 Betaがリリースされました。

ページを完全に表示するために必要なリソースを先に読み込めるlink rel="preload"がサポートされています。

<link rel="preload">について詳しくは以下の記事にまとまっています。

また、FirefoxやIEには実装されていましたがChromeでも`HTMLCanvasElement.toBlob()がサポートされています。


Reactを使ったプロダクトのパフォーマンスを改善した話 | GMOメディア エンジニアブログという記事ではReactを使ったウェブアプリのパフォーマンス改善方法につえ書かれています。

react-addons-perfを使い計測し、どこに問題があって、どうやって解決したのかという話が書かれています。
合わせて以下の記事や公式のドキュメントを見るといいかと思います。


Node.js ES2015/ES6 supportというサイトではNode.jsのバージョン別ECMAScriptサポート状況がまとめられています。

Node.js版ECMAScript 6 compatibility tableというのが分かりやすいかもしれません。

Node.js v6ではES6の大分部がサポートされる予定ですが、v6はV8 5.0のリリースを待ってから公開される予定となっています。
そのため、Node.js v6は4月後半にリリース予定となるようです。


ヘッドライン


Announcing Marko v3: From HTML to HTML-JS | Marko

markojs.com/blog/announcing-marko-v3/

JavaScript template library ReleaseNote

テンプレートエンジンのMarko v3リリース。
HTML-JS syntaxというJavaScriptのように書けるテンプレート表現のサポート、コンパイル時最適化の対応など


Chromium Blog: Chrome 50 Beta: Push notification improvements and declarative preload

blog.chromium.org/2016/03/chrome-50-beta-push-notification.html

Chrome ReleaseNote

Chrome 50 Betaリリース。
<link rel='preload'>HTMLCanvasElement.toBlob()のサポート、iframeのsandbox属性値がサポートされているかを判定出来るように、Document.defaultCharsetを削除など


protractor/CHANGELOG.md at 3.2.0 · angular/protractor

github.com/angular/protractor/blob/3.2.0/CHANGELOG.md

E2E testing library ReleaseNote

Protractor 3.2.0リリース。
TypeScriptサポートのための変更追加、任意のバージョンのWebDriverを指定できるようになるなど


Google Cloud Platform Blog: Node.js on Google App Engine goes beta

cloudplatform.googleblog.com/2016/03/Node.js-on-Google-App-Engine-goes-beta.html

node.js google

GAEでNode.jsがβサポートされた


アーティクル


Developer Edition 47 – User agent emulation, popup debugging and more ★ Mozilla Hacks – the Web developer blog

hacks.mozilla.org/2016/03/developer-edition-47-user-agent-emulation-popup-debugging-and-more/

firefox JavaScript debug

Firefox 47の開発者ツールの新しい機能について。
どういう流れでオブジェクトが保持されているのかを可視化、コンソールへ複数行入力出来るように、Storage InspectorでCache APIをサポートなど


Debugging with Node

krasimirtsonev.com/blog/article/debugging-with-node

node.js debug tutorial

Node.jsに元々入っているnode debugコマンドの使い方について


reBEM: React ♥ BEM — Medium

medium.com/@mistadikay/rebem-react-bem-20d875157017

React library CSS

ReactとBEMの組み合わせについて。
reBEM layersという考え方について


An Introduction to jQuery's Deferred Objects

www.sitepoint.com/introduction-jquery-deferred-objects/

jQuery

jQuery Deferredの歴史や使い方について
1.x、2.x、3.xそれぞれでの違いについて書かれている


Animating with React, Redux, and d3 | A geek with a hat

swizec.com/blog/animating-with-react-redux-and-d3/swizec/6775

React redux d3.js SVG

ReactとD3.jsを組み合わせてアニメーションするComponentを作る話。
Container ComponentにStateが出てくるためReduxで管理している。
パーティクルを表示するなかでどこにボトルネックがあるかについて


Reactを使ったプロダクトのパフォーマンスを改善した話 | GMOメディア エンジニアブログ

tech.gmo-media.jp/post/141458071484/react-perf-tuning

React performance debug

React Componentで作成したアプリにのボトルネックの調査方法や改善手法について。
react-addons-perfを使ってプロファイルを見ながらやっていく話


Redux Middleware in Depth - Qiita

qiita.com/kuy/items/c6784fe443f1d5c7bbdc

redux

Reduxのmiddlewareについて。
middlewareの適応順や実行順により起きる問題や解決方法について詳しく書かれている。


Why I Write Plain JavaScript Modules

ponyfoo.com/articles/why-i-write-plain-javascript-modules

DOM library

なぜDOMのライブラリをReact/AngularJSなど特定のフレームワーク向けではなく、PureなDOMライブラリとして書くのかについて


The State of Browser APIs - 1

hwclass.in/2016/03/09/the-next-generation-of-browser-apis/

JavaScript WebPlatformAPI

現在ブラウザで使える色々な新しいAPIについての紹介


JavaScriptのPromiseオブジェクトについて調べた事 | QUARTETCOM TECH BLOG

tech.quartetcom.co.jp/2016/03/22/javascript-promise/

Promises JavaScript

Promiseについて簡潔にまとまった内容。
AngularJSの$qについても扱われてる


サイト、サービス、ドキュメント


Node.js ES2015/ES6 support

node.green/

node.js まとめ

Node.js版 ECMAScript compat-table


Your first Progressive Web App

codelabs.developers.google.com/codelabs/your-first-pwapp/

ProgressiveWebApp tutorial

Progressive Web Appについて学ぶワークショップ資料


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


gravmatt/force-js: The easy way to scroll and animate your page

github.com/gravmatt/force-js

JavaScript animation library

要素をアニメーションする依存のないライブラリ


danigb/tonal: Music tonal elements —pitches, chords, scales, keys— in Javascript

github.com/danigb/tonal

web audio library

Web MIDI、Web Audio APIを扱う小さなライブラリを集めたmono repo。


GoogleChrome/proxy-polyfill: Proxy object polyfill

github.com/GoogleChrome/proxy-polyfill

JavaScript ECMAScript library

ES6 Proxyのpolyfillライブラリ。
get/set/apply/constructなど一部のtrapのみをサポートしている


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