Enviar pesquisa
Carregar
中規模Angularアプリケーションの再設計
•
8 gostaram
•
6,910 visualizações
bitbank, Inc. Tokyo, Japan
Seguir
bitbankの中規模Angularアプリケーションを再設計し、パフォーマンスの改善やメンテナンス性の向上を試みている話について発表します。
Leia menos
Leia mais
Engenharia
Denunciar
Compartilhar
Denunciar
Compartilhar
1 de 33
Baixar agora
Baixar para ler offline
Recomendados
世界一わかりやすいClean Architecture
世界一わかりやすいClean Architecture
Atsushi Nakamura
ドメイン駆動設計のための Spring の上手な使い方
ドメイン駆動設計のための Spring の上手な使い方
増田 亨
WebSocketのキホン
WebSocketのキホン
You_Kinjoh
がんばらなくても C# で Single Page Web アプリケーションが書けてしまう「Blazor」とは
がんばらなくても C# で Single Page Web アプリケーションが書けてしまう「Blazor」とは
Jun-ichi Sakamoto
Tackling Complexity
Tackling Complexity
Yoshitaka Kawashima
ドメイン駆動設計サンプルコードの徹底解説
ドメイン駆動設計サンプルコードの徹底解説
増田 亨
例外設計における大罪
例外設計における大罪
Takuto Wada
ドメイン駆動設計をゲーム開発に活かす
ドメイン駆動設計をゲーム開発に活かす
増田 亨
Recomendados
世界一わかりやすいClean Architecture
世界一わかりやすいClean Architecture
Atsushi Nakamura
ドメイン駆動設計のための Spring の上手な使い方
ドメイン駆動設計のための Spring の上手な使い方
増田 亨
WebSocketのキホン
WebSocketのキホン
You_Kinjoh
がんばらなくても C# で Single Page Web アプリケーションが書けてしまう「Blazor」とは
がんばらなくても C# で Single Page Web アプリケーションが書けてしまう「Blazor」とは
Jun-ichi Sakamoto
Tackling Complexity
Tackling Complexity
Yoshitaka Kawashima
ドメイン駆動設計サンプルコードの徹底解説
ドメイン駆動設計サンプルコードの徹底解説
増田 亨
例外設計における大罪
例外設計における大罪
Takuto Wada
ドメイン駆動設計をゲーム開発に活かす
ドメイン駆動設計をゲーム開発に活かす
増田 亨
DDD x CQRS 更新系と参照系で異なるORMを併用して上手くいった話
DDD x CQRS 更新系と参照系で異なるORMを併用して上手くいった話
Koichiro Matsuoka
世界でいちばんわかりやすいドメイン駆動設計
世界でいちばんわかりやすいドメイン駆動設計
増田 亨
フロー効率性とリソース効率性について #xpjug
フロー効率性とリソース効率性について #xpjug
Itsuki Kuroda
reduxのstate設計の話
reduxのstate設計の話
ayatas0623
ブルックスのいう銀の弾丸とは何か?
ブルックスのいう銀の弾丸とは何か?
Yoshitaka Kawashima
なぜソフトウェアアーキテクトが必要なのか - デブサミ2011
なぜソフトウェアアーキテクトが必要なのか - デブサミ2011
Yusuke Suzuki
Pythonによる黒魔術入門
Pythonによる黒魔術入門
大樹 小倉
それはYAGNIか? それとも思考停止か?
それはYAGNIか? それとも思考停止か?
Yoshitaka Kawashima
MagicOnion入門
MagicOnion入門
torisoup
ドメイン駆動設計 モデリング_実装入門勉強会_2020.3.8
ドメイン駆動設計 モデリング_実装入門勉強会_2020.3.8
Koichiro Matsuoka
jooqってなんて読むの? から始めるO/RマッパーとSpringBootの世界
jooqってなんて読むの? から始めるO/RマッパーとSpringBootの世界
Y Watanabe
【7章】アジャイルサムライ
【7章】アジャイルサムライ
Akio Terayama
テストコードの DRY と DAMP
テストコードの DRY と DAMP
Yusuke Kagata
CleanArchitecture 第4部 「コンポーネントの原則」
CleanArchitecture 第4部 「コンポーネントの原則」
鈴木 セシル
MagicOnion~C#でゲームサーバを開発しよう~
MagicOnion~C#でゲームサーバを開発しよう~
torisoup
コンテナ未経験新人が学ぶコンテナ技術入門
コンテナ未経験新人が学ぶコンテナ技術入門
Kohei Tokunaga
大規模レガシー環境に立ち向かう有機的な開発フォーメーション #devsumi #devsumic
大規模レガシー環境に立ち向かう有機的な開発フォーメーション #devsumi #devsumic
Itsuki Kuroda
日本語テストメソッドについて
日本語テストメソッドについて
kumake
DDDのモデリングとは何なのか、 そしてどうコードに落とすのか
DDDのモデリングとは何なのか、 そしてどうコードに落とすのか
Koichiro Matsuoka
開発速度が速い #とは(LayerX社内資料)
開発速度が速い #とは(LayerX社内資料)
mosa siru
【Ltech#8】技術的負債返済・実装改善に関する事例紹介
【Ltech#8】技術的負債返済・実装改善に関する事例紹介
LIFULL Co., Ltd.
20180718 small project
20180718 small project
Serverworks Co.,Ltd.
Mais conteúdo relacionado
Mais procurados
DDD x CQRS 更新系と参照系で異なるORMを併用して上手くいった話
DDD x CQRS 更新系と参照系で異なるORMを併用して上手くいった話
Koichiro Matsuoka
世界でいちばんわかりやすいドメイン駆動設計
世界でいちばんわかりやすいドメイン駆動設計
増田 亨
フロー効率性とリソース効率性について #xpjug
フロー効率性とリソース効率性について #xpjug
Itsuki Kuroda
reduxのstate設計の話
reduxのstate設計の話
ayatas0623
ブルックスのいう銀の弾丸とは何か?
ブルックスのいう銀の弾丸とは何か?
Yoshitaka Kawashima
なぜソフトウェアアーキテクトが必要なのか - デブサミ2011
なぜソフトウェアアーキテクトが必要なのか - デブサミ2011
Yusuke Suzuki
Pythonによる黒魔術入門
Pythonによる黒魔術入門
大樹 小倉
それはYAGNIか? それとも思考停止か?
それはYAGNIか? それとも思考停止か?
Yoshitaka Kawashima
MagicOnion入門
MagicOnion入門
torisoup
ドメイン駆動設計 モデリング_実装入門勉強会_2020.3.8
ドメイン駆動設計 モデリング_実装入門勉強会_2020.3.8
Koichiro Matsuoka
jooqってなんて読むの? から始めるO/RマッパーとSpringBootの世界
jooqってなんて読むの? から始めるO/RマッパーとSpringBootの世界
Y Watanabe
【7章】アジャイルサムライ
【7章】アジャイルサムライ
Akio Terayama
テストコードの DRY と DAMP
テストコードの DRY と DAMP
Yusuke Kagata
CleanArchitecture 第4部 「コンポーネントの原則」
CleanArchitecture 第4部 「コンポーネントの原則」
鈴木 セシル
MagicOnion~C#でゲームサーバを開発しよう~
MagicOnion~C#でゲームサーバを開発しよう~
torisoup
コンテナ未経験新人が学ぶコンテナ技術入門
コンテナ未経験新人が学ぶコンテナ技術入門
Kohei Tokunaga
大規模レガシー環境に立ち向かう有機的な開発フォーメーション #devsumi #devsumic
大規模レガシー環境に立ち向かう有機的な開発フォーメーション #devsumi #devsumic
Itsuki Kuroda
日本語テストメソッドについて
日本語テストメソッドについて
kumake
DDDのモデリングとは何なのか、 そしてどうコードに落とすのか
DDDのモデリングとは何なのか、 そしてどうコードに落とすのか
Koichiro Matsuoka
開発速度が速い #とは(LayerX社内資料)
開発速度が速い #とは(LayerX社内資料)
mosa siru
Mais procurados
(20)
DDD x CQRS 更新系と参照系で異なるORMを併用して上手くいった話
DDD x CQRS 更新系と参照系で異なるORMを併用して上手くいった話
世界でいちばんわかりやすいドメイン駆動設計
世界でいちばんわかりやすいドメイン駆動設計
フロー効率性とリソース効率性について #xpjug
フロー効率性とリソース効率性について #xpjug
reduxのstate設計の話
reduxのstate設計の話
ブルックスのいう銀の弾丸とは何か?
ブルックスのいう銀の弾丸とは何か?
なぜソフトウェアアーキテクトが必要なのか - デブサミ2011
なぜソフトウェアアーキテクトが必要なのか - デブサミ2011
Pythonによる黒魔術入門
Pythonによる黒魔術入門
それはYAGNIか? それとも思考停止か?
それはYAGNIか? それとも思考停止か?
MagicOnion入門
MagicOnion入門
ドメイン駆動設計 モデリング_実装入門勉強会_2020.3.8
ドメイン駆動設計 モデリング_実装入門勉強会_2020.3.8
jooqってなんて読むの? から始めるO/RマッパーとSpringBootの世界
jooqってなんて読むの? から始めるO/RマッパーとSpringBootの世界
【7章】アジャイルサムライ
【7章】アジャイルサムライ
テストコードの DRY と DAMP
テストコードの DRY と DAMP
CleanArchitecture 第4部 「コンポーネントの原則」
CleanArchitecture 第4部 「コンポーネントの原則」
MagicOnion~C#でゲームサーバを開発しよう~
MagicOnion~C#でゲームサーバを開発しよう~
コンテナ未経験新人が学ぶコンテナ技術入門
コンテナ未経験新人が学ぶコンテナ技術入門
大規模レガシー環境に立ち向かう有機的な開発フォーメーション #devsumi #devsumic
大規模レガシー環境に立ち向かう有機的な開発フォーメーション #devsumi #devsumic
日本語テストメソッドについて
日本語テストメソッドについて
DDDのモデリングとは何なのか、 そしてどうコードに落とすのか
DDDのモデリングとは何なのか、 そしてどうコードに落とすのか
開発速度が速い #とは(LayerX社内資料)
開発速度が速い #とは(LayerX社内資料)
Semelhante a 中規模Angularアプリケーションの再設計
【Ltech#8】技術的負債返済・実装改善に関する事例紹介
【Ltech#8】技術的負債返済・実装改善に関する事例紹介
LIFULL Co., Ltd.
20180718 small project
20180718 small project
Serverworks Co.,Ltd.
製造業のプロジェクトマネジメント~レイアウト変更編~
製造業のプロジェクトマネジメント~レイアウト変更編~
K K
持続的な運用開発のために社内基盤を整えている話 〜auditのCI組み込みやlintの社内PKG化〜
持続的な運用開発のために社内基盤を整えている話 〜auditのCI組み込みやlintの社内PKG化〜
bitbank, Inc. Tokyo, Japan
Ms retail update ra 20191030
Ms retail update ra 20191030
Microsoft Azure Japan
【SFO2020】業務SEを7か月でWebエンジニアに変える方法 ~アジャイルマインドを得るために~
【SFO2020】業務SEを7か月でWebエンジニアに変える方法 ~アジャイルマインドを得るために~
Yukio Okajima
ビットバンクで求められるプロジェクトマネジメント
ビットバンクで求められるプロジェクトマネジメント
bitbank, Inc. Tokyo, Japan
アジャイル開発のためのDatadog
アジャイル開発のためのDatadog
Nobuyasu Seki
エンタープライズ SaaS の初期成長戦略
エンタープライズ SaaS の初期成長戦略
Tomoe Sawai
ビットバンクのマッチングエンジン.pdf
ビットバンクのマッチングエンジン.pdf
bitbank, Inc. Tokyo, Japan
[Modern Cloud Day Tokyo 2019] 目指せコーディングレス!「繋げる」が実現するクラウド活用による高速アプリケーション開発の魅力
[Modern Cloud Day Tokyo 2019] 目指せコーディングレス!「繋げる」が実現するクラウド活用による高速アプリケーション開発の魅力
オラクルエンジニア通信
Google Container Engine と Kubernetes で 無理をしないコンテナ管理
Google Container Engine と Kubernetes で 無理をしないコンテナ管理
Ryosuke Suto
九州シェアリングサミット2018[第2セッション]
九州シェアリングサミット2018[第2セッション]
Yuichi Morito
RapidMinerのご紹介(ラピッドマイナーの5つの重要ポイント)2013年12月
RapidMinerのご紹介(ラピッドマイナーの5つの重要ポイント)2013年12月
ossanalytics
クラウド、クラウドというけれどJavaのシステムにとってクラウドってメリットあるの?
クラウド、クラウドというけれどJavaのシステムにとってクラウドってメリットあるの?
Takakiyo Tanaka
デジタル戦略立案サービス
デジタル戦略立案サービス
munjapan
08 detailed explanation! hinemosver.6.2 overview publication_20191106
08 detailed explanation! hinemosver.6.2 overview publication_20191106
Hinemos
コースA「EC事業計画」Ver.2.0
コースA「EC事業計画」Ver.2.0
Osamu Sugiura
Microsoft Build 2021 Recap Day
Microsoft Build 2021 Recap Day
ryosuke matsumura
【Qiita Night】エンジニア出身PMの1年目の通信簿_PM小川
【Qiita Night】エンジニア出身PMの1年目の通信簿_PM小川
Yuta Ogawa
Semelhante a 中規模Angularアプリケーションの再設計
(20)
【Ltech#8】技術的負債返済・実装改善に関する事例紹介
【Ltech#8】技術的負債返済・実装改善に関する事例紹介
20180718 small project
20180718 small project
製造業のプロジェクトマネジメント~レイアウト変更編~
製造業のプロジェクトマネジメント~レイアウト変更編~
持続的な運用開発のために社内基盤を整えている話 〜auditのCI組み込みやlintの社内PKG化〜
持続的な運用開発のために社内基盤を整えている話 〜auditのCI組み込みやlintの社内PKG化〜
Ms retail update ra 20191030
Ms retail update ra 20191030
【SFO2020】業務SEを7か月でWebエンジニアに変える方法 ~アジャイルマインドを得るために~
【SFO2020】業務SEを7か月でWebエンジニアに変える方法 ~アジャイルマインドを得るために~
ビットバンクで求められるプロジェクトマネジメント
ビットバンクで求められるプロジェクトマネジメント
アジャイル開発のためのDatadog
アジャイル開発のためのDatadog
エンタープライズ SaaS の初期成長戦略
エンタープライズ SaaS の初期成長戦略
ビットバンクのマッチングエンジン.pdf
ビットバンクのマッチングエンジン.pdf
[Modern Cloud Day Tokyo 2019] 目指せコーディングレス!「繋げる」が実現するクラウド活用による高速アプリケーション開発の魅力
[Modern Cloud Day Tokyo 2019] 目指せコーディングレス!「繋げる」が実現するクラウド活用による高速アプリケーション開発の魅力
Google Container Engine と Kubernetes で 無理をしないコンテナ管理
Google Container Engine と Kubernetes で 無理をしないコンテナ管理
九州シェアリングサミット2018[第2セッション]
九州シェアリングサミット2018[第2セッション]
RapidMinerのご紹介(ラピッドマイナーの5つの重要ポイント)2013年12月
RapidMinerのご紹介(ラピッドマイナーの5つの重要ポイント)2013年12月
クラウド、クラウドというけれどJavaのシステムにとってクラウドってメリットあるの?
クラウド、クラウドというけれどJavaのシステムにとってクラウドってメリットあるの?
デジタル戦略立案サービス
デジタル戦略立案サービス
08 detailed explanation! hinemosver.6.2 overview publication_20191106
08 detailed explanation! hinemosver.6.2 overview publication_20191106
コースA「EC事業計画」Ver.2.0
コースA「EC事業計画」Ver.2.0
Microsoft Build 2021 Recap Day
Microsoft Build 2021 Recap Day
【Qiita Night】エンジニア出身PMの1年目の通信簿_PM小川
【Qiita Night】エンジニア出身PMの1年目の通信簿_PM小川
Mais de bitbank, Inc. Tokyo, Japan
インフラチームの歴史とこれから
インフラチームの歴史とこれから
bitbank, Inc. Tokyo, Japan
ビットバンクのデプロイ戦略について
ビットバンクのデプロイ戦略について
bitbank, Inc. Tokyo, Japan
ビットバンク流 アジャイル開発の紹介.pdf
ビットバンク流 アジャイル開発の紹介.pdf
bitbank, Inc. Tokyo, Japan
ビットバンクでのネイティブアプリケーション開発におけるCI_CD環境
ビットバンクでのネイティブアプリケーション開発におけるCI_CD環境
bitbank, Inc. Tokyo, Japan
Lightning Network, Swap, Nloop
Lightning Network, Swap, Nloop
bitbank, Inc. Tokyo, Japan
ビットバンクにおける少人数で支えるインフラチームの戦略
ビットバンクにおける少人数で支えるインフラチームの戦略
bitbank, Inc. Tokyo, Japan
bitbank Corporate Information
bitbank Corporate Information
bitbank, Inc. Tokyo, Japan
ng build --prod & Continuous Delivery
ng build --prod & Continuous Delivery
bitbank, Inc. Tokyo, Japan
マーブル図で怖くないRxJS
マーブル図で怖くないRxJS
bitbank, Inc. Tokyo, Japan
仮想通貨取引所 bitbank の IaC の導入と実践
仮想通貨取引所 bitbank の IaC の導入と実践
bitbank, Inc. Tokyo, Japan
Introduction of bitbank frontend development environment
Introduction of bitbank frontend development environment
bitbank, Inc. Tokyo, Japan
DeveloperSuccess として何を届けられるか、様々な分野を経た先として何ができるか
DeveloperSuccess として何を届けられるか、様々な分野を経た先として何ができるか
bitbank, Inc. Tokyo, Japan
ビットコインウォレットで手軽にパスワードレス認証が可能なbitidについての紹介
ビットコインウォレットで手軽にパスワードレス認証が可能なbitidについての紹介
bitbank, Inc. Tokyo, Japan
Ethereumのシャーディング概論
Ethereumのシャーディング概論
bitbank, Inc. Tokyo, Japan
Daocasinoにおけるstate channel実装
Daocasinoにおけるstate channel実装
bitbank, Inc. Tokyo, Japan
TypeScriptでライトニングネットワークを使ってみよう
TypeScriptでライトニングネットワークを使ってみよう
bitbank, Inc. Tokyo, Japan
Node.jsアプリの開発をモダン化するために取り組んできたこと
Node.jsアプリの開発をモダン化するために取り組んできたこと
bitbank, Inc. Tokyo, Japan
Deploy TypeScript with CodePipeline in Fargate
Deploy TypeScript with CodePipeline in Fargate
bitbank, Inc. Tokyo, Japan
20181108 bitbank lt-maintainable-e2e-testing
20181108 bitbank lt-maintainable-e2e-testing
bitbank, Inc. Tokyo, Japan
Angular Refactoring in Real World
Angular Refactoring in Real World
bitbank, Inc. Tokyo, Japan
Mais de bitbank, Inc. Tokyo, Japan
(20)
インフラチームの歴史とこれから
インフラチームの歴史とこれから
ビットバンクのデプロイ戦略について
ビットバンクのデプロイ戦略について
ビットバンク流 アジャイル開発の紹介.pdf
ビットバンク流 アジャイル開発の紹介.pdf
ビットバンクでのネイティブアプリケーション開発におけるCI_CD環境
ビットバンクでのネイティブアプリケーション開発におけるCI_CD環境
Lightning Network, Swap, Nloop
Lightning Network, Swap, Nloop
ビットバンクにおける少人数で支えるインフラチームの戦略
ビットバンクにおける少人数で支えるインフラチームの戦略
bitbank Corporate Information
bitbank Corporate Information
ng build --prod & Continuous Delivery
ng build --prod & Continuous Delivery
マーブル図で怖くないRxJS
マーブル図で怖くないRxJS
仮想通貨取引所 bitbank の IaC の導入と実践
仮想通貨取引所 bitbank の IaC の導入と実践
Introduction of bitbank frontend development environment
Introduction of bitbank frontend development environment
DeveloperSuccess として何を届けられるか、様々な分野を経た先として何ができるか
DeveloperSuccess として何を届けられるか、様々な分野を経た先として何ができるか
ビットコインウォレットで手軽にパスワードレス認証が可能なbitidについての紹介
ビットコインウォレットで手軽にパスワードレス認証が可能なbitidについての紹介
Ethereumのシャーディング概論
Ethereumのシャーディング概論
Daocasinoにおけるstate channel実装
Daocasinoにおけるstate channel実装
TypeScriptでライトニングネットワークを使ってみよう
TypeScriptでライトニングネットワークを使ってみよう
Node.jsアプリの開発をモダン化するために取り組んできたこと
Node.jsアプリの開発をモダン化するために取り組んできたこと
Deploy TypeScript with CodePipeline in Fargate
Deploy TypeScript with CodePipeline in Fargate
20181108 bitbank lt-maintainable-e2e-testing
20181108 bitbank lt-maintainable-e2e-testing
Angular Refactoring in Real World
Angular Refactoring in Real World
中規模Angularアプリケーションの再設計
1.
中規模Angularアプリケーションの 再設計 Suguru Inatomi bitbank LT
Night #5
2.
© bitbank inc. 2 Suguru
Inatomi @laco2net
3.
今日のアジェンダ 3
4.
© bitbank inc. アジェンダ
4 ● アーキテクチャ導入の話 ● パフォーマンス改善の話 ● 品質改善の話
5.
アーキテクチャの話 5
6.
課題なきアーキテクチャは ただのアート 6
7.
© bitbank inc. bitbankアプリの大きな課題
7 ● 状態管理の分散 ○ Serviceごとに管理の仕方がバラバラ ● ビジネスロジックの点在 ○ コンポーネントがロジックを持っている
8.
© bitbank inc. 願望
8 ● 状態管理の分散 ○ 状態管理を一元化したい ● ビジネスロジックの点在 ○ コンポーネントから切り出してまとめたい ○ 適切にモジュール分割したい
9.
願望を叶えるための 構造を考える 9
10.
© bitbank inc. 中規模Angularアーキテクチャ
v1.1 10
11.
© 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) ○ 唯一の情報源
12.
© bitbank inc. つまりどういうこと?
12 ● Presentation Domain Separation (PDS) ○ コンポーネントからビジネスロジックを切り出す ● Single Responsibility Principle (SRP) ○ サービスの役割を明確にして境界づける ● Stable Dependencies Principle (SDP) ○ ユースケース依存のモジュールとそうでないものを境界づける ● Command Query Responsibility Segregation ○ 状態を変更する経路を限定する ● Single source of truth ○ アプリケーションの状態を一元管理する
13.
© bitbank inc. Presentation
Domain Separation 13 Presentation系とDomain系を分離
14.
© bitbank inc. Single
Responsibility Principle 14 役割ごとにモジュールを分類
15.
© bitbank inc. Stable
Dependencies Principle 15 より安定しているモジュールに依存する
16.
© bitbank inc. Command
Query Responsibility Segregation 16 WriteOnlyのUsecaseと ReadOnlyのQueryを Componentが利用する
17.
© bitbank inc. Single
source of truth 17 アプリケーションの状態は Storeで管理する
18.
© bitbank inc. Usecase-Store-Query
18 ● Storeの実装として @ngrx/store を採用
19.
© bitbank inc. NgRxと学習曲線の設計
19 ● NgRxへの関心をStore層に閉じる ○ NgRxから別のライブラリに変えやすくする ○ NgRxを知らなくても開発に参加できるようにする ● 参考: システムの学習曲線とAngularアプリケーションの設計
20.
© bitbank inc. Work
in Progress 20 ● Presentationのモジュール化はがんばりすぎない ○ 効果が薄い ● PDSができたら60点(可) ○ PDSさえ出来ていればどうとでもなる ● Webのことだけ考える(bitbankの場合) ○ locationやwindowの抽象化に固執しない ● TypeScriptとして簡潔であることを重視する ○ AngularやRxJSを使いこなそうとしない
21.
小休止 questions$ .pipe( takeUntil( timer(3分)
) ) .subscribe() 21
22.
パフォーマンス改善の話 22
23.
© bitbank inc. やったこと
23 ● バンドルサイズの削減 ○ main.bundle.js: 1.96MB -> 1.29MB (gzip前) ● 一部CSSのインライン化 ○ 起動前のローディング用のCSS
24.
© bitbank inc. バンドルサイズの削減内訳
24 ● 脱lodash ( => lodash.XXX ) ● 脱moment ( => dayjs ) ● 脱SharedModule ● Angular v8.0 (Differential Loading) ○ 参考
25.
© bitbank inc. バンドルサイズ推移
25
26.
© bitbank inc. 初期CSSのインライン化
26 ● ローディングアニメーション用のCSS ● CSSのロードが終わるまでローディングが出なかった ● index.htmlにハードコード ○ ほぼ変わることのない部分 ○ HTMLのサイズはそれほど問題ではない
27.
© bitbank inc. 留意点
27 ● bitbankのアプリの特殊性 ○ ほぼ検索流入しない ○ リアルタイムデータ依存(SSRしない) ● 初期ロードパフォーマンスの重要度: 低 ● アーキテクチャを犠牲にしてまで高速化するモチベーションはない ○ あるべき形でそれ相応のパフォーマンスであればOK
28.
品質改善の話 28
29.
© bitbank inc. 品質とは?
29 ● バグが少ないアプリケーションを目指す ● アプリケーションの入口と出口で品質を担保する ○ 入口: デプロイ前にバグを除去する = テスト ○ 出口: デプロイ後にバグを検知する = 監視
30.
© bitbank inc. アプリケーションの監視
30 ● エラーの発生を検知する ○ ツール: Sentry ● 検知できた例 ○ リリース後に特定のブラウザでエラーが起きていた ■ Polyfill不足 ○ `Cannot read property *** of undefined` ■ TypeScriptの型定義漏れ (Null Check)
31.
© bitbank inc. ノイズが多い問題
31 ● どんなエラーも全部流れてくる ○ アプリケーション側でハンドルすべき例外 ○ サードパーティJSがグローバルに投げるエラー ● 監視を運用するにはノイズを除去する必要がある ○ Slack通知が多すぎる ● 取り組み ○ 例外処理の見直し ○ HTTPリクエストにリトライを導入 ○ 通知すべきエラーのフィルター設定
32.
まとめ 32
33.
© bitbank inc. Takeaway
33 ● アーキテクチャは割り切りとコスパが大事 ○ 例:「PDSさえできてれば合格」 ● 守破離。まずは歴史に学び、原理原則を知る ● moment.jsやlodashの利用は計画的に ● SharedModuleが許されるのは小規模アプリまで ● アプリケーションの監視は重要 ○ 実行時エラーに気づける仕組みを作る
Baixar agora