blog.koba04.comkoba04's twitter accountkoba04's GitHub account

React.js Links vol.2 4/15〜4/19

2016/04/19 @koba04

これはReactに関する記事や気になるissueなどのリンクを紹介する記事です。

Server-side Environments (React documentation)

あまり内容はありませんが、NashornとNode環境でReactを使った例を紹介するドキュメントが追加されました。

Error reporting in production #2686 (React Issue)

かなり前のIssueですが、最近また盛り上がっているので紹介します。

Reactでは、warningとerrorの2種類のログレベルがありますが、現在はNODE_ENVがproductionであるかどうかでログを有効にするか無効にするかを切り替えることしかできません。 このissueはその辺りの改善に関するものです。

前回紹介したリンクでも、developmentビルドとproductionビルドのパフォーマンスの違いについてありましたが、developmentビルドでは実行速度を気にせずにデバッグログを出力していて、productionビルドでは速度優先で不要なチェックは一切行われていません。 その結果、パフォーマンスに大きな違いがあります。

そのため、developmentビルドのままで本番に投入することも難しく、かといってproductionビルドのままでerrorのログを確認したいという場面に対応できていません。 現在作り直しが行われているPerf周りでもPROFILEフラグをという話もあるので、その辺りとあわせてREACT_ENVのような新しい仕組みが入るかもしれません。

Two Weird Tricks with Redux (Blog)

Firefox Developer Toolの開発をしている@jlongsterさんによるFirefox Developer Toolsの開発にReduxを使った時の話です。 非同期処理をどうやって扱ったかということが書かれています。

言及されているソースはこのあたりにあるので気になる人は見るといいと思います。

React Flip Move (Library)

React Componentをアニメーションさせるためのライブラリーです。 READMEを見る限り、シンプルで使いやすそうです。react-motionを使っているのかと思ったけど独自実装でした。

What to use for React styling? (Blog)

ReactとCSSをどのように組み合わせるのかを解説したエントリーです。 MethodologiesとPreprocessorsとPostprocessorsとInline Style Helpersのアプローチに分けて、それぞれどんな特徴でどんなライブラリーがあるということが解説されています。 ReactとCSSの扱いに悩んでいる人は見てみるといいかもしれません。

Proposal: Add support for observable spec interop point #1631 (Redux Issue)

ReduxのStoreを現在stage1のes-observableのSymbol.observableに対応させるIssueとPRです。 これにより、RxJS 5やその他のライブラリーとも組み合わせやすくなります。

PR出してるのはRxJS 5のメインの開発者であるbleshさんです。 Symbol.observableのponyfillにはblesh/symbol-observableが使われています。

eslint-config-airbnb 7,0 (Library)

Reactに関するLintも含んでいるeslint-config-airbnbの7.0がリリースされています。 React Componentのaccessibilityを検査するeslint-plugin-a11yが依存に追加されたので、アップデートする際は追加でインストールする必要があります。

5 Open Source React Native Projects To Learn From (React Native Blog)

ソースが公開されている5つのReactNativeのアプリが紹介されています。

React Hot Loader 3.0 alpha demo (Library)

React Hot Loaderの3.0のalpha版がリリースされています。2は飛ばして一気に3になったようです。 3.0のデモは下記で紹介されていますので使っている人は確認してみるといいと思います。

個人的には使っていないので詳細はわからないですが、Stateless ComponentsやHOC辺りのサポートや設定周りが改善されたようです。