2016-08-01から1ヶ月間の記事一覧

code splittingのchunkのしくみ

疑問 異なるchunkA Bそれぞれで、同じモジュール(例えばlodash)をimportしている場合、ビルド後のA Bのサイズはどうなるのか Answer require.ensure System.import bundle-loader どれを用いても結果は変わらず。 A B 双方「200kb」ほどサイズ増加しており…

react-universallyがよさげ

github.com Feature Code Splitting with System.import() ExtractTextPlugin for bundling CSS 感触 割りと必要最低限なものだけ入っていて、SSRできそう。 gaearon/react-hot-loader は不要かも react-hot-loader自体のバグとかSystem.import()のためにい…

create-react-appのwebpack + CSS設定。

// `ExtractTextPlugin` first applies the "postcss" and "css" loaders // (second argument), then grabs the result CSS and puts it into a // separate file in our build process. This way we actually ship // a single CSS file in production ins…

Enabling assets for Server-Side Rendering in Webpack (file-loader, url-loader, css-loader/locals)

medium.com file-loader and url-loader support not-emitting-files themselves now, so fake-file-loader and fake-url-loader are deprecated. fake-style-loader can be replaced by using css-loader/locals as explained in fake-style-loader#3. So, …

isomorphic-style-loaderの使い方

github.com 概要 Critical CSS を <head></head> の中にサーバ側で展開するためのプラグイン。クライアント側もサーバ側も同じwebpack設定で用いる。 ただのstyle-loaderだとサーバ側は使用できない(DOM操作を伴うのでビルド時にエラーになる)。そのためサーバ側でHTML…

webpack server side rendering

結局問題なのは、CSSとか画像とか動画とか、webpackのrequire() or import に依存したReact Componentが存在するということ。 Server Side Renderingしたい場合、Nodeサーバ側もそれらのリソースを解釈できないとエラーになる。つまり、サーバ側も事前にwebp…

create-react-app と 自前expressサーバをどう組み合わせるか(ビルドの話)

Server Renderingを考えると、server側でもComponent使いまわしたい。 create-react-appでつくった既存のComponentは、Webpackに依存している(CSS Importの部分) それをserver側でも使えるようにするためには、必然的にserver側もcreate-react-appと同じよ…

Dispatcher, Actions, Constantsのファイル分割粒度とReduceStoreでの注意点

Dispatcher アプリケーション全体で単一のインスタンスで良いのではないか。ファイル分割の必要は特に無いと思う。 ただしその場合、生きている全てのStoreが全てのdispatch()を拾うので、下記のようにdefault:でいらないイベントはスルーする必要がある。同…

flux-utilsを使ったアプリ構築

reduxのほうが勢いはあるけど、基本に忠実で分かりやすいのは facebook / flux ではないかと感じている。 tech.connehito.com qiita.com 基本構成 dispatcher --> fluxリポジトリ内に簡易実装あり stores --> flux-utils container --> flux-utils actions -…

認証をどう作るか

サーバ側でチェックするだけで十分かと思ったが、そうでもない? frontendinsights.com FLUXと絡めた話(AUTH0というサービス) Adding authentication to your React Flux app stormpathというサービス Tutorial: Build a React.js Application with User A…

flux + URL設計

検索クエリ flux on url change flux react router 前提 全てのURLはアプリへのエントリーポイントになる。ユーザのほとんどのアクションはURL transition actionのみをdispatchするイメージ。通信は各componentのcomponentDidMount任せ。URLを降ることが出…

Code Splitting + Server Side Rendering with react-router and Webpack

Code Splitting + Server Side Rendering with react-router and Webpack react + react-router + webpackでのコード分割の方法 → わかった 初期描画前にDBなど非同期操作を行い、その結果を見てデータを返したい場合のサーバ側実装 → わからない さらに、Se…

WebpackによるCode Splitting

code splitting

2016年夏、ナウい、クライアントJSエコシステム

クライアントJSのエコシステム react + flux + react-router + material-ui + axios + ES6 + babel + webpack + ESLint + Airbnb JavaScript Style Guide Flux Utils facebook社内でreactjsを運用する中で見えてきたベストプラクティスをライブラリ化したも…

自己嫌悪中。誠実さが足りていないという話

「誠実さが長所だ。」などと思い込んでいたが、実際全く誠実さが足りていないと痛感している。 頭で考えていること(思っていること)と、実際の言行が度々矛盾する ことがあるな、と。反省している。特に酔っている時、冷静でない時、余裕が無い時にこそ誠…

深層学習。ディープラーニング。特徴表現学習。基礎とか書籍学ぶのに良さそうなものまとめ

基礎イメージ、理論を知りたい人向け。自分の学習がてら。 Qiita 特にプログラマーでもデータサイエンティストでもないけど、Tensorflowを1ヶ月触ったので超分かりやすく解説 - Qiita 深層生成モデルのtensorflowによる実装(Importance Weighted Autoencode…