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

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

2. @kou
自己紹介
Front-End Engineer

3. 本日お話すること

4. bitbankのフロントエンド技術と
取り組んでいる開発について

5. bitbank.cc

6. ● bitbank運営の仮想通貨取引所
● ユーザー数20-30万人
● 仮想通貨取引高世界ランキング 30位
● BTC,LTC,ETH,XRP,BCH,MONAを取り扱い
● 全ての仮想通貨にて板取引が可能
● BtoBホワイトラベル提供
● SPAのWebサービスとして展開
● 手数料無料キャンペーン中 !!
bitbank.cc とは

7. 使用しているフロントエンド技術について

8. ● AWS S3 & CloudFront
● Angular / TypeScript
● RxJS
● PubNub
● Socket.io
フロントエンド使用技術

9. AWS S3 & CloudFront

10. AWS S3 / CloudFront なぜ使用しているか
● ソースファイルは全てS3/CloudFrontから配信

11. AWS S3 / CloudFront なぜ使用しているか
● ソースファイルは全てS3/CloudFrontから配信
○ サーバーのレンダリング処理スキップ

12. AWS S3 / CloudFront なぜ使用しているか
● ソースファイルは全てS3/CloudFrontから配信
○ サーバーのレンダリング処理スキップ
○ エッジーサーバーとキャッシュコントロールでダウンロード時間の削減

13. AWS S3 / CloudFront なぜ使用しているか
● ソースファイルは全てS3/CloudFrontから配信
○ サーバーのレンダリング処理スキップ
○ エッジーサーバーとキャッシュコントロールでダウンロード時間の削減
○ ユーザーに出来るだけ速くファイルを届ける

14. AWS S3 / CloudFront なぜ使用しているか
● ソースファイルは全てS3/CloudFrontから配信
○ サーバーのレンダリング処理スキップ
○ エッジーサーバーとキャッシュコントロールでダウンロード時間の削減
○ ユーザーに出来るだけ速くファイルを届ける
● Lambda@Edgeの効果的な活用

15. AWS S3 / CloudFront なぜ使用しているか
● ソースファイルは全てS3/CloudFrontから配信
○ サーバーのレンダリング処理スキップ
○ エッジーサーバーとキャッシュコントロールでダウンロード時間の削減
○ ユーザーに出来るだけ速くファイルを届ける
● Lambda@Edgeの効果的な活用
○ サーバー処理が必要な場合はLambdaを使用し、Serverlessを目指す

16. Angular / TypeScript

17. Angular / TypeScript なぜ使用しているか
● 100% TypeScript

18. Angular / TypeScript なぜ使用しているか
● 100% TypeScript
○ ドキュメントである型定義
○ null安全
○ コンパイルチェックによる作業の効率化

19. Angular / TypeScript なぜ使用しているか
● 100% TypeScript
○ ドキュメントである型定義
○ null安全
○ コンパイルチェックによる作業の効率化
● 100% Angular

20. Angular / TypeScript なぜ使用しているか
● 100% TypeScript
○ ドキュメントである型定義
○ null安全
○ コンパイルチェックによる作業の効率化
● 100% Angular
○ UI実装とロジック実装の分業化
○ 拡大するアプリケーション開発に耐えうる基盤の強さ

21. RxJS / PubNub / Socket.io

22. RxJS / PubNub / Socket.io 使い分け
● bitbankでは主に4つのAPIを使用している
○ 公開データ (ティッカー板情報など)
○ 取引所API (ログイン、資産など)
○ 公開データのリアルタイム配信
○ ユーザー情報のリアルタイム配信

23. RxJS / PubNub / Socket.io 使い分け
● bitbankでは主に4つのAPIを使用している
○ 公開データ (ティッカー板情報など)
○ 取引所API (ログイン、資産など)
○ 公開データのリアルタイム配信
○ ユーザー情報のリアルタイム配信
S3 / CloudFront

24. RxJS / PubNub / Socket.io 使い分け
● bitbankでは主に4つのAPIを使用している
○ 公開データ (ティッカー板情報など)
○ 取引所API (ログイン、資産など)
○ 公開データのリアルタイム配信
○ ユーザー情報のリアルタイム配信
S3 / CloudFront
REST API (Node.js)

25. RxJS / PubNub / Socket.io 使い分け
● bitbankでは主に4つのAPIを使用している
○ 公開データ (ティッカー板情報など)
○ 取引所API (ログイン、資産など)
○ 公開データのリアルタイム配信
○ ユーザー情報のリアルタイム配信
S3 / CloudFront
REST API (Node.js)
Socket.io

