SlideShare a Scribd company logo

Builderscon Tokyo 2017

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

Builderscon Tokyo 2017

1 of 65
Download to read offline
Copyright © Virtual Technology, Inc
フロントエンドエンジニアが
主役のBaaSを作った話
2017/8/5 Builderscon Tokyo 2017 ⽵嵜 伸⼀郎(@stakezaki)
1
Copyright © Virtual Technology, Inc
⽵嵜 伸⼀郎 (たけざき しんいちろう)
twitter id:stakezaki
(有)バーチャルテクノロジー代表取締役
元⽇本IBM
元株式会社暮らしのデザインCTO
2
この頃、Webサービス
の啓蒙活動やっていた
おめでとう!
Copyright © Virtual Technology, Inc
ビジョン
”もうフルスタックエンジニアはいらない。
HTMLとJSの知識さえあればWebサービスを
開発できる。
そのような世界を私たちは⽬指しています。”
3
Copyright © Virtual Technology, Inc
お前はいったい何と戦ってるんだ
4
• ベンダーロックイン
• マイクロサービス
/サーバレスは糞
• どうビジネスするか
Copyright © Virtual Technology, Inc
ところでBaaSは今幻滅期ですよね?
• すべてが中途半端
• 独⾃ライブラリで、
ベンダーロックイン
• 機能改善が進まず、
負の遺産を抱え込んだ状態に
• もはや胡散臭いものと思われている
5
Copyright © Virtual Technology, Inc
BaaSはモバイルとIoT向けが多い
• mBaaS
– ユーザ管理やプッシュ通知などのスマホアプ
リに必要な機能をまるごと提供
• IoT
– IoT機器で必要となるサーバ側の仕組みをま
るごと提供
6
Ad

Recommended

More Related Content

What's hot

乗り遅れるな!IBMが本気で取り組む新世代クラウドサービスを徹底解説
乗り遅れるな!IBMが本気で取り組む新世代クラウドサービスを徹底解説乗り遅れるな!IBMが本気で取り組む新世代クラウドサービスを徹底解説
乗り遅れるな!IBMが本気で取り組む新世代クラウドサービスを徹底解説Kimihiko Kitase
 
【共通版】 IBM Cloud (SoftLayer) 最新動向情報 2017年11月版 v1.0
【共通版】 IBM Cloud (SoftLayer) 最新動向情報 2017年11月版 v1.0【共通版】 IBM Cloud (SoftLayer) 最新動向情報 2017年11月版 v1.0
【共通版】 IBM Cloud (SoftLayer) 最新動向情報 2017年11月版 v1.0Kazuhiko Isaji
 
Introducing IBM Cloud & Cognitive
Introducing IBM Cloud & CognitiveIntroducing IBM Cloud & Cognitive
Introducing IBM Cloud & CognitiveAtsumori Sasaki
 
Bluemix_API_Possibility
Bluemix_API_PossibilityBluemix_API_Possibility
Bluemix_API_PossibilityHarada Kazuki
 
SoftLayer最新動向と賢い利用方法
SoftLayer最新動向と賢い利用方法 SoftLayer最新動向と賢い利用方法
SoftLayer最新動向と賢い利用方法 Kimihiko Kitase
 
アマゾン ウェブ サービスとJAWS-UG
アマゾン ウェブ サービスとJAWS-UGアマゾン ウェブ サービスとJAWS-UG
アマゾン ウェブ サービスとJAWS-UGShigeru Numaguchi
 
Automated Testing on AWS Device Farm
Automated Testing on AWS Device FarmAutomated Testing on AWS Device Farm
Automated Testing on AWS Device FarmKeisuke Nishitani
 
パブリッククラウド動向とIBMの取り組み
パブリッククラウド動向とIBMの取り組みパブリッククラウド動向とIBMの取り組み
パブリッククラウド動向とIBMの取り組みKimihiko Kitase
 
”もと”中の人が語り尽くすSoftLayerセキュリティー(2016/10/13更新版)
”もと”中の人が語り尽くすSoftLayerセキュリティー(2016/10/13更新版)”もと”中の人が語り尽くすSoftLayerセキュリティー(2016/10/13更新版)
”もと”中の人が語り尽くすSoftLayerセキュリティー(2016/10/13更新版)Shinobu Yasuda
 
