Spec Frontend Com Angular • Trilha Progressiva em 4 Níveis

🎯 Nível 1: Fundamentos

Problema 19.1 — Carregamento Adiado com @defer (on viewport)

Contexto: Carregamento Adiado com @defer (on viewport) no contexto de Otimização de Performance e Deferrable Views (@defer).

Requisitos de Execução:

  1. Envolver componente pesado com @defer (on viewport) { <app-grafico /> } @placeholder { Skeleton }.

Resultado Esperado

Chunk JavaScript do gráfico carregado apenas quando o elemento entrar na área visível da tela.

📤 Instruções de Entrega (Microsoft Teams)

  1. Salve o arquivo como: Atividade_19_1_SeuNome
  2. Envie na tarefa: Atividade Cap 19 - Otimização de Performance e Deferrable Views (@defer)
🔑 Gabarito de Código & Solução Comentada 
// defer-viewport.component.ts
import { Component } from '@angular/core';
import { HeavyChartComponent } from './heavy-chart.component';

@Component({
  selector: 'app-defer-demo',
  standalone: true,
  imports: [HeavyChartComponent],
  template: `
    @defer (on viewport) {
      <app-heavy-chart />
    } @placeholder {
      <div class="skeleton">Aguardando visualização...</div>
    } @loading (minimum 500ms) {
      <div>Carregando componente pesado...</div>
    }
  `
})
export class DeferDemoComponent {}

🔍 Nível 2: Prática

Problema 19.2 — Gatilhos de Interação com @defer (on interaction, on hover)

Contexto: Gatilhos de Interação com @defer (on interaction, on hover) no contexto de Otimização de Performance e Deferrable Views (@defer).

Requisitos de Execução:

  1. Carregar editor de texto rico apenas quando o usuário focar ou clicar no campo com @defer (on interaction).

Resultado Esperado

Download do componente disparado no primeiro clique do usuário.

📤 Instruções de Entrega (Microsoft Teams)

  1. Salve o arquivo como: Atividade_19_2_SeuNome
  2. Envie na tarefa: Atividade Cap 19 - Otimização de Performance e Deferrable Views (@defer)
🔑 Gabarito de Código & Solução Comentada 
// defer-interaction.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-defer-click',
  standalone: true,
  template: `
    @defer (on interaction) {
      <p>Conteúdo Expandido Carregado com Sucesso!</p>
    } @placeholder {
      <button>Clique para expandir comentários</button>
    }
  `
})
export class DeferClickComponent {}

⚡ Nível 3: Integração

Problema 19.3 — Gatilhos Temporais e Condições com @defer (on timer, when condition)

Contexto: Gatilhos Temporais e Condições com @defer (on timer, when condition) no contexto de Otimização de Performance e Deferrable Views (@defer).

Requisitos de Execução:

  1. Adiar carregamento com timer @defer (on timer(2s); when dadosProntos()).

Resultado Esperado

Carregamento coordenado por condição lógica e tempo limite.

📤 Instruções de Entrega (Microsoft Teams)

  1. Salve o arquivo como: Atividade_19_3_SeuNome
  2. Envie na tarefa: Atividade Cap 19 - Otimização de Performance e Deferrable Views (@defer)
🔑 Gabarito de Código & Solução Comentada 
// defer-timer.component.ts
import { Component, signal } from '@angular/core';

@Component({
  selector: 'app-defer-timer',
  standalone: true,
  template: `
    @defer (on timer(2s); when pronto()) {
      <div>Banner Promocional Ativo</div>
    } @placeholder {
      <div>Carregando promoção...</div>
    }
  `
})
export class DeferTimerComponent {
  pronto = signal(true);
}

🏆 Nível 4: Desafio Corporativo

Problema 19.4 — Pré-carregamento Antecipado com Prefetch Triggers (@defer prefetch on idle)

Contexto: Pré-carregamento Antecipado com Prefetch Triggers (@defer prefetch on idle) no contexto de Otimização de Performance e Deferrable Views (@defer).

Requisitos de Execução:

  1. Configurar prefetch em background com prefetch on idle para download antecipado sem bloquear o thread principal.

Resultado Esperado

Chunk JS pré-carregado no idle do navegador para exibição instantânea no clique.

📤 Instruções de Entrega (Microsoft Teams)

  1. Salve o arquivo como: Atividade_19_4_SeuNome
  2. Envie na tarefa: Atividade Cap 19 - Otimização de Performance e Deferrable Views (@defer)
🔑 Gabarito de Código & Solução Comentada 
// defer-prefetch.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-prefetch-demo',
  standalone: true,
  template: `
    @defer (on interaction; prefetch on idle) {
      <div class="painel-avancado">Configurações Avançadas</div>
    } @placeholder {
      <button>Abrir Configurações</button>
    }
  `
})
export class PrefetchDemoComponent {}