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
36
Type safe CSS with Reason
cironunes
0
88
What I've learned building automated docs for Ansarada's design system
cironunes
0
54
Beyond ng new
cironunes
2
190
Animate your Angular apps
cironunes
0
380
Sweet Angular, good forms never felt so good
cironunes
0
51
Sweet Angular, good forms never felt so good
cironunes
0
270
Progressive Angular apps
cironunes
3
860
Angular: Um framework. Mobile & desktop.
cironunes
1
560
Other Decks in Technology
See All in Technology
社内アプリで Cloudflare D1を プロダクト運用してみた体験談(Tokyo)
haochenx
0
130
LayerXにおけるLLMプロダクト開発の今までとこれから
layerx
PRO
4
790
M5と自作基板をくっつけてみた〜M5 Japan Tour 2024 Spring 福冈 (Fukuoka|福岡)〜
keropiyo
0
190
Azureの基本的な権限管理の勉強会
yhana
1
2.2k
ルーターでプレゼンする
puhitaku
1
3.4k
コードや知識を組み込む / Incorporate Code and knowledge
ks91
PRO
0
150
Gemini, Google's Large Language Model
glaforge
0
110
ExaDB-D dbaascli で出来ること
oracle4engineer
PRO
0
2.1k
Building Dashboards as a Hobby
egmc
0
400
中年男性がメインフレームから クラウドへキャリアシフトしてみた
uechishingo
0
340
開発パフォーマンスを最大化するための開発体制
ham0215
7
1.2k
MapLibreとAmazon Location Service
dayjournal
1
190
Featured
See All Featured
How STYLIGHT went responsive
nonsquared
92
4.8k
Creatively Recalculating Your Daily Design Routine
revolveconf
211
11k
GraphQLとの向き合い方2022年版
quramy
33
12k
BBQ
matthewcrist
80
8.8k
Happy Clients
brianwarren
92
6.4k
The Brand Is Dead. Long Live the Brand.
mthomps
49
29k
Thoughts on Productivity
jonyablonski
60
3.9k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
22
1.6k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
188
16k
A better future with KSS
kneath
231
16k
A Tale of Four Properties
chriscoyier
153
22k
Building Adaptive Systems
keathley
32
1.9k
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