Objective:

This challenge aims to explore how hydration and the Browser Scheduling API can improve the performance of Angular applications. You will implement a simple Angular app, demonstrate how hydration can be used for server-side rendering (SSR), and leverage the Browser Scheduling API to prioritize critical rendering tasks in a way that improves user experience.

Concepts to Understand:

Hydration:
- Hydration is the process of initializing the client-side application by binding the data with the server-rendered HTML. This is a key part of server-side rendering (SSR).
- In SSR, Angular generates static HTML for the initial page load on the server. Once the HTML is loaded in the browser, Angular "hydrates" the page, enabling dynamic interactions and reactivity.
Browser Scheduling API:
- The Browser Scheduling API (like window.requestIdleCallback() or window.requestAnimationFrame()) allows developers to schedule background tasks, manage priorities, and optimize tasks during idle times.
- The API helps ensure that the critical tasks like user interactions are handled first while less important tasks (e.g., data fetching, animations) are deferred during idle periods.

Challenge Steps:

Part 1: Set Up Hydration in Angular

Set Up Server-Side Rendering (SSR) with Angular Universal:
- Create an Angular Universal application with SSR enabled.
- Use Angular Universal to render the initial HTML on the server.
- Implement hydration on the client-side to make the application interactive after the initial render.
Create an Angular Universal App:
- Set up a new Angular Universal project (if you don’t have one) using the Angular CLI:
```
  ng add @nguniversal/express-engine
```
- Implement a simple component (e.g., a "Hello World" component) that gets rendered both on the server and client-side.
Hydrate the Application:
- Once the app is rendered by the server, ensure that Angular properly hydrates the application on the client-side by initializing components and handling events (e.g., button clicks).

Part 2: Integrate the Browser Scheduling API

Implement Task Scheduling with the Browser Scheduling API:
- In the same Angular app, implement a background task that is scheduled using the Browser Scheduling API. This could be a simple task like updating a counter or fetching data for a component.
- Use requestIdleCallback() to schedule tasks when the browser is idle. Make sure that the critical UI updates (like user interactions) are not delayed by background tasks.

Example:

    @Component({
      selector: 'app-background-task',
      templateUrl: './background-task.component.html',
      styleUrls: ['./background-task.component.css']
    })
    export class BackgroundTaskComponent {
      counter = 0;

      constructor() {
        this.scheduleBackgroundTask();
      }

      scheduleBackgroundTask() {
        if ('requestIdleCallback' in window) {
          requestIdleCallback(this.runBackgroundTask.bind(this));
        } else {
          setTimeout(this.runBackgroundTask.bind(this), 1); // Fallback
        }
      }

      runBackgroundTask(deadline: IdleDeadline) {
        // Simulate a task that runs in the background when the browser is idle
        while (deadline.timeRemaining() > 0 && this.counter < 1000) {
          this.counter++;
        }

        // If the task isn't finished, reschedule it during the next idle period
        if (this.counter < 1000) {
          this.scheduleBackgroundTask();
        }
      }
    }

Prioritize Critical Tasks:
- Use the Browser Scheduling API to schedule less critical tasks (like background data fetching, counters, or animations) while prioritizing critical user interactions (e.g., button clicks, form submissions).
- Show how to manage competing tasks in the application by using both requestIdleCallback() and requestAnimationFrame().

Part 3: Test and Measure Performance

Measure the Impact of Hydration:
- Use browser performance tools (e.g., Chrome DevTools) to measure how quickly the app hydrates on the client-side after the initial HTML is loaded.
- Ensure that the server-side render and client-side hydration happen without blocking the UI thread.
Measure the Impact of Browser Scheduling:
- Use browser performance tools to measure how well the application performs when background tasks are scheduled during idle times.
- Ensure that critical UI updates like user interactions (e.g., clicking a button or typing in a text field) are always prioritized over background tasks.

Part 4: Bonus - Optimize Rendering with Lazy Loading

Implement Lazy Loading of Modules:
- To further optimize performance, implement lazy loading of modules in your Angular app. Load only the critical modules on the initial load and defer loading of non-critical modules.
- This can help ensure that the browser doesn’t get overwhelmed with too much content and JavaScript execution on the first render.

Evaluation Criteria:

SSR & Hydration: You should be able to demonstrate how Angular Universal renders the initial HTML on the server, and how hydration works on the client-side to make the page interactive.
Browser Scheduling API: Proper implementation of the Browser Scheduling API to defer background tasks and prioritize critical UI updates.
Performance Metrics: Show measurable improvements in performance, especially in scenarios where the Browser Scheduling API is used effectively.
User Experience: The user should not experience any jank or UI blocking, and critical tasks should be handled promptly.

Starter Code Example (SSR & Hydration)

app.component.ts (Hydration Example):

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `<h1>Server-Side Rendering and Hydration Demo</h1>
             <app-background-task></app-background-task>`
})
export class AppComponent implements OnInit {
  ngOnInit() {
    console.log('AppComponent initialized');
  }
}

background-task.component.ts (Browser Scheduling API):

import { Component } from '@angular/core';

@Component({
  selector: 'app-background-task',
  template: `<p>Counter: {{ counter }}</p>`
})
export class BackgroundTaskComponent {
  counter = 0;

  constructor() {
    this.scheduleBackgroundTask();
  }

  scheduleBackgroundTask() {
    if ('requestIdleCallback' in window) {
      requestIdleCallback(this.runBackgroundTask.bind(this));
    } else {
      setTimeout(this.runBackgroundTask.bind(this), 1);
    }
  }

  runBackgroundTask(deadline: IdleDeadline) {
    while (deadline.timeRemaining() > 0 && this.counter < 1000) {
      this.counter++;
    }

    if (this.counter < 1000) {
      this.scheduleBackgroundTask();
    }
  }
}

This challenge will give you practical experience with hydration, Angular Universal, and performance optimization using the Browser Scheduling API. It will also help you understand how modern techniques like SSR and scheduling APIs can enhance your Angular application's performance and user experience.

Day 20 Challenge: Exploring Hydration and the Browser Scheduling API in Angular