Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Copyright © Virtual Technology, Inc
フロントエンドエンジニアが
主役のBaaSを作った話
2017/8/5 Builderscon Tokyo 2017 ⽵嵜 伸⼀郎(@stakezaki)
1
Copyright © Virtual Technology, Inc
⽵嵜 伸⼀郎 (たけざき しんいちろう)
twitter id:stakezaki
(有)バーチャルテクノロジー代表取締役
元⽇本IBM
元株式会社暮らしのデザインCTO
...
Copyright © Virtual Technology, Inc
ビジョン
”もうフルスタックエンジニアはいらない。
HTMLとJSの知識さえあればWebサービスを
開発できる。
そのような世界を私たちは⽬指しています。”
3
Copyright © Virtual Technology, Inc
お前はいったい何と戦ってるんだ
4
• ベンダーロックイン
• マイクロサービス
/サーバレスは糞
• どうビジネスするか
Copyright © Virtual Technology, Inc
ところでBaaSは今幻滅期ですよね?
• すべてが中途半端
• 独⾃ライブラリで、
ベンダーロックイン
• 機能改善が進まず、
負の遺産を抱え込んだ状態に
• もはや胡散臭...
Copyright © Virtual Technology, Inc
BaaSはモバイルとIoT向けが多い
• mBaaS
– ユーザ管理やプッシュ通知などのスマホアプ
リに必要な機能をまるごと提供
• IoT
– IoT機器で必要となるサー...
Copyright © Virtual Technology, Inc
ベンダーロックイン
7
「落ち着いて⾃分の運命を
受け⼊れるのです
チェック・アウトは⾃由ですが
ここを⽴ち去ることは
永久にできません」
ホテル・カリフォルニアの歌詞
Copyright © Virtual Technology, Inc
淀む⽔には芥(ごみ)溜る
8
フロントエンドは変化が激しく清流が常に流れ込んでいる状態
いつでも捨てられる覚悟が必要
うかつに独⾃ライブラリを混ぜてしまうと死亡フラグが⽴つ...
Copyright © Virtual Technology, Inc
神は細部に宿る
9
ソースコードに設定情報をハードコーディングしたゴミの例
細かいことが死亡フラグになっていく
Copyright © Virtual Technology, Inc10
By ダーウィン
変化に最も対応できる
⽣き物が⽣き残る
変化に対応できなければ死あるのみ
Copyright © Virtual Technology, Inc
vte.cx (ブイテックス)
• http://admin.1.vte.cx
11
2015/12 オープンβ
Copyright © Virtual Technology, Inc
敢えてフロントエンドの世界に⾶び込む
• HTML、CSS、JavaScriptなどのコーディングだ
けで本格的なWebシステムを作れるようにした
• サーバサイドのAPI...
Copyright © Virtual Technology, Inc
徹底的にゴミを排除
• システムのモダン化
– npmエコシステム
– Webpackの利⽤
• ライブラリを提供しない
– 設定より規約(CoC)
– ⾃由に作れるAPI...
Copyright © Virtual Technology, Inc
DEMO
14
Copyright © Virtual Technology, Inc
今注⽬のサーバレス アーキテクチャー
15
API	Gateway
Lambda
Cognito SNSDynamoDB
Cloud	Front
S3
clientmobi...
Copyright © Virtual Technology, Inc
サーバレスアーキテクチャーは
Webアプリに使えるか?
16
Copyright © Virtual Technology, Inc
サーバレスどころか設定地獄
• 静的コンテンツとAPIが異なるドメイン
– CORSの設定なんか画⾯からやりたくない
– CI/CD使えないじゃん!
– あとセッション管理...
Copyright © Virtual Technology, Inc
API以外の余計なことは考えたくない
18
適当に分散して勝⼿にスケールすることを期待
これが真のサーバレスではないのか!?
Copyright © Virtual Technology, Inc
vte.cxの3つのこだわり
• バックエンドの複雑さを隠蔽
– サーバ構成の都合をクライアントに押し付けない
– Microservicesでありがちな認証などの考慮をク...
Copyright © Virtual Technology, Inc
vte.cx の主な機能
• REST APIを直感的な規約で作成できる
• ユーザ・グループ管理、ACL管理
• ソフトスキーマ
• トランザクション管理
• サーバサイ...
Copyright © Virtual Technology, Inc21
• URLをフォルダに⾒⽴てて⾃由に設定・追加可能
• リソースを様々なフォーマットに変換可能
• XML、JSON、MessagePack等などのデータ
• HTML...
Copyright © Virtual Technology, Inc22
現在このイメージを表示できません。
Copyright © Virtual Technology, Inc23
Copyright © Virtual Technology, Inc24
Copyright © Virtual Technology, Inc25
Copyright © Virtual Technology, Inc
スキーマ
• シンプルなシンタックス
– 「項⽬名(型)= 正規表現」の形式で記述
– Indexを指定可能
– 正規表現でバリデーション
• ソフトスキーマ
– 項⽬の追...
Copyright © Virtual Technology, Inc
スキーマが必須である理由
• 任意のログをDBに突っ込んで分析に使う
といった⽤途にはスキーマレスがいい
• スキーマレスはお⼿軽だが⾃由に開発し
ていると後で酷い⽬にあう...
Copyright © Virtual Technology, Inc
1枚の紙≒トランザクションスクリプトパターン
• コンピュータがない時代、全部紙だったじゃないか。
28
受付
Copyright © Virtual Technology, Inc
トランザクション管理
• Feed(紙)単位のAtomicトランザクション
– 分離レベル:REPEATABLE READ
• かつ、Entry(明細)単位のバージョン⽐較...
Copyright © Virtual Technology, Inc
トランザクション管理があるから安全
例:「鏡+明細」で1トランザクション
30
<feed>
<entry>
<id>鏡,リビジョン</id>
</entry>
<entr...
Copyright © Virtual Technology, Inc
アーキテクチャの変遷について
31
Copyright © Virtual Technology, Inc
(再)BaaSを作った動機
• フロントエンドエンジニアだけで
本格的なWebアプリを作りたい。
• phpやrubyなどのサーバサイドをなくして、
javascript等...
Copyright © Virtual Technology, Inc
l
View Service Resource
2007年頃: Microservices
ECサイトをオンプレミスでスクラッチ開発
品質最悪
スケールしない
三重苦
管理...
Copyright © Virtual Technology, Inc
乗り越えなきゃいけない課題
• 運⽤管理を楽にする
• スケーラビリティを確保
• アプリの品質向上
• 可⽤性向上
34
Copyright © Virtual Technology, Inc
いろいろやめた
• RDBをやめKVSでシャーディング
• Microservicesをやめた
• PHPをやめてSPAに
– Thin Server Architectu...
Copyright © Virtual Technology, Inc
ポイント1: スケールさせるための
シャーディング戦略
36
困難は分割せよ
By ルネ・デカルト
Copyright © Virtual Technology, Inc
View Service
2011年頃: KVSでシャーディング
スケールアウトは可能になったが、
しかし、可⽤性と運⽤で問題が発⽣!
⼤規模帳票サービスをオンプレミスで開...
Copyright © Virtual Technology, Inc38
障害発⽣時の切替処理
Copyright © Virtual Technology, Inc
ポイント2:Microservicesをやめた
• 機能が増えたらその都度サービスを⽴てるのか?
• BaaSでは論理的にサービスを追加でき⾃由にAPI
を作ることができる...
Copyright © Virtual Technology, Inc
Enough with the microservices
”⾮⼲渉化と分散を混同してはいけません。⾮⼲渉
化は、明確に定義されたモジュールで構成され明
確に定義されたイン...
Copyright © Virtual Technology, Inc
ポイント3:Thin Server Architecture
41
・・・
REST
• クライアントからRESTでサーバリソースにアクセス
• サーバからはJSONやXM...
Copyright © Virtual Technology, Inc42
増えたフロントの責務
http://www.slideshare.net/fullscreen/sagawafumio/ss-38480894/6
Copyright © Virtual Technology, Inc
2013年頃: AngularJSでSPA
ビジネスロジックを含めほとんどの実装がクライアントに集中
開発⽣産性の⾯で問題が発⽣! 特殊すぎたAngularJS
Thin ...
Copyright © Virtual Technology, Inc
結局、解決できなかった
•開発⽣産性
•可⽤性
•運⽤容易性
44
Copyright © Virtual Technology, Inc
そこで、Kubernetes !!
•無停⽌メンテナンス
•可⽤性向上
•スケールアウト
•ログ⼀元管理
45
Copyright © Virtual Technology, Inc
Twelve-Factor App
46
APをステートレスにするなど12の要素に
準拠することでクラウドネーティブ化を図る
Copyright © Virtual Technology, Inc
BFF(Backend for Frontend)の導⼊
• クライアント偏重の是正
– ⾮同期コールバック地獄に陥りがちなクライアントより
サーバで処理実⾏した⽅が有利で...
Copyright © Virtual Technology, Inc
GraphQLではなくBFFで
• GraphQLが解決しようとしていること
– クライアントからリクエストを何度も発⾏する
必要がある(N+1問題)
– 提供されているA...
Copyright © Virtual Technology, Inc
型
• 型があれば10%〜20%のバグを減らすこ
とができるとの調査結果
• サーバサイドにおける動的型付け⾔語疲れ
49
Copyright © Virtual Technology, Inc
View Service Resource
2017年: クラウドネーティブ化とBFF
オンプレからクラウドGKE(kubernetes)に移⾏(※2017/12リリース予...
Copyright © Virtual Technology, Inc
課題を解決できた!
51
Node1 Node2
コンテナ コンテナ コンテナ
サービス
本番(Blue) 検証(Green)
ログ(集約)
Datastore Cloud...
Copyright © Virtual Technology, Inc
BaaSでどのようにビジネスするか
52
Copyright © Virtual Technology, Inc
リーンスタートアップ的アプローチ
• 『作れよ、されば顧客は来たらん』は
戦略ではなく、単なる神頼みだ
53
BY	Steve	Blank
Copyright © Virtual Technology, Inc
これまでの私達
54
フレームワーク
売ってまーす。
しーん
・ ・ ・
BaaS使いません
か?
Copyright © Virtual Technology, Inc
まずお客様を⾒つけて試す
• 特定のマーケットから始める
• ⼩さなものから初める
• 製品を作って失敗したら素早く軌道修正
55
ピボットを繰り返しながら
ビジネスモデル...
Copyright © Virtual Technology, Inc
リアルのビジネス
56
⾼可⽤性・
スケーラビリティ
早いし安いよ!
受注システム
作りたいなあ
WoW!
お客様
Copyright © Virtual Technology, Inc
想定しているお客様
• ⾃社でWebサービスを⽴ち上げたい
• 開発+サービスの運⽤もまかせたい
• SaaS/パッケージ製品では機能がフィット
しない。カスタマイズできる...
Copyright © Virtual Technology, Inc
ビジネス領域
58
所有
利⽤
特化 ⼀般
SaaS
IaaS
PaaS BaaS
パッケージSI フレームワーク+
カスタマイズ
オンプレミス
クラウド
• 圧倒的な パ...
Copyright © Virtual Technology, Inc
• Speed
– 早期にリリース
• Small Start
– 初期投資を抑える
• Scale Out
– 事業の成⻑に応じて拡⼤
• Seamless & DevO...
Copyright © Virtual Technology, Inc
まとめ
• フロントエンドエンジニアが主役になるためには
バックエンドを意識させないことが重要
– ロックインを避けJSのエコシステムを最⼤限活⽤する
– サーバレスアーキ...
Copyright © Virtual Technology, Inc
ここまでの話は
はっきりいってつまらない
61
早いし安いよ!
って売るのは邪道!
本質を⾒失ってる
Copyright © Virtual Technology, Inc
ドン・キホーテが戦っている本当の敵
• エンジニアの既存の⽂化と超えられない壁
– フロントエンドエンジニア
にサーバサイドを引き受け
させることの⼤変さ
– サーバサイド...
Copyright © Virtual Technology, Inc
ビジョン
”もうフルスタックエンジニアはいらない。
HTMLとJSの知識さえあればWebサービスを
開発できる。
そのような世界を私たちは⽬指しています。”
63
Copyright © Virtual Technology, Inc
8/23 React 勉強会やります!
https://vtecx.connpass.com/event/63341/
64
Copyright © Virtual Technology, Inc65
support@virtual-tech.net
パートナー募集中!
開発案件ください!
早いし安いよ!
Upcoming SlideShare
Loading in …5
×

Builderscon Tokyo 2017

2,334 views

Published on

Buildersconの資料です。(8/5 14:10- C フロントエンドエンジニアが主役のBaaSを作った話)

Published in: Internet
  • Be the first to comment

  • Be the first to like this

Builderscon Tokyo 2017

  1. 1. Copyright © Virtual Technology, Inc フロントエンドエンジニアが 主役のBaaSを作った話 2017/8/5 Builderscon Tokyo 2017 ⽵嵜 伸⼀郎(@stakezaki) 1
  2. 2. Copyright © Virtual Technology, Inc ⽵嵜 伸⼀郎 (たけざき しんいちろう) twitter id:stakezaki (有)バーチャルテクノロジー代表取締役 元⽇本IBM 元株式会社暮らしのデザインCTO 2 この頃、Webサービス の啓蒙活動やっていた おめでとう!
  3. 3. Copyright © Virtual Technology, Inc ビジョン ”もうフルスタックエンジニアはいらない。 HTMLとJSの知識さえあればWebサービスを 開発できる。 そのような世界を私たちは⽬指しています。” 3
  4. 4. Copyright © Virtual Technology, Inc お前はいったい何と戦ってるんだ 4 • ベンダーロックイン • マイクロサービス /サーバレスは糞 • どうビジネスするか
  5. 5. Copyright © Virtual Technology, Inc ところでBaaSは今幻滅期ですよね? • すべてが中途半端 • 独⾃ライブラリで、 ベンダーロックイン • 機能改善が進まず、 負の遺産を抱え込んだ状態に • もはや胡散臭いものと思われている 5
  6. 6. Copyright © Virtual Technology, Inc BaaSはモバイルとIoT向けが多い • mBaaS – ユーザ管理やプッシュ通知などのスマホアプ リに必要な機能をまるごと提供 • IoT – IoT機器で必要となるサーバ側の仕組みをま るごと提供 6
  7. 7. Copyright © Virtual Technology, Inc ベンダーロックイン 7 「落ち着いて⾃分の運命を 受け⼊れるのです チェック・アウトは⾃由ですが ここを⽴ち去ることは 永久にできません」 ホテル・カリフォルニアの歌詞
  8. 8. Copyright © Virtual Technology, Inc 淀む⽔には芥(ごみ)溜る 8 フロントエンドは変化が激しく清流が常に流れ込んでいる状態 いつでも捨てられる覚悟が必要 うかつに独⾃ライブラリを混ぜてしまうと死亡フラグが⽴つ BaaSのライブラリは簡単に更新できないし捨てられない
  9. 9. Copyright © Virtual Technology, Inc 神は細部に宿る 9 ソースコードに設定情報をハードコーディングしたゴミの例 細かいことが死亡フラグになっていく
  10. 10. Copyright © Virtual Technology, Inc10 By ダーウィン 変化に最も対応できる ⽣き物が⽣き残る 変化に対応できなければ死あるのみ
  11. 11. Copyright © Virtual Technology, Inc vte.cx (ブイテックス) • http://admin.1.vte.cx 11 2015/12 オープンβ
  12. 12. Copyright © Virtual Technology, Inc 敢えてフロントエンドの世界に⾶び込む • HTML、CSS、JavaScriptなどのコーディングだ けで本格的なWebシステムを作れるようにした • サーバサイドのAPI (API設計とスキーマ)もフロ ントエンドエンジニアが⾃由に作れるようにした • JavaScriptのエコシステムを採⽤することでロッ クインを排除した(独⾃ライブラリを提供しない) 12
  13. 13. Copyright © Virtual Technology, Inc 徹底的にゴミを排除 • システムのモダン化 – npmエコシステム – Webpackの利⽤ • ライブラリを提供しない – 設定より規約(CoC) – ⾃由に作れるAPI • ソースコードには設定を 書かせない – ソースコードと設定を分離 13 清流に戻せ!
  14. 14. Copyright © Virtual Technology, Inc DEMO 14
  15. 15. Copyright © Virtual Technology, Inc 今注⽬のサーバレス アーキテクチャー 15 API Gateway Lambda Cognito SNSDynamoDB Cloud Front S3 clientmobile client だ、⼤丈夫かなあ!?
  16. 16. Copyright © Virtual Technology, Inc サーバレスアーキテクチャーは Webアプリに使えるか? 16
  17. 17. Copyright © Virtual Technology, Inc サーバレスどころか設定地獄 • 静的コンテンツとAPIが異なるドメイン – CORSの設定なんか画⾯からやりたくない – CI/CD使えないじゃん! – あとセッション管理どうすんの? • サービス利⽤には認証が必要 – CognitoのSecurity Token Service で設定 • サーバレスなのにサーバの設定が必要って どういうこと? 17
  18. 18. Copyright © Virtual Technology, Inc API以外の余計なことは考えたくない 18 適当に分散して勝⼿にスケールすることを期待 これが真のサーバレスではないのか!?
  19. 19. Copyright © Virtual Technology, Inc vte.cxの3つのこだわり • バックエンドの複雑さを隠蔽 – サーバ構成の都合をクライアントに押し付けない – Microservicesでありがちな認証などの考慮をクライア ントにさせない • Webアプリのことだけに集中させる – 重要なのはAPIとスキーマ設計(+ACL) – 静的コンテンツを含めSame Originで管理する • ローカル開発環境やCI/CD環境を提供 – JavaScriptエコシステムを利⽤したローカル開発環境 – 複数のブランチに対応したサービスを⾃由に作成可能 – CircleCIなどによる⾃動デプロイ 19
  20. 20. Copyright © Virtual Technology, Inc vte.cx の主な機能 • REST APIを直感的な規約で作成できる • ユーザ・グループ管理、ACL管理 • ソフトスキーマ • トランザクション管理 • サーバサイドJavaScript • EXCEL、PDF帳票出⼒機能 KVS Web スマホ オンライントランザクション処理 データ分析 ※2018年リリース予定
  21. 21. Copyright © Virtual Technology, Inc21 • URLをフォルダに⾒⽴てて⾃由に設定・追加可能 • リソースを様々なフォーマットに変換可能 • XML、JSON、MessagePack等などのデータ • HTMLやCSS、JavaScript、PDF、画像などの静的コンテンツ REST APIと直感的な規約
  22. 22. Copyright © Virtual Technology, Inc22 現在このイメージを表示できません。
  23. 23. Copyright © Virtual Technology, Inc23
  24. 24. Copyright © Virtual Technology, Inc24
  25. 25. Copyright © Virtual Technology, Inc25
  26. 26. Copyright © Virtual Technology, Inc スキーマ • シンプルなシンタックス – 「項⽬名(型)= 正規表現」の形式で記述 – Indexを指定可能 – 正規表現でバリデーション • ソフトスキーマ – 項⽬の追加が可能 – 運⽤中でも変更可 26
  27. 27. Copyright © Virtual Technology, Inc スキーマが必須である理由 • 任意のログをDBに突っ込んで分析に使う といった⽤途にはスキーマレスがいい • スキーマレスはお⼿軽だが⾃由に開発し ていると後で酷い⽬にあう • そもそもモデルを設計しないと業務アプ リは作れない • パフォーマンス向上やスケーラブルにす る為にはやはりスキーマ設計が必要 27
  28. 28. Copyright © Virtual Technology, Inc 1枚の紙≒トランザクションスクリプトパターン • コンピュータがない時代、全部紙だったじゃないか。 28 受付
  29. 29. Copyright © Virtual Technology, Inc トランザクション管理 • Feed(紙)単位のAtomicトランザクション – 分離レベル:REPEATABLE READ • かつ、Entry(明細)単位のバージョン⽐較 – 分離レベル:SNAPSHOT ISOLATION – 全てのEntryはURLとリビジョンで管理される – リビジョン=更新されると+1される 29 https://www.facebook.com/notes/virtual-technology/ bdbトランザクションとreflexworksの処理について/486790368009209 データの⼀貫性を確保しつつ⾼いスループットを実現 詳細:
  30. 30. Copyright © Virtual Technology, Inc トランザクション管理があるから安全 例:「鏡+明細」で1トランザクション 30 <feed> <entry> <id>鏡,リビジョン</id> </entry> <entry> <id>明細1,リビジョン</id> </entry> <entry> <id>明細2,リビジョン</id> </entry> ・・・・ </feed> 鏡 明細
  31. 31. Copyright © Virtual Technology, Inc アーキテクチャの変遷について 31
  32. 32. Copyright © Virtual Technology, Inc (再)BaaSを作った動機 • フロントエンドエンジニアだけで 本格的なWebアプリを作りたい。 • phpやrubyなどのサーバサイドをなくして、 javascript等のフロントエンド技術だけで webアプリケーションを作れないか? 32
  33. 33. Copyright © Virtual Technology, Inc l View Service Resource 2007年頃: Microservices ECサイトをオンプレミスでスクラッチ開発 品質最悪 スケールしない 三重苦 管理が⼤変
  34. 34. Copyright © Virtual Technology, Inc 乗り越えなきゃいけない課題 • 運⽤管理を楽にする • スケーラビリティを確保 • アプリの品質向上 • 可⽤性向上 34
  35. 35. Copyright © Virtual Technology, Inc いろいろやめた • RDBをやめKVSでシャーディング • Microservicesをやめた • PHPをやめてSPAに – Thin Server Architecture 35
  36. 36. Copyright © Virtual Technology, Inc ポイント1: スケールさせるための シャーディング戦略 36 困難は分割せよ By ルネ・デカルト
  37. 37. Copyright © Virtual Technology, Inc View Service 2011年頃: KVSでシャーディング スケールアウトは可能になったが、 しかし、可⽤性と運⽤で問題が発⽣! ⼤規模帳票サービスをオンプレミスで開発、50万伝票1/⽇、600TPS Resource KVS
  38. 38. Copyright © Virtual Technology, Inc38 障害発⽣時の切替処理
  39. 39. Copyright © Virtual Technology, Inc ポイント2:Microservicesをやめた • 機能が増えたらその都度サービスを⽴てるのか? • BaaSでは論理的にサービスを追加でき⾃由にAPI を作ることができる。それで⼗分では? 39 “ソフトウェアシステムの⼤多数は、 単⼀のモノリシックアプリケーション として構築されるべきである” by Martin Fowler
  40. 40. Copyright © Virtual Technology, Inc Enough with the microservices ”⾮⼲渉化と分散を混同してはいけません。⾮⼲渉 化は、明確に定義されたモジュールで構成され明 確に定義されたインターフェースを有するモノリ スを持つことで実現できますし、そうするべきで す。明確なインターフェースを有するモジュール を持つことで実現できる⾮⼲渉化の恩恵を得るが ためにアプリケーションを別個のサービスとして 分散する必要はないのです。” 40 (http://postd.cc/enough-with-the-microservices/) by Adam Drake 各モジュールは⾮⼲渉化してむしろ結合させた⽅がいい
  41. 41. Copyright © Virtual Technology, Inc ポイント3:Thin Server Architecture 41 ・・・ REST • クライアントからRESTでサーバリソースにアクセス • サーバからはJSONやXMLのデータを返すのみ データ
  42. 42. Copyright © Virtual Technology, Inc42 増えたフロントの責務 http://www.slideshare.net/fullscreen/sagawafumio/ss-38480894/6
  43. 43. Copyright © Virtual Technology, Inc 2013年頃: AngularJSでSPA ビジネスロジックを含めほとんどの実装がクライアントに集中 開発⽣産性の⾯で問題が発⽣! 特殊すぎたAngularJS Thin Server Architecture+SPAで業務システムを構築 サービスはほとんど 実装していない View Service Resource KVS
  44. 44. Copyright © Virtual Technology, Inc 結局、解決できなかった •開発⽣産性 •可⽤性 •運⽤容易性 44
  45. 45. Copyright © Virtual Technology, Inc そこで、Kubernetes !! •無停⽌メンテナンス •可⽤性向上 •スケールアウト •ログ⼀元管理 45
  46. 46. Copyright © Virtual Technology, Inc Twelve-Factor App 46 APをステートレスにするなど12の要素に 準拠することでクラウドネーティブ化を図る
  47. 47. Copyright © Virtual Technology, Inc BFF(Backend for Frontend)の導⼊ • クライアント偏重の是正 – ⾮同期コールバック地獄に陥りがちなクライアントより サーバで処理実⾏した⽅が有利であることに気づく • Thin Server Architectureを⾒直し – サーバサイドの開発はやはり必要 – Server Side Javascriptでビジネスロジック記述 • Isomorphic(Universal) – SSR、動的PDF出⼒ – ただしNode.jsは使わない 47 例えば、 鏡と明細の マージ編集
  48. 48. Copyright © Virtual Technology, Inc GraphQLではなくBFFで • GraphQLが解決しようとしていること – クライアントからリクエストを何度も発⾏する 必要がある(N+1問題) – 提供されているAPIが不⼗分だと、クライアント 側でテーブル結合する必要があるなど • そもそもAPI変更コストが⼤きいという前提がまずい – サーバ側の変更は基本的に⼤変なのでAPIはなるべく変更した くないという背景 – APIは最⼤公約数的なものになってしまいがち 48 結局はクライアントで頑張る発想から超えられないGraphQL ⼀⽅、柔軟にAPIを作成でき、かつ、開発コストも低い BFF(ServersideJS)があればGraphQLは不要ではないか!?
  49. 49. Copyright © Virtual Technology, Inc 型 • 型があれば10%〜20%のバグを減らすこ とができるとの調査結果 • サーバサイドにおける動的型付け⾔語疲れ 49
  50. 50. Copyright © Virtual Technology, Inc View Service Resource 2017年: クラウドネーティブ化とBFF オンプレからクラウドGKE(kubernetes)に移⾏(※2017/12リリース予定) 独⾃KVSをDatastoreなどのマネージドサービスに変更 JSON/XML MessagePack Datastore GCS Google Container Engine(GKE)
  51. 51. Copyright © Virtual Technology, Inc 課題を解決できた! 51 Node1 Node2 コンテナ コンテナ コンテナ サービス 本番(Blue) 検証(Green) ログ(集約) Datastore CloudStorage • 可⽤性の向上、さらにCI/CD(DevOps)の導⼊ • スケーラビリティ確保 • ⽣産性とパフォーマンス向上
  52. 52. Copyright © Virtual Technology, Inc BaaSでどのようにビジネスするか 52
  53. 53. Copyright © Virtual Technology, Inc リーンスタートアップ的アプローチ • 『作れよ、されば顧客は来たらん』は 戦略ではなく、単なる神頼みだ 53 BY Steve Blank
  54. 54. Copyright © Virtual Technology, Inc これまでの私達 54 フレームワーク 売ってまーす。 しーん ・ ・ ・ BaaS使いません か?
  55. 55. Copyright © Virtual Technology, Inc まずお客様を⾒つけて試す • 特定のマーケットから始める • ⼩さなものから初める • 製品を作って失敗したら素早く軌道修正 55 ピボットを繰り返しながら ビジネスモデルを探していく
  56. 56. Copyright © Virtual Technology, Inc リアルのビジネス 56 ⾼可⽤性・ スケーラビリティ 早いし安いよ! 受注システム 作りたいなあ WoW! お客様
  57. 57. Copyright © Virtual Technology, Inc 想定しているお客様 • ⾃社でWebサービスを⽴ち上げたい • 開発+サービスの運⽤もまかせたい • SaaS/パッケージ製品では機能がフィット しない。カスタマイズできるものがほしい 57 これって 機能追加できる? お客様 はい、 すぐにできます。 vte.cx開発者 BaaS
  58. 58. Copyright © Virtual Technology, Inc ビジネス領域 58 所有 利⽤ 特化 ⼀般 SaaS IaaS PaaS BaaS パッケージSI フレームワーク+ カスタマイズ オンプレミス クラウド • 圧倒的な パフォーマンス+スケーラビリティ を 低価格 で提供 • SaaSでは対応できない 特定顧客向けソリューション を素早く提供
  59. 59. Copyright © Virtual Technology, Inc • Speed – 早期にリリース • Small Start – 初期投資を抑える • Scale Out – 事業の成⻑に応じて拡⼤ • Seamless & DevOps – リリース後も継続的に改善 59 BaaSがもたらす4つのS
  60. 60. Copyright © Virtual Technology, Inc まとめ • フロントエンドエンジニアが主役になるためには バックエンドを意識させないことが重要 – ロックインを避けJSのエコシステムを最⼤限活⽤する – サーバレスアーキテクチャ、Microservicesは糞 • 運⽤管理やスケーラビリティ、⾼可⽤性などの課 題をkubernetesで解決 • サーバサイド(BFF)の再評価 – クライアントと同じJS技術 (Isomorphic)、型重要! • リーンスタートアップ的アプローチでビジネスモ デルを開拓。BaaSを活かした特定ソリューション 60
  61. 61. Copyright © Virtual Technology, Inc ここまでの話は はっきりいってつまらない 61 早いし安いよ! って売るのは邪道! 本質を⾒失ってる
  62. 62. Copyright © Virtual Technology, Inc ドン・キホーテが戦っている本当の敵 • エンジニアの既存の⽂化と超えられない壁 – フロントエンドエンジニア にサーバサイドを引き受け させることの⼤変さ – サーバサイドエンジニアは フロントエンド技術だけで すべてを置き換えようとは 思わない 私達の⽬指す世界感は到底、受け⼊れられない この敵を倒すというのが王道ではないのか!? 62
  63. 63. Copyright © Virtual Technology, Inc ビジョン ”もうフルスタックエンジニアはいらない。 HTMLとJSの知識さえあればWebサービスを 開発できる。 そのような世界を私たちは⽬指しています。” 63
  64. 64. Copyright © Virtual Technology, Inc 8/23 React 勉強会やります! https://vtecx.connpass.com/event/63341/ 64
  65. 65. Copyright © Virtual Technology, Inc65 support@virtual-tech.net パートナー募集中! 開発案件ください! 早いし安いよ!

×