o futuro dos webapps com angularjs 2.0
TRANSCRIPT
![Page 1: O futuro dos WebApps com AngularJS 2.0](https://reader030.vdocuments.pub/reader030/viewer/2022032616/55a7906b1a28ab30478b4683/html5/thumbnails/1.jpg)
O futuro dos WebApps com
Wilson Mendes@willmendesneto
2.0
![Page 2: O futuro dos WebApps com AngularJS 2.0](https://reader030.vdocuments.pub/reader030/viewer/2022032616/55a7906b1a28ab30478b4683/html5/thumbnails/2.jpg)
![Page 3: O futuro dos WebApps com AngularJS 2.0](https://reader030.vdocuments.pub/reader030/viewer/2022032616/55a7906b1a28ab30478b4683/html5/thumbnails/3.jpg)
Wilson Mendes@willmendesneto
#developer
#opensource
#ThoughtWorker
#GDE AngularJS
Wilson Mendes@willmendesneto
![Page 4: O futuro dos WebApps com AngularJS 2.0](https://reader030.vdocuments.pub/reader030/viewer/2022032616/55a7906b1a28ab30478b4683/html5/thumbnails/4.jpg)
Era uma vez...
Marco inicial: 2009
Primeiro produto: Double Click
![Page 5: O futuro dos WebApps com AngularJS 2.0](https://reader030.vdocuments.pub/reader030/viewer/2022032616/55a7906b1a28ab30478b4683/html5/thumbnails/5.jpg)
Conceitos
Programação: imperativa x declativa
![Page 6: O futuro dos WebApps com AngularJS 2.0](https://reader030.vdocuments.pub/reader030/viewer/2022032616/55a7906b1a28ab30478b4683/html5/thumbnails/6.jpg)
1.0
![Page 7: O futuro dos WebApps com AngularJS 2.0](https://reader030.vdocuments.pub/reader030/viewer/2022032616/55a7906b1a28ab30478b4683/html5/thumbnails/7.jpg)
Projetos
Issues
Pull Requests
++ 1600
![Page 8: O futuro dos WebApps com AngularJS 2.0](https://reader030.vdocuments.pub/reader030/viewer/2022032616/55a7906b1a28ab30478b4683/html5/thumbnails/8.jpg)
Projetos
Issues
Pull Requests
++ 1600
50%
Comunidade
Vem da
![Page 9: O futuro dos WebApps com AngularJS 2.0](https://reader030.vdocuments.pub/reader030/viewer/2022032616/55a7906b1a28ab30478b4683/html5/thumbnails/9.jpg)
Github
![Page 10: O futuro dos WebApps com AngularJS 2.0](https://reader030.vdocuments.pub/reader030/viewer/2022032616/55a7906b1a28ab30478b4683/html5/thumbnails/10.jpg)
![Page 11: O futuro dos WebApps com AngularJS 2.0](https://reader030.vdocuments.pub/reader030/viewer/2022032616/55a7906b1a28ab30478b4683/html5/thumbnails/11.jpg)
![Page 12: O futuro dos WebApps com AngularJS 2.0](https://reader030.vdocuments.pub/reader030/viewer/2022032616/55a7906b1a28ab30478b4683/html5/thumbnails/12.jpg)
DESCOBRIMOS MUITAS COISASBOAS DESDE A CRIAÇÃO DO
ANGULARJS
![Page 13: O futuro dos WebApps com AngularJS 2.0](https://reader030.vdocuments.pub/reader030/viewer/2022032616/55a7906b1a28ab30478b4683/html5/thumbnails/13.jpg)
JS EVERYWHERE
CHROME DEVTOOLS
MOBILE
INTERNET OF THINGS
![Page 14: O futuro dos WebApps com AngularJS 2.0](https://reader030.vdocuments.pub/reader030/viewer/2022032616/55a7906b1a28ab30478b4683/html5/thumbnails/14.jpg)
#codetime
https://github.com/willmendesneto/social-share
![Page 15: O futuro dos WebApps com AngularJS 2.0](https://reader030.vdocuments.pub/reader030/viewer/2022032616/55a7906b1a28ab30478b4683/html5/thumbnails/15.jpg)
ROTAS
NG-ROUTER X UI-ROUTER
https://medium.com/angularjs-meetup-south-london/angular-just-another-introduction-to-ngnewrouter-vs-ui-router-72bfcb228017
![Page 16: O futuro dos WebApps com AngularJS 2.0](https://reader030.vdocuments.pub/reader030/viewer/2022032616/55a7906b1a28ab30478b4683/html5/thumbnails/16.jpg)
INTERNACIONALIZAÇÃO
![Page 17: O futuro dos WebApps com AngularJS 2.0](https://reader030.vdocuments.pub/reader030/viewer/2022032616/55a7906b1a28ab30478b4683/html5/thumbnails/17.jpg)
FORMULÁRIOS
![Page 18: O futuro dos WebApps com AngularJS 2.0](https://reader030.vdocuments.pub/reader030/viewer/2022032616/55a7906b1a28ab30478b4683/html5/thumbnails/18.jpg)
DIRETIVAS
Componentizar sua aplicação tornou-sealgo simples
![Page 19: O futuro dos WebApps com AngularJS 2.0](https://reader030.vdocuments.pub/reader030/viewer/2022032616/55a7906b1a28ab30478b4683/html5/thumbnails/19.jpg)
![Page 20: O futuro dos WebApps com AngularJS 2.0](https://reader030.vdocuments.pub/reader030/viewer/2022032616/55a7906b1a28ab30478b4683/html5/thumbnails/20.jpg)
++ANIMATIONS
Criar e integrar animações para suaaplicação tornou-se algo simples
![Page 21: O futuro dos WebApps com AngularJS 2.0](https://reader030.vdocuments.pub/reader030/viewer/2022032616/55a7906b1a28ab30478b4683/html5/thumbnails/21.jpg)
NÃO QUER COMEÇAR DO ZERO?
Podemos ajudar
;)
Macgyver
Angular-ui
Angularstrap
NgTasty
Keepr
![Page 22: O futuro dos WebApps com AngularJS 2.0](https://reader030.vdocuments.pub/reader030/viewer/2022032616/55a7906b1a28ab30478b4683/html5/thumbnails/22.jpg)
++MODULARIZAÇÃO
![Page 23: O futuro dos WebApps com AngularJS 2.0](https://reader030.vdocuments.pub/reader030/viewer/2022032616/55a7906b1a28ab30478b4683/html5/thumbnails/23.jpg)
angular.modules();
Modularizar é a alma do negócio
Porque não compartilharmos nossosmódulos?
![Page 24: O futuro dos WebApps com AngularJS 2.0](https://reader030.vdocuments.pub/reader030/viewer/2022032616/55a7906b1a28ab30478b4683/html5/thumbnails/24.jpg)
http://bower.io
![Page 25: O futuro dos WebApps com AngularJS 2.0](https://reader030.vdocuments.pub/reader030/viewer/2022032616/55a7906b1a28ab30478b4683/html5/thumbnails/25.jpg)
http://ngmodules.org
![Page 26: O futuro dos WebApps com AngularJS 2.0](https://reader030.vdocuments.pub/reader030/viewer/2022032616/55a7906b1a28ab30478b4683/html5/thumbnails/26.jpg)
APRENDEMOS QUE PROJETOSGRANDES SE PREOCUPAM COM
SEUS USUÁRIOS
![Page 27: O futuro dos WebApps com AngularJS 2.0](https://reader030.vdocuments.pub/reader030/viewer/2022032616/55a7906b1a28ab30478b4683/html5/thumbnails/27.jpg)
NÃO ESCONDEMOS O PROBLEMA
![Page 28: O futuro dos WebApps com AngularJS 2.0](https://reader030.vdocuments.pub/reader030/viewer/2022032616/55a7906b1a28ab30478b4683/html5/thumbnails/28.jpg)
Facilidade para integrar bibliotecasExternas como jQuery, Lodash, Moment e
outras
ONDE PODEMOS MELHORAR
![Page 29: O futuro dos WebApps com AngularJS 2.0](https://reader030.vdocuments.pub/reader030/viewer/2022032616/55a7906b1a28ab30478b4683/html5/thumbnails/29.jpg)
Alterações bruscas sempre são avisadascom antecedência
UPDATES? NO PROBLEM
![Page 30: O futuro dos WebApps com AngularJS 2.0](https://reader030.vdocuments.pub/reader030/viewer/2022032616/55a7906b1a28ab30478b4683/html5/thumbnails/30.jpg)
https://docs.angularjs.org/guide/migration
![Page 31: O futuro dos WebApps com AngularJS 2.0](https://reader030.vdocuments.pub/reader030/viewer/2022032616/55a7906b1a28ab30478b4683/html5/thumbnails/31.jpg)
Projetos grandes precisam de organização
ONDE PODEMOS MELHORAR
![Page 32: O futuro dos WebApps com AngularJS 2.0](https://reader030.vdocuments.pub/reader030/viewer/2022032616/55a7906b1a28ab30478b4683/html5/thumbnails/32.jpg)
John Papa + Todd Motto
=
AngularJs Style guide
![Page 33: O futuro dos WebApps com AngularJS 2.0](https://reader030.vdocuments.pub/reader030/viewer/2022032616/55a7906b1a28ab30478b4683/html5/thumbnails/33.jpg)
Testes são fáceis, mas onde encontro:
Boas práticas?Exemplos?
Dicas?
ONDE PODEMOS MELHORAR
![Page 34: O futuro dos WebApps com AngularJS 2.0](https://reader030.vdocuments.pub/reader030/viewer/2022032616/55a7906b1a28ab30478b4683/html5/thumbnails/34.jpg)
Wilson Mendes + Ciro Nunes
=
AngularJs Testing Recipes
![Page 35: O futuro dos WebApps com AngularJS 2.0](https://reader030.vdocuments.pub/reader030/viewer/2022032616/55a7906b1a28ab30478b4683/html5/thumbnails/35.jpg)
...ainda faltava algo
COMEÇAMOS BEM, MAS...
![Page 36: O futuro dos WebApps com AngularJS 2.0](https://reader030.vdocuments.pub/reader030/viewer/2022032616/55a7906b1a28ab30478b4683/html5/thumbnails/36.jpg)
#WHAT ??
![Page 37: O futuro dos WebApps com AngularJS 2.0](https://reader030.vdocuments.pub/reader030/viewer/2022032616/55a7906b1a28ab30478b4683/html5/thumbnails/37.jpg)
!==
![Page 38: O futuro dos WebApps com AngularJS 2.0](https://reader030.vdocuments.pub/reader030/viewer/2022032616/55a7906b1a28ab30478b4683/html5/thumbnails/38.jpg)
Performance
Injeção de dependência
Facilidade para alterar comportamentos dosbindings
Aprender a sintaxe “like AngularJS”
![Page 39: O futuro dos WebApps com AngularJS 2.0](https://reader030.vdocuments.pub/reader030/viewer/2022032616/55a7906b1a28ab30478b4683/html5/thumbnails/39.jpg)
NOVOS DESAFIOSNOVAS NECESSIDADES
2.0
![Page 40: O futuro dos WebApps com AngularJS 2.0](https://reader030.vdocuments.pub/reader030/viewer/2022032616/55a7906b1a28ab30478b4683/html5/thumbnails/40.jpg)
Removendo dependências externas paramanipulações do DOM
* jQuery/jQlite/etc
MANIPULAÇÃO DE DOM
![Page 41: O futuro dos WebApps com AngularJS 2.0](https://reader030.vdocuments.pub/reader030/viewer/2022032616/55a7906b1a28ab30478b4683/html5/thumbnails/41.jpg)
New router
Correções de bugs das rotas
Nested routers
ROTAS NO ANGULAR 2.0
![Page 42: O futuro dos WebApps com AngularJS 2.0](https://reader030.vdocuments.pub/reader030/viewer/2022032616/55a7906b1a28ab30478b4683/html5/thumbnails/42.jpg)
Melhorias no algoritmo
(DOM virtual? Não utilizamos)
TWO WAY DATA BINDING 2.0
![Page 43: O futuro dos WebApps com AngularJS 2.0](https://reader030.vdocuments.pub/reader030/viewer/2022032616/55a7906b1a28ab30478b4683/html5/thumbnails/43.jpg)
Web Components
Shadow DOM spec
Agora a brincadeira começa a ficar séria
DIRECTIVES 2.0
![Page 44: O futuro dos WebApps com AngularJS 2.0](https://reader030.vdocuments.pub/reader030/viewer/2022032616/55a7906b1a28ab30478b4683/html5/thumbnails/44.jpg)
$scope is the glue
$scope is dead
![Page 45: O futuro dos WebApps com AngularJS 2.0](https://reader030.vdocuments.pub/reader030/viewer/2022032616/55a7906b1a28ab30478b4683/html5/thumbnails/45.jpg)
this is the glue
++Javascript like
$scope
![Page 46: O futuro dos WebApps com AngularJS 2.0](https://reader030.vdocuments.pub/reader030/viewer/2022032616/55a7906b1a28ab30478b4683/html5/thumbnails/46.jpg)
Immutable Data
Estado não pode ser alterado após criação
Thread safe (sem alterações)
Bons para se usar como chave hash
![Page 47: O futuro dos WebApps com AngularJS 2.0](https://reader030.vdocuments.pub/reader030/viewer/2022032616/55a7906b1a28ab30478b4683/html5/thumbnails/47.jpg)
Mori.js
Baseada em ClojureScript’s
Imutabilidade
![Page 48: O futuro dos WebApps com AngularJS 2.0](https://reader030.vdocuments.pub/reader030/viewer/2022032616/55a7906b1a28ab30478b4683/html5/thumbnails/48.jpg)
Immutable.js
Immutable.js fits better with the rest of the JSecosystem in my opinion, because it is designed
for and written in JS, rather than ClojureScript. TheAPI follows the native Array API where possible,
so it's a lot easier to switch between the two.“Lee Byron, Interactive Information Designer at Facebook
![Page 49: O futuro dos WebApps com AngularJS 2.0](https://reader030.vdocuments.pub/reader030/viewer/2022032616/55a7906b1a28ab30478b4683/html5/thumbnails/49.jpg)
Angular-immutable
http://blog.mgechev.com/2015/03/02/immutability-in-angularjs-immutablejs/
![Page 50: O futuro dos WebApps com AngularJS 2.0](https://reader030.vdocuments.pub/reader030/viewer/2022032616/55a7906b1a28ab30478b4683/html5/thumbnails/50.jpg)
Ng immutable data
AngularJS 2.0 vai possuir estrutura de dadosimutáveis e observers por padrão
++performance++render
![Page 51: O futuro dos WebApps com AngularJS 2.0](https://reader030.vdocuments.pub/reader030/viewer/2022032616/55a7906b1a28ab30478b4683/html5/thumbnails/51.jpg)
EM ALGUNS MOMENTOSJAVASCRIPT PODE SE
TORNAR O VILÃO
* Typescript
![Page 52: O futuro dos WebApps com AngularJS 2.0](https://reader030.vdocuments.pub/reader030/viewer/2022032616/55a7906b1a28ab30478b4683/html5/thumbnails/52.jpg)
#codetime
![Page 53: O futuro dos WebApps com AngularJS 2.0](https://reader030.vdocuments.pub/reader030/viewer/2022032616/55a7906b1a28ab30478b4683/html5/thumbnails/53.jpg)
![Page 54: O futuro dos WebApps com AngularJS 2.0](https://reader030.vdocuments.pub/reader030/viewer/2022032616/55a7906b1a28ab30478b4683/html5/thumbnails/54.jpg)
http://angular.io
![Page 55: O futuro dos WebApps com AngularJS 2.0](https://reader030.vdocuments.pub/reader030/viewer/2022032616/55a7906b1a28ab30478b4683/html5/thumbnails/55.jpg)
#obrigado
Wilson Mendes@willmendesneto