Campinas Frontend Meetup #17

1. RAPHAEL MORAES
12/09/2017
Angular

2. ● Frontend/Client side Javascript framework;
● Usar o poder de processamento do cliente;
○ Redução do volume de requests e tráfego de rede;
○ Requer menos poder de processamento no servidor;
● Código mais enxuto e limpo;
○ Manipulação de DOM feita onde deve ser feita;
○ Tags HTML customizadas a partir da criação de componentes.
● Teste (unitário e end-to-end) bem mais simples e direto.
● Criado para construir poderosas SPAs (Single page applications)
● Criado e mantido pelo Google
What is Angular?

3. QUEM USA ANGULAR

4. UM POUCO DE HISTÓRIA

5. ANGULAR 1, 2 E… 4?
● AngularJS: revolução em termos de frameworks front-end;
● Angular 2: reimplementação “mantendo o melhor” e removendo soluções
que não funcionavam tão bem;
● Novas major versions (manutenção) a cada 6 meses.
○ Angular 4 - Mar/2017
○ Angular 5 - Set-Out/2017
○ Angular 6 - Mar/2018
○ …
● Angular 3 não existiu devido a um
desalinhamento inicial de versões.

6. ANGULAR 4

7. ECMASCRIPT 2015 (ES6)
Conjunto de funcionalidades implementadas em Javascript Engines
(Browsers).
● Arrow functions;
● Classes;
● Template strings;
● let + const;
● Modules / Modules loaders;
● Promises;
● Outras funcionalidades.

8. TYPESCRIPT
● Superset de JavaScript que acrescenta recursos úteis;
○ Tipagem estática, classes, interfaces, strict null checks…
● Transpilada para JavaScript;
○ Suporta diversas versões de EcmaScript;
○ Source map disponível para o output;
● Robustez em aplicações de grande porte;
○ Oferece “erros de compilação” para evitar detecção tardia;
○ Suportada na maioria das IDEs;
○ Sintaxe similar a Java e C#.
● Open source, criada e
mantida pela Microsoft.

9. Exemplo de transpilação

10. ● Espere algo acontecer e reaja a isso.
○ API para programação assíncrona baseada em Observables;
○ No more Promises!
● Inversão do paradigma de “polling”, minimizando requests desnecessárias
e poupando tráfego de rede;
○ Sistemas mais flexíveis, com menor consumo de recursos.
● Permite abstrair itens como low-level threading, sincronização e
concorrência.
● Referência: http://reactivex.io/intro.html
● Angular usa RxJS 5.
PROGRAMAÇÃO REATIVA

11. ANGULAR CLI
● Linha de comando nativa do Angular 2;
● Automatiza tarefas triviais da plataforma
○ ng new → cria uma aplicação completa e funcional out-of-the-box;
○ ng generate → cria componentes, serviços, rotas etc. em uma app
○ ng serve → sobe a aplicação localmente
○ ng test / ng e2e → execute testes unitários / end-to-end
○ ng build → faz o build da aplicação… sozinho!
● Poupa tempo do desenvolvedor
○ Já importa os serviços e os defines no app.module.ts;
○ Scaffolding dos arquivos TypeScript, template, CSS e teste unitário;
○ Comandos para rodar testes unitários de forma simples e rápida.

12. COMPONENTES
● Bloco mais básico de uma UI em Angular;
● Uma aplicação é uma árvore de componentes;
● Cada componente está associado a
um template e, occasionalmente, a
um stylesheet.
● @Component é a metadata que determina
como o componente deve ser processado
@Component({
selector: 'meetup-component',
template: `
<div>Movile Talks: {{name}}</div>
`
})
export class MeetupComponent {
name: string = ‘Angular’;
…
}

13. SERVIÇOS
● Classes que enviam informações ou funcionalidades entre componentes;
○ Mantêm informações durante toda a vida da aplicação;
○ Singletons;
● @Injectable()
● Deixam os componentes “limpos”;
● “Don’t repeat yourself”
● HTTP Calls
@Injectable()
export class MeetupService {
private place: string = 'Movile';
public getPlace(): string {
return this.place;
}
}