20200708サーバーレスでのAPI管理の考え方
20200708サーバーレスでのAPI管理の考え方20200708サーバーレスでのAPI管理の考え方
20200708サーバーレスでのAPI管理の考え方Amazon Web Services Japan
 
VMware + IBM Cloudで広がるハイブリッド・クラウドの世界
VMware + IBM Cloudで広がるハイブリッド・クラウドの世界VMware + IBM Cloudで広がるハイブリッド・クラウドの世界
VMware + IBM Cloudで広がるハイブリッド・クラウドの世界Shinobu Yasuda
 
IaaS型パブリッククラウド「IBM SoftLayer」とは
IaaS型パブリッククラウド「IBM SoftLayer」とはIaaS型パブリッククラウド「IBM SoftLayer」とは
IaaS型パブリッククラウド「IBM SoftLayer」とはKimihiko Kitase
 
ApexからAWS IoT叩いてみた話
ApexからAWS IoT叩いてみた話ApexからAWS IoT叩いてみた話
ApexからAWS IoT叩いてみた話tzm_freedom
 
MySQL Clusterに適したベアメタルクラウド SoftLayer
MySQL Clusterに適したベアメタルクラウド SoftLayerMySQL Clusterに適したベアメタルクラウド SoftLayer
MySQL Clusterに適したベアメタルクラウド SoftLayerMaho Takara
 
VMwareとIBMクラウドの提携で広がるハイブリッド・クラウドの世界
VMwareとIBMクラウドの提携で広がるハイブリッド・クラウドの世界VMwareとIBMクラウドの提携で広がるハイブリッド・クラウドの世界
VMwareとIBMクラウドの提携で広がるハイブリッド・クラウドの世界Shinobu Yasuda
 
【初公開】チャットワーク検索機能を支える技術
【初公開】チャットワーク検索機能を支える技術【初公開】チャットワーク検索機能を支える技術
【初公開】チャットワーク検索機能を支える技術Yoshinori Fujiwara
 
VMware SDDC on IBM SoftLayer Cloud
VMware SDDC on IBM SoftLayer CloudVMware SDDC on IBM SoftLayer Cloud
VMware SDDC on IBM SoftLayer Cloudwatarukatsurashima
 
SoftLayer and the possibility of baremetal
SoftLayer and the possibility of baremetal SoftLayer and the possibility of baremetal
SoftLayer and the possibility of baremetal Kimihiko Kitase
 

What's hot (20)

乗り遅れるな!IBMが本気で取り組む新世代クラウドサービスを徹底解説
乗り遅れるな!IBMが本気で取り組む新世代クラウドサービスを徹底解説乗り遅れるな!IBMが本気で取り組む新世代クラウドサービスを徹底解説
乗り遅れるな!IBMが本気で取り組む新世代クラウドサービスを徹底解説
 
【共通版】 IBM Cloud (SoftLayer) 最新動向情報 2017年11月版 v1.0
【共通版】 IBM Cloud (SoftLayer) 最新動向情報 2017年11月版 v1.0【共通版】 IBM Cloud (SoftLayer) 最新動向情報 2017年11月版 v1.0
【共通版】 IBM Cloud (SoftLayer) 最新動向情報 2017年11月版 v1.0
 
Introducing IBM Cloud & Cognitive
Introducing IBM Cloud & CognitiveIntroducing IBM Cloud & Cognitive
Introducing IBM Cloud & Cognitive
 
AWS IoTアーキテクチャパターン
AWS IoTアーキテクチャパターンAWS IoTアーキテクチャパターン
AWS IoTアーキテクチャパターン
 
Bluemix_API_Possibility
Bluemix_API_PossibilityBluemix_API_Possibility
Bluemix_API_Possibility
 
SoftLayer最新動向と賢い利用方法
SoftLayer最新動向と賢い利用方法 SoftLayer最新動向と賢い利用方法
SoftLayer最新動向と賢い利用方法
 
アマゾン ウェブ サービスとJAWS-UG
アマゾン ウェブ サービスとJAWS-UGアマゾン ウェブ サービスとJAWS-UG
アマゾン ウェブ サービスとJAWS-UG
 
Automated Testing on AWS Device Farm
Automated Testing on AWS Device FarmAutomated Testing on AWS Device Farm
Automated Testing on AWS Device Farm
 
パブリッククラウド動向とIBMの取り組み
パブリッククラウド動向とIBMの取り組みパブリッククラウド動向とIBMの取り組み
パブリッククラウド動向とIBMの取り組み
 
