Angular Framework e TypeScript

Angular quem?

Framework MVC, MV* ou MVW
Criado em 2009 por Miško Hevery no Google
Lançado à público em outubro de 2010, quase ao mesmo tempo que o BackboneJS
EmberJS foi lançado em dezembro de 2011
ReactJS em março de 2013

Angular no github

Google Apps by Angular

https://www.madewithangular.com/#/categories/google

A web mudou como nunca

Web Components
Shadow Dom
ES6 / ES2015 +
Web Workers
Service Workers
Mobile Apps

Angular 2.x 4x

2014 ~ 2017

http://info.meteor.com/blog/comparing-performance-of-blaze-react-angular-meteor-and-angular-2-with-meteor

Sou obrigado a usar TypeScript?

Não, absolutamente não
Grande suporte à sintaxe de annotations
Preset completo de plugins para Babel
Ainda teremos suporte ao bom e velho ES5 puro

TypeScript, What??

Projeto opensource criado pela Microsoft
Mais um transpiler de JS para ES6, 7 e Next
Linguagem tipada, com recursos como interface e suporte à operações assíncronas
Onde todas as features são estritamente opcionais
Todo JavaScript válido deve ser um TS válido
Promete se manter fiel ao futuro do ES Next
Foco no ferramental e refactor de grandes apps

TypeScript no GitHub

Ferramental, Refactor?

Você não precisa tipar seu código

Mas ainda assim pode se beneficiar da tipagem!

https://github.com/DefinitelyTyped/DefinitelyTyped

Google está sozinho?

https://www.typescriptlang.org/community/friends.html

https://medium.freecodecamp.com/when-should-i-use-typescript-311cb5fe801b

Arquitetura

Angular CLI


  > npm install -g angular-cli

  > ng --help


  > npm install -g angular-cli

  > ng --help

  > ng new myProjectName


  > npm install -g angular-cli

  > ng --help

  > ng new myProjectName

  > ng serve


  > npm install -g angular-cli

  > ng --help

  > ng new myProjectName

  > ng serve

  > ng generate route|component|etc myName


  > npm install -g angular-cli

  > ng --help

  > ng new myProjectName

  > ng serve

  > ng generate route|component|etc myName

  > ng build


  > npm install -g angular-cli

  > ng --help

  > ng new myProjectName

  > ng serve

  > ng generate service|component|etc myName

  > ng build

  > ng test

  > ng e2e

Módulos

Base da nova arquitetura do Angular 2x 4x
Módulos são ótimos para organizar a aplicação
São definidos pelas annotation NgModule
Contém um conjuntos de componentes, diretivas e pipes para consolidar de maneira coesiva sua aplicação
Eles são lazy load!

Exemplo de Módulos

Componentes

São diretivas que tem uma interface com o usuário através de um template
Contem a lógica de interação com usuário
São criadas, atualizadas e destruidas pelo angular conforme o usuário interage com a aplicação
Contém métodos de rastreio para acompanhar seu ciclo de vida

Exemplo de Componentes


  // TypeScript ou Babel Preset
  import { Component, Input } from '@angular/core';

  @Component({
    selector: 'hero-detail',
    templateUrl: 'app/hero-detail.html'
  })
  export class HeroDetailComponent {
    @Input() hero: Hero;
  }

Diretivas

São objetos de manipulação dinâmica de templates, sem template próprio e sem interação direta com o usuário
Vem em dois sabores distintos:
Estruturais: que alteram o layout adicionando, removendo ou substituindo porções do template, como *ngIf, *ngFor
Atributos: modificam a aparência ou o comportamento de um outro elemento, como o [(ngModel)]

Exemplo de Diretivas


  // TypeScript  
  import { Directive, Input } from '@angular/core';
  import { TemplateRef, ViewContainerRef } from '@angular/core';
  
  @Directive({
    selector: '[myUnless]'
  })
  export class UnlessDirective {
    constructor(
      private templateRef: TemplateRef<any>,
      private viewContainer: ViewContainerRef
    ) {}
    @Input() set myUnless(myUnless: boolean) {
      if (!myUnless)
        this.viewContainer.createEmbeddedView(this.templateRef);
      else this.viewContainer.clear();
    }
  }

Services

