Modern Web App LT!

Front-end Server

may save many front-end engineers

 

森 久太郎 / 株式会社FiNC

Twitter: @qsona

僕が考える

Modern Web App は、

Thin Server
Architecture

※単にサーバをJSONなどのAPIにするって話です

....｡oO (いまさらだけど。

• Ajax
  • Google Maps, 2005
  • Google Suggest
• jQuery, 2006
• JavaScriptMVC, 2008
• Backbone.js, 2010
  • MVCへの理解・考察が深まってきた(個人の感想)
• React, 2013

JavaScript は、おもちゃから道具に

フロントエンドの苦労度UP

その分フロントに押し付けてフロントが苦しむことになるが、各々が得意なドメインを担当することで苦しみの総量は減るはずだ、という見通しがある。サーバーサイドの人間はどんどんフロント側にViewの仕事を押し付けて欲しい。フロントエンドは苦しむがよい。それは本来お前がやるべきだった仕事だ。"

- @mizchi, リアルタイムな観点からElixir / Phoenixについて, QIita

徳のある(?)

サーバエンジニアの工夫

• 画面に必要でないキーは振り落として返す
  • 通信量の削減
• 1つのAPIで、まとめて複数のリソースを取得できるようにする
  • 万能なAPI

フロントエンジニアに聞いてみた

開発していて、辛いと感じることは❓

 

弊社 iOS, Android, Web (React)の

エンジニアから回答を得た

フロント辛いことリスト

• エンドポイントごとに、同じようで微妙に形が違うリソースが返ってくる
  • こっちにはこのキーがついてない、とか
• どのキーが必須なのかよくわからない
  • エンドポイントごとに違うケースも...
• 万能なAPIは楽だけど、重い
  • 万能がゆえに、あちこちで叩いてしまう

徳 #とは

Back-endの意識を変える

• 画面のことは極力考えない
• ビジネスロジックを担保する役割
• リソースを意識し、
  同じリソースならいつも同じ形で返す

Front-end Server!

(以下はだいたい類義語)

• API Orchestration Layer
• API Gateway
• BFF (Back-ends for Front-ends)

Front-end Server とは

• サーバ (物理的な位置)
• フロントエンド (アーキテクチャ上の位置)
• Back-end Server と Client との間に立つ

Front-end Server がやること

• Back-end Server(s)への複数のリクエストをまとめる
  • 特に microservices で効力を発揮
• Client ごとに、レスポンスを欲しい形に整形する
  • web, iOS, Android, CUI, etc

Front-end Server が

やってもいいこと

• レスポンス型のチェック、強制
  • ex. GraphQL => 強力な型システム
• Server Side Rendering (SSR)
  • Node.jsで立てた場合
  • (レンダリングサーバが別にあっても良いと思う)
• キャッシュ, 認証, etc

Front-end Server が

やらないこと

• 業務ロジック
  • よくあるFat Controllerにならないように注意
  • "Smart Endpoints and Dumb Pipes"
• Viewそのものに関するロジック(???)

... Front-end Serverは
どこまでやるべきなのか?

• 実例に基づく議論が必要

議論します

http://microservices-meetup.connpass.com/

まとめ

• Thin Server Architecture は人々を豊かにした

• しかし、Server SideがFront-endに気を使いすぎて、種々の問題が生じることがある

• Front-end Serverを導入することで、

  • APIサーバは Back-end の役割に立ち戻る

  • Front-end の役割を広げることができる

• Client / Front-end Server / Back-end 何をどこが担当するべきか、のような議論を深めていきたい