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
35
Introdução ao GraphQL
paulohp
0
41
GraphQL 101
paulohp
0
74
Side Effects: Uma Saga até o React
paulohp
0
79
MobX: State Management made easy
paulohp
0
81
Docker: The Rise of Containers
paulohp
0
85
We Work Remotely
paulohp
2
89
Node.js Codelab
paulohp
1
170
NodeBR, um ano memoravel!
paulohp
0
88
Other Decks in Programming
See All in Programming
Ruby on cygwin 2025-02
fd0
0
150
ARA Ansible for the teams
kksat
0
150
SwiftUI Viewの責務分離
elmetal
PRO
2
250
プログラミング言語学習のススメ / why-do-i-learn-programming-language
yashi8484
0
140
Bedrock Agentsレスポンス解析によるAgentのOps
licux
3
880
昭和の職場からアジャイルの世界へ
kumagoro95
1
400
Amazon S3 TablesとAmazon S3 Metadataを触ってみた / 20250201-jawsug-tochigi-s3tables-s3metadata
kasacchiful
0
180
Flutter × Firebase Genkit で加速する生成 AI アプリ開発
coborinai
0
160
コミュニティ駆動 AWS CDK ライブラリ「Open Constructs Library」 / community-cdk-library
gotok365
2
170
Djangoアプリケーション 運用のリアル 〜問題発生から可視化、最適化への道〜 #pyconshizu
kashewnuts
1
250
Unity Android XR入門
sakutama_11
0
160
技術を根付かせる / How to make technology take root
kubode
1
250
Featured
See All Featured
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
193
16k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
129
19k
Measuring & Analyzing Core Web Vitals
bluesmoon
6
240
What's in a price? How to price your products and services
michaelherold
244
12k
A better future with KSS
kneath
238
17k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
10
1.3k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
7.1k
Art, The Web, and Tiny UX
lynnandtonic
298
20k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
100
18k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
How to train your dragon (web standard)
notwaldorf
91
5.8k
The Language of Interfaces
destraynor
156
24k
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!