”もと”中の人が語り尽くすSoftLayerセキュリティー(2016/10/13更新版)
”もと”中の人が語り尽くすSoftLayerセキュリティー(2016/10/13更新版)”もと”中の人が語り尽くすSoftLayerセキュリティー(2016/10/13更新版)
”もと”中の人が語り尽くすSoftLayerセキュリティー(2016/10/13更新版)
 
20200708サーバーレスでのAPI管理の考え方
20200708サーバーレスでのAPI管理の考え方20200708サーバーレスでのAPI管理の考え方
20200708サーバーレスでのAPI管理の考え方
 
VMware + IBM Cloudで広がるハイブリッド・クラウドの世界
VMware + IBM Cloudで広がるハイブリッド・クラウドの世界VMware + IBM Cloudで広がるハイブリッド・クラウドの世界
VMware + IBM Cloudで広がるハイブリッド・クラウドの世界
 
IaaS型パブリッククラウド「IBM SoftLayer」とは
IaaS型パブリッククラウド「IBM SoftLayer」とはIaaS型パブリッククラウド「IBM SoftLayer」とは
IaaS型パブリッククラウド「IBM SoftLayer」とは
 
ApexからAWS IoT叩いてみた話
ApexからAWS IoT叩いてみた話ApexからAWS IoT叩いてみた話
ApexからAWS IoT叩いてみた話
 
MySQL Clusterに適したベアメタルクラウド SoftLayer
MySQL Clusterに適したベアメタルクラウド SoftLayerMySQL Clusterに適したベアメタルクラウド SoftLayer
MySQL Clusterに適したベアメタルクラウド SoftLayer
 
VMwareとIBMクラウドの提携で広がるハイブリッド・クラウドの世界
VMwareとIBMクラウドの提携で広がるハイブリッド・クラウドの世界VMwareとIBMクラウドの提携で広がるハイブリッド・クラウドの世界
VMwareとIBMクラウドの提携で広がるハイブリッド・クラウドの世界
 
【初公開】チャットワーク検索機能を支える技術
【初公開】チャットワーク検索機能を支える技術【初公開】チャットワーク検索機能を支える技術
【初公開】チャットワーク検索機能を支える技術
 
Real techlt20180829
Real techlt20180829Real techlt20180829
Real techlt20180829
 
VMware SDDC on IBM SoftLayer Cloud
VMware SDDC on IBM SoftLayer CloudVMware SDDC on IBM SoftLayer Cloud
VMware SDDC on IBM SoftLayer Cloud
 
SoftLayer and the possibility of baremetal
SoftLayer and the possibility of baremetal SoftLayer and the possibility of baremetal
SoftLayer and the possibility of baremetal
 

Similar to Builderscon Tokyo 2017

HTML5時代のwebクリエイターに必要なこと
HTML5時代のwebクリエイターに必要なことHTML5時代のwebクリエイターに必要なこと
HTML5時代のwebクリエイターに必要なことMasakazu Muraoka
 
New IP へのステップ その1) Fabric – すべての基本はファブリックにあり
New IP へのステップ その1) Fabric – すべての基本はファブリックにありNew IP へのステップ その1) Fabric – すべての基本はファブリックにあり
New IP へのステップ その1) Fabric – すべての基本はファブリックにありBrocade
 
Html5時代のクリエイターのあり方
Html5時代のクリエイターのあり方Html5時代のクリエイターのあり方
Html5時代のクリエイターのあり方Masakazu Muraoka
 
サーバーレスやマイクロサービスへの"チャレンジ"を後押ししてくれるセッションを紹介
サーバーレスやマイクロサービスへの"チャレンジ"を後押ししてくれるセッションを紹介サーバーレスやマイクロサービスへの"チャレンジ"を後押ししてくれるセッションを紹介
サーバーレスやマイクロサービスへの"チャレンジ"を後押ししてくれるセッションを紹介Yuta Matsumura
 
【17-D-1】今どきのアーキテクチャを現場の立場で斬る
【17-D-1】今どきのアーキテクチャを現場の立場で斬る【17-D-1】今どきのアーキテクチャを現場の立場で斬る
【17-D-1】今どきのアーキテクチャを現場の立場で斬るDevelopers Summit
 
ハイブリットクラウド環境におけるモダンアプリケーション開発
ハイブリットクラウド環境におけるモダンアプリケーション開発ハイブリットクラウド環境におけるモダンアプリケーション開発
ハイブリットクラウド環境におけるモダンアプリケーション開発政雄 金森
 
