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
41
Introdução ao GraphQL
paulohp
0
46
GraphQL 101
paulohp
0
83
Side Effects: Uma Saga até o React
paulohp
0
82
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
202507_ADKで始めるエージェント開発の基本 〜デモを通じて紹介〜(奥田りさ)The Basics of Agent Development with ADK — A Demo-Focused Introduction
risatube
PRO
6
1.4k
バイブスあるコーディングで ~PHP~ 便利ツールをつくるプラクティス
uzulla
1
310
Advanced Micro Frontends: Multi Version/ Framework Scenarios
manfredsteyer
PRO
0
140
副作用と戦う PHP リファクタリング ─ ドメインイベントでビジネスロジックを解きほぐす
kajitack
3
510
DMMを支える決済基盤の技術的負債にどう立ち向かうか / Addressing Technical Debt in Payment Infrastructure
yoshiyoshifujii
5
720
書き捨てではなく継続開発可能なコードをAIコーディングエージェントで書くために意識していること
shuyakinjo
0
170
Flutterと Vibe Coding で個人開発!
hyshu
1
210
「次に何を学べばいいか分からない」あなたへ──若手エンジニアのための学習地図
panda_program
3
700
Google I/O Extended Incheon 2025 ~ What's new in Android development tools
pluu
1
220
Android 15以上でPDFのテキスト検索を爆速開発!
tonionagauzzi
0
180
TypeScriptでDXを上げろ! Hono編
yusukebe
4
920
MCP連携で加速するAI駆動開発/mcp integration accelerates ai-driven-development
bpstudy
0
250
Featured
See All Featured
Building Applications with DynamoDB
mza
95
6.5k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
139
34k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
1k
Java REST API Framework Comparison - PWX 2021
mraible
32
8.7k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6k
How to train your dragon (web standard)
notwaldorf
96
6.1k
Producing Creativity
orderedlist
PRO
346
40k
For a Future-Friendly Web
brad_frost
179
9.9k
Site-Speed That Sticks
csswizardry
10
750
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.9k
A better future with KSS
kneath
238
17k
RailsConf 2023
tenderlove
30
1.2k
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!