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
58
Beyond ng new
cironunes
2
190
Animate your Angular apps
cironunes
0
400
Sweet Angular, good forms never felt so good
cironunes
0
61
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
組み込みLinuxの時系列
puhitaku
4
1k
3次元点群データ「VIRTUAL SHIZUOKA』のオープンデータ化による恩恵と協働の未来/FOSS4G Japan 2024
kazz24s
0
130
隣接領域をBeyondするFinatextのエンジニア組織設計 / beyond-engineering-areas
stajima
1
230
State of Open Source Web Mapping Libraries
dayjournal
0
200
AWS⼊社という選択肢、⾒えていますか
iwamot
2
1.1k
Oracle Cloud Infrastructureデータベース・クラウド:各バージョンのサポート期間
oracle4engineer
PRO
28
12k
軽量DDDはもういらない! スタイルガイド本で OOPの実装パターンを学ぼう
panda_program
29
11k
地理情報データをデータベースに格納しよう~ GPUを活用した爆速データベース PG-Stromの紹介 ~
sakaik
1
110
FOSS4G 2024 Japan コアデイ 一般発表25 PythonでPLATEAUのデータを手軽に扱ってみる
ra0kley
1
130
マイベストのデータ基盤の現在と未来 / mybest-data-infra-asis-tobe
mybestinc
2
1.9k
ISUCONに強くなるかもしれない日々の過ごしかた/Findy ISUCON 2024-11-14
fujiwara3
7
560
サイバーセキュリティと認知バイアス:対策の隙を埋める心理学的アプローチ
shumei_ito
0
200
Featured
See All Featured
Making the Leap to Tech Lead
cromwellryan
133
8.9k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
26
1.4k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
42
2.2k
Git: the NoSQL Database
bkeepers
PRO
427
64k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
169
50k
VelocityConf: Rendering Performance Case Studies
addyosmani
325
24k
Building Adaptive Systems
keathley
38
2.3k
Designing Experiences People Love
moore
138
23k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
92
16k
The Cost Of JavaScript in 2023
addyosmani
45
6.7k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
191
16k
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