emberのfastbootについて調べた
前からちょっと気になっていたのだけど、時間がとれたので調べてみました。
↓の動画で説明されてます。
vimeo.com
fastbootとは、emberが用意しているSSR(サーバーサイドレンダリング)の仕組みで、nodejsでemberアプリを動かしている。
つまり、サーバサイドアプリとemberアプリはそれぞれ独立しているのが前提。
たとえば、Railsでwebアプリを作っていた場合、fastbootを利用するには、unicornなどのアプリケーションサーバとは別にnodejsが必要です。
jQueryなど、ブラウザのAPIに依存した処理があると、当然エラーになります。($.ajax('xxxx')みたいな)
ember-networkのようにemberがplolyfilを用意していて、ここは開発者が気を付けて開発する必要あり。
あと、クライアントMVCのSSRで気になるのは、DOMの生成ですが、
emberの場合は、htmlbarsというemberで利用しているテンプレートエンジンがhtmlのサブセットを理解できて、それを利用しています。
HTMLBars: The Next-Generation of Templating in Ember.js
手元で確認してみたところ
<div> <span>welcome to ember</span> <div> {{outlet}} </div>
がfastboot用にビルドを行ったところ
buildFragment: function buildFragment(dom) { var el0 = dom.createDocumentFragment(); var el1 = dom.createElement("div"); var el2 = dom.createTextNode("\n"); dom.appendChild(el1, el2); var el2 = dom.createElement("span"); var el3 = dom.createTextNode("welcome to ember"); dom.appendChild(el2, el3); dom.appendChild(el1, el2); var el2 = dom.createTextNode("\n"); dom.appendChild(el1, el2); var el2 = dom.createElement("div"); var el3 = dom.createTextNode("\n "); dom.appendChild(el2, el3); var el3 = dom.createComment(""); dom.appendChild(el2, el3); var el3 = dom.createTextNode("\n"); dom.appendChild(el2, el3); dom.appendChild(el1, el2); var el2 = dom.createTextNode("\n\n"); dom.appendChild(el1, el2); dom.appendChild(el0, el1); var el1 = dom.createTextNode("\n"); dom.appendChild(el0, el1); return el0; }
に変換されていました。
ReactとJSXの関係に近いですね。JSXは結構制約が強いイメージだったけど、htmlbarsは自由度高そうな雰囲気。
webのフロントエンドは日々複雑になっているし、スマホアプリにAPIを提供するみたいに、サーバーサイドアプリはAPIに徹して、webのフロントエンドはクライアントMVC(SSR出来ればなおよし)で構築するのもよいんじゃないかなという気もしてきました。
emberそんなに悪くないと思うんだけど、日本語リソースが少ないのが気になるところ。
複雑なwebアプリ作るときには結構現実的な選択肢だと思うんですけどね。