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.

bitbankフロントエンド開発について

1,375 views

Published on

bitbankのフロントエンド技術、開発チームについてのスライドです。

Published in: Technology
  • Be the first to comment

bitbankフロントエンド開発について

  1. 1. bitbankフロントエンド開発について
  2. 2. @kou 自己紹介 Front-End Engineer
  3. 3. 本日お話すること
  4. 4. bitbankのフロントエンド技術と 取り組んでいる開発について
  5. 5. bitbank.cc
  6. 6. ● bitbank運営の仮想通貨取引所 ● ユーザー数20-30万人 ● 仮想通貨取引高世界ランキング 30位 ● BTC,LTC,ETH,XRP,BCH,MONAを取り扱い ● 全ての仮想通貨にて板取引が可能 ● BtoBホワイトラベル提供 ● SPAのWebサービスとして展開 ● 手数料無料キャンペーン中 !! bitbank.cc とは
  7. 7. 使用しているフロントエンド技術について
  8. 8. ● AWS S3 & CloudFront ● Angular / TypeScript ● RxJS ● PubNub ● Socket.io フロントエンド使用技術
  9. 9. AWS S3 & CloudFront
  10. 10. AWS S3 / CloudFront なぜ使用しているか ● ソースファイルは全てS3/CloudFrontから配信
  11. 11. AWS S3 / CloudFront なぜ使用しているか ● ソースファイルは全てS3/CloudFrontから配信 ○ サーバーのレンダリング処理スキップ
  12. 12. AWS S3 / CloudFront なぜ使用しているか ● ソースファイルは全てS3/CloudFrontから配信 ○ サーバーのレンダリング処理スキップ ○ エッジーサーバーとキャッシュコントロールでダウンロード時間の削減
  13. 13. AWS S3 / CloudFront なぜ使用しているか ● ソースファイルは全てS3/CloudFrontから配信 ○ サーバーのレンダリング処理スキップ ○ エッジーサーバーとキャッシュコントロールでダウンロード時間の削減 ○ ユーザーに出来るだけ速くファイルを届ける
  14. 14. AWS S3 / CloudFront なぜ使用しているか ● ソースファイルは全てS3/CloudFrontから配信 ○ サーバーのレンダリング処理スキップ ○ エッジーサーバーとキャッシュコントロールでダウンロード時間の削減 ○ ユーザーに出来るだけ速くファイルを届ける ● Lambda@Edgeの効果的な活用
  15. 15. AWS S3 / CloudFront なぜ使用しているか ● ソースファイルは全てS3/CloudFrontから配信 ○ サーバーのレンダリング処理スキップ ○ エッジーサーバーとキャッシュコントロールでダウンロード時間の削減 ○ ユーザーに出来るだけ速くファイルを届ける ● Lambda@Edgeの効果的な活用 ○ サーバー処理が必要な場合はLambdaを使用し、Serverlessを目指す
  16. 16. Angular / TypeScript
  17. 17. Angular / TypeScript なぜ使用しているか ● 100% TypeScript
  18. 18. Angular / TypeScript なぜ使用しているか ● 100% TypeScript ○ ドキュメントである型定義 ○ null安全 ○ コンパイルチェックによる作業の効率化
  19. 19. Angular / TypeScript なぜ使用しているか ● 100% TypeScript ○ ドキュメントである型定義 ○ null安全 ○ コンパイルチェックによる作業の効率化 ● 100% Angular
  20. 20. Angular / TypeScript なぜ使用しているか ● 100% TypeScript ○ ドキュメントである型定義 ○ null安全 ○ コンパイルチェックによる作業の効率化 ● 100% Angular ○ UI実装とロジック実装の分業化 ○ 拡大するアプリケーション開発に耐えうる基盤の強さ
  21. 21. RxJS / PubNub / Socket.io
  22. 22. RxJS / PubNub / Socket.io 使い分け ● bitbankでは主に4つのAPIを使用している ○ 公開データ (ティッカー板情報など) ○ 取引所API (ログイン、資産など) ○ 公開データのリアルタイム配信 ○ ユーザー情報のリアルタイム配信
  23. 23. RxJS / PubNub / Socket.io 使い分け ● bitbankでは主に4つのAPIを使用している ○ 公開データ (ティッカー板情報など) ○ 取引所API (ログイン、資産など) ○ 公開データのリアルタイム配信 ○ ユーザー情報のリアルタイム配信 S3 / CloudFront
  24. 24. RxJS / PubNub / Socket.io 使い分け ● bitbankでは主に4つのAPIを使用している ○ 公開データ (ティッカー板情報など) ○ 取引所API (ログイン、資産など) ○ 公開データのリアルタイム配信 ○ ユーザー情報のリアルタイム配信 S3 / CloudFront REST API (Node.js)
  25. 25. RxJS / PubNub / Socket.io 使い分け ● bitbankでは主に4つのAPIを使用している ○ 公開データ (ティッカー板情報など) ○ 取引所API (ログイン、資産など) ○ 公開データのリアルタイム配信 ○ ユーザー情報のリアルタイム配信 S3 / CloudFront REST API (Node.js) Socket.io
  26. 26. RxJS / PubNub / Socket.io 使い分け ● bitbankでは主に4つのAPIを使用している ○ 公開データ (ティッカー板情報など) ○ 取引所API (ログイン、資産など) ○ 公開データのリアルタイム配信 ○ ユーザー情報のリアルタイム配信 S3 / CloudFront REST API (Node.js) Socket.io PubNub
  27. 27. RxJS / PubNub / Socket.io 使い分け ● bitbankでは主に4つのAPIを使用している ○ 公開データ (ティッカー板情報など) ○ 取引所API (ログイン、資産など) ○ 公開データのリアルタイム配信 ○ ユーザー情報のリアルタイム配信 S3 / CloudFront REST API (Node.js) Socket.io PubNub ● 複雑な非同期処理をRxJSで統括 ○ 上記4種類含め、全ての非同期処理の時系列コントロールをRxJSで統括
  28. 28. フロントエンド開発について
  29. 29. フロントエンド開発 開発全体像 ● 開発チームは現在7人 ● コミュニケーションはSlackを活用 ● UI、ロジックの実装を分業し、それぞれが得意な領域を担当 ● 開発フローはGitHubでのプルリクエストベース ● ロジックはエンジニアが、UIはデザイナーがレビュー ● ビジネス層/エンジニア間で直接コミュニケーションを取り、開発スピード を重視
  30. 30. フロントエンド開発 開発全体像 ● 開発チームは現在7人 ● コミュニケーションはSlackを活用 ● UI、ロジックの実装を分業し、それぞれが得意な領域を担当 ● 開発フローはGitHubでのプルリクエストベース ● ロジックはエンジニアが、UIはデザイナーがレビュー ● ビジネス層/エンジニア間で直接コミュニケーションを取り、開発スピード を重視
  31. 31. フロントエンド開発 開発全体像 ● 開発チームは現在7人 ● コミュニケーションはSlackを活用 ● UI、ロジックの実装を分業し、それぞれが得意な領域を担当 ● 開発フローはGitHubでのプルリクエストベース ● ロジックはエンジニアが、UIはデザイナーがレビュー ● ビジネス層/エンジニア間で直接コミュニケーションを取り、開発スピード を重視
  32. 32. フロントエンド開発 開発全体像 ● 開発チームは現在7人 ● コミュニケーションはSlackを活用 ● UI、ロジックの実装を分業し、それぞれが得意な領域を担当 ● 開発フローはGitHubでのプルリクエストベース ● ロジックはエンジニアが、UIはデザイナーがレビュー ● ビジネス層/エンジニア間で直接コミュニケーションを取り、開発スピード を重視
  33. 33. フロントエンド開発 課題点 ● アプリケーションの仕様が複雑な為、全体の仕様理解のキャッチアップコス トが高い ● Angular自体がまだ新しい技術の為、開発チーム内での知見の格差が大きい ● エンジニア全体でSPAテストのナレッジが低く、テストのカバレッジが取れ ていない
  34. 34. フロントエンド開発 チームでの取り組み ● エンジニア全員が技術的な認識を合わせられるよう、週次の勉強会を開催 ○ 仕事の一環として、勉強する機会を楽しむ ○ 持ち回り制で回答者役を担当し、教える楽しみを共有する ● 技術的な質問は、些細なことでもすぐに誰かに聞ける文化を持つ ○ 直接のコミュニケーション、slackでのチャットコミュニケーションど ちらも活用 ○ フロントエンド余談としての雑談をするslackチャンネルを活用
  35. 35. 総括
  36. 36. 総括 ● bitbankのフロントエンド技術について ● bitbankのフロントエンド開発について
  37. 37. 総括 ● bitbankのフロントエンド技術について ○ 成長するフロントエンド技術を見極め、積極的に使用する ○ 素晴らしいユーザーの体験は、素晴らしい実装から ● bitbankのフロントエンド開発について
  38. 38. 総括 ● bitbankのフロントエンド技術について ○ 成長するフロントエンド技術を見極め、積極的に使用する ○ 素晴らしいユーザーの体験は、素晴らしい実装から ● bitbankのフロントエンド開発について
  39. 39. 総括 ● bitbankのフロントエンド技術について ○ 成長するフロントエンド技術を見極め、積極的に使用する ○ 素晴らしいユーザーの体験は、素晴らしい実装から ● bitbankのフロントエンド開発について ○ チーム全体で成長する技術に負けない開発力を養う ○ 適切な担当を設けて、得意なことベースの主体的な開発を行う
  40. 40. 最後に…
  41. 41. エンジニア、募集してます!!
  42. 42. ありがとうございました

×