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
Angular2
Search
Paulo Pires
May 28, 2015
Programming
0
220
Angular2
Talk apresentada no Google I/O Extended BH onde mostro minhas impressões sobre o Angular2
Paulo Pires
May 28, 2015
Tweet
Share
More Decks by Paulo Pires
See All by Paulo Pires
Introdução ao WebAssembly
paulohp
0
41
Introdução ao GraphQL
paulohp
0
45
GraphQL 101
paulohp
0
82
Side Effects: Uma Saga até o React
paulohp
0
81
MobX: State Management made easy
paulohp
0
86
Docker: The Rise of Containers
paulohp
0
90
We Work Remotely
paulohp
2
96
Node.js Codelab
paulohp
1
170
NodeBR, um ano memoravel!
paulohp
0
94
Other Decks in Programming
See All in Programming
Is Xcode slowly dying out in 2025?
uetyo
1
260
ペアプロ × 生成AI 現場での実践と課題について / generative-ai-in-pair-programming
codmoninc
1
14k
Kotlin エンジニアへ送る:Swift 案件に参加させられる日に備えて~似てるけど色々違う Swift の仕様 / from Kotlin to Swift
lovee
1
260
AIと”コードの評価関数”を共有する / Share the "code evaluation function" with AI
euglena1215
1
140
猫と暮らす Google Nest Cam生活🐈 / WebRTC with Google Nest Cam
yutailang0119
0
100
VS Code Update for GitHub Copilot
74th
2
620
datadog dash 2025 LLM observability for reliability and stability
ivry_presentationmaterials
0
450
スタートアップの急成長を支えるプラットフォームエンジニアリングと組織戦略
sutochin26
0
4k
Hypervel - A Coroutine Framework for Laravel Artisans
albertcht
1
110
関数型まつりレポート for JuliaTokai #22
antimon2
0
160
AIエージェントはこう育てる - GitHub Copilot Agentとチームの共進化サイクル
koboriakira
0
500
生成AIコーディングとの向き合い方、AIと共創するという考え方 / How to deal with generative AI coding and the concept of co-creating with AI
seike460
PRO
1
360
Featured
See All Featured
Reflections from 52 weeks, 52 projects
jeffersonlam
351
20k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
What's in a price? How to price your products and services
michaelherold
246
12k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Embracing the Ebb and Flow
colly
86
4.7k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
5
250
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
The Language of Interfaces
destraynor
158
25k
Visualization
eitanlees
146
16k
Gamification - CAS2011
davidbonilla
81
5.3k
Producing Creativity
orderedlist
PRO
346
40k
Transcript
Angular 2 Minhas Impressões
@Component({selector: 'talk'}) @View({template: '<h1>Google I/O</h1>'}) // Component controller class TalkComponent
{ constructor() { this.name = 'Paulo Pires'; this.twitter = '@paulo_hp'; } }
None
None
Angular 1.x
Angular 1.4 Performance Melhorada Novo Router e i18n Suporte a
CommonJS Melhoria nas animações E muito mais...
Angular 1.4 (use este hoje!)
Angular 1.5 (pode ser o elo até o 2.0)
Angular 2
/angular/angular
TypeScript typescriptlang.org
Será que a checagem de tipo em tempo de execução
pode deixar a app mais lenta? pergunta
Eu devo usar o TypeScript para meu novo app em
Angular2? pergunta
es6rocks.com
webcomponents.org
Sem controllers
3 tipos de directives
@Component
@Viewport
@Decorator
Mas isso não quebra a separação de 'concerns' que o
Angular tanto prega? pergunta
Então vou ter que mudar tudo? Converter todos meus controllers
para directives? pergunta
O Angular2 é tipo o React.js, no fim das contas?
Vou ter que escrever HTML inline? pergunta
Sem Two-Way data-binding
Agora vou ter que manipular e construir formularios na unha?
pergunta
Fluxo de dados unidirecional... Posso usar Flux? pergunta
Então o Angular2 é o React implementado pela Google? pergunta
Novo Router
/angular/router
Começo meu novo projeto com o Router velho ou com
o novo? pergunta
Real Modules
Tchau $scope
@Component({ selector: 'sample-app', componentServices: [ NameList ] }) @Template({ url:
'./templates/sample-app.html', directives: [Foreach] }) class SampleApp { constructor() { this.names = NameList.get(); this.newName = ''; } addName(newname) { this.names.push(newname.value); newname.value = ''; } }
... <ul> <li *foreach="#name in names"></li> </ul> ...
Ultra Fast Change Detection
DI Melhorada
/angular/di.js
import {Inject} from 'di'; import {Electricity} from './electricity'; @Inject(Electricity) export
class Fridge { constructor(electricity) { this.electricity = electricity; } getEggs() { return '3 eggs'; } }
None
Não esta pronto para producão!
None
Experimente!
perguntas?
Obrigado!