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
230
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
44
Introdução ao GraphQL
paulohp
0
47
GraphQL 101
paulohp
0
85
Side Effects: Uma Saga até o React
paulohp
0
84
MobX: State Management made easy
paulohp
0
87
Docker: The Rise of Containers
paulohp
0
92
We Work Remotely
paulohp
2
96
Node.js Codelab
paulohp
1
170
NodeBR, um ano memoravel!
paulohp
0
95
Other Decks in Programming
See All in Programming
CI_CD「健康診断」のススメ。現場でのボトルネック特定から、健康診断を通じた組織的な改善手法
teamlab
PRO
0
150
Serena MCPのすすめ
wadakatu
4
820
詳しくない分野でのVibe Codingで困ったことと学び/vibe-coding-in-unfamiliar-area
shibayu36
1
490
Back to the Future: Let me tell you about the ACP protocol
terhechte
0
120
麻雀点数計算問題生成タスクから学ぶ Single Agentの限界と Agentic Workflowの底力
po3rin
5
2k
iOSアプリの信頼性を向上させる取り組み/ios-app-improve-reliability
shino8rayu9
0
120
なぜGoのジェネリクスはこの形なのか? Featherweight Goが明かす設計の核心
ryotaros
7
980
LLMとPlaywright/reg-suitを活用した jQueryリファクタリングの実際
kinocoboy2
4
650
株式会社 Sun terras カンパニーデック
sunterras
0
170
TokyoR#119 bignners session2 Visualization
kotatyamtema
0
130
Advance Your Career with Open Source
ivargrimstad
0
200
私達はmodernize packageに夢を見るか feat. go/analysis, go/ast / Go Conference 2025
kaorumuta
2
390
Featured
See All Featured
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
2.6k
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.4k
Practical Orchestrator
shlominoach
190
11k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
114
20k
Code Review Best Practice
trishagee
72
19k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.5k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Building an army of robots
kneath
306
46k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
132
19k
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!