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
Make frontend development radical with Angular
Search
Ian Duncan
May 31, 2013
Programming
4
220
Make frontend development radical with Angular
Ian Duncan
May 31, 2013
Tweet
Share
More Decks by Ian Duncan
See All by Ian Duncan
OAuth at Logos
iand675
3
140
Other Decks in Programming
See All in Programming
K2のKotlin IDEプラグインの中を覗いてみよう♪
yanex
0
2k
君は新しい日付/時刻API Temporal を知っているか?
luccafort
PRO
5
1k
有効な使い方を正しく理解して実装する PHP8.3の最新機能 / Proper understanding and implementation of effective usage Latest features in PHP 8.3
seike460
PRO
2
220
過去や未来を扱うのは難しい? 過去と未来に立ち向かうための勘所
shinpeim
2
450
えにしテック、あるいは人間関係のエクササイズ / #enishitech-15th-anniv
kakutani
7
1.8k
スクラムチームに入れないという選択: フルサイクルチームにおける開発者のステップアップ / Why We Don’t Add Newbies to Our Scrum Team
yuk4w4
3
1.6k
Ruby の型に関する活動をやっている話 / Activities related to Ruby types
euglena1215
3
140
terraform-provider-aws にプルリクして マージされるまで
exoego
2
160
プログラミングスクールのつながりがキャリアにつながるのかもしれない話 / Connections at programming schools may lead to a career
aiandrox
0
290
dockerの豆知識を沢山話す
mal0961
3
260
Kotlin Script 활용하기
kciter
0
150
フレームワークを10年以上開発する中で培ってきた単体テストのプラクティス / JJUG CCC 2024 Spring
kiwasaki
1
120
Featured
See All Featured
The Invisible Side of Design
smashingmag
294
50k
Fontdeck: Realign not Redesign
paulrobertlloyd
77
5k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
15
8.6k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
10
3.7k
Code Reviewing Like a Champion
maltzj
516
39k
KATA
mclloyd
18
12k
Side Projects
sachag
451
41k
Adopting Sorbet at Scale
ufuk
69
8.7k
Into the Great Unknown - MozCon
thekraken
17
1.2k
Practical Orchestrator
shlominoach
184
9.9k
Art, The Web, and Tiny UX
lynnandtonic
290
19k
4 Signs Your Business is Dying
shpigford
177
21k
Transcript
ANGULAR MAKE FRONTEND DEVELOPMENT RADICAL WITH
I’M IAN
I’M IAN I BUILD FAITHLIFE
I’M IAN I BUILD FAITHLIFE I LIKE STUFF RADICAL
THINGS THAT ARE RADICAL: Fewer Bugs Less Code Fast Development
WHAT ANGULAR OFFERS: Routing Data Binding Controllers Dependency Injection Form
Validation Reusable HTML Components
WHAT ANGULAR OFFERS: Some other stuff too.
OK, that’s a lot to cover in one talk.
IN A NUTSHELL It’s a frontend JavaScript framework for building
testable, manageable code.
The good thing about Javascript: it’s really flexible. The bad
thing about Javascript: it’s really flexible.
None
Manually manipulating the DOM is like assembly programming
None
We’ve solved this problem before.
Why not MVC? Model View Controller
Model (Plain old Javascript object) View (HTML) Controller (JavaScript)
Controller
Controller
$scope exposes data/ functions to views
View
Surprise! It’s just HTML5.
Models really are just plain old JavaScript objects.
Where’s the magic?
Dependency injection + Two-way data binding
Dependency injection Specify dependency sources, Angular wires them up for
you.
Dependency injection Angular inspects function argument names to look for
the value to inject.
Dependency injection
Two-way data binding Values in $scope are exposed to both
the controller and the view.
Two-way data binding Modifications from one propagate to the other.
Two-way data binding Scopes are inherited
Two-way data binding Scopes trigger updates when observed values change
Two-way data binding
Directives
Directives Add behavior to HTML with classes, new elements, &
new attributes.
Directives Inspired by W3C’s Web Components working drafts.
Directives One of Angular’s killer features.
“Gee, I wish HTML could...” Support dropdown menus Have syntax-highlighted
text editing Have relative timestamps
Now it does! <sharks-with-lasers />
Directives The only place you should ever need to write
a line of code that manipulates the DOM
Testing Dependency injection makes that a lot easier. Separation of
concerns is the key!
Testing Run unit tests and integration tests across multiple browsers.
Angular has a ridiculously fast test runner, Karma.
Testing Built in mocks for common test scenarios: AJAX requests
Dates Logging
Testing Built in end-to-end testing support
Not covered in this talk: Internationalization & localization Filters Partial
templates CSS3 animation & transitions
QUESTIONS?