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
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 Technology
See All in Technology
PdMはどのように全てのスピードを上げられるか ~ 非連続進化のための具体的な取り組み ~
sansantech
PRO
4
1.3k
20240912 JJUGナイトセミナー
mii1004
0
140
サプライチェーン攻撃に備える
ryunen344
0
290
Developer Experienceを向上させる基盤づくりの取り組み事例集
coconala_engineer
0
150
あなたの知らないiOS開発の世界
recruitengineers
PRO
3
180
AI活用したくてもできなかった不動産SaaSの今とこれから
nealle
0
330
Technical Writing Meetup vol.35
soracom
PRO
2
120
Privacy Sandbox on Android / DroidKaigi 2024
7pairs
1
270
株式会社EventHub・エンジニア採用資料
eventhub
0
2.9k
PDF Viewer作成の今までとこれから
hunachi
0
470
内製化を目指す事業会社が、システム開発会社と共に進める「開発生産性改善」の取り組み事例 #devsumi
yuwji
0
100
Classmethod AI Talks(CATs) #1 司会進行スライド(2024.09.19) / classmethod-ai-talks-aka-cats_moderator-slides_vol1_2024-09-19
shinyaa31
0
110
Featured
See All Featured
Building an army of robots
kneath
302
42k
Scaling GitHub
holman
458
140k
The Power of CSS Pseudo Elements
geoffreycrofte
71
5.3k
Bootstrapping a Software Product
garrettdimon
PRO
304
110k
Optimising Largest Contentful Paint
csswizardry
31
2.8k
The Invisible Side of Design
smashingmag
296
50k
We Have a Design System, Now What?
morganepeng
48
7.1k
Building Applications with DynamoDB
mza
90
6k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
89
16k
5 minutes of I Can Smell Your CMS
philhawksworth
202
19k
How to Think Like a Performance Engineer
csswizardry
16
960
XXLCSS - How to scale CSS and keep your sanity
sugarenia
246
1.3M
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