Angular

  • Framework construído sobre o padrão MVVM
  • Criado em 2009 por Miško Hevery e Adam Abrons no Google
  • Desenvolvimento menos imperativo e mais declarativo
  • Single Page Application 
  • Abstrair a manipulação do DOM 
  • Two Way Data Binding

Angular no github

Google Apps By Angular

https://www.madewithangular.com/categories/angular

A Web mudou como nunca

  • Web Components
  • Shadow Dom
  • Ecma Script 6, 7+
  • Web Workers
  • Services Workers
  • Mobile Apps
  • PWA

Mas será que ele é rápido?

https://www.stefankrause.net/js-frameworks-benchmark7/table.html

Typescript, What??

  • Projeto opensource criado pela microsoft
  • Transpiler de JS para Ecma Script 6, 7 e next
  • Linguagem tipada, com recursos como interface e suporte à operações assíncronas
  • Onde todas as features são estritamente opicionais
  • Todo Javascript válido deve ser um TS válido
  • Promete se manter fiel ao futuro do ES Next
  • Ferramental e refactor de grandes apps

TypeScript no GitHub

 

Ferramental, Reactor?

Você não precisa tipar seu código

https://github.com/DefinitelyTyped/DefinitelyTyped

Quem está com o Google nessa?

https://www.typescriptlang.org/samples/index.html

Arquitetura

Angular CLI

> npm install -g angular-cli

> ng --help

> ng new my-project-name

> ng serve

> ng generate route|component|pipe|module|etc myName

> ng build

> ng test

> ng e2e

Módulos

  • Base da nova arquitetura
     
  • Módulos são ótimos para organizar a aplicação
     
  • São definidos pelas annotation NgModule
     
  • Contém um conjunto de componentes, diretivas e pipes para consolidar sua aplicação
     
  • É a camada macro do sistema
     
  • Eles são lazy load!

Exemplo de módulos

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

@NgModule({
  imports:      [ BrowserModule ],
  providers:    [ Logger ],
  declarations: [ AppComponent ],
  exports:      [ AppComponent ],
  bootstrap:    [ AppComponent ]
})

export class AppModule { }

Hierarquia

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 destruídas pelo angular conforme o usuário interage com a aplicação.
     
  • Possuem método "hooks" para acompanhar o ciclo de vida!

Exemplo de componentes

export class HeroListComponent implements OnInit {
  heroes: Hero[];
  selectedHero: Hero;

  constructor(private service: HeroService) { }

  ngOnInit() {
    this.heroes = this.service.getHeroes();
  }

  selectHero(hero: Hero) { this.selectedHero = hero; }
}

Um pouco sobre data-bindings

Pipes/Filtros

  • Filtros agora são chamadas de Pipes e foram reformulados
     
  • Os antigos são grandes causadores de performance
     
  • Pipes são puros por padrão, executando funções puras
     
  • Permitem declarar transformações de valor de exibição em seu HTML de modelo!

Exemplos 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;
    }
  }
<p>{{data.url | fetch}}</p>

Diretivas

  • São objetos de manipulação dinâmica de templates, sem template próprio e sem interação 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 comportamento de outro elemento, com [(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 e abrangente que inclui qualquer valor, função ou recurso de quem aplicativo precisa
  • Um serviço é tipicamente uma classe com um propósito estreito e bem definido, deve fazer algo específico e fazê-lo bem

Exemplos de Serviço

@Service()
export class Logger {
  log(msg: any)   { console.log(msg); }
  error(msg: any) { console.error(msg); }
  warn(msg: any)  { console.warn(msg); }
}



@Service()
export class HeroService {

  constructor(
    private readonly backend: BackendService,
    private readonly logger: Logger
   ) { }

  getHeroes(): Observable<Hero[]> {
    return this.backend.getAll(Hero).pipe(
    	tap(heroes => this.logger.log(`Fetched ${heroes.length} heroes.`))
    )
  }
}

Dependency Injection

  •  Componente consomem serviços que estão disponíveis
  •  DI mantém um contêiner de instâncias que ele já criou e as reutiliza quando possível.
     
  •  Cada serviço é um singleton do seu módulo

Exemplo Dependency Injection

Disponibilizando instâncias de serviços

Disponibilizando instâncias por componente

Data Binding

Exemplo de Data Binding

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

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

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

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

Two 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 IO: Cria uma estrutura de grafo em árvore com os componentes, varrendo de forma unidirecional, da raiz para as folhas, propaganda as mudanças para evitar novos ciclos
     
  • Estratégia padrão ainda varre a árvore toda

Grafo em Árvore?

Dados imutável é a cereja do bolo

  • O angular 2x 4x 5x e 6x 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, Reactive e Streams ao resgate

Streams são a fundação do Angular

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

Alguns exemplos RxJS


  // TypeScript
  import { Component, ChangeDetectionStrategy } from '@angular/core';
  import { Observable } from 'rxjs/Rx';

  @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?'
    ];
    constructor() {
      this.messages = Observable.interval(500)
        .map(i => this.messageList[i])
        .take(this.messageList.length);
    }
  }

Alguns exemplos RxJS

Fontes

  • Reactive Programming:
    • http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html
    • http://reactivex.io/
  • Angular IO
    • https://angular.io/guide/quickstart
  • Angular Material
    • material.angular.io​
  • ​Firebase
    • ​https://github.com/angular/angularfire2
Made with Slides.com