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
44
What is Angular ?
第二回 合同勉強会 in 福岡(2017/08/26)の発表資料です。
ponday
August 26, 2017
Tweet
Share
More Decks by ponday
See All by ponday
関数型でGoFのデザインパターンやってみる
honda
1
1.2k
TypeScriptの型表現
honda
10
3.1k
Web Componentsの今
honda
1
430
これまでのReact、これからのReact
honda
0
310
Gatsbyお試し
honda
0
120
styled-components or emotion?
honda
0
680
Web ComponentsとAngular
honda
0
130
Atomic Design周りについての私見
honda
1
700
え、まだWeb Componentsを未来の技術だと思ってるの?
honda
2
820
Other Decks in Programming
See All in Programming
Code as Context 〜 1にコードで 2にリンタ 34がなくて 5にルール? 〜
yodakeisuke
0
120
RailsGirls IZUMO スポンサーLT
16bitidol
0
140
Is Xcode slowly dying out in 2025?
uetyo
1
250
ruby.wasmで多人数リアルタイム通信ゲームを作ろう
lnit
2
330
GraphRAGの仕組みまるわかり
tosuri13
8
520
ニーリーにおけるプロダクトエンジニア
nealle
0
720
プロダクト志向なエンジニアがもう一歩先の価値を目指すために意識したこと
nealle
0
120
WindowInsetsだってテストしたい
ryunen344
1
230
童醫院敏捷轉型的實踐經驗
cclai999
0
210
第9回 情シス転職ミートアップ 株式会社IVRy(アイブリー)の紹介
ivry_presentationmaterials
1
260
Hypervel - A Coroutine Framework for Laravel Artisans
albertcht
1
110
dbt民主化とLLMによる開発ブースト ~ AI Readyな分析サイクルを目指して ~
yoshyum
2
260
Featured
See All Featured
Building Applications with DynamoDB
mza
95
6.5k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
20k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
The Invisible Side of Design
smashingmag
300
51k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.6k
Docker and Python
trallard
44
3.5k
GraphQLとの向き合い方2022年版
quramy
49
14k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.7k
Thoughts on Productivity
jonyablonski
69
4.7k
What's in a price? How to price your products and services
michaelherold
246
12k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.4k
Done Done
chrislema
184
16k
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