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.

Vtecx20151216

431 views

Published on

フロントエンドエンジニアの価値を高めるBaaS(vte.cx) セミナー資料#1

Published in: Internet
  • Login to see the comments

  • Be the first to like this

Vtecx20151216

  1. 1. Copyright © Virtual Technology, Inc フロントエンドエンジニアの価値を⾼める BaaS(vte.cx) 〜フロントエンドだけで作るこれからのWebシステム開発 〜 2015/12/16 有限会社バーチャルテクノロジー 1
  2. 2. Copyright © Virtual Technology, Inc •  ⽵嵜 伸⼀郎 (たけざき しんいちろう) – vte.cx概要 (約20分) •  ⽵⼭ 恵悟(たけやま けいご) – Hands OnとDEMO (約40分) •  (有)バーチャルテクノロジー – 分散KVSのミドルウェア(ReflexWorks)開発 2
  3. 3. Copyright © Virtual Technology, Inc BaaSを作った3つの理由 1. BaaSの現状 2. ReflexWorks 3. SPA 3
  4. 4. Copyright © Virtual Technology, Inc BaaS は今、幻滅期 • すべてが中途半端 • 何でもかんでもAPIにした結果、  ベンダーロックイン • 機能改善がなかなか進まず負の遺産を抱 え込んだ状態に • USではもはや胡散臭いものと思われてい るらしい 4
  5. 5. Copyright © Virtual Technology, Inc5 ⼤規模 Web帳票システム by ReflexWorks  APIのスループット 7万ユーザ/日 40万伝票/日   600tps !   ※ DBはその10倍以上
  6. 6. Copyright © Virtual Technology, Inc SPA(Single Page Application)とは •  優れたUXを提供することを⽬的とする  1つのWebページで提供されるアプリケーション –  クライアントはXHR等でサーバにリクエストし、結果 をJSONなどのデータで受取る –  ページの再読込せずにJavaScriptで動的に更新する 6
  7. 7. Copyright © Virtual Technology, Inc なぜSPA? •  サーバーでHTMLを⽣成するよりも、 クライアントで動的に画⾯を更新する⽅が効率的 •  ユーザーの操作に応じてインタラクティブに動く リッチクライアントを実現できる 7 これってネイティブアプリ? お客様 いいえ、Webアプリです。 開発者 SPA
  8. 8. Copyright © Virtual Technology, Inc8 増えたフロントの責務と残る課題 h5p://www.slideshare.net/fullscreen/sagawafumio/ss-38480894/6 ここをどうするか?
  9. 9. Copyright © Virtual Technology, Inc 極めて⾃由度の⾼いBaaSの要求 • サーバサイドのAPIもフロントエンジニア が⾃由に作れるBaaSを作れないか? • HTML、CSS、JavaScriptなどのフロント エンドコーディングだけでWebシステム を作れるようにならないか? • 中途半端ではなくちゃんとしたWebアプ リを作れないか? 9
  10. 10. Copyright © Virtual Technology, Inc vte.cx (ブイテックス) engine KVS Web スマホ   •  Web(スマホ)システム向けBaaS(Backend as a Service) –  CMS(Content Management System)機能 –  トランザクションサポート –  ユーザ・グループ管理 –  サーバサイドJavaScript –  EXCEL⼊出⼒機能 –  PDF帳票出⼒機能 オンライントランザクション処理 データ分析 ※ 2016年春リリース予定
  11. 11. Copyright © Virtual Technology, Inc vte.cxのトランザクション管理 •  Feed(Collection)単位のAtomicトランザクション –  分離レベル:REPEATABLE READ •  かつ、Entry単位のバージョン⽐較 –  分離レベル:SNAPSHOT ISOLATION –  全てのEntryはURLとリビジョンで管理される –  リビジョン=更新されると+1される 11 https://www.facebook.com/notes/virtual-technology/ bdbトランザクションとreflexworksの処理について/486790368009209 データの⼀貫性を確保しつつ⾼いスループットを実現 詳細:
  12. 12. Copyright © Virtual Technology, Inc12 •  リソースURLを⾃由に設定・追加 •  リソースを様々なフォーマットに変換 直感的なREST API
  13. 13. Copyright © Virtual Technology, Inc13
  14. 14. Copyright © Virtual Technology, Inc14
  15. 15. Copyright © Virtual Technology, Inc15
  16. 16. Copyright © Virtual Technology, Inc16
  17. 17. Copyright © Virtual Technology, Inc その他 • ユーザ管理・グループ管理 • CMS機能 17 h5p://reflexworks.jp/documentaOon.html
  18. 18. Copyright © Virtual Technology, Inc サーバサイドJavaScript • GET /s/booking などで起動 • /booking.js の doGet() が呼ばれる (CoC) • POST、PUT、DELETEも同様 • JSの関数内部で ReflexContext.xxx(url) を実 ⾏することで実際にDBを読み書きする 18
  19. 19. Copyright © Virtual Technology, Inc 開発のイメージ • 管理画⾯でサービスを新規作成 • vtecxblankをclone • コンテンツをGitHubにpushすることで サーバにデプロイ –  もしくは、gulpコマンド⼀発 • データをREST APIで操作 ただ、これだけ。 これですべてのWebシステムを開発できる 19
  20. 20. Copyright © Virtual Technology, Inc 管理画⾯ • http://admin.1.vte.cx 20
  21. 21. Copyright © Virtual Technology, Inc Vtecxblankをclone •  https://github.com/reflexworks/vtecxblank 21
  22. 22. Copyright © Virtual Technology, Inc CircleCI 22 GitHubにPushすることで⾃動的にサーバにデプロイ ※ 設定方法はQiita の13日目に記載
  23. 23. Copyright © Virtual Technology, Inc DEMO & Handson 23
  24. 24. Copyright © Virtual Technology, Inc vte.cxで期待できること • Webアプリを超短期間で開発可能 • プロトタイピングでスモールスタート –  初期投資をかけずに短期間で効果を検証 –  とりあえず作ってみて判断 24
  25. 25. Copyright © Virtual Technology, Inc ビジネスの話 • Webアプリの受託開発でvte.cxを活⽤ • オンプレミスvte.cx(ReflexWorks)の販売 • 将来的にBaaS vte.cxの有償版 25
  26. 26. Copyright © Virtual Technology, Inc26 Qiita 毎⽇更新中です h5p://qiita.com/advent-calendar/2015/vtecx?share=true
  27. 27. Copyright © Virtual Technology, Inc27 ご清聴ありがとう ございました Blogも書いています ぶいてく

×