IK.AM

@making's tech note


ブログのフロントエンドをBackbone.jsでSPA(Single Page Application)化した

🗃 {Dev/Blog/CategoLJ2}
🗓 Updated at 2013-09-25T03:33:41Z  🗓 Created at 2013-09-25T03:33:41Z   🌎 English Page

現在ブログシステムの以下の大幅な刷新(CategoLJ2)を計画している。まずはfrontendの刷新を行った。

そもそもCategoLとは・・

CategoL(J)の歴史

昔のメモを見ると CategoL = Categorizer written in Lisp の略らしい。 要はWikiみたいにカテゴリでコンテンツの階層化をできて、Markdownで書ける軽量なブログシステムがほしかったから作った。

  • 2009年12月 CategoL開発
  • 初期はCommon Lisp + MySQL + Hunchentootという構成だった
  • Common LispのCLと掛けていた
  • 2010年10月 CategoLJ開発
  • Common Lispでの開発に限界を感じ、当時MyブームだったClojureでの開発にシフト
  • Clojure + MongoDB + Ring(jetty)という構成に変更
  • Tokyo.clj#8で軽く話した http://www.slideshare.net/makingx/categolj
  • Catego rizer written in C l o j ure
  • CategoLとのURL下位互換性を担保
  • 2011年05月 CategoLJ-java開発
  • Clojureでの開発に限界を感じ、勉強の意味を含めJava(Spring MVC)で再実装
  • Spring MVC + MongoDB + Glassfish/Tomcatという構成に変更
  • この時点で名が体を表していない
  • CateoLJとのURL下位互換性を担保
  • 2013年09月 CategoLJ2開発着手
  • 2年経ったので飽きた→アーキテクチャを変えよう
  • 昔考えたURLがださすぎる→URL互換は捨てる

新ブログシステム構想案

  • Thin Server Architectureの採用
  • ブログコンテンツのREST API提供
  • 多言語でのRESTサーバー実装
    • Java(Spring MVC, JAX-RS), Go, Node.jsで作りたい
  • クラウド対応(AWS, Google App Engine, Heroku)
    • RESTサーバーをポータブルに
    • とりあえずRDSやCloud SQL対応できるようにMySQLに移行する
  • Pure HTML + Javascriptでfrontend作成
  • S3やGithub Pagesなどで手軽に公開可能
  • サーバーを切り離し、Parse.comのようなサービスとの組み合わせもしたい
  • Single Page Application化
    • Backbone.js採用
  • リッチなUIな管理画面をもつbackend作成

TODO 図をあとでかく

今回行った対応

  • 旧ブログサーバーのREST API提供
    • backendの管理画面は旧版のものをそのまま使用
  • frontendプロジェクトの作成
    • Backbone.js採用
    • UIkit採用
    • レスポンシブデザイン対応
    • テンプレートはHandlebars.js
  • 古いブログコンテンツにアクセスした場合、新システムにリダイレクト
    • ある程度インデックス化されたらRESTサーバーを入れ替える
  • GoogleクローラーがAjaxコンテンツを取得できるようにescaped_fragmentに対応
    • 内部でヘッドレスブラウザ(Phantom.js)叩いてコンテンツ返している

TODO 図をあとでかく

サーバーから必要最小限のJSONを取得するだけなのでモバイルでもサクサクうごいて今のところいい感じです。

frontend残タスク

  • tweetボタンがうまく表示されない(非同期なコンテンツ表示で対応していない?)
  • エラー画面遷移
  • pushstate対応
  • リファクタリング(ファイル分割など)
  • メモリリーク調べ(Backbone.jsをまだよく理解していない)
  • S3で運用するにはどうすればよいか?
  • _escaped_fragment_対応
  • Firefoxだとページ遷移が少し変

✒️️ Edit  ⏰ History  🗑 Delete