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
Angular Platform
Search
puku0x
February 26, 2019
Technology
5
480
Angular Platform
FukuokaJS #7
puku0x
February 26, 2019
Tweet
Share
More Decks by puku0x
See All by puku0x
ファインディにおけるフロントエンド技術選定の歴史
puku0x
2
170
ファインディでのGitHub Actions活用事例
puku0x
9
2.9k
Findyの開発生産性向上への取り組み ~Findyフロントエンドの場合~
puku0x
0
410
Findyの開発生産性を上げるためにやったこと
puku0x
1
550
Angularコーディングスタイルガイドはいいぞ
puku0x
1
260
Nx CloudでCIを爆速にした話
puku0x
0
760
Findyのフロントエンド設計刷新を通して得られた技術的負債との向き合い方
puku0x
1
1.7k
最高の開発体験を目指して 〜Findyのフロントエンド設計刷新〜
puku0x
0
780
VSCode GraphQL + GraphQL Code Generator による快適なフロントエンド開発
puku0x
0
2.6k
Other Decks in Technology
See All in Technology
Zenn のウラガワ ~エンジニアのアウトプットを支える環境で Google Cloud が採用されているワケ~ #burikaigi #burikaigi_h
kongmingstrap
18
6.9k
現実的なCompose化戦略 ~既存リスト画面の置き換え~
sansantech
PRO
0
170
ソフトウェア開発現代史:製造業とソフトウェアは本当に共存できていたのか?品質とスピードを問い直す
takabow
15
5.3k
GitLab SelfManagedをCodePipelineのソースに設定する/SetGitLabSelfManagedtoCodePipeline
norihiroishiyama
1
120
private spaceについてあれこれ調べてみた
operando
1
170
サーバーレスで楽しよう!お気軽に始められる3つのポイント / Have fun with Serverless!
_kensh
2
230
例外処理を理解して、設計段階からエラーを「見つけやすく」「起こりにくく」する
kajitack
12
3.8k
2025/1/29 BigData-JAWS 勉強会 #28 (re:Invent 2024 re:Cap)/new-feature-preview-q-in-quicksight-scenarios-tried-and-tested
emiki
0
310
プロダクト観点で考えるデータ基盤の育成戦略 / Growth Strategy of Data Analytics Platforms from a Product Perspective
yamamotoyuta
0
220
インシデントキーメトリクスによるインシデント対応の改善 / Improving Incident Response using Incident Key Metrics
nari_ex
0
4.2k
あなたの興味は信頼性?それとも生産性? SREとしてのキャリアに悩むみなさまに伝えたい選択肢
jacopen
6
3.2k
エラーバジェット枯渇の原因 - 偽陽性との戦い -
phaya72
1
100
Featured
See All Featured
Java REST API Framework Comparison - PWX 2021
mraible
28
8.4k
The Art of Programming - Codeland 2020
erikaheidi
53
13k
Into the Great Unknown - MozCon
thekraken
34
1.6k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
7
600
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
29
990
Fantastic passwords and where to find them - at NoRuKo
philnash
50
3k
4 Signs Your Business is Dying
shpigford
182
22k
GraphQLの誤解/rethinking-graphql
sonatard
68
10k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
2k
Writing Fast Ruby
sferik
628
61k
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
Transcript
Angular Platform FukuokaJS #7
Noriyuki Shinpuku ng-fukuoka organizer @puku0x 2 VEGA corporation Co., Ltd.
フロントエンドの課題 • 複雑&大規模化 • デザイン • パフォーマンス • トレンドの追従 •
生産性 • 保守 : 3
4 つらい
5 Angular
Angular Googleが開発するフロントエンドフレームワーク • フルスタック • 堅牢&高速 • 充実したエコシステム https://angular.io/ 6
Why Angular? 7
8
TypeScript • JSのスーパーセット • 漸進的型付け言語 • 高い保守性 9 TypeScript ES201x
ES5
コンポーネント @Component({ selector: 'app-root', template: `<p>Hello, {{ title }} !</p>`,
}) export class AppComponent { title = 'Angular'; } 10
サービス/プロバイダ 11 @Injectable({ providedIn: 'root' }) export class UserService {
constructor(private http: HttpClient) {} fetchUsers() { return this.http.get<User[]>('/users'); } }
12 モジュール機構(NgModule) Root Module Feature Module Shared Module Feature Module
Feature Module Bootstrap Eager Loaded Lazy Loaded { path: './feature', loadChildren: './feature.module#FeatureModule' } @NgModule({ imports: [SharedModule] }) export class FeatureModule { }
13 is “Full Stack”
公式パッケージ 14
Angular Material 15
Angular Material • 公式UIライブラリ • 新Material Design対応 16 https://material.angular.io
17
Component Dev Kit 18
Component Dev Kit • Virtual Scroll & Drag-and-Drop https://blog.angular.io/version-7-of-angular-cli-prompts-virtual-s croll-drag-and-drop-and-more-c594e22e7b8c
19
Angular Elements 20
Custom Elementsとして出力 export class AppModule implements DoBootstrap { constructor(injector: Injector)
{ const el = createCustomElement(HelloComponent, { injector }); customElements.define('app-hello', el); } ngDoBootstrap(appRef: ApplicationRef) {} } 21
22 Tools
Angular CLI 23 環境構築 $ ng new コード生成/機能追加 $ ng
generate $ ng add 開発/リリース $ ng serve $ ng build --prod https://cli.angular.io/
$ npm install -g @angular/cli 24
Angularアプリケーションの作成 $ ng new my-app ? Would you like to
add Angular routing? Yes ? Which stylesheet format would you like to use? (Use arrow keys) ❯ CSS SCSS [ http://sass-lang.com ] SASS [ http://sass-lang.com ] LESS [ http://lesscss.org ] Stylus [ http://stylus-lang.com ] 25
• Schematicsによる拡張 CLIエコシステム 26
27 $ ng add
ng add 対応パッケージ 28
29 $ ng update
サポート期間 半年 年 今ここ 30 APIの破壊的変更は 段階的に適用される
31 https://link.medium.com/KgTODwwFWT
Language Service(VS Code 拡張) 32 • コード補完 • テンプレートチェック •
定義ジャンプ https://marketplace.visualstudio.com/items?itemName =Angular.ng-template
33
Angular Console Angular CLIのGUI版 デスクトップアプリ または VS Code拡張 34 https://angularconsole.com/
StackBlitz 35 オンライン版 VS Code 様々なテンプレート • Angular • Ionic
• React https://stackblitz.com/
36 Community
37 ng-japan 2018 Keynote
38 150万人/月のアクティブユーザ https://twitter.com/angular/status/1069727630734151680
39 https://news.crunchbase.com/news/popular-web-frameworks-seed-early-stage-startups/
40 国内 約1万人/月のアクティブユーザ
国内コミュニティ 41 • 東京 • 京都 • 神戸 • 福岡
• 群馬 https://community.angular.jp/
Angular in 2019 42
Angular v8/v9 43
Ivy 新しいレンダラー ・バンドルサイズ削減 ・高速なビルド ・シンプルなAPI ng-conf 2018: Angular Keynote https://docs.google.com/presentation/d/1zgpjyV
kDgUPfGKuxOcU0lLusCiMSfLZZjYHWrFvl71I 44
45 ng-conf 2018: Angular Keynote(和訳)
$ ng new my-app --experimental-ivy ※正常に動作しない場合があります 46
47 Bazel
Bazelビルドサポート $ npm i -g @angular/bazel $ ng new my-app
--collection=@angular/bazel $ cd my-app $ ng serve $ ng build --prod 48
49 ngAtlanta 2019: Angular in 2019 http://bit.ly/ngAtlanta-2019 Angular Mix 2018:
Angular Prototyping Tool http://bit.ly/AngularCodesign
50 Angular
51 学習コストが...
まぁわかる 52
でも 53
コストに見合う リターンがある 54
Angularを選んで良かったこと(1) • 強いオピニオン ◦ Angularチームのベストプラクティス ◦ 高品質なデフォルトセット ◦ 意思決定のコスト削減 •
プロダクトの価値に集中できる 55
Angularを選んで良かったこと(2) • 将来の資産となる知識 ◦ モダンなWeb技術 ◦ 次世代のWeb標準 ◦ コンポーネント設計、テスト設計 •
将来を見据えた技術習得 56
• スピード • スケーラビリティ • 将来性 57
58 https://angular.jp/ Angularをはじめよう 日本語ドキュメント もあります
新福 宜侑 @puku0x ng-fukuoka organizer Thank you! 59