prototype - misoitame/sample GitHub Wiki

プロトタイプ検討

掲示板プロトタイプ実装についての導入技術選定の観点/選定理由等を記す。

観点

本プロジェクトは、

  • 文書やニュースを表示し、目的の文書を参照するための「掲示板機能」
  • 文書やニュースの登録/管理、およびユーザ情報の管理を行う「管理機能」
  • 登録された文書や添付されたファイルのキーワード/属性検索を行う「検索機能」

という3機能、および上記機能に関するデータ更新/外部連携等を行う「バッチ処理」を
柱としたシステム構成となる見込みである。

「掲示板」は主に参照用の検索結果を出力するものだが、ユーザの更新アクションとして
「お気に入りに追加」、更新を意識しないアクションとして「既読処理」を機能として持つ。
これら処理はクライアントサイドで画面部品の状態更新を行うとともに、非同期でサーバに
更新要求を発行する形とし、操作上のストレスが少なくなるよう実装していきたい。

また将来的なスマートフォンへの対応を考慮し、画面部品は可能な限り細かい単位での
再利用可能なコンポーネントとして作成、cssの切り替え等で複数デバイスへの対応が
可能となるよう設計/実装を行っていく。

上記より、アプリケーションはREST形式のリクエスト処理を基本とした構成とし、画面の
描画データはクライアントサイドで解釈する方式を主軸にプロトタイプを検討する。

プロトタイプ環境

開発言語

Java

Java8系を使用。
mavenプロジェクトとして作成する。基本的にはEclipseでの開発を想定しているが、
特にEclipseの機能に限定するような設定は行わない。

Javascript

Reactを採用するため、「jsx」でのコーディングを行う。選定理由は後述。
実装後はjs形式へ変換する。

jsx
https://facebook.github.io/jsx/

css

通常のcss3を使用。sassやscssは現時点では採用しない。

sass/scssは学習コストが割と高く、未経験者から見ると直感的ではないと考えている。
経験者の参画が見込め、かつ高度に構造化するメリットがあれば採用を検討したい。

フレームワーク(サーバサイドアプリ)

sparkjava
http://sparkjava.com/

選定理由

  • 高速、軽量
  • routing、filterがJavaコード内に記述できる
  • 組み込みのJettyによってEclipse上でmain起動するだけでdebug可能
  • RESTでのデータ取得によるフロントでのレンダリングをメインに

その他

Webコンテナについて

社内の知見的にTomcatを利用すべきとのことだったが、組み込みJettyを使った
jar形式のサービス登録が環境構築コスト的にもよく、並行して検討する。
プロトタイプはどちらにも振れる形で実装する。

組み込みJettyを採用する場合、service化するための起動スクリプトを作成する。

入稿を行う画面系について

現状では入稿などの画面と掲示板系画面はアプリケーションを分けることを考えている。
入稿画面は別のFWを使用する可能性がある(springbootなど、ややリッチなもの)

フレームワーク(クライアントサイド)

React
https://facebook.github.io/react/

選定理由

  • 仮想DOMを使ったレンダリング、再描画が速い
  • 基本思想として「再利用可能なコンポーネント分割」
  • 学習コストは相応に高いが、世界的に人気もあり今後も経験が活かせる可能性が高い
  • 日本語のドキュメントが豊富
  • angular2も検討したが、過去の変更や今後の変更予定のインパクトが大きく、
    信頼感や安定感という観点で見送り。
  • 最近急激に伸びているVue.jsについては2.0正式リリースが2016年秋なこともあり、
    現時点で採用できるほどの安心感がないため見送り。

その他

開発(コンパイル)環境

開発環境構築に手間がかかるため、Dockerコンテナにて環境を配布する形を検討中。

server-side rendering

Javaのテンプレートエンジンと合わせて「server-side rendering」が可能。
Java内でtemplateに対するeval実行を行う形となっている。

現状の検討ではほぼシングルページでのサイトになる想定だが、トップ画面初期表示など
ある程度レンダリング済みのコンテンツを出力すべきケースに対応可能かどうか検討中。
また「シンプル画面?」的なものについても同様に検討していく。

懸念点

  • 言語仕様更新のキャッチアップ
    他のJS系言語にも言えるが、進歩が速く、ナレッジが溜まりにくい点。
    →最新技術にどこまで追従していくか、他社サービスへの採用でどこまでできるのか。