第3回企業Webシステム開発セミナー「業務システムにHTML5を上手に取り入れるためには?」
第3回企業Webシステム開発セミナー「業務システムにHTML5を上手に取り入れるためには?」第3回企業Webシステム開発セミナー「業務システムにHTML5を上手に取り入れるためには?」
第3回企業Webシステム開発セミナー「業務システムにHTML5を上手に取り入れるためには?」Osamu Shimoda
 
なぜ「マイクロサービス“化”」が必要なのか
なぜ「マイクロサービス“化”」が必要なのかなぜ「マイクロサービス“化”」が必要なのか
なぜ「マイクロサービス“化”」が必要なのかYusuke Suzuki
 
クラウド座談会資料
クラウド座談会資料クラウド座談会資料
クラウド座談会資料知礼 八子
 
【17-E-4】GitHub Enterpriseユーザ企業登壇!企業文化にイノベーションを起こすモダンなソフトウェア開発環境とは?
【17-E-4】GitHub Enterpriseユーザ企業登壇!企業文化にイノベーションを起こすモダンなソフトウェア開発環境とは?【17-E-4】GitHub Enterpriseユーザ企業登壇!企業文化にイノベーションを起こすモダンなソフトウェア開発環境とは?
【17-E-4】GitHub Enterpriseユーザ企業登壇!企業文化にイノベーションを起こすモダンなソフトウェア開発環境とは?Developers Summit
 
Database as code in Devops - DBを10分間で1000個構築するDB仮想化テクノロジーとは?(Ishikawa)
Database as code in Devops - DBを10分間で1000個構築するDB仮想化テクノロジーとは?(Ishikawa)Database as code in Devops - DBを10分間で1000個構築するDB仮想化テクノロジーとは?(Ishikawa)
Database as code in Devops - DBを10分間で1000個構築するDB仮想化テクノロジーとは?(Ishikawa)Insight Technology, Inc.
 
AWSオンリーで実現するIoTクラウド基盤
AWSオンリーで実現するIoTクラウド基盤AWSオンリーで実現するIoTクラウド基盤
AWSオンリーで実現するIoTクラウド基盤Godai Nakamura
 
AWSマネージドサービスをフル活用したヘルスケアIoTプラットフォーム
AWSマネージドサービスをフル活用したヘルスケアIoTプラットフォームAWSマネージドサービスをフル活用したヘルスケアIoTプラットフォーム
AWSマネージドサービスをフル活用したヘルスケアIoTプラットフォームHiroki Takeda
 
【kintone hive 上海】ウィングアーク上海講演資料_160918
【kintone hive 上海】ウィングアーク上海講演資料_160918【kintone hive 上海】ウィングアーク上海講演資料_160918
【kintone hive 上海】ウィングアーク上海講演資料_160918Cybozucommunity
 

Similar to Builderscon Tokyo 2017 (20)

Vtecxlt20151201
Vtecxlt20151201Vtecxlt20151201
Vtecxlt20151201
 
Lt20190129
Lt20190129Lt20190129
Lt20190129
 
HTML5時代のwebクリエイターに必要なこと
HTML5時代のwebクリエイターに必要なことHTML5時代のwebクリエイターに必要なこと
HTML5時代のwebクリエイターに必要なこと
 
New IP へのステップ その1) Fabric – すべての基本はファブリックにあり
New IP へのステップ その1) Fabric – すべての基本はファブリックにありNew IP へのステップ その1) Fabric – すべての基本はファブリックにあり
New IP へのステップ その1) Fabric – すべての基本はファブリックにあり
 
React vtecx20171025
React vtecx20171025React vtecx20171025
React vtecx20171025
 
Html5時代のクリエイターのあり方
Html5時代のクリエイターのあり方Html5時代のクリエイターのあり方
Html5時代のクリエイターのあり方
 
サーバーレスやマイクロサービスへの"チャレンジ"を後押ししてくれるセッションを紹介
サーバーレスやマイクロサービスへの"チャレンジ"を後押ししてくれるセッションを紹介サーバーレスやマイクロサービスへの"チャレンジ"を後押ししてくれるセッションを紹介
サーバーレスやマイクロサービスへの"チャレンジ"を後押ししてくれるセッションを紹介
 
