そんなに目新しくもない技術でWebアプリをリニューアルした2015年春
An evaluating tool for writing better CSS
世間はReactの話題で持ちきりのようだけど、Backbone.jsでStyleStatsのWebアプリをリニューアルした。以上で伝えることは終わったが、リニューアルするにあたってつらかったことをつらつらかきとめておく。
そもそもBackbone使うほど複雑なアプリでもないんだけど、勉強がてら使ってみた。てかParse.comを使いたくて、それがBackboneベースのSDKだったからというのもある。
Parse.comはmBaaS(mobile Backend as a Service)の類で、データを簡単にストアしてくれるもの。僕のようなフロント側の人間でバックエンドがからっきしな人も、こうゆうのを使うとWebアプリケーションを簡単に作れるそうだ。StyleStatsで、テスト結果をデータに貯めときたかったので使ってみた。
リニューアル後はテスト結果ひとつひとつにパーマリンクができるようになったので、定期的にテストかけといて、あとから比較（目視）とかできる。まぁデータ自体は溜まっていくので、今後はグラフ生成機能とか提供できるかもしれない（やらないかもしれない。D3.jsか…）。
JavaScriptとか
個人的にJavaScriptはCrome拡張だったりNode.jsでCLIツール作ったするときに書くくらいで、今回はじめてWebアプリケーションとしてのJavaScriptをBackbone.jsで書いた。うん、難しいよね。なんかうまく動かなかったら、それBackboneの問題なのかParse SDKの問題なのか、どっちかわからんと思ってたら、結局、自分のJS基礎力のなさから来る問題だったりして苦労した。
世間がReact!React!React!って言ってる中、せっせと2012年くらいの記事を貪っていてちょっと辛かった。いや今までサボっていた自分が悪いんだ。置いてけぼり感つらい。資料に関しては、上記の本ですべて事足りると思う。
あと、Browserifyを使ってみた。個人的にどちらかというとNode.jsの文化に親しみを感じているのでモジュール管理としてはこれがいいのではと思ったけど、うまいこと使いこなせている自信はない。Concatでいいんじゃないかと思うこともあるが、require()したかったんや。
でも、最近じゃES6のimportってのもあるのね、どうしよう。まぁいいや。es6ifyやbabelifyというのもある。なんだこれ？まぁいいや。あ、そうそう。BrowserifyでHandlebarsのtemplateをプリコンパイルしたかったらhbsfyっての使うらしいい。ファイファイやかましいわ。とにかく最近のES6,7事情ついていけてない、つらい。
あとGrunt/Gulpで憔悴した話したけど、やっぱなんやかんやでGulp使った。起動させるインターフェイスとしてはnpm run script使っているので許して欲しい（誰）。
CSSとか
UIはMaterial Designをやってみたかったので、ここは王道な感じで、PolymerのPaper Elementを使ってみようと思った。てか、Material Design以前に、Polymer以前に、Web Componentsを分かってないなかったので色々読んだ。
Web Components
- Custom Elements: HTML に新しい要素を定義する - HTML5 Rocks
- HTML で利用可能になった Template タグ: クライアントサイドのテンプレートの標準化 - HTML5 Rocks
- HTML Imports: ウェブのための #include - HTML5 Rocks
- Shadow DOM 201: CSS とスタイリング - HTML5 Rocks
- Shadow DOM 301: 上級者向けコンセプトと DOM API - HTML5 Rocks
Polymer
わー＞＜覚えること多すぎだ。疲れた。Polymerが0.5から0.8で爆速になったとかでAPIも変わったとかで、Paper elementsが0.8対応してないので、ここまできて採用するのやっぱやめた。つらい。
普通にMaterial DesignのCSSフレームワークを使おうと思ったけど、Material UIはReactと一緒に使うのをリコメンドしてるし、なんぞ！と思った。ので、Materialize 使おうと思ったけど、これ120K近くもあるぞ。ということで、自分で、Mateliaze CSSを参考にしつつ、それっぽく作ってみた。単純に見た目だけでも再現してもなーと思って、動きもつけようと思ってCSS Animationとかよくわからんしなー、てかSVGもよくわからん。というか、UI作るの難しくなってきてるよね？JavaScript使うの前提とか。とにかくつらい。
HTMLとか
body
header
h1
a タイトル
Node.jsのプロジェクトなので、惰性的にView EngineでJadeを使ってたけど、このぶら下がり感がつらい。というか、嫌い。
Viewつながりで、サーバー上でもBackbone.jsを動かすRendr採用したら、もっと共有できてシンプルになるのかなーと思ったけど、力尽きた。導入は次回で。
WAI-ARIAとかあるよね、とりあえずbody role="application"しとくので精一杯だ。また本読もう。ということで、つらかった。というか力尽きた。
まとめとか
まぁ趣味プロジェクトで、とくにしがらみもないので、地道にマイペースでやってくしかない。よそはよそ、うちはうち。
React資料読んでて気づいたのだけど、ReactはViewライブラリでBackbone + Reactって使い方もあるのね。ParseReactってのもあるみたいだし、今度はReactがんばろう。