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
What is Angular ?
Search
ponday
August 26, 2017
Programming
0
39
What is Angular ?
第二回 合同勉強会 in 福岡(2017/08/26)の発表資料です。
ponday
August 26, 2017
Tweet
Share
More Decks by ponday
See All by ponday
関数型でGoFのデザインパターンやってみる
honda
0
950
TypeScriptの型表現
honda
10
2.8k
Web Componentsの今
honda
1
370
これまでのReact、これからのReact
honda
0
240
Gatsbyお試し
honda
0
110
styled-components or emotion?
honda
0
610
Web ComponentsとAngular
honda
0
130
Atomic Design周りについての私見
honda
1
530
え、まだWeb Componentsを未来の技術だと思ってるの?
honda
2
680
Other Decks in Programming
See All in Programming
今、知っておきたい! 生成AIエージェントの世界
elith
3
350
コードレビューで学ぶ!Kotlinオブジェクト指向デザインパターン
akkie76
2
200
Nealle_Autify_LT_Slide202403
nealle
0
130
Random\Randomizer クラスで日常のあれこれを解決しよう! / Random\Randomizer class solves familiar trouble
cocoeyes02
0
140
ADRを一年運用してみた/adr_after_a_year
hanhan1978
7
2.3k
Changed Rules: Architectures with Lightweight Stores
manfredsteyer
PRO
0
240
Goのエラースタックトレースの歴史と今後
sonatard
6
740
サイコロで理解する統計的仮説検定の考え方
tatamiya
4
880
FigmaとPHPで作る1ミリたりとも表示崩れしない最強の帳票印刷ソリューション
ttskch
43
18k
1BRC--Nerd Sniping the Java Community
gunnarmorling
0
340
大規模Reactアプリのリアーキテクチャ~8万行のTanStack Query移行の軌跡~
kj455
4
940
単体テストを書かない技術 #phpcon_odawara
o0h
PRO
26
8.2k
Featured
See All Featured
It's Worth the Effort
3n
180
27k
Rails Girls Zürich Keynote
gr2m
91
13k
Principles of Awesome APIs and How to Build Them.
keavy
120
16k
Visualization
eitanlees
135
14k
WebSockets: Embracing the real-time Web
robhawkes
59
7k
Producing Creativity
orderedlist
PRO
336
39k
Building Effective Engineering Teams - LeadDev
addyosmani
28
1.8k
Building Your Own Lightsaber
phodgson
98
5.7k
GraphQLの誤解/rethinking-graphql
sonatard
50
9.2k
10 Git Anti Patterns You Should be Aware of
lemiorhan
647
58k
The Invisible Side of Design
smashingmag
294
49k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
115
18k
Transcript
What is Angular ? 福岡合同勉強会 #2 / Aug 26, 2017
ponday(@ponday_dev)
Profile ponday (@ponday_dev) / 本田 裕介 - chibi-developer - ng-fukuoka
オーガナイザ community - Angular, Vue.js - Kotlin, Java, C# etc... - JavaScript skill
始めに質問
Angular使ってますか?
(多分ReactとかVue.jsのほうが多いんだろうなぁ...)
Angularのご紹介
What is Angular? ・Googleとコミュニティが協力して開発 ・AngularJS(1.x系)からアーキテクチャを一新 → 無理にAngularって名前にしなくても良かったんじゃ... ・積極的にモダンなWeb技術を取り込み ・TypeScript ・RxJS etc…
・MITライセンス
リリースサイクル ・セマンティックバージョニングを採用 → [Major] . [Minor] . [Patch] ・明確な開発ロードマップ ・6ヶ月に1度のメジャーリリース
・1ヶ月に1度のマイナーリリース ・週に1度のパッチリリース ・メジャーリリースでは破壊的変更を含む
and more... 2016/09 2017/03 2017/09 v2.0 v4.0 (LTS) v5.0 (plans)
機能 ・DI ・双方向バインディング ・Scoped CSS ・Httpクライアント ・Form ・Routing ・Animation ・Material
・Lazy loading ・モバイル ・エコシステム ・Angular CLI ・Language Service ・Augury (今後に期待) ・i18n ・Server Side Rendering
One framework. Mobile & desktop.
導入の課題
導入の課題 ・学習コスト ・パフォーマンス ・バージョンアップへの追従
導入の課題 ・学習コスト ・パフォーマンス ・バージョンアップへの追従
「Angularは学習コスト高そう...」
Angularの学習コスト = 高 → 要因は2つ
学習コストの要因:カバーしている機能の広さ ・Webアプリの開発に必要な機能を標準搭載 ・ルータ ・Httpクライアント ・アニメーション etc... ・どのフレームワークを使っても必要 → 標準か、そうでないか ・すべてをマスターする必要はない →
機能ごとにモジュールが分割されている。 使わない機能がバンドルされることはない。
学習コストの要因:要求される技術スタックの多さ ・利用にあたって必要となる知識が多い ・Angular ・TypeScript, ECMAScript ・RxJS etc... ・大半がモダンなWeb技術になりつつある → Angular本体以外の部分もすぐ陳腐化することはない ・TypeScript,
RxJSによって得られる高い生産性は魅力 ・型付けによる一次テスト ・TypeScriptはESの新機能をいち早く実装 ・RxJSによる簡潔で柔軟な記述
導入の課題 ・学習コスト ・パフォーマンス ・バージョンアップへの追従
「Angularって遅いんじゃないの?」
「Angularが遅い」は過去の話
Angularのパフォーマンス ・AngularJSは遅かった ・dirty checkに起因するムダの多さ ・コンポーネントの増加がクリティカルに影響 ・v2.xで変更検知の仕組みを一新 = Change Detection ・ReactやVue.jsの『仮想ツリー』とは異なる
→ Reactと同等かそれ以上のパフォーマンス ・コンポーネントが増えてもパフォーマンスに影響が出にくい ・Lazy loadingによるバンドルサイズの削減 ・初期ロード時は最低限必要なものだけDL → 初期表示の高速化 ※ (参考)『Angularは本当に早いのか?』 https://speakerdeck.com/honda/angularhaben-dang-nisu-ifalseka
導入の課題 ・学習コスト ・パフォーマンス ・バージョンアップへの追従
「半年に1回破壊的な変更は恐い...」
(今のところ)そこまで大きな変更はない
バージョンアップ ・Angular5の変更点 = 地味 ※Beta.4時点 ・破壊的変更: 1件のみ ・非推奨: 1件のみ ・破壊的変更は1度非推奨になってから
・ex) v5.xで非推奨 → v6.xで削除 ・マイナーリリースでは破壊的変更は起こらない → 「マイナーリリースで動かければそれはバグ」 ・1年半のサポート期間を持つLTSバージョンも
ユースケース
ユースケース ・Webアプリケーション ・CRUDの多いマスタ管理画面など ・サーバサイドエンジニアが多い場合 (よく検討が必要) ・Webサイト ・1, 2ページのWebサイトには向かない ・metaタグを頻繁に書き換えるサイトも向かない(らしい) ・お問い合わせフォームがある、Http通信が多い場合には採用もあり
さいごに
ng-fukuoka
ng-fukuoka website: ng-fukuoka.github.io github : github.com/ng-fukuoka twitter : @ng_fukuoka