JSer.info #269 - React v15.0 RC1がリリースされました。
New Versioning Schemeで書かれているように、Reactの次のメジャーバージョンはv0.14 -> v15.0となります。
v15.0 RC1ではdata-reactidがクライアントサイドのレンダリングではなくなる、nullをコメントとしてレンダリングするようになるなどレンダリングに関する変更がおこなわれています。
React v0.14でreactとreact-domにパッケージが分けられ、それぞれでメソッドも分離されたため非推奨となっていたメソッドがありました。
v15.0ではこれらの非推奨メソッドの削除や警告メッセージの改善などが行われています。
Performance Engineering with Reactという記事ではReactを使ったアプリのボトルネック調査方法について書かれています。
react-addons-perfを使った計測方法や、どのように改善するかなどについて書かれています。
大型フロントエンド開発におけるTypeScriptとDDD // Speaker Deckというスライドでは、大規模なアプリケーションにおける設計や考え方、悩みどころについて書かれています。
Viewとドメインロジックを切り離すための考え方やTypeScriptとDDDについて書かれています。
SNSチームでのドメイン駆動設計の実践 | GREE Engineers' Blogなども合わせてみるといいかもしれませんが、フロントエンドと呼ばれる分野でもこういう話が増えてきているようです。
JSer.infoをサポートするには
- 😘 知り合いにJSer.infoをおすすめする
- ❤️ GitHub Sponsorsで@azuのスポンサーになる
- 🐦 X(Twitter)で@jser_infoをフォローする
JSer.info Sponsors
JSer.info SponsorsはGitHub SponsorsとしてJSer.infoを支援してくれている方々です。
ヘッドライン
React v15.0 Release Candidate | React
facebook.github.io/react/blog/2016/03/07/react-v15-rc1.html
React v15.0 RC1リリース。
data-reactidがクライアントサイドのレンダリングではなくなる、nullをコメントとしてレンダリングするようになる。
また非推奨となっていたメソッドがreactとreact-domそれぞれから削除された。
また、警告メッセージの改善などが行われている。
ESLint v2.3.0 released - ESLint - Pluggable JavaScript linter
eslint.org/blog/2016/03/eslint-v2.3.0-released
ESLint v2.3.0リリース。
ルールのoff/wan/errorを0,1,2という数字ではなく文字列で指定出来るように、ES2016で追加される**の対応など
アーティクル
Performance Engineering with React
benchling.engineering/performance-engineering-with-react/
Reactにおけるパフォーマンス調査の手法やどのようにボトルネックを見つけるかについて
僕がネイティブな CSS 変数にわくわくする理由
terkel.github.io/why-im-excited-about-native-css-variables/
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/
単純なデータ転送についてのWeb Workerのパフォーマンステスト。
- JSON.stringify()/JSON.parse()の利用
- 一部のみ適応
- 生オブジェクトのまま
をそれぞれ比較したもの
- How fast are web workers? ★ Mozilla Hacks – the Web developer blog
- Fast legoization | Better world by better software
Fast legoization | Better world by better software
glebbahmutov.com/blog/fast-legoization/
Web Workerを使って画像データを効率よく処理するテクニックについて
なぜ絵文字を含む文字を1文字ずつに分けるのにArray.fromだけで十分なのか？ - Qiita
qiita.com/alucky0707/items/697598e49ff56191c139
split("")だと絵文字などでサロゲートペアの問題が起きるため、ES6で追加されたArray.fromなどを使うことで正しく扱えるという話
JavaScript ASTを始める最初の一歩 | Web Scratch
efcl.info/2016/03/06/ast-first-step/
JavaScriptのASTを扱ったツールを書きたい人が最初に把握しておくといい部分についてのまとめ
Data structures in JavaScript - Ben's Blog
blog.benoitvallon.com/data-structures-in-javascript/data-structures-in-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/
WebVR 1.0 APIについての解説記事
ECMA262のIteration protocolsで遅延評価するIteratorを作る - snyk_s log
saneyukis.hatenablog.com/entry/2016/03/04/030337
ECMAScriptのSymbol.iteratorを使い遅延評価出来るコレクション処理を行うという話
Understanding Transducers in JavaScript — Medium
medium.com/@roman01la/understanding-transducers-in-javascript-3500d3bd9624
Transformer protocolを実装したコレクション処理を実装することで、一度の処理で同時に複数の変換を行うことが出来るようにする仕組みであるTransducersについて
matthewmueller/28kb-react-redux-routing: React + Redux + Routing Stack for just 28kb
github.com/matthewmueller/28kb-react-redux-routing
React + Redux + ルーティングというよくある構成を28kbで実現するというコンセプトリポジトリ。
Reactの代わりにPreact、Reduxの代わりにラップしたSocrates、ルーティングはenroute + Reduxミドルウェアを使っている
スライド、動画関係
大型フロントエンド開発におけるTypeScriptとDDD // Speaker Deck
speakerdeck.com/armorik83/da-xing-hurontoendokai-fa-niokerutypescripttoddd
大規模なクライアントサイドを書く場合の構造やテスト、環境についてのスライド。
TypeScriptでちゃんとしたドメインモデルを構築し、Viewのレイヤーとの分離を図る仕組みの作り方について
React.js Conf 2016 - Steve McGuire - Performance Without Compromise - YouTube
www.youtube.com/watch?v=kDARP5QZ6nU&list=PLb0IAmt7-GS0M8Q95RIc2lOM6nc77q1IY&index=28
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、アニメーションについて
gulp: The Good Parts // Speaker Deck
speakerdeck.com/jmblog/gulp-the-good-parts
gulpのプラクティスについて。
タスクの分割、設定の外部ファイル化、v4を見据えたタスクの書き方、v4の変更点について
サイト、サービス、ドキュメント
Code Cartoons — Medium
Cartoonsで学ぶFlux、Redux、Relayなどのデータコントロールフロー
ソフトウェア、ツール、ライブラリ関係
Rebass
Reactを使ったUIライブラリ。
ステートレスコンポーネントとして実装されている。
コンポーネントづくりの参考になりそう
tryolabs/fetch-it: An enhanced HTTP client based on fetch.
Fetch APIをベースにしたHTTPクライアントライブラリ。
middlewareで処理を追加できる仕組みを持っている
cognitect-labs/transducers-js: Transducers for JavaScript
github.com/cognitect-labs/transducers-js
Transformer protocolを実装したコレクション処理を実装することで、一度の処理で同時に複数の変換を行うことが出来るようにする仕組みとライブラリ
uber-common/react-vis
github.com/uber-common/react-vis
Uberのグラフやビジュアライズ系のReact Componentライブラリ。
棒グラフ、折れ線グラフ、円グラフ、テーブル、ツリーマップなど色々な表現が用意されてる
書籍関係
Quick Browserify by Sandeep Kumar Patel [Leanpub PDF/iPad/Kindle]
Browserifyについての書籍