É uma categoria ampla como valores, funções, objetos que sejam necessárias para sua aplicação
Quase tudo pode ser um serviço, porém cada um deve ter um objetivo e significado único e bem definido
Essas são apenas sugestões
Angular em si não toma partido sobre como seus services devem ser construídos ou se comportarem

Exemplo de Serviços


  // TypeScript
  import { Injectable } from '@angular/core';
  import { Http, Response } from '@angular/http';

  @Injectable()
  export class CustomerService {
    constructor(private http: Http) { }

    getCustomers() {
      return this.http.get('api/customers')
        .map((response: Response) => response.json());
    }
  }

Pipes / Filtros

Filtros agora são chamados de Pipes e foram reformulados
Pois eram grande causadores de perda de performance
Alguns como filter e orderBy não existem mais
Pipes são puros por padrão, executando funções puras
Somente são executados se a referência mudar
Se um filtro puro receber um mesmo objeto duas vezes em ciclos diferentes, o pipe não será executado novamente, mesmo que seus atributos tenham mudado

Exemplo de Pipes


  // TypeScript
  import { Pipe } from '@angular/core';
  import { Http } from '@angular/http';

  @Pipe({ name: 'fetch', pure: false })
  export class FetchPipe {
    private data = null;
    private prevUrl = '';
    constructor(private http: Http) { }
    transform(url: string): any {
      if (url !== this.prevUrl) {
        this.prevUrl = url;
        this.data = null;
        this.http.get(url)
          .map( result => result.json() )
          .subscribe( d => this.data = d );
      }
      return this.data;
    }
  }

Data Binding


  <div>{{model.name}}</div>

  <model-detail [model]="model"></model-detail>

  <div (click)="selectItem(model)"></div>

  <input [(ngModel)]="model.name">

Exemplo de Data Binding

Two way data binding como sugar sintaxe


  <input
    [value]="model.name"
    (input)="model.name = $event.target.value">


  <input [(ngModel)]="model.name">

  [(x)]="e" <==> [x]="e" (xChange)="e=$event"

Detecção de mudanças

AngularJS 1.x faz custosos ciclos de dirty checking por toda aplicação a cada mudança nos objetos em seu escopo
Angular 2+ cria uma estrutura de grafo em árvore com os componentes, varrendo de forma unidirecional, da raíz para as folhas, propagando as mudanças para evitar novos ciclos
Estratégia padrão ainda varre a árvore toda

Grafo em Árvore?

Lembram?

Dados Imutável como a cereja do bolo

Angular 2x 4x sabe tirar proveito de dados imutáveis
Podemos mudar a estratégia de atualização dos componentes, ou da aplicação como um todo, para uma mais performática
Imutabilidade requer novos paradigmas de programação para se tornar prático e fluente em nosso dia a dia
Programação Funcional, Reativa e Streams ao resgate

Streams são a fundação do Angular

Streams são fluxos de dados assíncronos
Parecidos com promises mas, muito mais poderosos
Podem ser mergeados e transformados declarativamente
Http e outros módulos que retornavam promises agora retornam streams, retrocompatíveis com promises
Reactive Extensions (RxJS) é o novo $q


  // TypeScript
  import { Component, ChangeDetectionStrategy } from '@angular/core';
  import { interval } from 'rxjs';
  import { map, take } from 'rxjs/operators';

  @Component({
    selector: 'hero-message',
    changeDetection: ChangeDetectionStrategy.OnPush,
    template: '<p>Hey: {{ messages | async }}</p>',
  })
  export class HeroAsyncMessageComponent {
    private messageList = [
      'You are my hero!',
      'You are the best hero!',
      'Will you be my hero?'
    ];
    

	readonly messages$: Observables<string) = interfacel(100).pipe(
      	map(i => this.messageList[i]),
        take(this.messageList.length)
     );
    
  }

Extensões Reativas Oficiais

Extensões oficiais de alta qualidade para tirar o máximo de proveito dos paradigmas funcionais e reativos
Vários módulos já disponíveis:

ngrx/store

ngrx/effects

ngrx/db

Suporte IE9+

Vamos começar hoje mesmo? \o/

Referências

Angular Framework
Angular Expo / Made With Angular
Documentação Oficial do Angular Framework
Change Detection in Angular 2x 4x
NgRx - Reactive Extensions for Angular 2x
Comprehensive Introduction to @ngrx/store