Home
Explore
Submit Search
Upload
Login
Signup
Advertisement
Check these out next
継続的インテグレーションとテストの話
Preferred Networks
「関心の分離」と「疎結合」 ソフトウェアアーキテクチャのひとかけら
Atsushi Nakamura
Jenkinsではじめる継続的インテグレーション
Masanori Satoh
Mavenの真実とウソ
Yoshitaka Kawashima
RDB技術者のためのNoSQLガイド NoSQLの必要性と位置づけ
Recruit Technologies
SQL大量発行処理をいかにして高速化するか
Shogo Wakayama
ドメイン駆動設計のためのオブジェクト指向入門
増田 亨
ドメイン駆動設計の正しい歩き方
増田 亨
1
of
33
Top clipped slide
中規模Angularアプリケーションの再設計
Aug. 1, 2019
•
0 likes
8 likes
×
Be the first to like this
Show More
•
6,750 views
views
×
Total views
0
On Slideshare
0
From embeds
0
Number of embeds
0
Download Now
Download to read offline
Report
Engineering
bitbankの中規模Angularアプリケーションを再設計し、パフォーマンスの改善やメンテナンス性の向上を試みている話について発表します。
bitbank, Inc. Tokyo, Japan
Follow
bitbank, Inc. Tokyo, Japan
Advertisement
Advertisement
Advertisement
Recommended
ドメイン駆動設計入門
Takuya Kitamura
44K views
•
22 slides
境界付けられたコンテキスト 概念編 (ドメイン駆動設計用語解説シリーズ)
Koichiro Matsuoka
2.1K views
•
20 slides
Java ORマッパー選定のポイント #jsug
Masatoshi Tada
86.5K views
•
66 slides
シリコンバレーの「何が」凄いのか
Atsushi Nakada
182.9K views
•
77 slides
Node.jsアプリの開発をモダン化するために取り組んできたこと
bitbank, Inc. Tokyo, Japan
15.3K views
•
60 slides
ドメイン駆動設計 基本を理解する
増田 亨
117K views
•
134 slides
More Related Content
Slideshows for you
(20)
継続的インテグレーションとテストの話
Preferred Networks
•
9.9K views
「関心の分離」と「疎結合」 ソフトウェアアーキテクチャのひとかけら
Atsushi Nakamura
•
7.9K views
Jenkinsではじめる継続的インテグレーション
Masanori Satoh
•
43.3K views
Mavenの真実とウソ
Yoshitaka Kawashima
•
12.6K views
RDB技術者のためのNoSQLガイド NoSQLの必要性と位置づけ
Recruit Technologies
•
59.6K views
SQL大量発行処理をいかにして高速化するか
Shogo Wakayama
•
56.6K views
ドメイン駆動設計のためのオブジェクト指向入門
増田 亨
•
47.7K views
ドメイン駆動設計の正しい歩き方
増田 亨
•
25.1K views
ドメイン駆動設計 思えば遠くにきたもんだ
増田 亨
•
5.9K views
AWS Black Belt Online Seminar 2016 Amazon EC2 Container Service
Amazon Web Services Japan
•
53.3K views
マイクロサービス 4つの分割アプローチ
増田 亨
•
40.4K views
ドメイン駆動設計とマイクロサービス
kouki_mitsuishi
•
2.6K views
なぜソフトウェアアーキテクトが必要なのか - デブサミ2011
Yusuke Suzuki
•
6K views
AWSのログ管理ベストプラクティス
Akihiro Kuwano
•
75.3K views
ドメイン駆動設計の学習曲線とブレークポイント
増田 亨
•
8.2K views
世界でいちばんわかりやすいドメイン駆動設計
増田 亨
•
14.2K views
Redisの特徴と活用方法について
Yuji Otani
•
98.7K views
Ormとの付き合い方
豊明 尾古
•
5.5K views
JIRA / Confluence の必須プラグインはこれだ
Narichika Kajihara
•
57.5K views
Spring Boot の Web アプリケーションを Docker に載せて AWS ECS で動かしている話
JustSystems Corporation
•
15.7K views
Similar to 中規模Angularアプリケーションの再設計
(20)
【Ltech#8】技術的負債返済・実装改善に関する事例紹介
LIFULL Co., Ltd.
•
1.4K views
20180718 small project
Serverworks Co.,Ltd.
•
350 views
製造業のプロジェクトマネジメント~レイアウト変更編~
K K
•
107 views
持続的な運用開発のために社内基盤を整えている話 〜auditのCI組み込みやlintの社内PKG化〜
bitbank, Inc. Tokyo, Japan
•
1.9K views
Ms retail update ra 20191030
Microsoft Azure Japan
•
943 views
【SFO2020】業務SEを7か月でWebエンジニアに変える方法 ~アジャイルマインドを得るために~
Yukio Okajima
•
3.8K views
ビットバンクで求められるプロジェクトマネジメント
bitbank, Inc. Tokyo, Japan
•
143 views
アジャイル開発のためのDatadog
Nobuyasu Seki
•
1.7K views
エンタープライズ SaaS の初期成長戦略
Tomoe Sawai
•
1.1K views
ビットバンクのマッチングエンジン.pdf
bitbank, Inc. Tokyo, Japan
•
78 views
[Modern Cloud Day Tokyo 2019] 目指せコーディングレス!「繋げる」が実現するクラウド活用による高速アプリケーション開発の魅力
オラクルエンジニア通信
•
162 views
Google Container Engine と Kubernetes で 無理をしないコンテナ管理
Ryosuke Suto
•
13.7K views
九州シェアリングサミット2018[第2セッション]
Yuichi Morito
•
581 views
RapidMinerのご紹介(ラピッドマイナーの5つの重要ポイント)2013年12月
ossanalytics
•
21.6K views
クラウド、クラウドというけれどJavaのシステムにとってクラウドってメリットあるの?
Takakiyo Tanaka
•
1.1K views
デジタル戦略立案サービス
munjapan
•
3.7K views
08 detailed explanation! hinemosver.6.2 overview publication_20191106
Hinemos
•
1.5K views
コースA「EC事業計画」Ver.2.0
Osamu Sugiura
•
6.7K views
SMBC信託銀行のデジタル・トランスフォーメーション(デジタル顧客体験の改善)
Members_corp
•
2K views
Microsoft Build 2021 Recap Day
ryosuke matsumura
•
272 views
Advertisement
More from bitbank, Inc. Tokyo, Japan
(20)
インフラチームの歴史とこれから
bitbank, Inc. Tokyo, Japan
•
446 views
ビットバンクのデプロイ戦略について
bitbank, Inc. Tokyo, Japan
•
160 views
ビットバンク流 アジャイル開発の紹介.pdf
bitbank, Inc. Tokyo, Japan
•
89 views
ビットバンクでのネイティブアプリケーション開発におけるCI_CD環境
bitbank, Inc. Tokyo, Japan
•
86 views
Lightning Network, Swap, Nloop
bitbank, Inc. Tokyo, Japan
•
462 views
ビットバンクにおける少人数で支えるインフラチームの戦略
bitbank, Inc. Tokyo, Japan
•
275 views
bitbank Corporate Information
bitbank, Inc. Tokyo, Japan
•
1.8K views
ng build --prod & Continuous Delivery
bitbank, Inc. Tokyo, Japan
•
1.5K views
マーブル図で怖くないRxJS
bitbank, Inc. Tokyo, Japan
•
6.4K views
仮想通貨取引所 bitbank の IaC の導入と実践
bitbank, Inc. Tokyo, Japan
•
2.9K views
Introduction of bitbank frontend development environment
bitbank, Inc. Tokyo, Japan
•
950 views
DeveloperSuccess として何を届けられるか、様々な分野を経た先として何ができるか
bitbank, Inc. Tokyo, Japan
•
2.1K views
ビットコインウォレットで手軽にパスワードレス認証が可能なbitidについての紹介
bitbank, Inc. Tokyo, Japan
•
758 views
Ethereumのシャーディング概論
bitbank, Inc. Tokyo, Japan
•
4.3K views
Daocasinoにおけるstate channel実装
bitbank, Inc. Tokyo, Japan
•
333 views
TypeScriptでライトニングネットワークを使ってみよう
bitbank, Inc. Tokyo, Japan
•
493 views
Deploy TypeScript with CodePipeline in Fargate
bitbank, Inc. Tokyo, Japan
•
697 views
20181108 bitbank lt-maintainable-e2e-testing
bitbank, Inc. Tokyo, Japan
•
1.1K views
Angular Refactoring in Real World
bitbank, Inc. Tokyo, Japan
•
1.3K views
アプリケーション開発目線から考える テストの書き方について
bitbank, Inc. Tokyo, Japan
•
1.3K views
Recently uploaded
(20)
72亚历山大学院.pdf
fdhrtf
•
2 views
무료스포츠중계 〔www,rtЗЗ,top〕코드 b77 플레이보이카지노 ㋁ 황제카지노 ㉤ 나미비아 국가경기 Ⓣ afc윔블던 ㈭ 퀴라소 ㈗ 축구...
ssusere9c2b4
•
5 views
#买美国学历毕业证书代办普林斯顿大学文凭证书
JhhhfGffh
•
2 views
★可查可存档〖制作波恩大学文凭证书毕业证〗
tujjj
•
9 views
W&B Seminar #4.pdf
Akira Shibata
•
318 views
AI予約サービスのMLOps事例紹介
Takashi Suzuki
•
4 views
Jadernie tehnologii v razlicnih sferah celoveveskoj dejateljnosti.pdf
TahirSadikovi
•
0 views
☀️《Bournemouth毕业证仿真》
fggg13
•
2 views
★可查可存档〖制作奥克兰商学院文凭证书毕业证〗
tujjj
•
2 views
☀️《UMKC毕业证仿真》
DFFFFG
•
3 views
☀️《SLC毕业证仿真》
hjhgg1
•
2 views
办加拿大多伦多大学假文凭毕业证
JhhhfGffh
•
3 views
APM.pptx
SatishKotwal
•
3 views
174-田纳西大学.pdf
LorettaPrice2
•
2 views
★可查可存档〖制作巴黎第十二大大学文凭证书毕业证〗
tujjj
•
3 views
SPECIALIZED heavy racks.pdf
FernandoRivasCortes1
•
2 views
办皇家墨尔本理工大学毕业证成绩单
JhhhfGffh
•
3 views
はじめてのハッカソン.pptx
rare0b
•
7 views
EchoyaGinhanazeSu_inoka.pptx
keink
•
2 views
☀️《UMCP毕业证仿真》
DFFFFG
•
3 views
Advertisement
中規模Angularアプリケーションの再設計
中規模Angularアプリケーションの 再設計 Suguru Inatomi bitbank LT
Night #5
© bitbank inc. 2 Suguru
Inatomi @laco2net
今日のアジェンダ 3
© bitbank inc. アジェンダ
4 ● アーキテクチャ導入の話 ● パフォーマンス改善の話 ● 品質改善の話
アーキテクチャの話 5
課題なきアーキテクチャは ただのアート 6
© bitbank inc. bitbankアプリの大きな課題
7 ● 状態管理の分散 ○ Serviceごとに管理の仕方がバラバラ ● ビジネスロジックの点在 ○ コンポーネントがロジックを持っている
© bitbank inc. 願望
8 ● 状態管理の分散 ○ 状態管理を一元化したい ● ビジネスロジックの点在 ○ コンポーネントから切り出してまとめたい ○ 適切にモジュール分割したい
願望を叶えるための 構造を考える 9
© bitbank inc. 中規模Angularアーキテクチャ
v1.1 10
© bitbank inc. ベースになる原理原則
11 ● Presentation Domain Separation (PDS) ○ プレゼンテーションとドメインの分離 ● Single Responsibility Principle (SRP) ○ 単一責任の原則 ● Stable Dependencies Principle (SDP) ○ 安定依存の原則 ● Command Query Responsibility Segregation (CQRS) ○ コマンド・クエリ責務分離 ● Single source of truth (SSOT) ○ 唯一の情報源
© bitbank inc. つまりどういうこと?
12 ● Presentation Domain Separation (PDS) ○ コンポーネントからビジネスロジックを切り出す ● Single Responsibility Principle (SRP) ○ サービスの役割を明確にして境界づける ● Stable Dependencies Principle (SDP) ○ ユースケース依存のモジュールとそうでないものを境界づける ● Command Query Responsibility Segregation ○ 状態を変更する経路を限定する ● Single source of truth ○ アプリケーションの状態を一元管理する
© bitbank inc. Presentation
Domain Separation 13 Presentation系とDomain系を分離
© bitbank inc. Single
Responsibility Principle 14 役割ごとにモジュールを分類
© bitbank inc. Stable
Dependencies Principle 15 より安定しているモジュールに依存する
© bitbank inc. Command
Query Responsibility Segregation 16 WriteOnlyのUsecaseと ReadOnlyのQueryを Componentが利用する
© bitbank inc. Single
source of truth 17 アプリケーションの状態は Storeで管理する
© bitbank inc. Usecase-Store-Query
18 ● Storeの実装として @ngrx/store を採用
© bitbank inc. NgRxと学習曲線の設計
19 ● NgRxへの関心をStore層に閉じる ○ NgRxから別のライブラリに変えやすくする ○ NgRxを知らなくても開発に参加できるようにする ● 参考: システムの学習曲線とAngularアプリケーションの設計
© bitbank inc. Work
in Progress 20 ● Presentationのモジュール化はがんばりすぎない ○ 効果が薄い ● PDSができたら60点(可) ○ PDSさえ出来ていればどうとでもなる ● Webのことだけ考える(bitbankの場合) ○ locationやwindowの抽象化に固執しない ● TypeScriptとして簡潔であることを重視する ○ AngularやRxJSを使いこなそうとしない
小休止 questions$ .pipe( takeUntil( timer(3分)
) ) .subscribe() 21
パフォーマンス改善の話 22
© bitbank inc. やったこと
23 ● バンドルサイズの削減 ○ main.bundle.js: 1.96MB -> 1.29MB (gzip前) ● 一部CSSのインライン化 ○ 起動前のローディング用のCSS
© bitbank inc. バンドルサイズの削減内訳
24 ● 脱lodash ( => lodash.XXX ) ● 脱moment ( => dayjs ) ● 脱SharedModule ● Angular v8.0 (Differential Loading) ○ 参考
© bitbank inc. バンドルサイズ推移
25
© bitbank inc. 初期CSSのインライン化
26 ● ローディングアニメーション用のCSS ● CSSのロードが終わるまでローディングが出なかった ● index.htmlにハードコード ○ ほぼ変わることのない部分 ○ HTMLのサイズはそれほど問題ではない
© bitbank inc. 留意点
27 ● bitbankのアプリの特殊性 ○ ほぼ検索流入しない ○ リアルタイムデータ依存(SSRしない) ● 初期ロードパフォーマンスの重要度: 低 ● アーキテクチャを犠牲にしてまで高速化するモチベーションはない ○ あるべき形でそれ相応のパフォーマンスであればOK
品質改善の話 28
© bitbank inc. 品質とは?
29 ● バグが少ないアプリケーションを目指す ● アプリケーションの入口と出口で品質を担保する ○ 入口: デプロイ前にバグを除去する = テスト ○ 出口: デプロイ後にバグを検知する = 監視
© bitbank inc. アプリケーションの監視
30 ● エラーの発生を検知する ○ ツール: Sentry ● 検知できた例 ○ リリース後に特定のブラウザでエラーが起きていた ■ Polyfill不足 ○ `Cannot read property *** of undefined` ■ TypeScriptの型定義漏れ (Null Check)
© bitbank inc. ノイズが多い問題
31 ● どんなエラーも全部流れてくる ○ アプリケーション側でハンドルすべき例外 ○ サードパーティJSがグローバルに投げるエラー ● 監視を運用するにはノイズを除去する必要がある ○ Slack通知が多すぎる ● 取り組み ○ 例外処理の見直し ○ HTTPリクエストにリトライを導入 ○ 通知すべきエラーのフィルター設定
まとめ 32
© bitbank inc. Takeaway
33 ● アーキテクチャは割り切りとコスパが大事 ○ 例:「PDSさえできてれば合格」 ● 守破離。まずは歴史に学び、原理原則を知る ● moment.jsやlodashの利用は計画的に ● SharedModuleが許されるのは小規模アプリまで ● アプリケーションの監視は重要 ○ 実行時エラーに気づける仕組みを作る
Advertisement