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
チームのテスト力を総合的に鍛えて品質、スピード、レジリエンスを共立させる/Testing approach that improves quality, speed, and resilience
goyoki
5
940
Startups on Rails in Past, Present and Future–Irina Nazarova, RailsConf 2025
irinanazarova
0
140
技術同人誌をMCP Serverにしてみた
74th
1
660
Android 16KBページサイズ対応をはじめからていねいに
mine2424
0
130
状態遷移図を書こう / Sequence Chart vs State Diagram
orgachem
PRO
1
130
たった 1 枚の PHP ファイルで実装する MCP サーバ / MCP Server with Vanilla PHP
okashoi
1
270
Flutterで備える!Accessibility Nutrition Labels完全ガイド
yuukiw00w
0
170
PHPで始める振る舞い駆動開発(Behaviour-Driven Development)
ohmori_yusuke
2
400
Systèmes distribués, pour le meilleur et pour le pire - BreizhCamp 2025 - Conférence
slecache
0
120
ニーリーにおけるプロダクトエンジニア
nealle
0
870
코딩 에이전트 체크리스트: Claude Code ver.
nacyot
0
690
10 Costly Database Performance Mistakes (And How To Fix Them)
andyatkinson
0
440
Featured
See All Featured
Producing Creativity
orderedlist
PRO
346
40k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Git: the NoSQL Database
bkeepers
PRO
430
65k
The Straight Up "How To Draw Better" Workshop
denniskardys
235
140k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
A Tale of Four Properties
chriscoyier
160
23k
Building Adaptive Systems
keathley
43
2.7k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.4k
Build The Right Thing And Hit Your Dates
maggiecrowley
36
2.8k
For a Future-Friendly Web
brad_frost
179
9.8k
Gamification - CAS2011
davidbonilla
81
5.4k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.6k
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