14. WEBPACK & DEPLOY
● Bundler padrão do Angular CLI;
● Constrói a árvore de dependências da aplicação, compila, transpila e
empacota os módulos em bundles.
● Fica mais vantajoso conforme a aplicação cresce.
○ Elimina assets desnecessários;
○ Permite um deploy sempre estável;
○ Facilita divisão de código em
Múltiplos bundles devido à sua
árvore de dependências;
○ Altamente configurável
■ Webpack + SystemJS + Gulp (???)

15. LIVE CODING

16. ANGULAR HARD-CORE

17. CRIE SEU PRÓPRIO FRAMEWORK
● Definição de fluxo de telas e visual (trabalho com UX);
● Criação de componentes genéricos
○ Menu;
○ Layout patterns (row, column, flex-layout etc.);
○ Formulários;
○ Inputs;
● Publicar como uma library;
○ Repositório global NPM;
● Projeto principal
○ Importar sua framework e ser feliz!

18. COMUNICAÇÃO ENTRE COMPONENTES
● Comunicação entre componentes parentes é feita por EventEmmitters
○ @Input
○ @Output

19. COMUNICAÇÃO ENTRE COMPONENTES
E o que fazer quando não são parentes?

20. COMUNICAÇÃO ENTRE COMPONENTES

21. COMUNICAÇÃO ENTRE COMPONENTES
● Message bus services: Publish / Subscribe Pattern;
● Utilizam o conceito de Observables para identificar eventos referentes a
mudança de estados em variáveis, utilizamos esses eventos para realizar
tarefas baseado nessa mudança.
Component A
Component B
Component C
Msg
Bus

22. SERVIÇOS REATIVOS
● Responsivos
○ Usabilidade;
○ Utilidade;
○ Rápido tratamento de erros;
● Resilientes
○ Alta disponibilidade;
● Elásticos;
● Orientados a mensagens (Eventos);

23. TREE-SHAKING, LAZY LOADING &
MINIFICAÇÃO
● Tree-Shaking
○ Eliminação de código morto;
○ Análise de quais módulos são realmente utilizados;
○ Possível com o uso de módulos ES2015.
● Lazy Loading
○ Obtido a partir do uso de child routes com o Angular Router.
● Minificação e Compressão
○ “Uglificação” e remoção de whitespaces/comentários/funções inúteis;
○ Já providos out-of-the-box pelo Angular CLI.
● Geração de um bundle menor e mais otimizado.

24. CONFIGURAÇÃO DE PROXY (EVITANDO
CORS)
● Recurso trazido pelo Angular CLI para facilitar a execução local (development
mode) de aplicações Angular.
● Problema:
$ ng serve --proxy-config proxy.conf.json
this.http.get('/api/v1/people').map(res => res.json());
● Solução: proxy para chamadas REST!
● Parâmetro adicional no ng serve:
● Arquivo JSON de configuração.

25. JASMINE & PROTRACTOR
● Teste => qualidade. Angular tem este conceito desde cedo.
● Jasmine é um framework de testes unitários em JavaScript.
○ Geralmente executado com apoio do Karma, um test runner em JS;
○ É possível configurar mocks utilizando recursos nativos do Angular;
● Protractor é um framework de tests end-to-end em Angular.
○ Testes executados no browser;
○ Simulação de interações de usuários reais com a aplicação.
● Padrões sugeridos pelo time do Angular para Angular apps.
○ Arquivos são criados automaticamente pelo Angular CLI!
■ /app/*.spec.ts
■ /e2e

26. ONDE APRENDER MAIS SOBRE
TUDO ISSO?

27. PARA AS MENTES INQUIETAS
● Tour of Heroes, tutorial (bem básico) no site do Angular;
● YouTube: conteúdo gratuito de qualidade;
○ Ótimo material da Loiane Groner;
● Udemy: ótimos cursos bons e baratos - R$25 até amanhã!
○ Understanding TypeScript
○ Angular 4 - The Complete Guide
○ Reactive JS: Are you ready for the next big paradigm shift?
● Learn Angular 2, feito pela equipe do Ionic;
● Angular 4, ebook gratuito do Assim Hussain.

28. PERGUNTAS?

29. OBRIGADO!
raphael.moraes@movile.com
https://github.com/raphaellsmoraes