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
Angular 2 e o futuro do desenvolvimento Front-end
Search
Ciro Nunes
September 19, 2015
Technology
2
1.3k
Angular 2 e o futuro do desenvolvimento Front-end
Ciro Nunes
September 19, 2015
Tweet
Share
More Decks by Ciro Nunes
See All by Ciro Nunes
Rust Front-end with Yew
cironunes
0
41
Type safe CSS with Reason
cironunes
0
100
What I've learned building automated docs for Ansarada's design system
cironunes
0
60
Beyond ng new
cironunes
2
190
Animate your Angular apps
cironunes
0
400
Sweet Angular, good forms never felt so good
cironunes
0
62
Sweet Angular, good forms never felt so good
cironunes
0
280
Progressive Angular apps
cironunes
3
870
Angular: Um framework. Mobile & desktop.
cironunes
1
580
Other Decks in Technology
See All in Technology
AndroidXR 開発ツールごとの できることできないこと
donabe3
0
110
CZII - CryoET Object Identification 参加振り返り・解法共有
tattaka
0
240
Ask! NIKKEIの運用基盤と改善に向けた取り組み / NIKKEI TECH TALK #30
kaitomajima
1
450
「海外登壇」という 選択肢を与えるために 〜Gophers EX
logica0419
0
500
偶然 × 行動で人生の可能性を広げよう / Serendipity × Action: Discover Your Possibilities
ar_tama
1
740
ハッキングの世界に迫る~攻撃者の思考で考えるセキュリティ~
nomizone
12
4.5k
開発スピードは上がっている…品質はどうする? スピードと品質を両立させるためのプロダクト開発の進め方とは #DevSumi #DevSumiB / Agile And Quality
nihonbuson
1
1.3k
【Developers Summit 2025】プロダクトエンジニアから学ぶ、 ユーザーにより高い価値を届ける技術
niwatakeru
2
890
データ資産をシームレスに伝達するためのイベント駆動型アーキテクチャ
kakehashi
PRO
2
230
アジャイル開発とスクラム
araihara
0
160
FastConnect の冗長性
ocise
1
9.6k
プロセス改善による品質向上事例
tomasagi
1
1.6k
Featured
See All Featured
BBQ
matthewcrist
86
9.5k
The Art of Programming - Codeland 2020
erikaheidi
53
13k
Done Done
chrislema
182
16k
We Have a Design System, Now What?
morganepeng
51
7.4k
Art, The Web, and Tiny UX
lynnandtonic
298
20k
GraphQLとの向き合い方2022年版
quramy
44
13k
Fontdeck: Realign not Redesign
paulrobertlloyd
82
5.4k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
3
310
Site-Speed That Sticks
csswizardry
3
370
Raft: Consensus for Rubyists
vanstee
137
6.8k
Intergalactic Javascript Robots from Outer Space
tanoku
270
27k
Statistics for Hackers
jakevdp
797
220k
Transcript
None
Directives Separation of Concerns (MVC) Data-binding Dependency Injection
None
––≠
ngEurope, Outubro, 2014 Versão 2.0 anunciada oficialmente!
Angular 2 e o futuro do desenvolvimento Front-end
Angular 2 está em Alpha Preview Angular 1.x ainda é
o melhor para produção
30 min
30 min Slides: cnunes.com/angular2-future
@cironunesdev
Belo Horizonte - MG
None
None
None
Angular 2 e o futuro do desenvolvimento Front-end
1. Por que uma nova versão? 2. O que a
nova versão terá de melhor? 3. Como me preparar para o futuro?
1. Por que uma nova versão?
Decisões de design equivocadas & Evolução da plataforma
$scope e $digest cycle Directive Definition Object Global Dependency Injector
Decisões de design
Web Components ES2015/2016 Web Workers Mobile apps Offline Evolução da
plataforma
Incremental vs Big Bang
None
2. O que a nova versão vai ter de melhor?
Padrões web Template Syntax Change detection
Padrões web
Padrões web Directives and transclusion
Web Components and content projection Padrões web Directives and transclusion
Title Lorem ipsum dolor sit amet
http://cnun.es/angular1-transclusion
<my-card title="This is the title"> <p>This is the content</p> </my-card>
<my-card title="This is the title"> <p>This is the content</p> </my-card>
Property binding
<my-card title="This is the title"> <p>This is the content</p> </my-card>
Property binding Transclusion
<div class="component"> <h1>{{ title }}</h1> <div ng-transclude></div> </div>
<div class="component"> <h1>{{ title }}</h1> <div ng-transclude></div> </div> Property binding
<div class="component"> <h1>{{ title }}</h1> <div ng-transclude></div> </div> Transclusion Property
binding
app.directive('myCard', function() { return { templateUrl: 'my-card.html', scope: { title:
'@' }, transclude: true }; });
app.directive('myCard', function() { return { templateUrl: 'my-card.html', scope: { title:
'@' }, transclude: true }; }); Property binding
app.directive('myCard', function() { return { templateUrl: 'my-card.html', scope: { title:
'@' }, transclude: true }; }); Property binding Transclusion
http://cnun.es/angular2-content-projection
<my-card [title]="'This is title'"> <p>This is the content</p> </my-card>
<my-card [title]="'This is title'"> <p>This is the content</p> </my-card> Property
binding
<my-card [title]="'This is title'"> <p>This is the content</p> </my-card> Property
binding Content projection
<div class="my-card"> <h1>{{ title }}</h1> <content></content> </div>
<div class="my-card"> <h1>{{ title }}</h1> <content></content> </div> Property binding
<div class="my-card"> <h1>{{ title }}</h1> <content></content> </div> Content projection Property
binding
import { Component, View, ViewEncapsulation } from 'angular2/angular2'; @Component({ selector:
'my-card', properties: ['title'] }) @View({ encapsulation: ViewEncapsulation.Native templateUrl: 'my-card.html' }) class MyComponent {}
import { Component, View, ViewEncapsulation } from 'angular2/angular2'; @Component({ selector:
'my-card', properties: ['title'] }) @View({ encapsulation: ViewEncapsulation.Native templateUrl: 'my-card.html' }) class MyComponent {} Property binding
import { Component, View, ViewEncapsulation } from 'angular2/angular2'; @Component({ selector:
'my-card', properties: ['title'] }) @View({ encapsulation: ViewEncapsulation.Native templateUrl: 'my-card.html' }) class MyComponent {} Property binding Content projection
Padrões web
Encapsulamento de componentes Padrões web
Encapsulamento de componentes Padrões web Shadow DOM
Encapsulamento de componentes Padrões web Shadow DOM ES2016/2017 (TypeScript): optional
Template Syntax http://cnun.es/angular2-template
<my-card title="{{ title }}" visible="visible" remove="onRemove()"> </my-card>
<my-card title="{{ title }}" visible="visible" remove="onRemove()"> </my-card> Entrada
<my-card title="{{ title }}" visible="visible" remove="onRemove()"> </my-card> Entrada Entrada
<my-card title="{{ title }}" visible="visible" remove="onRemove()"> </my-card> Entrada Saída Entrada
<my-card title="{{ title }}" visible="visible" remove="onRemove()"> </my-card> Entrada Saída Entrada
scope: { title: '@', visible: '=', remove: '&' }
<my-card [title]="title" [visible]="visible" (remove)="onRemove()"> </my-card>
<my-card [title]="title" [visible]="visible" (remove)="onRemove()"> </my-card> Entrada
<my-card [title]="title" [visible]="visible" (remove)="onRemove()"> </my-card> Entrada Entrada
<my-card [title]="title" [visible]="visible" (remove)="onRemove()"> </my-card> Saída Entrada
Menos regras para memorizar HTML válido Sintaxe semântica Template syntax
Change detection
Cycling graphs Change detection
Cycling graphs Change detection Tree of components
None
http://victorsavkin.com/post/110170125256/change-detection-in-angular-2
Immutable objects http://victorsavkin.com/post/110170125256/change-detection-in-angular-2
Immutable objects http://victorsavkin.com/post/110170125256/change-detection-in-angular-2
Immutable objects http://victorsavkin.com/post/110170125256/change-detection-in-angular-2
Immutable objects @Component({ changeDetection:ON_PUSH }) http://victorsavkin.com/post/110170125256/change-detection-in-angular-2
Tree of components Change detection Mais rápido por natureza 3~5x
mais rápido Suporte a diferentes estratégias
3. Como me preparar para o futuro?
Aposte nos padrões web
Aposte nos padrões web
Comece a usar ES6 hoje
Comece a usar ES6 hoje
Comece a usar ES6 hoje
Siga guia de estilo do John Papa
None
Veja alguns apps em Angular 2
github.com/cironunes/cart2 github.com/cironunes/worst-player-award builtwithangular2.com/ Angular 2 apps
Angular 2
Plataforma de desenvolvimento para evergreen browsers Angular 2
Plataforma de desenvolvimento para evergreen browsers Angular 2 Change detection
até 8x mais rápido que na versão 1.x
Plataforma de desenvolvimento para evergreen browsers Angular 2 Change detection
até 8x mais rápido que na versão 1.x Suporte a Web Componentes e outros padrões
Plataforma de desenvolvimento para evergreen browsers Angular 2 Change detection
até 8x mais rápido que na versão 1.x Suporte a Web Componentes e outros padrões Sintaxe mais semântica e com menos regras
Perguntas? @cironunesdev