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
The awesomeness of Angular 2
Search
Ciro Nunes
April 24, 2015
Programming
14
21k
The awesomeness of Angular 2
Demo:
http://github.com/cironunes/cart2
Ciro Nunes
April 24, 2015
Tweet
Share
More Decks by Ciro Nunes
See All by Ciro Nunes
Rust Front-end with Yew
cironunes
0
39
Type safe CSS with Reason
cironunes
0
96
What I've learned building automated docs for Ansarada's design system
cironunes
0
57
Beyond ng new
cironunes
2
190
Animate your Angular apps
cironunes
0
400
Sweet Angular, good forms never felt so good
cironunes
0
59
Sweet Angular, good forms never felt so good
cironunes
0
280
Progressive Angular apps
cironunes
3
860
Angular: Um framework. Mobile & desktop.
cironunes
1
570
Other Decks in Programming
See All in Programming
Rechartsで楽にゴリゴリにカスタマイズする!
10tera
1
170
Developer Joy == Developer Productivity (really!)
hollycummins
1
220
Lessons by WebAssembly app in production on CDN Edge Computing Service
tetsuharuohzeki
0
210
いつか使える ObjectSpace / Maybe useful ObjectSpace
euglena1215
2
140
The Sequel to a Dream of Ruby Parser's Grammar
ydah
1
220
Hono・Prisma・AWSでGeoなAPI開発
nokonoko1203
5
680
事業フェーズの変化に対応する 開発生産性向上のゼロイチ
masaygggg
0
200
What you can do with Ruby on WebAssembly
kateinoigakukun
0
170
XStateでReactに秩序を与えたい
gizm000
0
730
LangChainの現在とv0.3にむけて
os1ma
4
920
rails_girls_is_my_gate_to_join_the_ruby_commuinty
maimux2x
0
200
大公開!iOS開発の悩みトップ5 〜iOSDC Japan 2024〜
ryunakayama
0
190
Featured
See All Featured
Automating Front-end Workflow
addyosmani
1365
200k
Why You Should Never Use an ORM
jnunemaker
PRO
53
8.9k
Build your cross-platform service in a week with App Engine
jlugia
228
18k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
25
3.9k
Making Projects Easy
brettharned
113
5.8k
Scaling GitHub
holman
458
140k
A Modern Web Designer's Workflow
chriscoyier
691
190k
The Illustrated Children's Guide to Kubernetes
chrisshort
47
48k
Designing for Performance
lara
604
68k
Product Roadmaps are Hard
iamctodd
PRO
48
10k
Statistics for Hackers
jakevdp
794
220k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
27
7.4k
Transcript
The Awesomeness of Angular 2
Ciro Nunes FRONT-END ENGINEER @cironunesdev / +cironunesdev / cironunes.com
Belo Horizonte - MG
None
None
None
The Awesomeness of Angular 2
but before…
The current state of Angular 1.x
15k+ forks angular/angular.js 1.2k+ contributors 37k+ stars Angular 1.x
1.4 New Router New I18n CommonJS support Better animation support
Performance improvements
Angular 2 ready 1.4 New Router New I18n CommonJS support
Better animation support Performance improvements
Angular 1.4 is the best Angular yet
1.5 is coming soon
The Awesomeness of Angular 2
None
None
Why a brand new version?
2009
None
2015
None
None
Reasons for a brand new version
Evolving web Reasons for a brand new version
Evolving web Reasons for a brand new version Focus
The awesomeness of Angular 2
Change detection The awesomeness of Angular 2
Change detection The awesomeness of Angular 2 Benefits of using
ES6
Change detection The awesomeness of Angular 2 Benefits of using
ES6 Template syntax
Disclaimer Angular 2 is currently in Alpha Preview
Change detection
Performance issues
None
None
Faster by nature Easier to reason about Trees
Immutable objects
None
None
Observable objects
None
None
None
None
Configurable 3-10x faster Trees instead of cycling graphs Change detection
http://victorsavkin.com/post/110170125256/change-detection-in-angular-2
Benefits from using ES6
“Classes" Angular 1.x angular.module('myApp') .controller('MyComponent', function() { this.meaningOfLife = 42;
});
Classes Angular 2 class MyComponent { constructor() { this.meaningOfLife =
42; } }
angular.module('myApp', ['myModule']); angular.module('myModule', []); Modules Angular 1
Modules Angular 2 export class MyModule {} import {MyModule} from
'module';
Directives Angular 1 angular.module('myApp') .directive('myComponent', function() { return { template:
'<p>Meaning of life is {{ meaningOfLife }}</p>', bindToController: true, controller: function() { this.meaningOfLife = 42; } }; })
Annotations (optional) @Component({ selector: 'my-component' }) @View({ template: `<p>The meaning
of life is {{ meaningOfLife }}</p>` }) class MyComponent { constructor() { this.meaningOfLife = 42; } }
Types (completely optional) @Component({ selector: 'my-component' }) @View({ template: `<p>The
meaning of life is {{ meaningOfLife }}</p>` }) class MyComponent { meaningOfLife: number; constructor() { this.meaningOfLife = 42; } }
Template syntax
Data-binding
<my-greeting person="Ciro"></my-greeting> <my-greeting person="{{vm.person}}"></my-greeting> <my-greeting person="vm.person"></my-greeting> Binding to components Angular
1
<my-greeting [person]="person"> <my-greeting person="Ciro"> Binding to components Angular 2
Events
<my-greeting greet="vm.smile()"></my-greeting> Angular 1 expression or statement
<my-greeting (greet)="smile()"></my-greeting> Angular 2 expression vs statement <my-greeting [greet]="smile()"></my-greeting>
Toolable Power in the hands of the user Fewer rules
to remember Template syntax Play nice with Web Components
DEMO TIME github.com/cironunes/cart2
Thanks! @cironunesdev / +cironunesdev / cironunes.com