Fork me on GitHub

2016-03-08のJS: React v15.0 RC、Reactパフォーマンス調査、DDD

Edit on GitHub 編集履歴を見る

JSer.info #269 - React v15.0 RC1がリリースされました。

New Versioning Schemeで書かれているように、Reactの次のメジャーバージョンはv0.14 -> v15.0となります。

v15.0 RC1ではdata-reactidがクライアントサイドのレンダリングではなくなる、nullをコメントとしてレンダリングするようになるなどレンダリングに関する変更がおこなわれています。
React v0.14reactreact-domにパッケージが分けられ、それぞれでメソッドも分離されたため非推奨となっていたメソッドがありました。

v15.0ではこれらの非推奨メソッドの削除や警告メッセージの改善などが行われています。


Performance Engineering with Reactという記事ではReactを使ったアプリのボトルネック調査方法について書かれています。

react-addons-perfを使った計測方法や、どのように改善するかなどについて書かれています。


大型フロントエンド開発におけるTypeScriptとDDD // Speaker Deckというスライドでは、大規模なアプリケーションにおける設計や考え方、悩みどころについて書かれています。

Viewとドメインロジックを切り離すための考え方やTypeScriptとDDDについて書かれています。

SNSチームでのドメイン駆動設計の実践 | GREE Engineers' Blogなども合わせてみるといいかもしれませんが、フロントエンドと呼ばれる分野でもこういう話が増えてきているようです。


ヘッドライン


React v15.0 Release Candidate | React

facebook.github.io/react/blog/2016/03/07/react-v15-rc1.html

React ReleaseNote

React v15.0 RC1リリース。
data-reactidがクライアントサイドのレンダリングではなくなる、nullをコメントとしてレンダリングするようになる。
また非推奨となっていたメソッドがreactreact-domそれぞれから削除された。
また、警告メッセージの改善などが行われている。


ESLint v2.3.0 released - ESLint - Pluggable JavaScript linter

eslint.org/blog/2016/03/eslint-v2.3.0-released

JavaScript Tools ReleaseNote

ESLint v2.3.0リリース。
ルールのoff/wan/errorを0,1,2という数字ではなく文字列で指定出来るように、ES2016で追加される**の対応など


アーティクル


Performance Engineering with React

benchling.engineering/performance-engineering-with-react/

React performance

Reactにおけるパフォーマンス調査の手法やどのようにボトルネックを見つけるかについて


僕がネイティブな CSS 変数にわくわくする理由

terkel.github.io/why-im-excited-about-native-css-variables/

CSS 翻訳

CSS Custom Propertyについて書かれた"Why I'm Excited About Native CSS Variables"の翻訳。
コンポーネント名接頭辞にした変数名を使うという命名規則についてなど


High-performance Web Worker messages | Read the Tea Leaves

nolanlawson.com/2016/02/29/high-performance-web-worker-messages/

webworker performance JavaScript

単純なデータ転送についてのWeb Workerのパフォーマンステスト。
- JSON.stringify()/JSON.parse()の利用
- 一部のみ適応
- 生オブジェクトのまま
をそれぞれ比較したもの


Fast legoization | Better world by better software

glebbahmutov.com/blog/fast-legoization/

JavaScript webworker performance

Web Workerを使って画像データを効率よく処理するテクニックについて


なぜ絵文字を含む文字を1文字ずつに分けるのにArray.fromだけで十分なのか? - Qiita

qiita.com/alucky0707/items/697598e49ff56191c139

JavaScript ECMAScript

split("")だと絵文字などでサロゲートペアの問題が起きるため、ES6で追加されたArray.fromなどを使うことで正しく扱えるという話


JavaScript ASTを始める最初の一歩 | Web Scratch

efcl.info/2016/03/06/ast-first-step/

JavaScript AST tutorial

JavaScriptのASTを扱ったツールを書きたい人が最初に把握しておくといい部分についてのまとめ


Data structures in JavaScript - Ben's Blog

blog.benoitvallon.com/data-structures-in-javascript/data-structures-in-javascript/

JavaScript アルゴリズム

JavaScriptでデータ構造やアルゴリズムについて学ぶシリーズ記事