React vtecx20171129
React vtecx20171129React vtecx20171129
React vtecx20171129
 
React vtecx20170920
React vtecx20170920React vtecx20170920
React vtecx20170920
 
【17-D-1】今どきのアーキテクチャを現場の立場で斬る
【17-D-1】今どきのアーキテクチャを現場の立場で斬る【17-D-1】今どきのアーキテクチャを現場の立場で斬る
【17-D-1】今どきのアーキテクチャを現場の立場で斬る
 
ハイブリットクラウド環境におけるモダンアプリケーション開発
ハイブリットクラウド環境におけるモダンアプリケーション開発ハイブリットクラウド環境におけるモダンアプリケーション開発
ハイブリットクラウド環境におけるモダンアプリケーション開発
 
第3回企業Webシステム開発セミナー「業務システムにHTML5を上手に取り入れるためには?」
第3回企業Webシステム開発セミナー「業務システムにHTML5を上手に取り入れるためには?」第3回企業Webシステム開発セミナー「業務システムにHTML5を上手に取り入れるためには?」
第3回企業Webシステム開発セミナー「業務システムにHTML5を上手に取り入れるためには?」
 
なぜ「マイクロサービス“化”」が必要なのか
なぜ「マイクロサービス“化”」が必要なのかなぜ「マイクロサービス“化”」が必要なのか
なぜ「マイクロサービス“化”」が必要なのか
 
クラウド座談会資料
クラウド座談会資料クラウド座談会資料
クラウド座談会資料
 
【17-E-4】GitHub Enterpriseユーザ企業登壇!企業文化にイノベーションを起こすモダンなソフトウェア開発環境とは?
【17-E-4】GitHub Enterpriseユーザ企業登壇!企業文化にイノベーションを起こすモダンなソフトウェア開発環境とは?【17-E-4】GitHub Enterpriseユーザ企業登壇!企業文化にイノベーションを起こすモダンなソフトウェア開発環境とは?
【17-E-4】GitHub Enterpriseユーザ企業登壇!企業文化にイノベーションを起こすモダンなソフトウェア開発環境とは?
 
Database as code in Devops - DBを10分間で1000個構築するDB仮想化テクノロジーとは?(Ishikawa)
Database as code in Devops - DBを10分間で1000個構築するDB仮想化テクノロジーとは?(Ishikawa)Database as code in Devops - DBを10分間で1000個構築するDB仮想化テクノロジーとは?(Ishikawa)
Database as code in Devops - DBを10分間で1000個構築するDB仮想化テクノロジーとは?(Ishikawa)
 
AWSオンリーで実現するIoTクラウド基盤
AWSオンリーで実現するIoTクラウド基盤AWSオンリーで実現するIoTクラウド基盤
AWSオンリーで実現するIoTクラウド基盤
 
AWSマネージドサービスをフル活用したヘルスケアIoTプラットフォーム
AWSマネージドサービスをフル活用したヘルスケアIoTプラットフォームAWSマネージドサービスをフル活用したヘルスケアIoTプラットフォーム
AWSマネージドサービスをフル活用したヘルスケアIoTプラットフォーム
 
Contiv
ContivContiv
Contiv
 
【kintone hive 上海】ウィングアーク上海講演資料_160918
【kintone hive 上海】ウィングアーク上海講演資料_160918【kintone hive 上海】ウィングアーク上海講演資料_160918
【kintone hive 上海】ウィングアーク上海講演資料_160918
 

More from Shinichiro Takezaki (9)

Vtecx solution
Vtecx solutionVtecx solution
Vtecx solution
 
11 29プレゼン資料
11 29プレゼン資料11 29プレゼン資料
11 29プレゼン資料
 
20171025 date picker説明資料
20171025 date picker説明資料20171025 date picker説明資料
20171025 date picker説明資料
 
Web study20171007
Web study20171007Web study20171007
Web study20171007
 
React vtecx20170822
React vtecx20170822React vtecx20170822
React vtecx20170822
 
Vtecx20151216 2
Vtecx20151216 2Vtecx20151216 2
Vtecx20151216 2
 
Angularreflex20141210
Angularreflex20141210Angularreflex20141210
Angularreflex20141210
 
No nosql20130424
No nosql20130424No nosql20130424
No nosql20130424
 
Groovyコンファレンス
GroovyコンファレンスGroovyコンファレンス
Groovyコンファレンス
 

Builderscon Tokyo 2017

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