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
40
Type safe CSS with Reason
cironunes
0
99
What I've learned building automated docs for Ansarada's design system
cironunes
0
59
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
570
Other Decks in Technology
See All in Technology
DMMブックスへのTipKit導入
ttyi2
1
110
2025年の挑戦 コーポレートエンジニアの技術広報/techpr5
nishiuma
0
150
2024年活動報告会(人材育成推進WG・ビジネスサブWG) / 20250114-OIDF-J-EduWG-BizSWG
oidfj
0
240
東京Ruby会議12 Ruby と Rust と私 / Tokyo RubyKaigi 12 Ruby, Rust and me
eagletmt
3
880
Visual StudioとかIDE関連小ネタ話
kosmosebi
1
380
AWS re:Invent 2024 re:Cap Taipei (for Developer): New Launches that facilitate Developer Workflow and Continuous Innovation
dwchiang
0
170
CDKのコードレビューを楽にするパッケージcdk-mentorを作ってみた/cdk-mentor
tomoki10
0
210
2025年に挑戦したいこと
molmolken
0
160
Alignment and Autonomy in Cybozu - 300人の開発組織でアラインメントと自律性を両立させるアジャイルな組織運営 / RSGT2025
ama_ch
1
2.4k
Docker Desktop で Docker を始めよう
zembutsu
PRO
0
180
今年一年で頑張ること / What I will do my best this year
pauli
1
220
駆け出しリーダーとしての第一歩〜開発チームとの新しい関わり方〜 / Beginning Journey as Team Leader
kaonavi
0
130
Featured
See All Featured
Optimizing for Happiness
mojombo
376
70k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
Why Our Code Smells
bkeepers
PRO
335
57k
Practical Orchestrator
shlominoach
186
10k
[RailsConf 2023] Rails as a piece of cake
palkan
53
5.1k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
3
180
Bash Introduction
62gerente
610
210k
The Language of Interfaces
destraynor
155
24k
How to Think Like a Performance Engineer
csswizardry
22
1.3k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
7k
Building Adaptive Systems
keathley
38
2.4k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.2k
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