Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
リプレイスプロジェクトで考えるフロントエンド開発 / Classi Angular Night #1
Search
Wataru KASAHARA
January 31, 2019
Programming
3
2.5k
リプレイスプロジェクトで考えるフロントエンド開発 / Classi Angular Night #1
Classi Angular Night #1 -EdTech業界での活用事例とベストプラクティス-
https://connpass.com/event/112186/
Wataru KASAHARA
January 31, 2019
Tweet
Share
More Decks by Wataru KASAHARA
See All by Wataru KASAHARA
NgRx component と component-store について / mini-ng-japan-2020
kasaharu
0
880
Classi リプレイスプロジェクト フロントエンドアーキテクチャ変遷 / Classi Angular Night #4
kasaharu
3
1.8k
Deep dive into component / classi-angular-night-number-3
kasaharu
0
2.3k
Angular Way をまっすぐ歩くために / classi-angular-night-number-2
kasaharu
1
2.1k
React 初心者が初級者になるまで / react-sakana
kasaharu
0
39
Other Decks in Programming
See All in Programming
コンポーネントライブラリで実現する、アクセシビリティの正しい実装パターン
schktjm
1
660
Rethinking Data Access: The New httpResource in Angular
manfredsteyer
PRO
0
220
primeNumberでのRBS導入の現在 && RBS::Traceでinline RBSを拡充してみた
mnmandahalf
0
250
コードに語らせよう――自己ドキュメント化が内包する楽しさについて / Let the Code Speak
nrslib
5
990
『Python → TypeScript』オンボーディング奮闘記
takumi_tatsuno
1
140
TSConfigからTypeScriptの世界を覗く
planck16
2
1.3k
CQRS/ESのクラスとシステムフロー ~ RailsでフルスクラッチでCQRSESを組んで みたことから得た学び~
suzukimar
0
190
TypeScript Language Service Plugin で CSS Modules の開発体験を改善する
mizdra
PRO
3
2.4k
型安全なDrag and Dropの設計を考える
yudppp
5
660
技術懸念に立ち向かい 法改正を穏便に乗り切った話
pop_cashew
0
790
Parallel::Pipesの紹介
skaji
2
870
Design Pressure
hynek
0
1.4k
Featured
See All Featured
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
129
19k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
6
660
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
30
2.4k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
The Straight Up "How To Draw Better" Workshop
denniskardys
233
140k
A Tale of Four Properties
chriscoyier
159
23k
RailsConf 2023
tenderlove
30
1.1k
Art, The Web, and Tiny UX
lynnandtonic
298
21k
Being A Developer After 40
akosma
91
590k
GraphQLとの向き合い方2022年版
quramy
46
14k
Transcript
Copyright © 2019 Classi Corp. All Rights Reserved. リプレイスプロジェクトで考える フロントエンド開発
2019/1/31 Classi Angular Night #1 Copyright © 2019 Classi Corp. All Rights Reserved. Classi 株式会社 笠原渉
Copyright © 2019 Classi Corp. All Rights Reserved. • 笠原
渉 (かさはら わたる) • Classi 株式会社 • フロントエンドエンジニア • リプレイス案件担当 1 About Me @kasaharu
Copyright © 2019 Classi Corp. All Rights Reserved. 1. 今の
Classi の問題点 2. リプレイスプロジェクトの目的 3. 今やってること 4. これから 2 目次
Copyright © 2019 Classi Corp. All Rights Reserved. • 複数のリポジトリ
& さまざまなライブラリ ◦ 10 を超えるリポジトリ ◦ AngularJS, Angular, React, Backbone などを使用 • インストール時から変わらないバージョン ◦ セキュリティリスク & EOL • ルールのないコード ◦ コードリーディングの難易度高 • テストコードなし ◦ デグレード可能性大 3 今の Classi が抱える問題点
Copyright © 2019 Classi Corp. All Rights Reserved. • 複数のリポジトリ
& さまざまなライブラリ ◦ 10 を超えるリポジトリ ◦ AngularJS, Angular, React, Backbone などを使用 • インストール時から変わらないバージョン ◦ セキュリティリスク & EOL • ルールのないコード ◦ コードリーディングの難易度高 • テストコードなし ◦ デグレード可能性大 4 今の Classi が抱える問題点 メンテナンス・機能追加が困難!!!
Copyright © 2019 Classi Corp. All Rights Reserved. 5 リプレイスプロジェクト
Copyright © 2019 Classi Corp. All Rights Reserved. • Mono-repo
化 & Angular 一本化 • 継続的なパッケージアップデート • コーディングルールの整備 • テストコード 6 リプレイスプロジェクトの目的
Copyright © 2019 Classi Corp. All Rights Reserved. 7 Mono-repo
化
Copyright © 2019 Classi Corp. All Rights Reserved. • Angular
Multiple Projects ◦ 1 workspace(repository) で複数のプロジェクトが管理できる ◦ Angular CLI v6 で提供された機能 8 Mono-repo 化
Copyright © 2019 Classi Corp. All Rights Reserved. • 利点
◦ リポジトリが 1 つ -> ルールを共有しやすい ▪ CI の設定 ▪ npm scripts ◦ package.json が 1 つ ▪ プロジェクト間で使用するパッケージにばらつきがでにくい ▪ バージョンアップ : 1 回やればよい 9 Mono-repo 化
Copyright © 2019 Classi Corp. All Rights Reserved. 10 継続的なパッケージアップデート
Copyright © 2019 Classi Corp. All Rights Reserved. • Renovate
の導入 ◦ GitHub Apps • 特徴 ◦ 対象リポジトリの package.json を監視 してパッケージに更新があった場合 PR を発行 11 継続的なパッケージアップデート
Copyright © 2019 Classi Corp. All Rights Reserved. • Renovate
の利点 ◦ スケジュール管理 ◦ auto merge 機能 • 参考 ◦ フロントエンド開発でパッケージのアッ プデートを継続的におこなう 12 継続的なパッケージアップデート
Copyright © 2019 Classi Corp. All Rights Reserved. 13 コーディングルールの整備
Copyright © 2019 Classi Corp. All Rights Reserved. • フレームワークを揃えたらコーディングルールが統一
14 コーディングルールの整備
Copyright © 2019 Classi Corp. All Rights Reserved. • フレームワークを揃えたらコーディングルールが統一
15 コーディングルールの整備 もちろんそんなことはない!
Copyright © 2019 Classi Corp. All Rights Reserved. • Linter
& Formatter の導入 ◦ TSLint ◦ stylelint ◦ Prettier 16 コーディングルールの整備
Copyright © 2019 Classi Corp. All Rights Reserved. • TSLint
◦ 最初から「導入は」されている ◦ ただしルールは見直しが必要 ▪ 循環的複雑度の閾値設定 ▪ console.log() の禁止 17 コーディングルールの整備
Copyright © 2019 Classi Corp. All Rights Reserved. • stylelint
◦ CSS の Linter ◦ stylelint-config-standard というデファクトなルールがあるので導 入が楽 18 コーディングルールの整備
Copyright © 2019 Classi Corp. All Rights Reserved. • Prettier
◦ Formatter ◦ TS ファイルだけでなく HTML にも対応 19 コーディングルールの整備
Copyright © 2019 Classi Corp. All Rights Reserved. • 利点
◦ コードレビューのコストが格段に下がる ▪ 細かいレビューは自動化 ◦ コードレビューの質があがる ▪ 本質的なレビューが可能 ◦ CI で動かすことで定常的にチェックできる • 欠点 ◦ 良くも悪くも Lint & Formatter に従う ◦ フォーマット結果が一意にならない時がある… 20 コーディングルールの整備
Copyright © 2019 Classi Corp. All Rights Reserved. 21 単体テスト
Copyright © 2019 Classi Corp. All Rights Reserved. • 単体テストを実施
◦ Angular CLI -> Jasmine と Karma が導入済み ◦ つまり書くだけ! 22 単体テスト
Copyright © 2019 Classi Corp. All Rights Reserved. • カバレッジの閾値設定
◦ 設定した閾値を下回るとエラーになる ◦ 今回はすべてのカバレッジで 100% を設定 23 単体テスト
Copyright © 2019 Classi Corp. All Rights Reserved. • なぜカバレッジの閾値を
100% にしたか ◦ 予期していないパターンの漏れ防止 ◦ 継続的なパッケージアップデートをするために簡単にリグレッ ションする方法が必要だった 24 単体テスト
Copyright © 2019 Classi Corp. All Rights Reserved. • ベースを整えた上で次のことを考える
25 今やっていること
Copyright © 2019 Classi Corp. All Rights Reserved. 26 コンポーネント設計
Copyright © 2019 Classi Corp. All Rights Reserved. 27 コンポーネント設計
Atomic Design Flux Architecture
Copyright © 2019 Classi Corp. All Rights Reserved. 28 Atomic
Design
Copyright © 2019 Classi Corp. All Rights Reserved. • UI
コンポーネント設計のためのデザインフレームワー ク ◦ ref. http://atomicdesign.bradfrost.com/ • 小さいコンポーネントの組み合わせで UI を作る 29 Atomic Design
Copyright © 2019 Classi Corp. All Rights Reserved. • 依存関係が明確
◦ 上が下に依存、その逆は禁止 30 Atomic Design Atoms Molecules Organisms Templates Pages Button, Heading Form Header ページの枠組み
Copyright © 2019 Classi Corp. All Rights Reserved. 31 Atomic
Design を考える前に
Copyright © 2019 Classi Corp. All Rights Reserved. • デザインガイドライン
◦ Classi にはデザインガイドラインが存在 • デザインガイドラインの目的 ◦ 数年かけて作られたサービスのデザイン統一 • 現状 ◦ 独立したリポジトリで CSS を定義しているが、HTML の構造は使 う側で書く • 問題点 ◦ 使う側で HTML を記述するので手間がかかる ◦ 期待する HTML の構造を変更すると使っている側で軒並み変更 が必要 32 コンポーネント設計
Copyright © 2019 Classi Corp. All Rights Reserved. • デザインガイドライン
◦ Classi にはデザインガイドラインが存在 • デザインガイドラインの目的 ◦ 数年かけて作られたサービスのデザイン統一 • 現状 ◦ 独立したリポジトリで CSS を定義しているが、HTML の構造は使 う側で書く • 問題点 ◦ 使う側で HTML を記述するので手間がかかる ◦ 期待する HTML の構造を変更すると使っている側で軒並み変更 が必要 33 コンポーネント設計 あくまでデザインガイドライン
Copyright © 2019 Classi Corp. All Rights Reserved. 34 ガイドラインベースの
コンポーネント作成
Copyright © 2019 Classi Corp. All Rights Reserved. • すでにデザインのベースがあるので再利用可能なコ
ンポーネント群に仕上げる 35 Atomic Design ベースのコンポーネント作成
Copyright © 2019 Classi Corp. All Rights Reserved. 36 Atomic
Design ベースのコンポーネント作成 デザインガイドライン Atomic Design
Copyright © 2019 Classi Corp. All Rights Reserved. • Mono-repo
内での components project ◦ Angular CLI の Library 機能を使ったコンポーネントライブラリの 作成 ▪ Application project と責務を分けられる ▪ 複数の Application project で使用可能 • 参考 ◦ Angular Library を使って共通コンポーネントを作る 37 Classi での Atomic Design Componets
Copyright © 2019 Classi Corp. All Rights Reserved. • 方針
◦ Atoms レベルのコンポーネントから作成 ▪ 再利用がしやすい最小部品から用意 ▪ 一部 Header, Footer などの Organisms は作成 • Storybook によるカタログ化 38 Classi での Atomic Design Componets
Copyright © 2019 Classi Corp. All Rights Reserved. • 方針
◦ Atoms レベルのコンポーネントから作成 ▪ 再利用がしやすい最小部品から用意 ▪ 一部 Header, Footer などの Organisms は作成 • Storybook によるカタログ化 39 Classi での Atomic Design Componets Storybook 教えてくれ、誰か
Copyright © 2019 Classi Corp. All Rights Reserved. 40 状態管理
Copyright © 2019 Classi Corp. All Rights Reserved. • NgRx
を使用 ◦ Redux インスパイアの Angular 用状態管理ライブラリ • 追加のパッケージを入れることで Redux Devtools Extension も使える 41 状態管理
Copyright © 2019 Classi Corp. All Rights Reserved. 42 Atomic
Design & Flux Architecture
Copyright © 2019 Classi Corp. All Rights Reserved. 43 コンポーネント設計
Effects Reducer Action State Container Component Presentational Component Component Library Angular NgRx
Copyright © 2019 Classi Corp. All Rights Reserved. 44 コンポーネント設計
Effects Reducer Action State Container Component Presentational Component Component Library Angular NgRx
Copyright © 2019 Classi Corp. All Rights Reserved. 45 コンポーネント設計
Effects Reducer Action State Container Component Presentational Component Component Library Angular NgRx
Copyright © 2019 Classi Corp. All Rights Reserved. 46 コンポーネント設計
Effects Reducer Action State Container Component Presentational Component Component Library Angular NgRx
Copyright © 2019 Classi Corp. All Rights Reserved. 47 コンポーネント設計
Web API Effects Reducer Action State Container Component Presentational Component Component Library Angular NgRx
Copyright © 2019 Classi Corp. All Rights Reserved. 48 コンポーネント設計
Web API Effects Reducer Action State Container Component Presentational Component Component Library Angular NgRx 責務を明確に
Copyright © 2019 Classi Corp. All Rights Reserved. • 当たり前のことを当たり前に
◦ パッケージアップデート ◦ コーディングルール整備 ◦ 単体テスト • アプリケーション設計 ◦ コンポーネント設計 ◦ 状態管理 49 今やっていること
Copyright © 2019 Classi Corp. All Rights Reserved. • コンポーネント設計
◦ Library で切り分けた共通コンポーネント以外の境界 • Store 設計 ◦ Store どの粒度で作るか問題 50 悩み
Copyright © 2019 Classi Corp. All Rights Reserved. 51 これからの課題
Copyright © 2019 Classi Corp. All Rights Reserved. • パフォーマンス測定
• E2E テスト 52 課題
Copyright © 2019 Classi Corp. All Rights Reserved. ご清聴ありがとうございました 53