Introducing the WebVR 1.0 API Proposal ★ Mozilla Hacks – the Web developer blog

hacks.mozilla.org/2016/03/introducing-the-webvr-1-0-api-proposal/

web VR

WebVR 1.0 APIについての解説記事


ECMA262のIteration protocolsで遅延評価するIteratorを作る - snyk_s log

saneyukis.hatenablog.com/entry/2016/03/04/030337

ECMAScript JavaScript

ECMAScriptのSymbol.iteratorを使い遅延評価出来るコレクション処理を行うという話


Understanding Transducers in JavaScript — Medium

medium.com/@roman01la/understanding-transducers-in-javascript-3500d3bd9624

JavaScript performance

Transformer protocolを実装したコレクション処理を実装することで、一度の処理で同時に複数の変換を行うことが出来るようにする仕組みであるTransducersについて


matthewmueller/28kb-react-redux-routing: React + Redux + Routing Stack for just 28kb

github.com/matthewmueller/28kb-react-redux-routing

JavaScript React redux

React + Redux + ルーティングというよくある構成を28kbで実現するというコンセプトリポジトリ。
Reactの代わりにPreact、Reduxの代わりにラップしたSocrates、ルーティングはenroute + Reduxミドルウェアを使っている


スライド、動画関係


大型フロントエンド開発におけるTypeScriptとDDD // Speaker Deck

speakerdeck.com/armorik83/da-xing-hurontoendokai-fa-niokerutypescripttoddd

TypeScript DDD AngularJS スライド

大規模なクライアントサイドを書く場合の構造やテスト、環境についてのスライド。
TypeScriptでちゃんとしたドメインモデルを構築し、Viewのレイヤーとの分離を図る仕組みの作り方について


React.js Conf 2016 - Steve McGuire - Performance Without Compromise - YouTube

www.youtube.com/watch?v=kDARP5QZ6nU&list=PLb0IAmt7-GS0M8Q95RIc2lOM6nc77q1IY&index=28

JavaScript 動画 React

Netflixのクライアントサイドのアーキテクチャについて。
mixinじゃなくて高階関数でレイヤーを表現、宣言的にするためのルールとしての"No refs"。
またパフォーマンス面では、Transducersの話、静的なpropと動的なpropは分けることでの最適化についてなど。


Designing in React: Why and How // Speaker Deck

speakerdeck.com/fand/designing-in-react-why-and-how

React CSS DOM スライド

React語圏でどういう試みがあって何を解決しようとしてたかという話
CSS、アニメーションについて


gulp: The Good Parts // Speaker Deck

speakerdeck.com/jmblog/gulp-the-good-parts

gulp スライド

gulpのプラクティスについて。
タスクの分割、設定の外部ファイル化、v4を見据えたタスクの書き方、v4の変更点について


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


Code Cartoons — Medium

code-cartoons.com/

JavaScript React redux

Cartoonsで学ぶFlux、Redux、Relayなどのデータコントロールフロー


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


Rebass

jxnblk.com/rebass/

React UI library

Reactを使ったUIライブラリ。
ステートレスコンポーネントとして実装されている。
コンポーネントづくりの参考になりそう


tryolabs/fetch-it: An enhanced HTTP client based on fetch.

github.com/tryolabs/fetch-it

HTTP JavaScript library

Fetch APIをベースにしたHTTPクライアントライブラリ。
middlewareで処理を追加できる仕組みを持っている


cognitect-labs/transducers-js: Transducers for JavaScript

github.com/cognitect-labs/transducers-js

JavaScript performance library

Transformer protocolを実装したコレクション処理を実装することで、一度の処理で同時に複数の変換を行うことが出来るようにする仕組みとライブラリ


uber-common/react-vis

github.com/uber-common/react-vis

React グラフ library

Uberのグラフやビジュアライズ系のReact Componentライブラリ。
棒グラフ、折れ線グラフ、円グラフ、テーブル、ツリーマップなど色々な表現が用意されてる


書籍関係


Quick Browserify by Sandeep Kumar Patel [Leanpub PDF/iPad/Kindle]

leanpub.com/browserify

browserify book

Browserifyについての書籍


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