http://hifive.connpass.com/event/22842/ のLT資料です

1. Copyright © Virtual Technology, Inc
フロントエンドエンジニアの価値を⾼める
BaaS(vte.cx)
〜フロントエンドだけで作るこれからのWebシステム開発 〜
2015/12/1 有限会社バーチャルテクノロジー
1

2. Copyright © Virtual Technology, Inc
BaaSを作った３つの理由
1. BaaSの現状
2. ReflexWorks
3. SPA
2

3. Copyright © Virtual Technology, Inc
BaaS は今、幻滅期
• すべてが中途半端
• 何でもかんでもAPIにした結果、
ベンダーロックイン
• 機能改善がなかなか進まず負の遺産を抱
え込んだ状態に
• USではもはや胡散臭いものと思われてい
るらしい
3

4. Copyright © Virtual Technology, Inc4
⼤規模 Web帳票システム by ReflexWorks
APIのスループット
７万ユーザ/日 ６００tps !
※ DBはその１０倍以上

5. Copyright © Virtual Technology, Inc
SPA(Single Page Application)とは
• 優れたUXを提供することを⽬的とする
１つのWebページで提供されるアプリケーション
– クライアントはXHR等でサーバにリクエストし、結果
をJSONなどのデータで受取る
– ページの再読込せずにJavaScriptで動的に更新する
5

6. Copyright © Virtual Technology, Inc
なぜSPA?
• サーバーでHTMLを⽣成するよりも、
クライアントで動的に画⾯を更新する⽅が効率的
• ユーザーの操作に応じてインタラクティブに動く
リッチクライアントを実現できる
6
これってネイティブアプリ？
お客様
いいえ、Webアプリです。
開発者
SPA

7. Copyright © Virtual Technology, Inc7
増えたフロントの責務と残る課題
h3p://www.slideshare.net/fullscreen/sagawafumio/ss-38480894/6
ここをどうするか？

8. Copyright © Virtual Technology, Inc
極めて⾃由度の⾼いBaaSの要求
• サーバサイドのAPIもフロントエンジニア
が⾃由に作れるBaaSを作れないか？
• HTML、CSS、JavaScriptなどのフロント
エンドコーディングだけでWebシステム
を作れるようにならないか？
• 中途半端ではなくちゃんとしたWebアプ
リを作れないか？
8

9. Copyright © Virtual Technology, Inc
vte.cx (ブイテックス) engine
KVS
Web
スマホ
• Web(スマホ)システム向けBaaS(Backend as a Service)
– CMS(Content Management System)機能
– トランザクションサポート
– ユーザ・グループ管理
– サーバサイドJavaScript
– EXCEL⼊出⼒機能
– PDF帳票出⼒機能
オンライントランザクション処理 データ分析
※ 2016年春リリース予定

10. Copyright © Virtual Technology, Inc
vte.cxのトランザクション管理
• Feed(Collection)単位のAtomicトランザクション
– 分離レベル：REPEATABLE READ
• かつ、Entry単位のバージョン⽐較
– 分離レベル：SNAPSHOT ISOLATION
– 全てのEntryはURLとリビジョンで管理される
– リビジョン＝更新されると＋１される
10
https://www.facebook.com/notes/virtual-technology/
bdbトランザクションとreflexworksの処理について/486790368009209
データの⼀貫性を確保しつつ⾼いスループットを実現
詳細：

11. Copyright © Virtual Technology, Inc11
• リソースURLを⾃由に設定・追加
• リソースを様々なフォーマットに変換
直感的なREST API

12. Copyright © Virtual Technology, Inc12

13. Copyright © Virtual Technology, Inc13

14. Copyright © Virtual Technology, Inc14

15. Copyright © Virtual Technology, Inc15

16. Copyright © Virtual Technology, Inc
その他
• ユーザ管理・グループ管理
• CMS機能
16
h3p://reflexworks.jp/documentaOon.html

17. Copyright © Virtual Technology, Inc
サーバサイドJavaScript
• GET /s/booking などで起動
• /booking.js の doGet() が呼ばれる (CoC)
• POST、PUT、DELETEも同様
• JSの関数内部で ReflexContext.xxx(url) を実
⾏することで実際にDBを読み書きする
17

18. Copyright © Virtual Technology, Inc
開発のイメージ
• 管理画⾯でサービスを新規作成
• コンテンツをGitHubにpushすることで
サーバにデプロイ
– もしくは、gulpコマンド⼀発
• データをREST APIで操作
ただ、これだけ。
これですべてのWebシステムを開発できる
18

19. Copyright © Virtual Technology, Inc
CircleCI
19
GitHubにPushすることで⾃動的にサーバにデプロイ

20. Copyright © Virtual Technology, Inc20
ご清聴ありがとう
ございました
12/16(⽔) セミナーやります！
ぶいてく