26. RxJS / PubNub / Socket.io 使い分け
● bitbankでは主に4つのAPIを使用している
○ 公開データ (ティッカー板情報など)
○ 取引所API (ログイン、資産など)
○ 公開データのリアルタイム配信
○ ユーザー情報のリアルタイム配信
S3 / CloudFront
REST API (Node.js)
Socket.io
PubNub

27. RxJS / PubNub / Socket.io 使い分け
● bitbankでは主に4つのAPIを使用している
○ 公開データ (ティッカー板情報など)
○ 取引所API (ログイン、資産など)
○ 公開データのリアルタイム配信
○ ユーザー情報のリアルタイム配信
S3 / CloudFront
REST API (Node.js)
Socket.io
PubNub
● 複雑な非同期処理をRxJSで統括
○ 上記4種類含め、全ての非同期処理の時系列コントロールをRxJSで統括

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

29. フロントエンド開発 開発全体像
● 開発チームは現在7人
● コミュニケーションはSlackを活用
● UI、ロジックの実装を分業し、それぞれが得意な領域を担当
● 開発フローはGitHubでのプルリクエストベース
● ロジックはエンジニアが、UIはデザイナーがレビュー
● ビジネス層/エンジニア間で直接コミュニケーションを取り、開発スピード
を重視

30. フロントエンド開発 開発全体像
● 開発チームは現在7人
● コミュニケーションはSlackを活用
● UI、ロジックの実装を分業し、それぞれが得意な領域を担当
● 開発フローはGitHubでのプルリクエストベース
● ロジックはエンジニアが、UIはデザイナーがレビュー
● ビジネス層/エンジニア間で直接コミュニケーションを取り、開発スピード
を重視

31. フロントエンド開発 開発全体像
● 開発チームは現在7人
● コミュニケーションはSlackを活用
● UI、ロジックの実装を分業し、それぞれが得意な領域を担当
● 開発フローはGitHubでのプルリクエストベース
● ロジックはエンジニアが、UIはデザイナーがレビュー
● ビジネス層/エンジニア間で直接コミュニケーションを取り、開発スピード
を重視

32. フロントエンド開発 開発全体像
● 開発チームは現在7人
● コミュニケーションはSlackを活用
● UI、ロジックの実装を分業し、それぞれが得意な領域を担当
● 開発フローはGitHubでのプルリクエストベース
● ロジックはエンジニアが、UIはデザイナーがレビュー
● ビジネス層/エンジニア間で直接コミュニケーションを取り、開発スピード
を重視

33. フロントエンド開発 課題点
● アプリケーションの仕様が複雑な為、全体の仕様理解のキャッチアップコス
トが高い
● Angular自体がまだ新しい技術の為、開発チーム内での知見の格差が大きい
● エンジニア全体でSPAテストのナレッジが低く、テストのカバレッジが取れ
ていない

34. フロントエンド開発 チームでの取り組み
● エンジニア全員が技術的な認識を合わせられるよう、週次の勉強会を開催
○ 仕事の一環として、勉強する機会を楽しむ
○ 持ち回り制で回答者役を担当し、教える楽しみを共有する
● 技術的な質問は、些細なことでもすぐに誰かに聞ける文化を持つ
○ 直接のコミュニケーション、slackでのチャットコミュニケーションど
ちらも活用
○ フロントエンド余談としての雑談をするslackチャンネルを活用

35. 総括

36. 総括
● bitbankのフロントエンド技術について
● bitbankのフロントエンド開発について

37. 総括
● bitbankのフロントエンド技術について
○ 成長するフロントエンド技術を見極め、積極的に使用する
○ 素晴らしいユーザーの体験は、素晴らしい実装から
● bitbankのフロントエンド開発について

38. 総括
● bitbankのフロントエンド技術について
○ 成長するフロントエンド技術を見極め、積極的に使用する
○ 素晴らしいユーザーの体験は、素晴らしい実装から
● bitbankのフロントエンド開発について

39. 総括
● bitbankのフロントエンド技術について
○ 成長するフロントエンド技術を見極め、積極的に使用する
○ 素晴らしいユーザーの体験は、素晴らしい実装から
● bitbankのフロントエンド開発について
○ チーム全体で成長する技術に負けない開発力を養う
○ 適切な担当を設けて、得意なことベースの主体的な開発を行う

40. 最後に…

41. エンジニア、募集してます!!

42. ありがとうございました