2015年のWeb UX/Performance

この世界入って色々とフロントからサーバーまで手広くやっているのはやっぱり性能とかUXとかを最大限にするためには上から下まで知っていないとできないと思っているから。

Node.jsをやり始めたのもその頃流行りはじめていた "WebSocket" を知りたかったのと、"JavaScript" を知らないとWebのフロントを知ることができないと思ったから始めた。要は二兎を追った形で始めたのがきっかけです。

2014年色々やってきて色々と性能向上やUXを上げるための方法を知ることができたので、2015年もその活動は継続しつつも、より実践側に傾けて、知見を広める活動をしていきたいと思う。

具体的に言うと、以下の事に自分としては興味を持っているし、ちゃんとやっていきたい。

Isomorphic

2014年までは所謂Single Page Applicationが普及してきてClient の MV* Frameworkが一般的になってきたと思っているんだけど、SPAを作るとSEOの問題だったり、ファーストビューが遅れる問題があるので、ここをスマートに解決する手段がIsomorphicだと思っていて、この分野にはまだまだNode.jsの知見が埋もれていると思っている。

特に最近Reactが流行ってて、Reactとかだと、サーバーサイドでもテンプレートを持てるし、それをクライアントでも共通化するのはそこまで難しくない気がする。

<a href="http://bensmithett.github.io/going-isomorphic-with-react/#/">Going Isomorphic with React</a>
melbJSっていうメルボルンで発表されたreact + isomorphicの話

ReactとNode.jsを使ってIsomorphicなウェブアプリを作る話

この辺は2015年早々に試そうと思ってる。ファーストビューを改善しつつもVirtual DOMによる性能向上の両面が狙えるのは嬉しい。
ちなみに言うと、Node.jsじゃなくてもビューだけならrailsでもできそうだし、PHPでもできそうだと思う。ただIsomorphicの概念はviewだけのものじゃなくて、validatorも含めたサーバーサイドとのロジックの共通化であり、これの価値を再認識させていきたいなと思う。

「クライアントとサーバーとコード共通化させて何か嬉しいの？」って言われること多いんだけど、こういうUX面での改善だけじゃなくて、テスタビリティを上げたりと色々と副次的な効果はあるんです、ただ自分が実例を上げてちゃんと説明できていないので、説明できるようになりたい。

Virtual DOM

自分はDOMの操作もまだまだだし、普通のDOMも満足に使えないのにVirtual DOMとか先走ってんじゃねーぞって言われそうなんだけど、Virtual DOMによって更新差分が発生した箇所だけDOMの変更を差し替えるっていう処理が開発者が考えなくても実現できるという点で2015年以降の性能向上には必要な考え方だと思う。

VDOMの実装としてReact-JSXが今流行っているけどReact以外にもVDOMを持ってるのはdekuとかmercuryとかあるので、個人的にはtinyでmodularな奴でコードが読めるやつをちゃんと中身知った上で使えるようになりたい。もちろんReactでもいいと思う。

HTTP2

今までとは違い、一つの接続の中で並列にリソースを取得できるHTTP2。これにより、従来よりも並列度が上がりページロード時間が短縮される。また、これまでやってたCSSスプライトとかJSのconcatみたいな処理が今までの常識が変わるし、さらにサーバーからのPUSHを受け取るようになったので、リソースの先行ロードを行えるようになる。

HTTP2のServer PUSHまで考えると既存のインフラとも変わってくると思うし、このあたりの知見が積めるようになりたい。
2015年にはRFCにもなる可能性があるので、そろそろちゃんとやらないといけないなと思う。

Service Worker

いわゆるオフラインキャッシュとしての活用を臨みたい。モバイルで移動中の不安定なネットワーク環境でもコンテンツが読める、ゲームで遊べるとかは今のネイティブアプリなら普通にできる事なのでこれができないとそもそもモバイル環境でアプリ作る選択肢にウェブはなり得ないと思っている。

また、さっきのHTTP2とService Workerを組み合わせてキャッシュの更新にServer PushとService Workerを使うのも面白いと思ってる。

まだブラウザベンダは実装しきれていないし、Safariとかが実装するのいつだよっていう感じになりそうだけど、実装されればかなり武器になるはず。

Web UX/Peformance 2015

んで、こういう知見は一人でやるよりもみんなでやった方がいいと思ってて、なんか勉強会とか開きたいなと思っている。
とりあえず、上に書いたことが詳しい人達を呼んで現状確認会でもなんでもいいんだけど銘打ってやりたい。

2015年の最終的な成果物としては、こうして貯めた知見をperfplanetみたいな形でTipsとして紹介できるようになれるとベストだなと思ってる。

もちろん、これは言語ボーダーを超えた話なので、JSにかぎらず、サーバーサイドの知見も必要だし、インフラのレイヤからも知見を貰いたいと思っている。上に書いたような未来の話だけじゃなくて、もっと地に足がついた所から生まれる知見も必要だと思ってるし、isuconみたいなイベントで生まれる知見も参考にしたいと思ってる。

長々と書いたけど、こういうUXやPerformance系のTipsを言語とかサーバーサイドとかクライアントサイドとかで閉じちゃうのもったいないと常に思っているので2015年はこういう垣根を壊しつつ、未来のWebのUXやPerformanceに関する改善活動をやれるといいなーと思っている。