Forem: Luis Castro

What It Means to Be a Developer in the AI World

Luis Castro — Sat, 14 Mar 2026 17:57:00 +0000

🤖 I'm Reading More Code Than Writing It

Introduction:

Lately, I've been noticing something more and more on a daily basis. I spend most of my time reading and reviewing AI-generated code rather than actually writing it myself. And honestly? It feels weird. Here I am, 16 years into this career, having worked hard to sharpen my coding skills, and suddenly I'm spending more time understanding code than creating it. It's like being a chef who's now mostly tasting and adjusting recipes that someone else cooked. So naturally, I started wondering: what does it actually mean to be a developer in this AI world we're living in?

Yeah, I know everyone and their dog is talking about AI right now, but well, this is a blog so I wanted to write about it too. Or at least give you something to read with my thoughts on it 😄

💭 Wait, Am I Still a Good Developer?

Let me be real with you for a second. I consider myself a good developer. I'm curious, I learn fast, I cooperate with my team, and I try to bring my experience to every solution I build. But there's this nagging feeling I can't shake. The skills I've spent nearly two decades building can now be replicated by typing a few words into a machine.

That stings a little, not gonna lie.

I've found myself asking: what makes a good developer, really? Is it writing the cleanest code? The most performant algorithms? Knowing every single framework inside and out? Because if that's the bar, well, AI is getting pretty damn close to clearing it. And that's both terrifying and fascinating at the same time.

😰 The Anxiety (and the Confidence)

I'm not going to pretend I don't feel anxious sometimes. I was let go from a job once, and that feeling was terrible. Especially considering I was always praised as a very good engineer. So yeah, when people say "AI will replace us all," that little voice in the back of my head pipes up. What if they're right?

But here's the thing. Despite that anxiety, I feel more confident than I have in years. More curious. More productive. Because engineers who can evolve and use these tools aren't easy to replace. We're problem solvers who happen to use code as one of many tools. Machines won't be able to do everything, at least not yet. Requirements change. Business needs shift. Someone needs to understand the why behind the code, not just the how.

🧩 Understanding Code vs Writing It

Here's what I think is happening, and what that silent meeting moment from my previous post about soft skills reminded me of: understanding code has always been valuable and is now becoming even more valuable than writing it from scratch. And you know what? That's not a bad thing.

When you can read AI-generated code and immediately spot the edge cases it missed, the performance bottlenecks it created, or the business logic it misunderstood, that's expertise. When you can take that code and refine it, knowing exactly which parts need human judgment and which parts are fine as is, that's mastery.

But here's the funny part. Sometimes I catch myself doing something ridiculous. I'll open up the AI and start typing a prompt like "change this button color to blue" and halfway through I'm like... what are you doing man? This is a CSS property. You've been doing this for a long time. You don't need to waste tokens on this hahaha. And that's when it hits me. Dude, you're really reading more than writing now.

Sometimes I even worry I'll forget how to code. Like, will I struggle when I actually need to do it myself? It's a weird feeling.

We're becoming architects and reviewers. We're the ones who know when to trust the AI and when to override it. We understand the context, the constraints, the technical debt, and the long-term vision. The AI doesn't.

As my friend Uncle Ben once said, "With great power comes great responsibility."

🌟 What Makes a Good Developer in 2026 (and Beyond)

So, back to that question: what makes a good developer in the AI world? (personal opinion incoming)

Curiosity: The willingness to learn how these tools work and how to use them effectively
Adaptability: Not clinging to "the old ways" just because they're comfortable
Problem-solving: Understanding the problem deeply, not just the technical solution
Communication: Translating between business needs, user requirements, and technical implementation
Critical thinking: Knowing when AI is helpful and when it's leading you astray
Business understanding: Connecting the dots between code and company goals
Collaboration: Working with humans (and AI) to build something greater than the sum of its parts

Notice something? Most of these are soft skills.

🤔 Final Thoughts

So yeah, I'm checking more code than I'm writing these days. And I'm still figuring out how I feel about it. But I'm also building better solutions faster, learning new patterns quicker, and solving problems I couldn't have tackled before.

The job is changing. We're changing with it. And honestly? I think that's exactly what being a software engineer has always been about. The core of what we do, solving problems and building things that matter, that's not going anywhere.

And neither are we.

Oh, and before you go – I should mention that I used AI to help structure this article. Not everything, mind you. I wrote the majority of the ideas as notes and paragraphs representing what I actually think and feel. But AI helped me organize those thoughts and turn them into something that reads like a proper article instead of the scattered brain dump it started as.

Why am I telling you this? Because first of all you probably already noticed and second, it perfectly illustrates the point I've been making. AI is here to stay. We can either choose to stay scared, believing it will replace us, or we can use it, embrace it, and keep learning and evolving. I chose the latter. I had the ideas, the experience, the perspective – AI just helped me communicate them better.

That's the partnership. That's the future. And honestly? I'm okay with that.

P.S. Yeah, I recognize AI articles too and I hate those dashes as much as you do. But well, the majority of us don't know how to properly write and we're learning about that too.

If this resonated with you, let's chat about it on Twitter, Threads, or LinkedIn. I'd love to hear how you're navigating this new world. 💻🚀🤖

Still feeling generous? Buy me a coffee and fuel more overthinking sessions like this one! ☕️

Taking Angulars Signal Forms for a Test Drive, Exploring the Experimental API

Luis Castro — Sat, 06 Sep 2025 00:22:46 +0000

Introduction

Angular continues its evolution toward a more reactive and performant future, and one of the most exciting developments is the introduction of Signal Forms. This new experimental API represents a significant shift from the familiar reactive forms approach, embracing Angular's signal-based reactivity system to deliver better performance, improved developer experience, and more intuitive form management.

In this article, we'll dig into what Angular is currently offering with Signal Forms, explore the features they've built so far, and see how they work in practice. Keep in mind this is very much a work in progress - things will definitely change, APIs might get renamed or redesigned, and some features we'll discuss might evolve significantly before they're production-ready.

Why Signal Forms?

The Angular team is exploring Signal Forms as a new experimental approach to form management that aims to:

Leverage Angular's fine-grained reactivity system
Provide a more intuitive API for form creation and management
Enable better performance through precise updates
Simplify form validation and error handling
Offer seamless integration with Angular's modern signal-based features

Signal Forms are currently experimental. While the core functionality is stable, the API may evolve based on community feedback and real-world usage.

Core Concepts

Fields and Field State

At the heart of Signal Forms is the Field concept. A field represents a piece of form data along with its associated state. If you've worked with reactive forms, this will look familiar - it has many of the same properties you know from AbstractControl like touched, dirty, valid, and errors:

interface FieldState<TValue> {
  readonly value: WritableSignal<TValue>;
  readonly touched: Signal<boolean>;
  readonly dirty: Signal<boolean>;
  readonly disabled: Signal<boolean>;
  readonly errors: Signal<ValidationError[]>;
  readonly valid: Signal<boolean>;
  readonly invalid: Signal<boolean>;
  // ... more state properties
}

The key difference is that these properties are now signals, which means they integrate naturally with Angular's reactivity system and can be used directly in templates or computed values.

The Control Directive

The magic that connects your fields to actual UI controls is the [control] directive. This is pretty important since it handles all the heavy lifting of binding your field state to form controls. The directive can work with:

Native HTML inputs - your regular input, textarea, select elements
Signal Forms custom controls - components that implement FormValueControl or FormCheckboxControl
Legacy ControlValueAccessor components - for backward compatibility with reactive forms (though you'll want to avoid this for new code)

The [control] directive automatically handles:

Two-way binding between the field value and the UI control
Syncing form state like disabled, required, etc.
Marking fields as touched when you blur out of inputs
Providing compatibility with existing reactive forms components

So when you write [control]="emailField", you're getting all that functionality without having to wire it up manually.

Creating Your First Signal Form

Creating a form is straightforward using the form() function:

import { signal } from '@angular/core';
import { form } from '@angular/forms/signals';

@Component({
  selector: 'app-book-review',
  template: `
    <form>
      <label for="title">Book Title</label>
      <input id="title" [control]="titleField" />

      <label for="author">Author</label>
      <input id="author" [control]="authorField" />

      <button [disabled]="!reviewForm().valid()">Submit Review</button>
    </form>
  `,
})
export class BookReviewComponent {
  // Create the data model
  reviewData = signal({
    title: '',
    author: '',
    rating: 0,
    review: '',
  });

  // Create the form
  reviewForm = form(this.reviewData);

  // Access individual fields
  titleField = this.reviewForm.title;
  authorField = this.reviewForm.author;
}

The form automatically creates a field structure that mirrors your data model. Changes to field values directly update the original signal.

Schema? Validation?

One of Signal Forms' coolest features is this validation approach that looks a lot like what you'd see in libraries like Zod or Yup. The API uses a schema() function and lets you chain validation rules in a way that feels very familiar if you've used schema validation libraries before.

Here's how you can define validation rules:

import {
  form,
  schema,
  required,
  email,
  minLength,
  max,
} from '@angular/forms/signals';

@Component({})
export class EventRegistrationComponent {
  eventData = signal({
    eventName: '',
    organizerEmail: '',
    description: '',
    maxAttendees: 0,
  });

  eventForm = form(this.eventData, event => {
    required(event.eventName);
    minLength(event.eventName, 5, {
      message: 'Event name must be at least 5 characters',
    });

    required(event.organizerEmail);
    email(event.organizerEmail);

    required(event.description);
    minLength(event.description, 20, {
      message: 'Description must be at least 20 characters',
    });

    max(event.maxAttendees, 1000, {
      message: 'Maximum 1000 attendees allowed',
    });
  });
}

Built-in Validators

Signal Forms provide a comprehensive set of built-in validators that will look familiar if you've used reactive forms - they're essentially the same validation concepts you already know, just with a different syntax:

// Required field validation
required(path, { message: 'This field is required' });

// String length validation
minLength(path, 5);
maxLength(path, 100);

// Numeric value validation
min(path, 0);
max(path, 999);

// Pattern matching
pattern(path, /^[A-Za-z]+$/, { message: 'Letters only' });

// Email validation
email(path);

The validation logic itself is the same as what you'd find in Validators.required, Validators.minLength, etc. - Angular just wrapped them in a more declarative API that works with the signal-based form structure.

Custom Validation

You can create custom validators for specific business logic. Here's a practical example with shipping address validation:

import { customError, FieldPath, validate } from '@angular/forms/signals';

// Custom validator function that can be reused
function validateShippingAddress(
  path: FieldPath<{
    zipCode: string;
    state: string;
    country: string;
  }>
) {
  validate(path, ctx => {
    const address = ctx.value();

    // Check if we ship to this location
    const restrictedStates = ['AK', 'HI']; // Alaska, Hawaii
    if (address.country === 'US' && restrictedStates.includes(address.state)) {
      return customError({
        kind: 'shippingRestricted',
        message: "Sorry, we don't ship to this state yet",
      });
    }

    // Validate ZIP code format for US addresses
    if (address.country === 'US' && !/^\d{5}(-\d{4})?$/.test(address.zipCode)) {
      return customError({
        kind: 'invalidZip',
        message: 'Please enter a valid US ZIP code',
      });
    }

    return null; // Valid
  });
}

@Component({
  template: `
    <form>
      <label for="country">Country</label>
      <select id="country" [control]="form.country">
        <option value="US">United States</option>
        <option value="CA">Canada</option>
      </select>

      <label for="state">State</label>
      <input id="state" [control]="form.state" />

      <label for="zipCode">ZIP Code</label>
      <input id="zipCode" [control]="form.zipCode" />

      @for (error of form().errors(); track error.kind) {
        <span class="error">{{ error.message }}</span>
      }

      <button type="submit" [disabled]="form().invalid()">
        Calculate Shipping
      </button>
    </form>
  `,
})
export class ShippingFormComponent {
  private shippingData = signal({
    country: 'US',
    state: '',
    zipCode: '',
  });

  protected readonly form = form(this.shippingData, address => {
    validateShippingAddress(address);
  });
}

You could also create more specific validators like validateInternationalShipping(address) for different shipping rules based on the destination.

Advanced Features

Conditional Logic

Signal Forms work really well with conditional logic using disabled, hidden, and readonly functions:

jobApplicationForm = form(this.applicationData, application => {
  required(application.fullName);
  required(application.position);

  // Conditionally require portfolio based on role type
  required(application.portfolioUrl, {
    when: ({ fieldOf }) => fieldOf(application.position).value() === 'designer',
  });

  // Hide salary expectations for internship positions
  hidden(
    application.salaryExpectations,
    ({ fieldOf }) => fieldOf(application.position).value() === 'intern'
  );

  // Make references readonly for internal transfers
  readonly(
    application.references,
    ({ fieldOf }) => fieldOf(application.isInternalTransfer).value() === true
  );
});

Nested Forms and Arrays

Signal Forms handle complex data structures pretty well:

// Nested object form
restaurantData = signal({
  name: '',
  cuisine: '',
  location: {
    address: '',
    city: '',
    zipCode: '',
    coordinates: {
      lat: 0,
      lng: 0,
    },
  },
});

restaurantForm = form(this.restaurantData, restaurant => {
  required(restaurant.name);
  required(restaurant.cuisine);
  required(restaurant.location.address);
  required(restaurant.location.city);

  // Validate nested coordinates
  validate(restaurant.location.coordinates.lat, ({ value }) => {
    const lat = value();
    return lat >= -90 && lat <= 90
      ? null
      : customError({ message: 'Invalid latitude' });
  });
});

// Array handling
menuItemsData = signal([
  { name: 'Pasta Carbonara', price: 18.99, category: 'main' },
  { name: 'Caesar Salad', price: 12.5, category: 'appetizer' },
]);

menuForm = form(this.menuItemsData, menuItems => {
  applyEach(menuItems, item => {
    required(item.name);
    min(item.price, 0.01);
    required(item.category);
  });
});

Async Validation

Signal Forms support asynchronous validation for server-side checks:

import { HttpClient } from '@angular/common/http';
import type { Signal } from '@angular/core';
import { Component, inject, resource, signal } from '@angular/core';
import {
  customError,
  form,
  schema,
  validateAsync,
} from '@angular/forms/signals';

@Component({
  selector: 'app-blog-form',
  // ... other config
})
export class BlogFormComponent {
  private httpClient = inject(HttpClient);

  blogData = signal({ slug: '' });

  blogPostForm = form(this.blogData, post => {
    validateAsync(post.slug, {
      params: ({ value }) => ({ slug: value() }),
      factory: (paramsSignal: Signal<{ slug: string } | undefined>) =>
        resource({
          params: () => paramsSignal(),
          loader: ({ params }) => {
            if (!params?.slug || params.slug.trim() === '') {
              return Promise.resolve(null);
            }
            return this.httpClient.post('/api/check-slug', params).toPromise();
          },
        }),
      errors: (result: { available?: boolean } | null, ctx) => {
        if (result && result.available === false) {
          return customError({
            kind: 'slugTaken',
            message: 'This slug is already taken',
          });
        }
        return null;
      },
    });
  });
}

Form Submission and Error Handling

Signal Forms give you a straightforward approach to form submission:

import { submit } from '@angular/forms/signals';

@Component({
  template: `
    <form (ngSubmit)="onSubmit()">
      <!-- form fields -->
      <button type="submit" [disabled]="!recipeForm().valid()">
        @if (recipeForm().submitting()) {
          Publishing Recipe...
        } @else {
          Publish Recipe
        }
      </button>
    </form>

    @if (recipeForm().errors().length > 0) {
      <div class="error-summary">
        @for (error of recipeForm().errorSummary(); track error) {
          <p>{{ error.message }}</p>
        }
      </div>
    }
  `,
})
export class RecipeFormComponent {
  async onSubmit() {
    if (this.recipeForm().valid()) {
      await submit(this.recipeForm, async form => {
        try {
          await this.recipeService.publishRecipe(form().value());
          return null; // Success
        } catch (error) {
          // Return server validation errors
          return [
            {
              field: form.title,
              error: customError({
                message: 'A recipe with this title already exists',
              }),
            },
          ];
        }
      });
    }
  }
}

Custom Form Controls

Remember ControlValueAccessor? Yeah, that whole interface with writeValue, registerOnChange, registerOnTouched... Signal Forms make custom controls way simpler. You can create custom form controls that integrate with Signal Forms much more easily:

@Component({
  selector: 'custom-slider',
  template: `
    <div class="slider-container">
      <input
        type="range"
        [value]="value()"
        (input)="onValueChange($event)"
        [disabled]="disabled()"
        [min]="min()"
        [max]="max()" />
      <span>{{ value() }}</span>
    </div>
  `,
})
export class CustomSliderComponent implements FormValueControl<number> {
  value = model.required<number>();
  disabled = input<boolean>(false);
  min = input<number>(0);
  max = input<number>(100);

  onValueChange(event: Event) {
    const target = event.target as HTMLInputElement;
    this.value.set(Number(target.value));
  }
}

No more implementing four different methods and managing callbacks - just use model() for your value and you're done.

Conclusion

This is honestly pretty exciting stuff. Forms in Angular have been long overdue for a refresh, and Signal Forms feel like they're addressing real pain points that developers have been dealing with for years.

We've all been there - you start with template-driven forms because they're simple, but then your requirements grow and you hit a wall. So you switch to reactive forms, which work great at first, but as your forms get more complex, they become this bloated mess of form builders, validators, and subscriptions that's hard to reason about and maintain.

Signal Forms seem to hit that sweet spot. They give you the simplicity of working directly with your data model while providing the power and flexibility you need for complex scenarios. The schema-like validation approach feels intuitive, and the fact that everything is built on signals means you get better performance and cleaner reactive patterns out of the box.

What really gets me excited is how this could change the form development experience. No more wrestling with form builders or managing complex subscription chains. Just define your data, set up your validation rules, and let Angular's reactivity system handle the rest.

The Angular team is clearly listening to the community and addressing real developer pain points. This feels like the kind of evolution that could make form development actually enjoyable again.

I tried to put an example here with this repository using some of the concepts we discussed. Feel free to check it out and play around with it!

Want to discuss this further or share your experiences with Signal Forms? Connect with me on Twitter, Threads, LinkedIn, or BlueSky. Let's explore this experimental stuff together!

If you found this guide helpful, feel free to buy me a coffee. Your support means a lot!

Exploring Angular Resource API

Luis Castro — Wed, 19 Mar 2025 14:29:53 +0000

Introduction

It's been a while since my last article, but I couldn't pass up the opportunity to discuss this exciting new feature Angular is experimenting with.

Angular continuously introduces new features aimed at simplifying developer workflows and enhancing performance. One of its most promising experimental additions is the Resource API, designed specifically to streamline asynchronous data fetching with built-in reactivity. In this article, we'll break down this experimental feature and explore how it could fit into Angular applications.

But first, let's quickly understand why Angular is exploring this new approach.

📖 Why a New Resource API?

Currently, Angular developers rely heavily on Observables and the HttpClient for asynchronous operations. While powerful, Observables can introduce complexity, particularly in scenarios involving reactive updates, precise error handling, or efficient streaming.

The experimental Resource API aims to address these challenges by:

Providing a straightforward and intuitive API.
Facilitating reactive data fetching.
Including built-in status tracking (loading, error, success).
Improving performance through finer-grained reactivity.

It's essential to emphasize that this API is experimental and evolving. Certain key features like debouncing and mutations aren't fully implemented yet, as the initial focus is purely on data fetching.

Let's explore what's currently available.

🎯 Core Resource Interface

At the core of this API is the Resource interface, encapsulating reactive data fetching:

interface Resource<T> {
  readonly value: Signal<T>;
  readonly status: Signal<ResourceStatus>;
  readonly error: Signal<Error | undefined>;
  readonly isLoading: Signal<boolean>;
  hasValue(): boolean;
}

Key points:

value: Holds reactive data as a Signal.
status: Indicates current state (Idle, Loading, Resolved, Error).
error: Captures any errors during fetch operations.
isLoading: Easy-to-use loading indicator.

This setup greatly simplifies handling async data in Angular templates.

🛠️ Creating Resources

Angular provides a straightforward resource function:

const userResource = resource({
  request: () => userId(),
  loader: async ({ value }) => fetchUser(value),
  defaultValue: null,
});

request: Reactive input for fetching.
loader: Async function performing the fetch.
defaultValue: Initial placeholder value before the fetch completes.

You can easily track resource states in templates:

@if (userResource.isLoading()) {
  Loading...
  } @else if (userResource.hasValue()){
     {{ userResource.value().name }}
     } @else if (userResource.status() === ResourceStatus.Error) {
      Error: {{ userResource.error().message }}
  }

🚀 Specialized HTTP Resources

Angular simplifies HTTP fetching further with httpResource:

const products = httpResource('/api/products');

It integrates directly with Angular's existing HttpClient, supporting reactive patterns and automatically parsing JSON responses by default.

You can customize your requests:

const productDetail = httpResource({
  url: `/api/products/${productId()}`,
  method: 'GET',
  headers: { Authorization: 'Bearer token' },
});

Additional Response Types

httpResource also supports different response formats:

ArrayBuffer: httpResource.arrayBuffer()
Blob: httpResource.blob()
Text: httpResource.text()

Example of fetching binary data:

const fileData = httpResource.arrayBuffer('/file.bin');

🎛️ Advanced Features

Type Safety with Runtime Validation

For enhanced type safety, Angular’s Resource API integrates smoothly with runtime validation libraries like Zod:

const ProductSchema = zod.object({
  id: zod.number(),
  name: zod.string(),
});

const product = httpResource('/api/product', { parse: ProductSchema.parse });

Resource Streaming

Resources can handle streaming responses:

const streamResource = resource({
  stream: async ({ value }) => fetchStreamedData(value),
});

RxJS Integration

Existing Observables can easily integrate with rxResource:

const observableResource = rxResource({
  stream: param => observableService.getData(param),
});

🌟 Status and Error Handling

Resources clearly distinguish between different loading states (initial load vs. reload):

enum ResourceStatus {
  Idle,
  Loading,
  Reloading,
  Resolved,
  Error,
  Local,
}

Explicit state tracking simplifies error handling in templates:

@let resourceStatus = resource.status();
@let error = resource.error();
@if (resourceStatus === ResourceStatus.Loading) {
   Loading...
} @else if (resourceStatus === ResourceStatus.Resolved) {
  Data Loaded
} @else if (resourceStatus === ResourceStatus.Error) {
  Error: {{ error.message }}
}

⚙️ Prefetching and Deferred Loading

Resources seamlessly integrate with deferred loading (@defer blocks), optimizing application performance:

<button #loadBtn>Load Data</button>

@defer (on interaction(loadBtn)) {
<data-cmp [data]="resource.value()"></data-cmp>
}

Prefetching further improves performance:

@defer (prefetch on viewport(elementRef)) {
<component-cmp />
}

📌 Migration and Limitations

This API is experimental, so please consider the following:

Observables integrate smoothly.
Structural directives remain compatible.
Essential features like mutations and debouncing aren't yet implemented.

Exercise caution when adopting experimental APIs, especially in production environments.

if you want to participate in the discussion or contribute to the development of this feature, you can join the Angular Resource API RFC. i alredy learn a lot from the discussion and i hope you can learn too.

🚦 Conclusion

Angular’s experimental Resource API presents an exciting new direction for async data management, addressing existing complexity and enhancing performance. While still evolving, it's definitely worth keeping an eye on.

Angular remains committed to improving the developer experience—making it easier to build better, faster applications. 🚀✨

Want to discuss this further or share your thoughts? Connect with me on Twitter, Threads, LinkedIn, or BlueSky. Let’s explore this together! 💻☕️

If you found this guide helpful, feel free to buy me a coffee. Your support means a lot! ☕️🙏

The Dotnet, Nx, AnalogJs (Angular) Stack is here - Part 2

Luis Castro — Thu, 15 Aug 2024 01:14:07 +0000

🧬 Where were we?

Introduction:

In our last post, we set up the NX workspace, generated the Analog app and the .NET app, and built our API using C# and Entity Framework. Now, we'll continue developing our notes application because, let's face it, having a solid notes app is essential.

🧩 The A in the DNA

If you've read my blog before, you know I'm an active collaborator with AnalogJS. I’m always excited to try out what the team puts together, and this time is no exception. We’re going to dive into one of the features that I find the coolest in this meta framework—I'm talking about API Routes.

📝 The Notes Front End

When we scaffolded the app, we got a nice-looking, functional app that can add, delete, and retrieve notes. However, it doesn't yet use a backend or persist data. So now, we’ll integrate everything to use the API we created in Part 1 of The DNA Stack.

🔌 Connecting Our Front End

Let’s start by checking what we have. Since the template is pretty much the default, we’ll skip that part and focus on the component logic:

export class AnalogWelcomeComponent {
  private _trpc = injectTrpcClient();
  public triggerRefresh$ = new Subject<void>();
  public notes$ = this.triggerRefresh$.pipe(
    switchMap(() => this._trpc.note.list.query()),
    shareReplay(1)
  );
  public newNote = '';

  constructor() {
    void waitFor(this.notes$);
    this.triggerRefresh$.next();
  }

  public noteTrackBy = (index: number, note: Note) => {
    return note.id;
  };

  public addNote(form: NgForm) {
    if (!form.valid) {
      form.form.markAllAsTouched();
      return;
    }
    this._trpc.note.create
      .mutate({ note: this.newNote })
      .pipe(take(1))
      .subscribe(() => this.triggerRefresh$.next());
    this.newNote = '';
    form.form.reset();
  }

  public removeNote(id: number) {
    this._trpc.note.remove
      .mutate({ id })
      .pipe(take(1))
      .subscribe(() => this.triggerRefresh$.next());
  }
}

Here, we have almost everything set up (thanks to the Analog Team), but it's currently using tRPC. We’ll make some changes to get it working with our .NET backend. You’ll notice that we have a property that triggers the re-fetch of notes whenever we add or remove a note, and it also triggers the initial refresh inside the constructor.

Let's start by removing the files that handle tRPC functionality. We’ll delete apps/notes/src/trpc-client.ts, the folder apps/notes/src/server/trpc, and finally the folder apps/notes/src/server/routes/trpc.

Inside our AnalogWelcomeComponent, we’ll remove these two imports:

import { waitFor } from '@analogjs/trpc';
import { injectTrpcClient } from '../../trpc-client';

We’ll stop there for now and get back to this later.

🛠️ The Server API Routes

Our server routes will help us communicate with our backend in a simple way. First, navigate to apps/notes/src/server/routes/v1. Inside our API folder, we’ll create some files and one folder to define the routes we need (GET, POST, DELETE). The structure should look like this:

.
├── notes
│   └── [id].delete.ts
├── notes.get.ts
└── notes.post.ts

The route inside the folder represents the delete API call, while the ones inside v1 handle the retrieval of notes and the adding functionality.

Now, we need to let AnalogJs properly recognize this internal API by updating some configuration files.

First, let’s modify main.server.ts to look like this:

import 'zone.js/node';
import { enableProdMode } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import { renderApplication } from '@angular/platform-server';
import { provideServerContext } from '@analogjs/router/server';
import { ServerContext } from '@analogjs/router/tokens';

import { config } from './app/app.config.server';
import { AppComponent } from './app/app.component';

if (import.meta.env.PROD) {
  enableProdMode();
}

export function bootstrap() {
  return bootstrapApplication(AppComponent, config);
}

export default async function render(
  url: string,
  document: string,
  serverContext: ServerContext
) {
  const html = await renderApplication(bootstrap, {
    document,
    url,
    platformProviders: [provideServerContext(serverContext)],
  });

  return html;
}

Next, let’s update app.config.ts to look like this:

import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
import {
  provideHttpClient,
  withFetch,
  withInterceptors,
} from '@angular/common/http';
import { provideClientHydration } from '@angular/platform-browser';
import { provideFileRouter, requestContextInterceptor } from '@analogjs/router';

export const appConfig: ApplicationConfig = {
  providers: [
    provideZoneChangeDetection({ eventCoalescing: true }),
    provideFileRouter(),
    provideClientHydration(),
    provideHttpClient(
      withFetch(),
      withInterceptors([requestContextInterceptor])
    ),
  ],
};

Here’s what we’re doing: we’re letting our Analog app know about the context of our API routes by using provideServerContext and requestContextInterceptor (both provided by Analog). With these two changes, our Analog app can now communicate seamlessly with our API routes.

Let’s start with retrieving all the notes in notes.get.ts. But first, add a little error.ts file inside the routes folder with this code:

import { createError } from 'h3';

export function handleFetchError(
  err: any,
  defaultMessage: string = 'An error occurred'
) {
  if (err instanceof Error) {
    const httpError = err as {
      statusCode?: number;
      statusMessage?: string;
      data?: any;
    };

    return createError({
      statusCode: httpError.statusCode || 500,
      statusMessage: httpError.statusMessage || err.message || defaultMessage,
      data: {
        detail: httpError.data || err.message,
      },
    });
  } else {
    // Handle non-Error objects
    return createError({
      statusCode: 500,
      statusMessage: 'An unexpected error occurred',
      data: {
        detail: String(err),
      },
    });
  }
}

This is just a helper to handle errors inside our API routes.

Now, add this code to notes.get.ts:

import { defineEventHandler } from 'h3';
import { handleFetchError } from '../../error';
import { Note } from 'apps/notes/src/note';

export default defineEventHandler(async () => {
  try {
    const data = await $fetch<Note[]>('http://localhost:5000/api/notes', {
      method: 'GET',
    });
    return data;
  } catch (err) {
    throw handleFetchError(err, 'An error occurred while fetching notes');
  }
});

Next, let’s update notes.post.ts with this code:

import { Note } from 'apps/notes/src/app/note';
import { defineEventHandler, readBody } from 'h3';
import { handleFetchError } from '../../error';

export default defineEventHandler(async event => {
  try {
    const body = await readBody(event);
    const data = await $fetch<Note>('http://localhost:5000/api/notes', {
      method: 'POST',
      body,
    });
    return data;
  } catch (err) {
    throw handleFetchError(err, 'An error occurred while saving the note');
  }
});

Finally, inside the notes folder, modify [id].delete.ts:

import { Note } from 'apps/notes/src/app/note';
import { defineEventHandler, getRouterParam, readBody } from 'h3';
import { handleFetchError } from '../../../error';

export default defineEventHandler(async event => {
  try {
    const id = getRouterParam(event, 'id');
    const data = await $fetch<Note>(`http://localhost:5000/api/notes/${id}`, {
      method: 'DELETE',
    });
    return data;
  } catch (err) {
    throw handleFetchError(err, 'An error occurred while deleting the note');
  }
});

With this, we’ve set up our server-side routes. Let me briefly explain each:

GET: Retrieves all notes.
POST: Adds a new note using the info from the

request body.

DELETE: Deletes a note based on the provided ID.

Now, let's go back to the welcome component and start connecting the dots.

We’ll make the following changes to the component:

private http = inject(HttpClient);
public triggerRefresh$ = new BehaviorSubject<void>(undefined);
public notes$ = this.triggerRefresh$.pipe(
  switchMap(() => this.http.get<Note[]>("/api/v1/notes")),
  shareReplay(1)
);
public newNote = "";

constructor() {
  this.triggerRefresh$.next();
}

public noteTrackBy = (index: number, note: Note) => {
  return note.id;
};

public addNote(form: NgForm) {
  if (!form.valid) {
    form.form.markAllAsTouched();
    return;
  }
  const note: Omit<Note, "id"> = {
    name: this.newNote,
    createdAt: new Date().toISOString(),
  };
  this.http
    .post<Note>("/api/v1/notes", note)
    .pipe(take(1))
    .subscribe(() => this.triggerRefresh$.next());
  this.newNote = "";
  form.form.reset();
}

public removeNote(id: number) {
  this.http
    .delete(`/api/v1/notes/${id}`)
    .pipe(take(1))
    .subscribe(() => this.triggerRefresh$.next());
}

The structure is basically the same, but now there’s no trace of tRPC, and we’re using the HttpClient to consume the routes we just created. Since Analog now knows the context of the routes starting with / and they’re accessible inside the route /api/v1/, we just modify our process to use those instead of tRPC:

The first declaration inside notes$ triggers the call to get all the notes whenever the triggerRefresh$ observable emits, and we do this initially inside the constructor.
In all other methods, we simply switch the tRPC implementation for our HttpClient and new routes.

Now, let’s test it out:

Run the server using nx serve api and then run the frontend using nx serve notes.

Note: The order is important here to avoid errors. Sometimes Nx can get a bit messed up, so a quick nx reset should fix any issues you might encounter.

🌟 Conclusion: The DNA Stack in Action

Small but powerful, this example demonstrates the strength of these three tools working together: a .NET backend, the incredibly useful Nx tools to keep everything organized and supercharge our development process, and Angular enhanced by AnalogJS. We completed our basic notes application, but more importantly, we showed what this stack can do on a larger scale. The possibilities are endless.

If you want to check the working project (with a different name but it works at the end), check here

If you found this article helpful, feel free to connect with me on Twitter, Threads, or LinkedIn. Let’s keep building cool stuff together! 💻🚀📘

If you’d like to support my work, consider buying me a coffee. Your support is greatly appreciated! ☕️

The Dotnet, Nx, AnalogJs (Angular) Stack is here - Part 1

Luis Castro — Thu, 15 Aug 2024 01:11:38 +0000

🧬 What is the DNA Stack?

Introduction:

First of all, let me give credit to Brandon Roberts for coming up with the name 🥸. The DNA stack represents a powerful combination of technologies: .NET Core, NX tools, and AnalogJS, providing developers with a cohesive and efficient environment to build robust applications. Let's briefly dive into each of these technologies without too much explanation, since they all have excellent documentation. Here, we’re going to focus on building something simple with this stack.

Note: A couple of assumptions before we start: you should have the .NET SDK installed already (I used version 8) and dotnet-ef. If you don't have these tools, please install them first: dotnet SDK and dotnet-ef.

🖥️ .NET Core: The Backbone

The Foundation of the Stack:

.NET Core serves as the backbone of the DNA stack, offering a cross-platform, open-source framework for building a wide range of applications, from web to cloud to IoT. Its performance, scalability, and extensive library support make it an ideal choice for backend development.

🛠️ NX Tools: Streamlining Development

The Power of Monorepos:

NX brings monorepo capabilities to the DNA stack, allowing developers to manage their projects more efficiently. With NX, you can easily share code, configure build processes, and ensure consistent standards across multiple projects. It’s particularly valuable in large teams and projects, where maintaining structure and consistency is crucial.

🌐 AnalogJS: The Angular Metaframework

Modernizing Angular Development:

Analog is a fullstack meta-framework designed for building applications and websites with Angular. It offers a similar experience to other popular meta-frameworks like Next.js, Nuxt, SvelteKit, and Qwik City, but with the powerful foundation of Angular.

Features:

Supports Vite/Vitest/Playwright for efficient development and testing workflows.
Integrates server and deployment capabilities powered by Nitro.
Offers file-based routing for easy and intuitive route management.
Enables server-side data fetching to enhance application performance.
Allows the use of Markdown as content routes, making it easier to manage static content.
Provides API/server routes for backend functionality within your Angular app.
Supports both SSR (Server-Side Rendering) and SSG (Static Site Generation) for hybrid applications.
Compatible with Angular CLI/Nx workspaces for streamlined project management.
Integrates with Astro to use Angular components, expanding the flexibility of your development process.

With that said, let's dive into what we're going to build. In Analog, there's an example Notes generator that you can scaffold when you choose the tRPC option. However, we're not going to use tRPC today; instead, we're using Server Routes.

📝 The Notes App

Our full-stack app is super simple: you have Notes that you want to save (and delete as needed), so we're going to use the template inside the tRPC example and update it to use our new .NET Core backend. Let’s start by setting up the project and installing the dependencies.

npx create-nx-workspace@latest --preset=apps --ci=skip --name=notes-dna

This will generate our Nx workspace and create the folder for us to work. After it finishes, go to the folder and create an apps folder.

cd notes-dna
mkdir apps

Now we need to add two presets: one will be for our AnalogJS app and the other for our .NET Core app.

npm i -D @analogjs/platform

npm i -D @nx-dotnet/core

Once our two plugins are installed, it’s time to generate our Notes App 🎉.

This will generate our Analog app:

nx g @analogjs/platform:app --analogAppName=notes --addTailwind=true --addTRPC=true

This command will initiate our workspace for .NET usage:

nx g @nx-dotnet/core:init

This command will generate our API application. We will need to choose webapi from the menu.

nx g @nx-dotnet/core:app api --language C# --args=-controllers --testTemplate=none --pathScheme=nx --skipSwaggerLib

If everything went well, the folder structure should look like this:

── Directory.Build.props
├── Directory.Build.targets
├── README.md
├── apps
│   ├── api
│   │   ├── Controllers
│   │   │   └── WeatherForecastController.cs
│   │   ├── NotesDna.Api.csproj
│   │   ├── NotesDna.Api.http
│   │   ├── Program.cs
│   │   ├── Properties
│   │   │   └── launchSettings.json
│   │   ├── WeatherForecast.cs
│   │   ├── appsettings.Development.json
│   │   ├── appsettings.json
│   │   ├── obj
│   │   │   ├── NotesDna.Api.csproj.nuget.dgspec.json
│   │   │   ├── NotesDna.Api.csproj.nuget.g.props
│   │   │   ├── NotesDna.Api.csproj.nuget.g.targets
│   │   │   ├── project.assets.json
│   │   │   └── project.nuget.cache
│   │   └── project.json
│   └── notes
│       ├── index.html
│       ├── package.json
│       ├── postcss.config.cjs
│       ├── project.json
│       ├── src
│       │   ├── app
│       │   │   ├── app.component.spec.ts
│       │   │   ├── app.component.ts
│       │   │   ├── app.config.server.ts
│       │   │   ├── app.config.ts
│       │   │   └── pages
│       │   │       ├── (home).page.ts
│       │   │       └── analog-welcome.component.ts
│       │   ├── main.server.ts
│       │   ├── main.ts
│       │   ├── note.ts
│       │   ├── styles.css
│       │   ├── test-setup.ts
│       │   ├── trpc-client.ts
│       │   └── vite-env.d.ts
│       ├── tailwind.config.cjs
│       ├── tsconfig.app.json
│       ├── tsconfig.editor.json
│       ├── tsconfig.json
│       ├── tsconfig.spec.json
│       └── vite.config.ts
├── notes-dna.generated.sln
├── nx.json
├── package-lock.json
├── package.json
└── tsconfig.base.json

Remeber we’re here to build this small app, so take a good look into the documentation of .NET Core and AnalogJS for you to know what to expect with those folder structures.

Now check if everything runs, to run the api we use nx serve api and to run the AnalogJs we use nx serve notes.

By following the two localhost addresses of each application you should get something like this:

If you're still here and there are no errors then let's get started with our API:

🧩 The D on the DNA

First let's use Nugget to install a couple of dependencies Microsoft.EntityFrameworkCore.Design and Microsoft.EntityFrameworkCore.Sqlite

Note: Add the versions that belong to the dotnet core version you're using, ex: ver 8 if you're using dotnet 8.

First let's create our Entity since we're using EF that will help us to scaffold our database using the code first approach.

Create a folder at the root of the api project called Entity and create a class inside of that folder, call it Note.cs and add this code in there:

using System;

namespace NotesDna.Api.Entities;

public class Note
{
  public int Id { get; set; }
  public string Name { get; set; }
  public string CreatedAt { get; set; }
}

This code is super simple, we're just adding the main object that will handle our Notes.

Then since we're using a Database we will need a DbContext so let's create that, create a Data folder at the same level of the Entities folder and create a class inside that one, call it DataContext.cs and add this code there:

using System;
using NotesDna.Api.Entities;
using Microsoft.EntityFrameworkCore;

namespace NotesDna.Api.Data;

public class DataContext(DbContextOptions options) : DbContext(options)
{
  public DbSet<Note> Notes { get; set; }
}

Then let's modify our Program.cs class and get rid of what we won't need (it's just Swagger stuff) and leave it like this:

using NotesDna.Api.Data;
using Microsoft.EntityFrameworkCore;

var builder = WebApplication.CreateBuilder(args);

// Add services to the container.

builder.Services.AddControllers();
builder.Services.AddDbContext<DataContext>(opt =>
{
  opt.UseSqlite(builder.Configuration.GetConnectionString("DefaultConnection"));
});

var app = builder.Build();

// Configure the HTTP request pipeline.

app.MapControllers();

app.Run();

And now let's add our connection to the app properties file appsettings.Development.json leave the file like this:

{
  "Logging": {
    "LogLevel": {
      "Default": "Information",
      "Microsoft.AspNetCore": "Warning"
    }
  },
  "ConnectionStrings": {
    "DefaultConnection": "Data source=notes.db"
  }
}

Now let's do the fun part, add the controller that pretty much will provide the CRUD operations for us, inside the Controllers folder add a class and call it NotesController.cs and add this logic to it:

using NotesDna.Api.Data;
using NotesDna.Api.Entities;
using Microsoft.AspNetCore.Http;
using Microsoft.AspNetCore.Mvc;
using Microsoft.EntityFrameworkCore;

namespace NotesDna.Api.Controllers
{
  [Route("api/[controller]")]
  [ApiController]
  public class NotesController(DataContext context) : ControllerBase
  {
    private readonly DataContext _context = context;

    [HttpGet]
    public async Task<ActionResult<IEnumerable<Note>>> GetNotes()
    {
      try
      {
        var notes = await _context.Notes.ToListAsync();
        return Ok(notes);
      }
      catch (Exception)
      {
        return StatusCode(StatusCodes.Status500InternalServerError,
            "Error getting the notes");
      }
    }

    [HttpGet("{id:int}")]
    public async Task<ActionResult<Note>> GetNote(int id)
    {
      try
      {
        var note = await _context.Notes.FindAsync(id);

        if (note == null) return NotFound();

        return Ok(note);
      }
      catch (Exception)
      {
        return StatusCode(StatusCodes.Status500InternalServerError,
            "Error getting the note record");
      }
    }

    [HttpPost]
    public async Task<ActionResult<Note>> AddNote([FromBody] Note note)
    {
      try
      {
        if (note == null)
          return BadRequest();

        await _context.Notes.AddAsync(note);
        await _context.SaveChangesAsync(); // Ensure the Id is generated

        return CreatedAtAction(nameof(GetNote), new { id = note.Id }, note);
      }
      catch (Exception)
      {
        return StatusCode(StatusCodes.Status500InternalServerError,
            "Error creating new note record");
      }
    }


    [HttpDelete("{id:int}")]
    public async Task<ActionResult> DeleteNote(int id)
    {
      try
      {
        var note = await _context.Notes.FirstOrDefaultAsync(x => x.Id == id);

        if (note == null) return NotFound();
        _context.Notes.Remove(note);
        await _context.SaveChangesAsync();

        return Ok();
      }
      catch (Exception)
      {
        return StatusCode(StatusCodes.Status500InternalServerError, "Error deleting the note record");
      }
    }

  }
}

Here's a brief explanation of each method in the NotesController even when they seek a little self explanatory 🥸:

`GetNotes` Method

[HttpGet]
public async Task<ActionResult<IEnumerable<Note>>> GetNotes()
{
    var notes = await _context.Notes.ToListAsync();
    return Ok(notes);
}

Purpose: Retrieves all notes from the database.
Logic: It asynchronously fetches the list of notes and returns them in an Ok response, indicating a successful operation.

`GetNote` Method

[HttpGet("{id:int}")]
public async Task<ActionResult<Note>> GetNote(int id)
{
    var note = await _context.Notes.FindAsync(id);
    if (note == null) return NotFound();
    return Ok(note);
}

Purpose: Retrieves a specific note by its ID.
Logic: It asynchronously finds the note by ID. If found, it returns the note in an Ok response; if not, it returns a NotFound response.

`AddNote` Method

[HttpPost]
public async Task<ActionResult<Note>> AddNote([FromBody] Note note)
{
    await _context.Notes.AddAsync(note);
    await _context.SaveChangesAsync();
    return CreatedAtAction(nameof(GetNote), new { id = note.Id }, note);
}

Purpose: Adds a new note to the database.
Logic: It asynchronously adds the note to the database and saves the changes. Afterward, it returns a CreatedAtAction response, pointing to the newly created note.

`DeleteNote` Method

[HttpDelete("{id:int}")]
public async Task<ActionResult> DeleteNote(int id)
{
    var note = await _context.Notes.FirstOrDefaultAsync(x => x.Id == id);
    if (note == null) return NotFound();
    _context.Notes.Remove(note);
    await _context.SaveChangesAsync();
    return Ok();
}

Purpose: Deletes a note by its ID.
Logic: It asynchronously searches for the note by ID. If found, the note is removed, and the changes are saved. It returns an Ok response for a successful deletion or NotFound if the note doesn't exist.

And i almost forget let's clean a little bit our launchSettings.json

{
  "$schema": "http://json.schemastore.org/launchsettings.json",
  "iisSettings": {
    "windowsAuthentication": false,
    "anonymousAuthentication": true,
    "iisExpress": {
      "applicationUrl": "http://localhost:20303",
      "sslPort": 44331
    }
  },
  "profiles": {
    "http": {
      "commandName": "Project",
      "dotnetRunMessages": true,
      "launchBrowser": false,
      "launchUrl": "swagger",
      "applicationUrl": "http://localhost:5000;https://localhost:5001",
      "environmentVariables": {
        "ASPNETCORE_ENVIRONMENT": "Development"
      }
    }
  }
}

This should allows us to run the server at port 5000 for http and 5001 for https.

now let's generate our DB and add some data to test.

On the root of the NX workspace use your terminal to run this:

dotnet ef migrations add InitialMigration -o Data/Migrations --msbuildprojectextensionspath dist/intermediates/apps/api/obj --project apps/api/NotesDna.Api.csproj

This should create a migration inside your Data folder that will pretty much scaffold our database, now we need to apply this to our database using:

dotnet ef database update --msbuildprojectextensionspath dist/intermediates/apps/api/obj --project apps/api/NotesDna.Api.csproj

So now let's run it and check if everything is working properly.

Note: After our changes we should not see the swagger URL anymore so we can consume the API manually in the browser or using Postman.

Most likely you won't see anything, because we don't have any data, use your favorite DB tool to add a couple of records and then try again.

If everything wen't well then we will continue with the AnalogJs part.

🌟 Conclusion: Building the Foundation

In this first part of our journey with the DNA stack, we've successfully laid the groundwork by setting up our backend with .NET Core and integrating it with NX and AnalogJS. We created a basic Notes application, configured the necessary tools, and established a solid structure for further development. This stack offers a powerful and flexible environment for building fullstack applications, and we're just getting started.

In the upcoming part, we'll focus on completing the AnalogJS application, building out the front-end features, and fully integrating it with our backend. Stay tuned as we continue to enhance our project and unlock the full potential of the DNA stack.

If you found this article helpful, feel free to connect with me on Twitter, Threads, or LinkedIn. Let's continue this journey together! 💻🚀📘

If you'd like to support my work, consider buying me a coffee. Your support is greatly appreciated! ☕️

Making a Wack-A-Molee with AnalogJs - Part 2

Luis Castro — Fri, 28 Jun 2024 00:21:08 +0000

👀The Sequel

As promised, we're now working on the sequel article for the Wack-A-Molee game made with Analog. Like Terminator 2, The Dark Knight, or Spider-Man 2, I hope this sequel is better than the first part. So, let's get started and look at the code. In this second part, we'll explore the project structure, integrate the component built in the first part, and finally, we'll play a little game!

At the end we should have something like this:

Note: No moles were hurt as part of this project.

🐨Wack-a-Molee THE SEQUEL!!

Let's start where we left off. In the first part, I showed the initial challenge in building the game: the lack of a library for animating the sprite, at least one with a user-friendly approach like the one used in the React Native app. I demonstrated how I solved the issue, and there's a little StackBlitz project to play around with and get familiar with the code. Constructive feedback is welcome; we're all here to learn. If you haven't seen it yet, check out part 1.

Project Structure

The Analog project has a simple structure. If you know Analog, you should be familiar with the pages folder that controls the routing. If you don't, what are you waiting for? Give it a try! In my case, I'm using an Nx project (personal preference), so the structure might look a little different, but essentially it is the same as any other Analog project.

.
├── README.md
├── game
│   ├── index.html
│   ├── package.json
│   ├── postcss.config.cjs
│   ├── project.json
│   ├── src
│   │   ├── app
│   │   │   ├── app.component.spec.ts
│   │   │   ├── app.component.ts
│   │   │   ├── app.config.server.ts
│   │   │   ├── app.config.ts
│   │   │   ├── components
│   │   │   │   ├── animated-sprite.component.ts
│   │   │   │   ├── clear-level.component.ts
│   │   │   │   ├── game-container.component.ts
│   │   │   │   ├── game-over.component.ts
│   │   │   │   ├── health-bar.component.ts
│   │   │   │   ├── level.component.ts
│   │   │   │   ├── mole.component.ts
│   │   │   │   ├── pause.component.ts
│   │   │   │   ├── score.component.ts
│   │   │   │   ├── timer.component.ts
│   │   │   │   ├── toggle-button.component.ts
│   │   │   │   └── welcome.component.ts
│   │   │   └── pages
│   │   │       ├── (home).page.ts
│   │   │       └── game.page.ts
│   │   ├── main.server.ts
│   │   ├── main.ts
│   │   ├── styles.scss
│   │   ├── test-setup.ts
│   │   └── vite-env.d.ts
│   ├── tailwind.config.cjs
│   ├── tsconfig.app.json
│   ├── tsconfig.editor.json
│   ├── tsconfig.json
│   ├── tsconfig.spec.json
│   └── vite.config.ts
├── nx.json
├── package.json
├── pnpm-lock.yaml
└── tsconfig.base.json

Let's dig a little bit on the core aspects of the project

🧠 Core

The heart and brain of the app will be inside components. Pages will only serve the purpose of routing to the place we want to be. With that in mind, let's describe the components based on the structure of the game image we just saw.

animated-sprite.component: If you read part 1, then you probably already know about this one, but if not, let me give you a clue. This is the CORE of the core, so it's the one in charge of the animations.
clear-level.component: This one will show the pretty image that lets the user know they cleared the level.
game-container.component: This one is in charge of putting everything together and is also the owner of the logic that makes everything work. We will talk about that later.
game-over.component: Kind of self-explanatory but is in charge of telling you that you lost.
health-bar.component: This one will show you the health bar and will make it fill or get empty.
level.component: This one is in charge of telling you that you go to the next level, YEI!!.
mole.component: This one, as the name says, is in charge of handling the mole and the different states the mole might have:
- Popping: When the mole simply pops.
- Idle: You only see the hole.
- Hiding: Well this one explain itself, is the mole hiding.
- Dizzy: If you hit the mole at the proper time it will get "dizzy".
- Faint: This happens after getting dizzy.
- Attack: If the mole is angry enough it will attack to try to make you lose health.
- Heal: Mole will transform into a some sort of x-men sentinel and if you hit it it will heal you (if you have any dagame)
pause.component: It presents the paused screen.
score.component: The little score bar.
timer.component: The timer bar.
toggle-button.component: the pause button.
welcome.component: the initial screen.

I hope i'm not missing anything but pretty much these are the CORE elements I'll use to build this thing.

🧩Building the Pieces

Game Container

Let's start with the BOSS the one that will give the orders here and will handle all the state changes in the game, it looks like this:

const DEFAULT_TIME = 30;

interface GameState {
  level: number;
  score: number;
  time: number;
  cleared: boolean;
  paused: boolean;
  gameOver: boolean;
  health: number;
  molesAllowed: number;
  damage: number;
}

const DEFAULT_STATE: GameState = {
  level: 1,
  score: 0,
  time: DEFAULT_TIME,
  cleared: false,
  paused: false,
  gameOver: false,
  health: 100,
  molesAllowed: 3,
  damage: 5,
};

@Component({
  selector: 'game-container',
  standalone: true,
  imports: [
    MoleComponent,
    LevelComponent,
    TimerComponent,
    ScoreComponent,
    ToggleButtonComponent,
    HealthBarComponent,
    ClearLevelComponent,
    GameOverComponent,
    PauseComponent,
  ],
  template: `<div class="container flex h-[100dvh] flex-col items-center">
    <div
      class="flex w-full flex-1 flex-col bg-[url('/img/background.png')] bg-cover bg-no-repeat md:w-[650px]">
      <div
        class="flex basis-[200px] flex-col content-center gap-4 px-6 pb-2 pt-12">
        <div class="flex flex-row items-center gap-[4px] md:gap-6">
          <game-level [level]="state().level" />
          <game-timer [time]="state().time" />
          <game-score [score]="state().score" />
          <game-toggle-button (click)="state().paused ? resume() : pause()" />
        </div>
        <div class="flex flex-row items-center justify-center">
          <game-health-bar [health]="state().health" />
        </div>
      </div>
      <div
        class="relative grid cursor-[url('/img/hammer.png'),_auto] grid-cols-[repeat(3,_minmax(110px,_1fr))] items-center justify-items-center gap-4 px-4 py-0 md:grid-cols-[repeat(3,_minmax(140px,_1fr))]">
        @for (mole of moles(); track $index) {
          <game-mole
            #moleComponent
            (finishPopping)="onFinishPopping()"
            (damageReceived)="onDamage()"
            (moleHealing)="onHeal()"
            (takeScore)="onScore()"
            [frameWidth]="moleWidth()" />
        }
      </div>
    </div>
    @if (state().cleared) {
      <game-clear-level
        [score]="state().score"
        [level]="state().level"
        (nextLevel)="nextLevel()"
        (reset)="reset()" />
    }
    @if (state().gameOver) {
      <game-game-over
        [score]="state().score"
        [level]="state().level"
        (reset)="reset()" />
    }
    @if (state().paused) {
      <game-pause (reset)="reset()" (resume)="resume()" />
    }
  </div>`,
  styles: `
    :host {
      @apply flex flex-col items-center;
    }
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class GameContainerComponent implements OnDestroy {
  moleComponents = viewChildren<MoleComponent>('moleComponent');
  private moleIntervalSubscription!: Subscription;
  private timerIntervalSubscription!: Subscription;
  moleQty = 12;
  moleWidth = signal(0);
  moles = signal<Array<number>>(Array.from({ length: this.moleQty }));
  molesPopping = 0;
  state = signal<GameState>({ ...DEFAULT_STATE });
  #responsive = inject(BreakpointObserver);
  private timeConditionMet = false;

  constructor() {
    this.#responsive.observe([Breakpoints.Handset]).subscribe({
      next: result => {
        if (result.matches) {
          this.moleWidth.set(100);
        } else {
          this.moleWidth.set(0);
        }
      },
    });

    afterNextRender(() => {
      this.setupTicks();
    });
  }

  setupTicks() {
    let speed = 750 - this.state().level * 50;
    if (speed < 350) {
      speed = 350;
    }

    this.clearIntervals();

    this.moleIntervalSubscription = interval(speed).subscribe({
      next: () => {
        this.popRandomMole();
      },
    });

    this.timerIntervalSubscription = interval(1000).subscribe({
      next: () => {
        this.timerTick();
      },
    });
  }

  clearIntervals() {
    if (this.moleIntervalSubscription) {
      this.moleIntervalSubscription.unsubscribe();
    }
    if (this.timerIntervalSubscription) {
      this.timerIntervalSubscription.unsubscribe();
    }
  }

  randomBetween(min: number, max: number): number {
    return Math.floor(Math.random() * (max - min + 1) + min);
  }

  onFinishPopping(): void {
    this.molesPopping -= 1;
  }

  popRandomMole(): void {
    const molesArray = this.moleComponents();
    if (molesArray.length !== this.moleQty) {
      return;
    }

    const randomIndex = this.randomBetween(0, this.moleQty - 1);
    const mole = molesArray[randomIndex];
    if (!mole.isAppearing && this.molesPopping < this.state().molesAllowed) {
      this.molesPopping += 1;
      mole.pop();
    }
  }

  popAllMoles(): void {
    const molesArray = this.moleComponents();
    for (let i = 0; i < this.state().molesAllowed; i++) {
      if (this.molesPopping < 3) {
        this.molesPopping += 1;
        molesArray[i].pop();
      }
    }
  }

  timerTick(): void {
    if (this.state().time === 0) {
      this.clearIntervals();
      if (this.state().score > 0) {
        this.state.update(state => ({ ...state, cleared: true }));
      } else {
        this.gameOver();
      }
    } else {
      this.state.update(state => ({ ...state, time: (state.time -= 1) }));

      // Check if time is less than 30% of the full time and the condition has not been met
      if (!this.timeConditionMet && this.state().time < 0.3 * DEFAULT_TIME) {
        this.state.update(state => ({ ...state, molesAllowed: 4 }));
        this.popAllMoles();
        this.timeConditionMet = true;
      }
    }
  }

  reset() {
    this.molesPopping = 0;
    this.timeConditionMet = false;
    this.state.update(() => ({ ...DEFAULT_STATE }));
    this.setupTicks();
  }

  pause() {
    this.clearIntervals();
    this.state.update(state => ({ ...state, paused: true }));
  }

  resume() {
    this.molesPopping = 0;
    this.state.update(state => ({ ...state, paused: false }));
    this.setupTicks();
  }

  nextLevel() {
    this.molesPopping = 0;
    this.timeConditionMet = false;
    this.state.update(state => ({
      ...state,
      level: (state.level += 1),
      cleared: false,
      gameOver: false,
      time: DEFAULT_TIME,
      molesAllowed: 3,
    }));
    this.setupTicks();
  }

  onScore() {
    this.state.update(state => ({ ...state, score: (state.score += 1) }));
  }

  onDamage() {
    if (this.state().cleared || this.state().gameOver || this.state().paused) {
      return;
    }

    const targetHealth =
      this.state().health - this.state().damage < 0
        ? 0
        : this.state().health - this.state().damage;

    this.state.update(state => ({ ...state, health: targetHealth }));

    if (targetHealth <= 0) {
      this.gameOver();
    }
  }

  gameOver() {
    this.clearIntervals();
    this.timeConditionMet = false;
    this.state.update(state => ({ ...state, gameOver: true }));
  }

  onHeal() {
    this.state.update(state => ({
      ...state,
      health: state.health + 10 > 100 ? 100 : state.health + 10,
    }));
  }

  ngOnDestroy() {
    this.clearIntervals();
  }
}

I know, kind of big, I might end up doing part 3 of the series 🤔, but anyway let's check what's happening here.

Step 1: Define Constants and Interface

const DEFAULT_TIME = 30; // Default time for each game level in seconds

interface GameState {
  level: number; // Current level of the game
  score: number; // Current score of the player
  time: number; // Remaining time for the current level
  cleared: boolean; // Indicates if the level is cleared
  paused: boolean; // Indicates if the game is paused
  gameOver: boolean; // Indicates if the game is over
  health: number; // Player's health
  molesAllowed: number; // Number of moles allowed to appear simultaneously
  damage: number; // Damage taken by the player when missing a mole
}

// Initial state of the game
const DEFAULT_STATE: GameState = {
  level: 1,
  score: 0,
  time: DEFAULT_TIME,
  cleared: false,
  paused: false,
  gameOver: false,
  health: 100,
  molesAllowed: 3,
  damage: 5,
};

We start by defining constants and an interface for the game state. DEFAULT_TIME sets the initial time for each game level. The GameState interface outlines the structure of the state object, and DEFAULT_STATE initializes the default values for a new game.

Step 2: Component State and Dependencies

export class GameContainerComponent implements OnDestroy {
  moleComponents = viewChildren<MoleComponent>('moleComponent'); // Reference to all mole components
  private moleIntervalSubscription!: Subscription; // Subscription for mole popping intervals
  private timerIntervalSubscription!: Subscription; // Subscription for the game timer
  moleQty = 12; // Total number of mole positions
  moleWidth = signal(0); // Width of the mole (responsive design)
  moles = signal<Array<number>>(Array.from({ length: this.moleQty })); // Array representing moles
  molesPopping = 0; // Count of currently popping moles
  state = signal<GameState>({ ...DEFAULT_STATE }); // Game state signal
  #responsive = inject(BreakpointObserver); // Injecting breakpoint observer for responsive design
  private timeConditionMet = false; // Condition to check if special time condition is met

  constructor() {
    // Setup responsive behavior for mole width
    this.#responsive.observe([Breakpoints.Handset]).subscribe({
      next: result => {
        if (result.matches) {
          this.moleWidth.set(100); // Set mole width for handset view
        } else {
          this.moleWidth.set(0); // Reset mole width for other views
        }
      },
    });

    // Setup game ticks after the next render
    afterNextRender(() => {
      this.setupTicks();
    });
  }

The class maintains the game state, mole components, and various signals and subscriptions for handling game logic. The constructor sets up responsive behavior and initializes game ticks after the next render.

Step 3: Setup and Clear Intervals

setupTicks()
{
  let speed = 750 - this.state().level * 50; // Calculate speed based on level
  if (speed < 350) {
    speed = 350; // Minimum speed threshold
  }

  this.clearIntervals(); // Clear existing intervals

  // Setup interval for popping moles
  this.moleIntervalSubscription = interval(speed).subscribe({
    next: () => {
      this.popRandomMole();
    },
  });

  // Setup interval for game timer
  this.timerIntervalSubscription = interval(1000).subscribe({
    next: () => {
      this.timerTick();
    },
  });
}

clearIntervals()
{
  if (this.moleIntervalSubscription) {
    this.moleIntervalSubscription.unsubscribe(); // Unsubscribe mole interval
  }
  if (this.timerIntervalSubscription) {
    this.timerIntervalSubscription.unsubscribe(); // Unsubscribe timer interval
  }
}

setupTicks initializes intervals for popping moles and updating the timer based on the current level. clearIntervals clears any active subscriptions to avoid memory leaks.

Step 4: Game Logic Methods

randomBetween(min
:
number, max
:
number
):
number
{
  return Math.floor(Math.random() * (max - min + 1) + min); // Generate random number between min and max
}

onFinishPopping()
:
void {
  this.molesPopping -= 1; // Decrement the count of currently popping moles
}

popRandomMole()
:
void {
  const molesArray = this.moleComponents();
  if(molesArray.length !== this.moleQty
)
{
  return; // Ensure the moles array is correctly sized
}

const randomIndex = this.randomBetween(0, this.moleQty - 1); // Pick a random mole
const mole = molesArray[randomIndex];
if (!mole.isAppearing && this.molesPopping < this.state().molesAllowed) {
  this.molesPopping += 1; // Increment the count of currently popping moles
  mole.pop(); // Trigger the mole to pop up
}
}

popAllMoles()
:
void {
  const molesArray = this.moleComponents();
  for(let i = 0; i < this.state().molesAllowed; i++
)
{
  if (this.molesPopping < 3) {
    this.molesPopping += 1; // Increment the count of currently popping moles
    molesArray[i].pop(); // Trigger the mole to pop up
  }
}
}

These methods handle the random selection of moles, popping them, and managing the count of currently popping moles.

Step 5: Timer Tick Method

timerTick()
:
void {
  if(this.state().time === 0
)
{
  this.clearIntervals(); // Clear intervals when time is up
  if (this.state().score > 0) {
    this.state.update(state => ({ ...state, cleared: true })); // Mark level as cleared if score is positive
  } else {
    this.gameOver(); // Trigger game over if score is zero
  }
}
else
{
  this.state.update(state => ({ ...state, time: (state.time -= 1) })); // Decrement the timer

  // Increase moles allowed when time is less than 30% and condition has not been met
  if (!this.timeConditionMet && this.state().time < 0.3 * DEFAULT_TIME) {
    this.state.update(state => ({ ...state, molesAllowed: 4 }));
    this.popAllMoles(); // Pop all moles when condition is met
    this.timeConditionMet = true; // Mark the condition as met
  }
}
}

timerTick updates the game timer, checks if the time is up, and handles the logic for clearing the level or triggering game over. It also increases the allowed moles when the time condition is met.

Step 6: Game Control Methods

reset()
{
  this.molesPopping = 0;
  this.timeConditionMet = false;
  this.state.update(() => ({ ...DEFAULT_STATE })); // Reset the game state
  this.setupTicks(); // Setup intervals again
}

pause()
{
  this.clearIntervals(); // Clear intervals when paused
  this.state.update(state => ({ ...state, paused: true })); // Mark game as paused
}

resume()
{
  this.molesPopping = 0;
  this.state.update(state => ({ ...state, paused: false })); // Mark game as resumed
  this.setupTicks(); // Setup intervals again
}

nextLevel()
{
  this.molesPopping = 0;
  this.timeConditionMet = false;
  this.state.update(state => ({
    ...state,
    level: (state.level += 1), // Increment level
    cleared: false,
    gameOver: false,
    time: DEFAULT_TIME, // Reset time for new level
    molesAllowed: 3, // Reset moles allowed
  }));
  this.setupTicks(); // Setup intervals again
}

onScore()
{
  this.state.update(state => ({ ...state, score: (state.score += 1) })); // Increment score
}

onDamage()
{
  if (this.state().cleared || this.state().gameOver || this.state().paused) {
    return; // Do nothing if game is cleared, over, or paused
  }

  const targetHealth =
    this.state().health - this.state().damage < 0
      ? 0
      : this.state().health - this.state().damage; // Calculate new health

  this.state.update(state => ({ ...state, health: targetHealth })); // Update health

  if (targetHealth <= 0) {
    this.gameOver(); // Trigger game over if health is zero
  }
}

gameOver()
{
  this.clearIntervals(); // Clear intervals when game is over
  this.timeConditionMet = false;
  this.state.update(state => ({ ...state, gameOver: true })); // Mark game as over
}

onHeal()
{
  this.state.update(state => ({
    ...state,
    health: state.health + 10 > 100 ? 100 : state.health + 10, // Heal the player
  }));
}

These methods control the game's state transitions, such as resetting, pausing, resuming, progressing to the

next level, and handling scoring, damage, and healing.

Step 7: Cleanup on Destroy

ngOnDestroy()
{
  this.clearIntervals(); // Clear intervals to prevent memory leaks
}

Finally, ngOnDestroy ensures that intervals are cleared when the component is destroyed to prevent memory leaks.

🐨The mole (since there's no proper mole emoji we will use a koala, don't judge me).

In order to make everything work we need the one element that will provide the name to this game, yeah you know, The Mole and it looks like this:

@Component({
  selector: 'game-mole',
  standalone: true,
  imports: [AnimatedSpriteComponent],
  template: ` <game-animated-sprite
    (click)="whack()"
    #mole
    [animations]="animations"
    [columns]="6"
    [rows]="8"
    [imgSrc]="'/img/sprites.png'"
    [initialFrame]="0"
    [frameWidth]="frameWidth()" />`,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class MoleComponent {
  mole = viewChild<AnimatedSpriteComponent>('mole'); // Accesses the AnimatedSpriteComponent
  finishPopping = output({ alias: 'finishPopping' }); // Emits when popping is finished
  damage = output({ alias: 'damageReceived' });
  score = output({ alias: 'takeScore' });
  heal = output({ alias: 'moleHealing' });
  frameWidth = input(0);

  animations = {
    idle: [0],
    appear: [1, 2, 3, 4],
    hide: [4, 3, 2, 1, 0],
    dizzy: [36, 37, 38],
    faint: [42, 43, 44, 0],
    attack: [11, 12, 13, 14, 15, 16],
    heal: [24, 25, 26, 27, 28, 29, 30, 31, 32, 33],
  };

  isAppearing = false;
  isFeisty = false;
  isHealing = false;
  isWhacked = false;
  isAttacking = false;
  isHiding = false;

  private subscriptions: Subscription[] = []; // Store all subscriptions

  // Initiates the mole popping sequence
  pop() {
    this.resetStates(); // Reset all states to ensure a clean start
    this.isAppearing = true;

    // Determine if the mole is feisty or healing
    this.isFeisty = Math.random() < 0.5;
    this.isHealing = !this.isFeisty && Math.random() < 0.08;

    // Play the appropriate animation based on the mole's state
    if (this.isHealing) {
      this.mole()?.play('heal', 24, () => {
        this.subscriptions.push(timer(1000).subscribe(() => this.hideMole()));
      });
    } else {
      this.mole()?.play('appear', 24, () => {
        // If the mole is feisty and hasn't been whacked, it will attack
        if (this.isFeisty && !this.isWhacked) {
          this.subscriptions.push(
            timer(600).subscribe(() => {
              if (!this.isWhacked) {
                this.isAttacking = true;
                this.mole()?.play('attack', 13, () => {
                  this.damage.emit();
                  this.hideMole();
                });
              }
            })
          );
        } else {
          // Otherwise, the mole will hide after a delay
          this.subscriptions.push(timer(1000).subscribe(() => this.hideMole()));
        }
      });
    }
  }

  // Handles the whack event
  whack() {
    // Only whack if the mole is appearing and not already whacked or attacking
    if (!this.isAppearing || this.isWhacked || this.isAttacking) return;

    this.isWhacked = true;
    this.isFeisty = false;
    this.score.emit();
    if (this.isHealing) this.heal.emit();

    // Play the dizzy and faint animations upon whack
    this.mole()?.play('dizzy', 24, () => {
      this.mole()?.play('faint', 24, () => {
        this.isAppearing = false;
        this.finishPopping.emit();
      });
    });
  }

  // Hides the mole
  hideMole() {
    // Only hide if not already hiding
    if (this.isHiding) return;
    this.isHiding = true;
    this.mole()?.play('hide', 24, () => {
      this.isAppearing = false;
      this.finishPopping.emit();
    });
  }

  // Resets all state flags
  resetStates() {
    this.isWhacked = false;
    this.isAttacking = false;
    this.isHiding = false;
    this.isHealing = false;
    this.clearSubscriptions(); // Clear all subscriptions
  }

  // Clear all subscriptions
  clearSubscriptions() {
    this.subscriptions.forEach(sub => sub.unsubscribe());
    this.subscriptions = [];
  }
}

Let's now dig a little bit inside the code:

Step 1: Define Component Properties and Outputs

export class MoleComponent {
  mole = viewChild<AnimatedSpriteComponent>('mole'); // Access the AnimatedSpriteComponent
  finishPopping = output({ alias: 'finishPopping' }); // Emits when popping is finished
  damage = output({ alias: 'damageReceived' }); // Emits when the mole deals damage
  score = output({ alias: 'takeScore' }); // Emits when the mole is whacked for points
  heal = output({ alias: 'moleHealing' }); // Emits when the mole heals the player
  frameWidth = input(0); // Width of the mole frame

  animations = {
    idle: [0],
    appear: [1, 2, 3, 4],
    hide: [4, 3, 2, 1, 0],
    dizzy: [36, 37, 38],
    faint: [42, 43, 44, 0],
    attack: [11, 12, 13, 14, 15, 16],
    heal: [24, 25, 26, 27, 28, 29, 30, 31, 32, 33],
  };

  isAppearing = false;
  isFeisty = false;
  isHealing = false;
  isWhacked = false;
  isAttacking = false;
  isHiding = false;

  private subscriptions: Subscription[] = []; // Store all subscriptions

We define properties to manage the mole's state and animations. The outputs are events that the mole emits to inform the parent component about its actions.

Step 2: Mole Popping Logic

  // Initiates the mole popping sequence
pop()
{
  this.resetStates(); // Reset all states to ensure a clean start
  this.isAppearing = true;

  // Determine if the mole is feisty or healing
  this.isFeisty = Math.random() < 0.5;
  this.isHealing = !this.isFeisty && Math.random() < 0.08;

  // Play the appropriate animation based on the mole's state
  if (this.isHealing) {
    this.mole()?.play('heal', 24, () => {
      this.subscriptions.push(timer(1000).subscribe(() => this.hideMole()));
    });
  } else {
    this.mole()?.play('appear', 24, () => {
      // If the mole is feisty and hasn't been whacked, it will attack
      if (this.isFeisty && !this.isWhacked) {
        this.subscriptions.push(
          timer(600).subscribe(() => {
            if (!this.isWhacked) {
              this.isAttacking = true;
              this.mole()?.play('attack', 13, () => {
                this.damage.emit();
                this.hideMole();
              });
            }
          })
        );
      } else {
        // Otherwise, the mole will hide after a delay
        this.subscriptions.push(timer(1000).subscribe(() => this.hideMole()));
      }
    });
  }
}

The pop method initiates the mole's popping sequence, determining whether the mole is feisty or healing and playing the appropriate animation. It uses timers to manage the sequence of events.

Step 3: Handling the Whack Event

  // Handles the whack event
whack()
{
  // Only whack if the mole is appearing and not already whacked or attacking
  if (!this.isAppearing || this.isWhacked || this.isAttacking) return;

  this.isWhacked = true;
  this.isFeisty = false;
  this.score.emit(); // Emit score event
  if (this.isHealing) this.heal.emit(); // Emit heal event if mole is healing

  // Play the dizzy and faint animations upon whack
  this.mole()?.play('dizzy', 24, () => {
    this.mole()?.play('faint', 24, () => {
      this.isAppearing = false;
      this.finishPopping.emit(); // Emit finishPopping event
    });
  });
}

The whack method handles the event when the player clicks on the mole. It plays the appropriate animations and emits events based on the mole's state.

Step 4: Hiding the Mole

  // Hides the mole
hideMole()
{
  // Only hide if not already hiding
  if (this.isHiding) return;
  this.isHiding = true;
  this.mole()?.play('hide', 24, () => {
    this.isAppearing = false;
    this.finishPopping.emit(); // Emit finishPopping event
  });
}

The hideMole method hides the mole, playing the hide animation and emitting the finishPopping event.

Step 5: Resetting States and Clearing Subscriptions

  // Resets all state flags
resetStates()
{
  this.isWhacked = false;
  this.isAttacking = false;
  this.isHiding = false;
  this.isHealing = false;
  this.clearSubscriptions(); // Clear all subscriptions
}

// Clear all subscriptions
clearSubscriptions()
{
  this.subscriptions.forEach(sub => sub.unsubscribe());
  this.subscriptions = [];
}
}

The resetStates method resets all state flags to their default values, and clearSubscriptions unsubscribes from all active subscriptions to avoid memory leaks.

🥹 Don't forget about the others

We're still missing some components like the score, toggle, timer, clear, and gameover, but these components are pretty much shells and share some behavior between them (at least the clear and gameover). So, let's dive into some of them and then we will share the final product.

The Clear component looks something like this:

@Component({
  selector: 'game-clear-level',
  standalone: true,
  template: `<div class="clear-screen">
    <div class="cleared-level-container">
      <span class="cleared-level-text">Level</span>
      <span class="cleared-level-text">{{ level() }}</span>
    </div>

    <div class="panel">
      <span class="panel-title">Cleared</span>
      <span class="panel-text">Score: {{ score() }}</span>

      <div class="panel-buttons-container">
        <button class="panel-button" (click)="reset.emit()">
          <img
            class="panel-button-icon"
            [src]="'/img/icon_restart.png'"
            alt="Restart Icon" />
        </button>
        <button class="panel-button" (click)="nextLevel.emit()">
          <img
            class="panel-button-icon"
            [src]="'/img/icon_play.png'"
            alt="Play Icon" />
        </button>
      </div>
    </div>
  </div> `,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class ClearLevelComponent {
  level = input.required<number>();
  score = input.required<number>();
  nextLevel = output();
  reset = output();
}

As you can see is just an egg-shell that receives some data and emits some data, the GameOver have similar behavior.

Now let's check the score and the health-bar:

@Component({
  selector: 'game-score',
  standalone: true,
  template: `<img
      class="absolute left-0 z-[2] h-10 w-10 md:h-12 md:w-12"
      src="/img/icon_score.png"
      alt="Score icon, a tiny golden coin" />
    <div
      class="absolute left-[20px] right-[5px] flex h-6 max-w-[8rem] items-center justify-center rounded-[13px] bg-white text-[0.8rem] md:text-[1rem]">
      {{ score() }}
    </div>`,
  styles: `
    :host {
      @apply relative flex flex-1 items-center justify-center;
    }
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class ScoreComponent {
  score = input.required<number>();
}

The score is pretty much the same, it presents some data that depends on the input that receives.

@Component({
  selector: 'game-health-bar',
  standalone: true,
  imports: [CommonModule],
  template: `<div class="ml-[4px] mt-[1px] h-6 w-full rounded-[10px] bg-white">
      <div
        class="absolute ml-[4px] h-6 rounded-[10px] bg-[#ff1a1a]"
        [style.width.%]="health()"></div>
    </div>
    <img
      src="/img/icon_health.png"
      alt="Health icon, a red hearth"
      class="absolute left-0 top-[-7px] h-10 w-12" /> `,
  styles: `
    :host {
      @apply relative flex-1;
    }
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class HealthBarComponent {
  health = input.required<number>();
}

Pretty much all the remaining components are the same, an egg-shell with some data to present (properly styled I hope).

🎮 The Initial Screen and To Play

Finally i wanted to provide a little initial screen so you can mentally prepare yourself to hit some moles so here I go.

@Component({
  selector: 'game-welcome',
  standalone: true,
  imports: [RouterLink, AnimatedSpriteComponent],
  template: `<div class="container flex flex-col items-center">
    <div
      class="flex h-[100dvh] w-[650px] flex-col items-center justify-center gap-5 bg-[url('/img/background.png')] bg-cover">
      <span class="text-shadow text-6xl">Wack-A-Mole</span>
      <game-animated-sprite
        [animations]="animations"
        [columns]="6"
        [rows]="8"
        [imgSrc]="'/img/sprites.png'"
        #mole />
      <button
        routerLink="/game"
        type="button"
        class="flex flex-row items-center justify-center gap-4">
        <span class="text-shadow text-6xl">Play</span>
        <div
          class="flex h-14 w-14 flex-col items-center justify-center rounded-2xl border-white bg-[#ff1a1a]">
          <img src="/img/icon_play.png" alt="Play Icon" class="w-4" />
        </div>
      </button>
    </div>
  </div>`,
  styles: `
    :host {
      @apply flex flex-col items-center;
    }

    .text-shadow {
      text-shadow:
        -1px -1px 0 #fff,
        1px -1px 0 #fff,
        -1px 1px 0 #fff,
        1px 1px 0 #fff;
    }
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class WelcomeComponent implements AfterViewInit {
  mole = viewChild<AnimatedSpriteComponent>('mole'); // Accesses the AnimatedSpriteComponent

  animations = {
    idle: [0],
    appear: [1, 2, 3, 4],
    hide: [4, 3, 2, 1, 0],
    dizzy: [36, 37, 38],
    faint: [42, 43, 44, 0],
    attack: [11, 12, 13, 14, 15, 16],
    heal: [24, 25, 26, 27, 28, 29, 30, 31, 32, 33],
  };

  private mainAnimations = ['attack', 'dizzy', 'heal', 'appear'];

  ngAfterViewInit(): void {
    this.startSequence();
  }

  startSequence(): void {
    this.playRandomAnimation();
  }

  playRandomAnimation(): void {
    const nextAnimation = this.getRandomAnimation();
    this.playAnimation(nextAnimation);
  }

  playAnimation(mainAnimation: string): void {
    this.mole()?.play(mainAnimation, 12, () => {
      timer(1000).subscribe(() => {
        this.playHideAnimation();
      });
    });
  }

  playHideAnimation(): void {
    this.mole()?.play('hide', 12, () => {
      timer(1000).subscribe(() => {
        this.playRandomAnimation();
      });
    });
  }

  getRandomAnimation(): string {
    const randomIndex = Math.floor(Math.random() * this.mainAnimations.length);
    return this.mainAnimations[randomIndex];
  }
}

As you can see welcome have a little more logic so let's check what is this thing doing.

Step 1: Define Component Properties and Outputs

export class WelcomeComponent implements AfterViewInit {
  mole = viewChild<AnimatedSpriteComponent>('mole'); // Accesses the AnimatedSpriteComponent

  animations = {
    idle: [0],
    appear: [1, 2, 3, 4],
    hide: [4, 3, 2, 1, 0],
    dizzy: [36, 37, 38],
    faint: [42, 43, 44, 0],
    attack: [11, 12, 13, 14, 15, 16],
    heal: [24, 25, 26, 27, 28, 29, 30, 31, 32, 33],
  };

  private mainAnimations = ['attack', 'dizzy', 'heal', 'appear']; // Main animations for the mole

We define properties for managing the mole's animations and a list of main animations to randomly play. The mole property is used to access the AnimatedSpriteComponent.

Step 2: Implement Lifecycle Hook and Animation Sequence

  ngAfterViewInit()
:
void {
  this.startSequence();
}

startSequence()
:
void {
  this.playRandomAnimation();
}

The ngAfterViewInit lifecycle hook initializes the animation sequence after the component's view has been initialized. startSequence begins the sequence by playing a random animation.

Step 3: Random Animation Logic

  playRandomAnimation()
:
void {
  const nextAnimation = this.getRandomAnimation();
  this.playAnimation(nextAnimation);
}

playAnimation(mainAnimation
:
string
):
void {
  this.mole()?.play(mainAnimation, 12, () => {
    timer(1000).subscribe(() => {
      this.playHideAnimation();
    });
  });
}

playHideAnimation()
:
void {
  this.mole()?.play('hide', 12, () => {
    timer(1000).subscribe(() => {
      this.playRandomAnimation();
    });
  });
}

getRandomAnimation()
:
string
{
  const randomIndex = Math.floor(Math.random() * this.mainAnimations.length);
  return this.mainAnimations[randomIndex];
}
}

playRandomAnimation: Chooses a random animation from the main animations list and plays it.
playAnimation: Plays the selected animation at 12 frames per second. Once the animation completes, it sets a timer to play the hide animation.
playHideAnimation: Plays the hide animation. Once it completes, it sets a timer to play another random animation.
getRandomAnimation: Returns a random animation from the mainAnimations list.

Finally the Wack-A-Molee is done and you can play around with it in here:

Wack-A-Molee Game and the code if you want to fork or star or something... github repo

🌟 Conclusion: Wrapping Up Part 2

We did it 🎉! We built the game, or at least something functional. We used Signals, Signal inputs, Signal Queries, Signal outputs, and SFC. We also built a component to reuse for little sprite sheet animations. I hope this article helped you get some inspiration. Let's see what I can try to build next!

If you found this article insightful, don't hesitate to connect with me on Twitter, Threads, or LinkedIn. Let's embark on this journey of discovery and innovation together! 💻🚀📘

Feeling generous? Show some love and buy me a coffee. Your support is greatly cherished! ☕️

Making a Wack-A-Molee with AnalogJs - Part 1

Luis Castro — Tue, 25 Jun 2024 20:47:25 +0000

📚The Idea

The search for inspiration:
After some time without writing, I was kind of looking for some subjects I could write about, and that's when my daughter came to ask me, "Dad, do you know how to make video games?" I was both surprised and impressed by the question. "Of course I can," was the answer. "Of course, I've never tried," was the reality. So I started to think about what to do next.

🐨Wack-a-Molee

Since it is my first time and I know zero about animations, the first game that came to my mind, because of simplicity and because it seems to be easier to implement for mobile, was Whac-A-Molee.

If you don't know the mechanics for classic Whac-A-Molee, they are very simple. Players need to hit a series of randomly popping-up animals with a mallet.

Getting Started

With the idea in my mind, I started to check Google, YouTube (you know, the usual) for inspiration and options, because clearly, I didn't want to start from scratch and have to design my own sprites and stuff.

And I ended up finding this project made with React Native by Tamas Szikszai. All the credit goes to him for the concept, sprites, and overall design. I'm definitely not stealing someone's work, so here is that if you want to check out his channel, click Here.

With the idea and a better start, let's get on with it!! 🎮:

The original project is using React Native and a little library called rn-sprite-sheet and we're using AnalogJs and that's pretty much it.

🦾Mechanics

I'm pretty much using the same mechanics that Tamas uses; however, I'm adding a couple of things, so let's explain this:

Gameplay: The game will be pretty much 12 moles popping randomly, and you need to hit them to make them go away as fast as you can. This is divided into 50 levels; each level increases the speed of the moles popping, making it a little harder to finish. Additionally, you have a healing bar, so if you lose all your health, you're gone. Easy, right? (I hope).
Types of Mole: You pretty much have 3 types of moles:
- Regular: This will pop and, after some time, it will hide.
- Angry: This one will pop, but it will attack and reduce your health if you don't hit it first.
- Sentinel: (Yeah, he looks like one of the X-Men Sentinels). This will drink some stuff and become a sentinel. If you hit him, you will gain some health.
Changes from the React Native One: Different from the original implementation, this one has an initial screen. As well, when there's 30% of the time left, at least 4 moles will pop at the same time.

Funny, right? So let's dig a little bit into the explanation of how this will work. I honestly didn't read the blog post from Tamas since I do not personally pay for Medium, but I saw his video. Yeah, I already posted the link, so to save a little time, I'll explain the basics of how the code works, and we will go from there.

🧩The Animation Library

With the mechanics well established and a solid starting point, we hit the first obstacle, which is the sprite animation library. I'm pretty sure there are many options to do this in Angular and JavaScript in general; however, with my lack of experience in the subject, I found Canvas to be the easiest to understand. So how does that work? Let's dig into what I did and how it works.

The Canvas Approach

@Component({
  selector: 'game-animated-sprite',
  standalone: true,
  template: `<canvas #canvas></canvas>`,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class AnimatedSpriteComponent implements AfterViewInit, OnDestroy {
  canvasRef = viewChild<ElementRef<HTMLCanvasElement>>('canvas');
  imgSrc = input.required<string>();
  rows = input.required<number>();
  columns = input.required<number>();
  animations = input.required<{ [key: string]: number[] }>();
  loopMode = input(false);
  frameWidth = input<number | null>(null);
  frameHeight = input<number | null>(null);
  initialFrame = input<number>(0);

  private img = new Image();
  private ctx!: CanvasRenderingContext2D;
  private width!: number;
  private height!: number;
  private originalAspectRatio!: number;
  private subscription!: Subscription;
  private currentLoopIndex = 0;
  private currentAnimationType!: string;
  private frameSequence!: number[];

  valueEffect = effect(() => {
    const [w, h, imgSrc] = [
      this.frameWidth(),
      this.frameHeight(),
      this.imgSrc(),
    ];
    untracked(() => {
      this.calculateDimensions();
    });
  });

  ngAfterViewInit(): void {
    const canvas = this.canvasRef()?.nativeElement;
    if (canvas) {
      this.ctx = canvas.getContext('2d') as CanvasRenderingContext2D;

      this.img.src = this.imgSrc();
      this.img.onload = () => {
        this.originalAspectRatio =
          this.img.naturalWidth / this.img.naturalHeight;
        this.calculateDimensions();
        this.drawFrame(this.initialFrame());
      };
    }
  }

  private calculateDimensions(): void {
    const [frameHeight, frameWidth] = [this.frameHeight(), this.frameWidth()];
    if (this.img.complete) {
      if (frameWidth && !frameHeight) {
        this.width = frameWidth;
        this.height = this.width / this.originalAspectRatio;
      } else if (!frameWidth && frameHeight) {
        this.height = frameHeight;
        this.width = this.height * this.originalAspectRatio;
      } else if (frameWidth && frameHeight) {
        this.width = frameWidth;
        this.height = frameHeight;
      } else {
        this.width = this.img.naturalWidth / this.columns();
        this.height = this.img.naturalHeight / this.rows();
      }

      const canvas = this.canvasRef()?.nativeElement;
      if (canvas) {
        canvas.width = this.width;
        canvas.height = this.height;
      }
    }
  }

  play(animationType: string, fps = 24, onFinish?: () => void): void {
    this.clearSubscription();
    this.currentLoopIndex = 0;
    this.currentAnimationType = animationType;
    this.frameSequence = this.animations()[animationType];
    this.startAnimation(this.frameSequence, fps, onFinish);
  }

  pause(): void {
    this.clearSubscription();
  }

  resume(): void {
    if (this.currentAnimationType && this.frameSequence) {
      this.startAnimation(this.frameSequence);
    }
  }

  reset(): void {
    this.clearCanvas();
    this.currentLoopIndex = 0;
  }

  private startAnimation(
    frameSequence: number[],
    fps = 24,
    onFinish?: () => void
  ): void {
    const frameRate = 1000 / fps;
    this.subscription = interval(frameRate)
      .pipe(
        tap(() => this.clearCanvas()),
        map(() => frameSequence[this.currentLoopIndex]),
        tap(frameIndex => this.drawFrame(frameIndex)),
        tap(() => {
          this.currentLoopIndex++;
          if (this.currentLoopIndex >= frameSequence.length) {
            if (this.loopMode()) {
              this.currentLoopIndex = 0;
            } else {
              this.subscription.unsubscribe();
              if (onFinish) {
                onFinish();
              }
            }
          }
        })
      )
      .subscribe();
  }

  private clearCanvas(): void {
    const canvas = this.canvasRef()?.nativeElement;
    if (canvas) {
      this.ctx.clearRect(0, 0, canvas.width, canvas.height);
    }
  }

  private drawFrame(frameIndex: number): void {
    const frameX = Math.floor(frameIndex % this.columns());
    const frameY = Math.floor(frameIndex / this.columns());
    const naturalFrameWidth = Math.floor(
      this.img.naturalWidth / this.columns()
    );
    const naturalFrameHeight = Math.floor(this.img.naturalHeight / this.rows());

    const padding = 1;

    this.ctx.drawImage(
      this.img,
      frameX * naturalFrameWidth + padding,
      frameY * naturalFrameHeight + padding,
      naturalFrameWidth - padding * 2,
      naturalFrameHeight - padding * 2,
      0,
      0,
      this.width,
      this.height
    );
  }

  private clearSubscription(): void {
    if (this.subscription) {
      this.subscription.unsubscribe();
    }
  }

  ngOnDestroy(): void {
    this.clearSubscription();
  }
}

So this is the component that pretty much animates the little mole, but it might as well work with other sprite sheets (

I tested it with a Zelda one, so I know it will).
Let's dig into the details of how this works or at least the CORE parts.

Detailed Explanation

Inputs and Properties

canvasRef = viewChild<ElementRef<HTMLCanvasElement>>('canvas');
imgSrc = input.required<string>();
rows = input.required<number>();
columns = input.required<number>();
animations = input.required<{ [key: string]: number[] }>();
loopMode = input(false);
frameWidth = input<number | null>(null);
frameHeight = input<number | null>(null);
initialFrame = input<number>(0);

Inputs: Several inputs are defined to control the sprite's behavior:
- imgSrc: URL of the sprite sheet image.
- rows and columns: Define the sprite sheet's grid.
- animations: An object mapping animation names to frame sequences.
- loopMode: A boolean to determine if animations should loop.
- frameWidth and frameHeight: Dimensions for each frame.
- initialFrame: The starting frame of the animation.
Canvas Reference: canvasRef is used to get the native canvas element.

Core Methods

calculateDimensions

 private calculateDimensions(): void {
    const [frameHeight, frameWidth] = [this.frameHeight(), this.frameWidth()];
    if (this.img.complete) {
      if (frameWidth && !frameHeight) {
        this.width = frameWidth;
        this.height = this.width / this.originalAspectRatio;
      } else if (!frameWidth && frameHeight) {
        this.height = frameHeight;
        this.width = this.height * this.originalAspectRatio;
      } else if (frameWidth && frameHeight) {
        this.width = frameWidth;
        this.height = frameHeight;
      } else {
        this.width = this.img.naturalWidth / this.columns();
        this.height = this.img.naturalHeight / this.rows();
      }

      const canvas = this.canvasRef()?.nativeElement;
      if (canvas) {
        canvas.width = this.width;
        canvas.height = this.height;
      }
    }
  }
}

calculateDimensions: This method adjusts the canvas dimensions based on the frame size or the image's natural dimensions.
- If both frameWidth and frameHeight are provided, use those dimensions.
- If only frameWidth is provided, calculate frameHeight to maintain the image's aspect ratio.
- If only frameHeight is provided, calculate frameWidth similarly.
- If neither are provided, calculate the frame dimensions based on the number of rows and columns in the sprite sheet.

This ensures that the image is properly scaled and displayed within the canvas.

startAnimation

private startAnimation(
    frameSequence: number[],
    fps = 24,
    onFinish?: () => void
  ): void {
    const frameRate = 1000 / fps;
    this.subscription = interval(frameRate)
      .pipe(
        tap(() => this.clearCanvas()),
        map(() => frameSequence[this.currentLoopIndex]),
        tap(frameIndex => this.drawFrame(frameIndex)),
        tap(() => {
          this.currentLoopIndex++;
          if (this.currentLoopIndex >= frameSequence.length) {
            if (this.loopMode()) {
              this.currentLoopIndex = 0;
            } else {
              this.subscription.unsubscribe();
              if (onFinish) {
                onFinish();
              }
            }
          }
        })
      )
      .subscribe();
  }

startAnimation: Manages the animation frame updates using RxJS interval. It ensures frames are drawn at the correct rate and handles the end-of-animation logic.
- interval(frameRate): Creates an observable that emits values at the specified frame rate.
- tap(() => this.clearCanvas()): Clears the canvas before drawing each frame.
- map(() => frameSequence[this.currentLoopIndex]): Maps the current loop index to the corresponding frame in the frame sequence.
- tap(frameIndex => this.drawFrame(frameIndex)): Draws the current frame.
- tap(() => { ... }): Updates the loop index and handles looping or finishing the animation.

The use of RxJS interval allows for precise control over the animation timing.

drawFrame

private drawFrame(frameIndex: number): void {
    const frameX = Math.floor(frameIndex % this.columns());
    const frameY = Math.floor(frameIndex / this.columns());
    const naturalFrameWidth = Math.floor(
      this.img.naturalWidth / this.columns()
    );
    const naturalFrameHeight = Math.floor(this.img.naturalHeight / this.rows());

    const padding = 1;

    this.ctx.drawImage(
      this.img,
      frameX * naturalFrameWidth + padding,
      frameY * naturalFrameHeight + padding,
      naturalFrameWidth - padding * 2,
      naturalFrameHeight - padding * 2,
      0,
      0,
      this.width,
      this.height
    );
  }

drawFrame: Draws a specific frame from the sprite sheet on the canvas.
- frameX and frameY are calculated to determine the position of the frame within the sprite sheet.
- naturalFrameWidth and naturalFrameHeight represent the dimensions of each frame within the sprite sheet.
- this.ctx.drawImage(...): Draws the calculated frame onto the canvas, scaling it to fit the specified dimensions.

The padding is used to ensure frames are drawn correctly without overlapping.

But do not believe a word of what I say, try it yourself 🥸 here

🌟 Conclusion: Wrapping Up Part 1

In this first part of our series on creating a Wack-A-Molee game with AnalogJs and Canvas, we've laid the groundwork by understanding the basic mechanics of the game and exploring the core component responsible for sprite animations. We've dissected the AnimatedSpriteComponent, looking at how it uses canvas to render and animate sprites efficiently.

We've used some of the latest Angular features like Signal Inputs and Signal Queries.

In the next part of the series, we'll dive deeper into game mechanics, adding interactivity and logic to bring the Wack-A-Molee game to life. Stay tuned as we continue building this fun game step by step!

If you found this article insightful, don't hesitate to connect with me on Twitter, Threads, or LinkedIn. Let's embark on this journey of discovery and innovation together! 💻🚀📘

Feeling generous? Show some love and buy me a coffee. Your support is greatly cherished! ☕️

The Importance of Soft Skills

Luis Castro — Thu, 07 Mar 2024 15:40:32 +0000

🗣️ Is There Any Question?

Introduction:

How many times have we sat through a meeting and heard, "Any questions?" only to be greeted by total silence? You might think that means everyone gets it, but that's not always the case. In my experience, when nobody says a word, it could mean they're confused or maybe just scared to speak up. It's a moment that really shows if a team is on the same page. This got me thinking about how important it really is to be good at the soft stuff – like talking, listening, and just getting along with each other. So, let's dive into why being a tech whiz isn't enough and how soft skills can make or break your game.

First things first, I want to say all of this is just my opinion, coming from someone who started in this field in 2010. It might not seem like a long time, but it's been enough to learn a few things. I remember being thrown into my first meeting alone, armed with little more than a basic understanding of the topic. I think my lead at that time believed it would push me to ask questions. That experience was an eye-opener in many ways, not least in showing how crucial communication and asking the right questions can be.

💡 What's a Soft Skill?

Believe it or not, there's more to success in tech than just knowing how to code or configure a server. Soft skills are those intangible qualities that don't show up in the code but make all the difference in a team environment. We're talking about things like communication, teamwork, problem-solving, and adaptability. It's about how you handle feedback, how you work with others, and how you approach challenges. In a way, soft skills are what make us more human and less like the machines we work with. They're the skills that shape how we interact with the world and the people around us.

🚀 Why Soft Skills Matter in Tech

In the tech world, we often find ourselves lost in code, systems, and endless debugging sessions. But the truth is, no matter how good your technical skills are, they only take you part of the way. Soft skills fill in the gaps, turning solitary tasks into collaborative achievements, which is even more critical in today's landscape where remote work has become the norm for many. Despite a shift back to more traditional working environments, the lessons learned and the necessity of honed communication and collaboration remain paramount.

The Misunderstood Genius:

We've all encountered the stereotype of the 'genius coder' – someone who can solve any problem but can't explain how they did it or work with others to implement the solution. This is where soft skills come in. Being able to communicate your ideas clearly, work as part of a team, and empathize with your users can turn a good tech project into a great one, especially when you're not sharing a physical space.

Feedback and Growth:

Then there's feedback – both giving and receiving. It's not just about pointing out mistakes; it's about fostering a culture where everyone can learn and improve. Without soft skills like empathy, patience, and communication, feedback can become a source of fear and resentment, rather than a tool for growth. This is particularly true in a remote setting, where clear communication is even more crucial.

Adapting to Change:

Tech is a field that's always changing, and adaptability is key. Soft skills help you navigate new situations, understand different perspectives, and come up with creative solutions to problems that aren't even on the radar yet. They're what make you flexible and resilient, whether you're working from home, in an office, or anywhere in between.

In essence, soft skills complement your technical abilities, making you a more effective and well-rounded professional. They enable you to lead with confidence, inspire your teammates, and build better products for your users. Now, with the prevalence of remote work and the ongoing transitions in workplace dynamics, there has never been a better time to polish your soft skills to shine in the digital world.

🌐 A Real-World Example: Leadership and Soft Skills in Action

In one of my recent projects, we hit a major roadblock. Tensions were high, and it seemed like we were veering off course. This is when the true value of leadership and soft skills really came to light. It wasn't just the most technically skilled individuals who steered us back (though, to be fair, they had their share of soft skills too :D); it was those who could communicate effectively, empathize with team members, and lead with clarity and confidence.

This experience was a wake-up call for many in the team, highlighting a stark reality: technical skills may get you to the table, but it's your soft skills that will determine how well you dance around the challenges. It taught us that leadership isn't about title or tenure; it's about the ability to rally a team, navigate through uncertainty, and keep everyone focused and motivated towards a common goal.

🌟 Conclusion: The Unseen Strength of Soft Skills

Soft skills have been on my mind a lot, especially after the last two projects where I saw people who clearly had these abilities, yet, due to various reasons or circumstances, couldn't showcase them effectively, sometimes leading to unnecessary roadblocks. This has been something I've wanted to write about, even briefly, as it underscores a vital point: soft skills are not just nice-to-haves; they are essential tools for success, particularly in the fast-paced, ever-evolving tech industry.

These skills complement our technical abilities, enabling us to communicate more effectively, work well with others, and lead with empathy and understanding. My personal experiences, coupled with broader industry observations, highlight a clear message: while technical skills may open doors, it's soft skills that allow us to navigate through them effectively.

As we continue to advance in our careers, let's not underestimate the power of the human element. Our soft skills make our hard skills all the more valuable. Remember, improving soft skills is a continuous journey involving conscious effort, reflection, and a willingness to grow. So, let's commit to enhancing our communication, empathy, teamwork, and leadership abilities. Together, we can transform challenges into opportunities and pave the way for a more inclusive, collaborative, and successful future in tech.

If you found this article insightful, don't hesitate to connect with me on Twitter, Threads, or LinkedIn. Let's embark on this journey of discovery and innovation together! 💻🚀📘

Feeling generous? Show some love and buy me a coffee. Your support is greatly cherished! ☕️

Unveiling Angular 17 - The Angular Renaissance

Luis Castro — Thu, 09 Nov 2023 15:53:10 +0000

Last month was Angular's 13th birthday 🎉, and the framework is showing no signs of slowing down.

Angular continues its forward march in the web development arena with the release of Angular 17. Building upon the solid foundation of previous versions, Angular 17 introduces features that are set to redefine the developer experience and application performance. In this article, we'll delve into the innovative additions that Angular 17 brings to the table.

Angular's Evolution

The evolution of Angular has been nothing short of impressive. Since its inception, it has grown from a framework to a platform, providing an extensive set of tools for developers to build dynamic and robust web applications. The release of Angular 17 represents another significant milestone in its journey, reinforcing its position in the competitive landscape of web development frameworks.

Breaking New Ground with Angular 17

Angular 17 is not just another update; it's by far the best one so far, introducing features that will settle the future of the framework for good. Here's a closer look at the transformative features introduced:

Declarative Control Flow Constructs

Angular 17 unveils a new declarative syntax for control flows within templates, streamlining the way conditional rendering is handled. This syntax brings the familiarities of structural directives like NgIf and NgFor into the language's core, providing a more intuitive and less verbose way to manage dynamic content.

Its beautiful simplicity is best illustrated with an example:

@if (loggedIn) { 
  The user is logged in 
} 
@else { 
  The user is not logged in 
}

Performance Boost with Reconciliation Algorithm

With the introduction of a new reconciliation algorithm, Angular 17 significantly enhances the re-rendering process. This improvement translates to faster and more efficient updates to the view, ensuring a smoother user experience, particularly for applications with complex UIs.

Angular is crazy fast now:

Deferred Views for Lazier Loading

Emphasizing performance, Angular 17 introduces deferred views, enabling developers to specify parts of the application to be loaded lazily. This means critical resources can be prioritized, while non-essential elements are loaded as needed, reducing initial load times and optimizing resource usage.

You can read more about deferred and control flow in the article i wrote about it here.

Signals all over the place: The New Paradigm

Signaling a shift in the framework's reactive programming model, Angular 17 spotlights signal-based components. This move integrates signals as a core concept within the Angular ecosystem, offering a more seamless and powerful way to manage state changes and data flow in applications.

"The introduction of signal-based components (in future versions) will be a game-changer for Angular. It's a natural evolution of the framework's reactive programming model, and it's going to make a huge difference in the way developers build applications."

The New Logo and Docs

As Angular's capabilities have expanded, so too has its identity. The renaissance of Angular continues with a dynamic new look and improved learning resources. Angular's transformation is now reflected in a new logo—transitioning from the original red shield to a modern, hexagonal logo with a vibrant purple-to-pink gradient, marking a future-oriented evolution.

In parallel, Angular has launched a new documentation website, angular.dev, a beta preview of what will become the default Angular website in v18. This site introduces an interactive learning journey, allowing developers to learn Angular through WebContainers directly in the browser—an innovative step to enhance the Angular learning experience.

Interactive Angular tutorial with WebContainers

The new Angular tutorial leverages WebContainers to power an interactive coding experience. This immersive approach is designed to help new and seasoned developers alike to grasp Angular's concepts in a practical, hands-on manner.

This are only some of the new features of Angular 17, but there are many more and you can read about them in a super complete description in the official Angular blog (I took the liberty of using the images from there cause they're so cool 😁).

What's Next for Angular?

The journey doesn't stop here. Angular's roadmap is filled with promising updates that aim to further simplify development workflows, improve performance, and enhance cross-platform capabilities. The dedication to continuous improvement keeps Angular at the forefront of web development innovation.

Angular 17 is more than an update; it's a vision for the future of web development. It embodies the relentless pursuit of excellence that Angular developers have come to expect. As the framework evolves, it continues to empower developers to build faster, more efficient, and more engaging web applications.

Stay tuned as we continue to unravel the layers of Angular 17 and provide you with comprehensive insights into its capabilities.

Conclusion

Angular 17 is a new era for Angular one that looks extremely promising. The new features introduced in this version and the pace that started with version 14 are a clear sign that the framework is here to stay and that it will continue to evolve and improve.

I'm really excited about the future of Angular and I can't wait to see what the next versions will bring.

If you found this article insightful and wish to delve deeper into Angular's vast universe, don't hesitate to connect with me on Twitter, Threads, or LinkedIn. Let's embark on this journey of discovery and innovation together! 💻🚀📘

Feeling generous? Show some love and buy me a coffee. Your support is greatly cherished! ☕️

Understanding The New Control Flow And Deferred Loading in Angular

Luis Castro — Sat, 07 Oct 2023 12:09:34 +0000

Introduction

Angular is gearing up for its new release (version 17), and with it comes the introduction of two thrilling features: the revamped Control Flow syntax and the Deferred blocks syntax. In this article, we'll delve deep into both, shedding light on their functionalities and potential.

But before we dive into the new, let's take a step back and revisit the current control flow syntax.

📚 The Current Control Flow Syntax

A foundational element of the framework is its control flow. Currently, Angular orchestrates this through structural directives. These directives, often seen as the rockstars of the framework, have catered to developers' needs efficiently. They've provided solutions to a myriad of scenarios. However, they come with certain trade-offs, which the Angular team aims to address with the new syntax.

At present, we have three main structural directives:

ngIf: The *ngIf directive conditionally adds or removes content from the DOM, based on the expression's truthiness.
ngFor: The *ngFor directive instantiates a template for each item in an iterable.
ngSwitch: The *ngSwitch directive swaps the DOM structure in your template based on a specific expression's evaluation.

So, Why the Change?

Developer Feedback: The prevailing microsyntax-based control flow, although effective, isn't as intuitive as some other frameworks.
New Features: The anticipated changes not only aim to refine the developer experience but also usher in new functionalities.
Adapting to Zoneless Applications: The traditional control flow techniques falter with zoneless apps. Rather than making minor adjustments to the existing system, the Angular team envisions a comprehensive overhaul, steering towards a sleeker, built-in control flow.

🎉 The New Control Flow Syntax

So, now let's get into the new stuff, for the new control flow syntax, we have the following:

@if: with the new syntax this will replace the ngIf directive.

@if (user.type === 'primary') {
<user-profile [data]="user" />
} @else if (user.type === 'secondary') {
<user-profile [data]="user" [type]="secondary" />
} @else {
<p>The profile doesn't exist!</p>
}

Looking good, right? But wait, there's more! 🤩

@for: with the new syntax this will replace the ngFor directive, and has several differences compared to its structural directive predecessor.

@for (user of users; track user.id) {
<user-profile [data]="user" />
}

You can also track the index of the current item:

@for (user of users; track $index) {
<user-profile [data]="user" />
}

A couple of things to notice here (besides the syntax) we now have a track that is mandatory and replaces the use of the trackBy function. It determines the row key which @for will use to associate array items with the views it creates, moving them around as needed.

@empty block

As well Angular is introducing the @empty block, which is a block that will be displayed when the array is empty.

@for (something of []; track $index) {
<span class="square">{{ something }}!</span>
} @empty {
<span class="square"
  >This is empty so this will be shown!! if you use &#64;for with an &#64;empty
  block</span
>
}

$index and other variables

Within for row views, there are several implicit variables which are always available:

Variable	Meaning
$index	Index of the current row
$first	Whether the current row is the first row
$last	Whether the current row is the last row
$even	Whether the current row index is even
$odd	Whether the current row index is odd

These variables are always available with these names, but can be aliased via a let segment:

@for (item of items; track item.id; let idx = $index, e = $even) {
<span>Item #{{ idx }}: {{ item.name }}</span>
}

Track: The Angular team has found that not using trackBy in NgFor loops over immutable data often leads to performance issues. To fix this, trackBy is now mandatory for these loops. The only exception is when the loop iterates over Iterable>; in this case, trackBy is actually disallowed to optimize row updates.

Cool so far? Let's keep going! 🤓

@switch: with the new syntax this will replace the ngSwitch directive.

@switch (count) { @case (0) {
<span class="square">{{ options[count].label }}</span>
} @case (1) {
<span class="square_red">{{ options[count].label }}</span>
} @default{
<span class="square_green">{{ options[count].label }}</span>
} }

Honestly i think changes looks great it detach the element from the control flow and make it more readable and easy to understand.

🎉 Deferred Blocks

Now let's talk about one of the rockstars of the upcoming version the @defer.

Modern web design prioritizes optimal user experience during application loading, with metrics like Core Web Vitals measuring this performance. To enhance this, developers often defer less essential UI elements to prioritize loading key components. For instance, a page might load a primary video before the comments section. While Angular offers lazy loading features, these methods can be intricate. Hence, Angular is proposing a unified deferred loading approach, @defer, compatible with both client and server-side rendering.

How does it work?

We use them in the template by the following block @defer(condition){...deferred stuff }. Once we do this Angular will make the magic happen and the dependencies (components, directives, etc) referenced within the deferred block are going to be loaded lazily. This includes all dependencies within the deferred block, which would include components, directives, and pipes used within those dependencies.

And i personally believe that's super cool!! 🤩

here's an example:

@defer (on interaction(deferButton)) {
<app-lazy />
}

This little block will load the app-lazy component once the user interacts with the deferButton element.

But there's more! 🤓

The @defer block swaps placeholder content with lazily loaded content when activated. Developers can set this activation using two options: on and when.

when: An imperative condition that triggers the swap when it becomes true. Once swapped, it won't revert even if the condition becomes false.
on: A declarative trigger, like an event. Predefined triggers include actions like interaction or entering the viewport. Multiple triggers, such as interaction or a timer, can be combined.
This ensures efficient content loading based on user interaction or set conditions.

Examples of this are:

@defer (when cond) {
<some-cmp />
}

@defer (on interaction, timer(5s)){
<some-cmp />
}

We can also combine them:

<button #deferButton>
  Show Defered Component using &#64;defer on interaction
</button>

@defer (when cond; on interaction(deferButton)){
<some-cmp />
}

Triggering Deferred Blocks

So, we know how to use the @defer block, but how do we trigger it? Well, we have some options:

Trigger	Description
idle	Triggers the deferred loading once the browser has reached an idle state.
interaction	Triggers the deferred loading on click, focus, touch, and input events.
immediate	Triggers the deferred load immediately, once the client has finished
	rendering.
timer(x)	Triggers after a specified duration.
hover	Triggers deferred loading when the mouse has hovered over a trigger area.
viewport	Triggers the deferred block when the specified content enters the viewport.

Let's put together a couple of examples:

viewport:

In this case the deferred block will be loaded once the greeting element enters the viewport.

<div #greeting>Hello!</div>

@defer (on viewport(greeting)){
<greetings-cmp />
}

timer:

In this case the deferred block will be loaded after 5 seconds.

@defer (on timer(5s)){
<some-cmp />
}

@placeholder Blocks

@defer blocks, by default, are empty until activated. However, with @placeholder blocks, developers can dictate what's displayed beforehand. This could be any content, from DOM nodes to components.

@defer (when cond){
<some-cmp />
} @placeholder (minimum 500ms){
<img src="placeholder.png" />
}

@loading Blocks

The @loading block indicates the content to be shown while the @defer block is gathering its required dependencies to display its main content. If omitted, the @defer block will keep displaying the @placeholder content (if available) until its primary content is ready.

@defer (when cond){
<some-cmp />
} @loading {
<div class="loading">Loading the component...</div>
}

@error Blocks

The @error block displays a UI for instances when deferred loading does not succeed. Like the @placeholder and @loading blocks, it's optional. Without it, the @defer block won't show anything upon a loading failure.

@defer (when cond){
<calendar-cmp />
} @error{
<p>Failed to load the component</p>
<p><strong>Error:</strong> {{$error.message}}</p>
}

Note: The @loading , @placeholder , and @error blocks eagerly load their content. This means that they will be loaded as soon as the @defer block is rendered, regardless of whether the @defer block is activated or not.

Resource Prefetching

Another feature for deferred loading is the ability to prefetch dependencies ahead of a user's interaction. This is especially useful to reduce the delay when a deferred block becomes active. The prefetch syntax works alongside the main defer condition and uses triggers (when and/or on) similar to defer.

The distinction is that when and on control rendering while prefetch determines when to fetch resources. This allows you to prefetch resources even before a user sees or interacts with a deferred block, ensuring faster availability. Note: turning prefetch when to false won't hide content. To hide content, use it in conjunction with if.

@defer (when cond; prefetch when cond){
<some-cmp />
}

Migration

What i love about Angular is that they're always trying to make the migration process as smooth as possible, and this time is no exception. The Angular team is working on an schematic to help us migrate our current code to the new syntax. This schematic should be available when the version is released.

As well as per the RFC's and comments from the Angular team the structural directives are not going anywhere, so we can keep using them as we do today.

🎈 Conclusion

The introduction of the new Control Flow syntax and Deferred blocks is a testament to Angular's commitment to providing state-of-the-art tools for developers. These changes not only simplify code readability but also enhance performance, especially for large-scale applications. By understanding these new additions, developers can harness the full potential of Angular's evolving ecosystem.

This are exciting times for Angular and i can't wait to see what's next! 🤩

If you want to know more about both RFC's you can check them out here:

As well you can see them in action with this StackBlitz example prepared by @Jean__Meche.

If you found this exploration insightful and wish to delve deeper into Angular's vast universe, don't hesitate to connect with me on Twitter, Threads, or LinkedIn. Let's embark on this journey of discovery and innovation together! 💻🚀📘

Feeling generous? Show some love and buy me a coffee. Your support is greatly cherished! ☕️

Learning Angular's Dependency Injection with TypeScript

Luis Castro — Sat, 07 Oct 2023 12:09:18 +0000

Introduction

Angular's Dependency Injection (DI) system is one of its most powerful features, enabling modularity, flexibility, and maintainability in applications. But how does it work under the hood? In this article, we'll recreate Angular's DI using pure TypeScript, shedding light on its core concepts and mechanics.

🌱 The Power of Dependency Injection

Dependency Injection is a design pattern that promotes inversion of control. Instead of a class instantiating its dependencies, they are injected from the outside. This leads to more modular, testable, and maintainable code. Angular's DI system takes this pattern to the next level, offering a hierarchical injector system that allows for provider overrides at different levels.

🎉 Building the DI System in TypeScript

To understand Angular's DI system, we'll build a simplified version using TypeScript. Our system will consist of providers (services), injectors, a hierarchy of injectors and some decorators that will simulate some of the Angular decorators (yeah like @Host or @Self).

1. The Injectable Decorator

The Injectable decorator is a crucial part of our DI system. It automatically registers the decorated class with the root injector, making it available for injection into other classes.

import Injector from './injectors/injector';

export function Injectable(): ClassDecorator {
  // A decorator is a function that returns another function. The decorator function is called with the target class as its argument.
  return function (target: any) {
    // Get the root injector.
    const rootInjector = Injector.getRootInstance();

    // Add the provider to the root injector.
    rootInjector.addProvider(target, new target());
  };
}

2. The Injector Classes

Our DI system includes a root Injector class and specialized injectors for modules (ModuleInjector) and elements (ElementInjector). We also have a NullInjector and EnvironmentInjector for handling cases where a provider is not found. These specialized injectors inherit from the root Injector class and can override providers at different levels.

Understanding the Different Types of Injectors

1. Null Injector (`NullInjector`)

The NullInjector is a special kind of injector that lacks providers. If you attempt to retrieve a provider from it, an error is thrown. This serves as a useful fallback mechanism to ensure that if a provider is not found in any of the parent injectors, an error will be generated. This makes it easier to debug issues related to missing providers. In the Angular hierarchy, this is the top-level injector.

export default class NullInjector {
  getProvider(provider: any) {
    throw new Error(`No provider for ${provider}`);
  }
}

2. Root Injector (`Injector`)

The Injector class serves as the root of our Dependency Injection system. It's responsible for registering providers and resolving dependencies. It has a static _rootInstance to ensure a singleton root injector, a _providers map to store registered providers, and a _parent property to maintain a hierarchical structure of injectors.

import NullInjector from './null-injector';
import { ProviderMetadata } from './provider-metadata.model';

/**
 * Injector class to handle dependency injection.
 */
export default class Injector {
  /** A static property that stores the root injector instance. */
  private static _rootInstance: Injector | null = null;

  /** A map of providers to their associated instances. */
  private _providers: Map<any, any> = new Map();

  /** A map of view providers to their associated instances. */
  private _viewProviders: Map<any, any> = new Map();

  /** The parent injector, or a null injector if this is the root. */
  private _parent: Injector | NullInjector;

  /**
   * Creates an Injector instance.
   *
   * @param {Injector | NullInjector} [parent] - The parent injector. If not provided, creates a NullInjector.
   */
  constructor(parent?: Injector | NullInjector) {
    this._parent = parent || new NullInjector();
  }

  /**
   * Gets the map of registered providers.
   *
   * @returns {Map<any, any>} The map of providers to their associated instances.
   */
  public getProviders(): Map<any, any> {
    return this._providers;
  }

  /**
   * Retrieves the root instance of the Injector.
   *
   * @returns {Injector} The root injector instance.
   */
  static getRootInstance(): Injector {
    if (!this._rootInstance) {
      this._rootInstance = new Injector();
    }
    return this._rootInstance;
  }

  /**
   * Resolves a dependency based on the token.
   *
   * @template T - Type of the provider.
   * @param {any} token - The token used to look up the provider.
   * @returns {T | undefined} - Instance associated with the provider or undefined if not found.
   */
  static resolve<T>(token: any): T | undefined {
    const rootInstance = this.getRootInstance();
    return rootInstance.getProvider(token);
  }

  /**
   * Registers a new provider and its associated instance.
   *
   * @param {any} provider - The provider to register.
   * @param {any} value - The instance associated with the provider.
   * @param {boolean} isViewProvider - If the provider is a viewProvider or not
   */
  addProvider(
    provider: any,
    value: any,
    isViewProvider: boolean = false
  ): void {
    if (isViewProvider) {
      this._viewProviders.set(provider, value);
    } else {
      this._providers.set(provider, value);
    }
  }

  /**
   * Retrieves an instance associated with the provider.
   *
   * @template T - Type of the provider.
   * @param {new () => T} provider - The provider to retrieve.
   * @param {ProviderMetadata} [metadata={}] - Metadata options.
   * @param {boolean} [hostOnly=false] - If true, only look in the current injector and its parent.
   * @returns {T | undefined} - Instance associated with the provider or undefined if not found.
   */
  getProvider<T>(
    provider: new () => T,
    metadata: ProviderMetadata = {},
    hostOnly: boolean = false
  ): T | undefined {
    let value: T | undefined;

    // If 'self' metadata is true, only look in the current injector
    if (metadata.self) {
      return this._providers.get(provider);
    }

    // If 'skipSelf' metadata is true, skip the current injector
    if (metadata.skipSelf) {
      return this._parent.getProvider(provider, { self: true }, hostOnly);
    }

    // If 'host' metadata is true and hostOnly flag is set
    if (metadata.host && hostOnly) {
      return (
        this._viewProviders.get(provider) ||
        this._parent.getProvider(provider, { self: true }, true)
      );
    } else {
      value =
        this._providers.get(provider) || this._viewProviders.get(provider);
    }

    if (value) return value;

    if (metadata.self) {
      return undefined;
    }

    return this._parent.getProvider(provider, metadata, hostOnly);
  }
}

3. Element Injector (`ElementInjector`)

The ElementInjector is a specialized injector that inherits from the root Injector class. It's designed to provide dependencies to components and directives within a specific DOM element. It can override providers at the element level, allowing for more granular control.

import Injector from './injector';

export default class ElementInjector extends Injector {
  constructor(parent: Injector) {
    super(parent);
  }

  getProvider(provider, metadata = {}, hostOnly = false) {
    let value = this.getProviders().get(provider);
    if (!value) {
      value = super.getProvider(provider, metadata, hostOnly);
    }
    return value;
  }
}

4. Module Injector (`ModuleInjector`)

The ModuleInjector is another specialized injector that also inherits from the root Injector. It's used to provide dependencies to components within a specific module. This allows for module-level dependency overrides, giving you the flexibility to provide different implementations of a service for different modules.

import Injector from './injector';

export default class ModuleInjector extends Injector {
  constructor(parent: Injector) {
    super(parent);
  }

  getProvider(provider, metadata = {}, hostOnly = false) {
    let value = this.getProviders().get(provider);
    if (!value) {
      value = super.getProvider(provider, metadata, hostOnly);
    }
    return value;
  }
}

5. Environment Injector (`EnvironmentInjector`)

The EnvironmentInjector in Angular is a specific type of injector that's part of the environment injector hierarchy, which exists outside of the component tree. It can be used to provide dependencies to standalone components, lazy-loaded routes, and other parts of your application that are not part of the component hierarchy.

import Injector from './injector';
import { ProviderMetadata } from './provider-metadata.model';

/**
 * Specialized injector that first checks an environment-specific injector
 * before falling back to the standard injector hierarchy.
 */
export class EnvironmentInjector extends Injector {
  private _environmentInjector: Injector | null | undefined;

  /**
   * Creates an instance of EnvironmentInjector.
   *
   * @param {Injector} parentInjector - The parent injector.
   * @param {Injector | null} [environmentInjector] - An optional environment-specific injector.
   */
  constructor(parentInjector: Injector, environmentInjector?: Injector | null) {
    super(parentInjector);
    this._environmentInjector = environmentInjector;
  }

  /**
   * Retrieves a provider.
   *
   * @template T - The type of the provider.
   * @param {new () => T} provider - The class of the provider.
   * @param {ProviderMetadata} [metadata={}] - Optional metadata.
   * @param {boolean} [hostOnly=false] - Whether to restrict to the host injector.
   * @returns {T | undefined} - The provider instance, or undefined if not found.
   */
  getProvider<T>(
    provider: new () => T,
    metadata: ProviderMetadata = {},
    hostOnly: boolean = false
  ): T | undefined {
    let value: T | undefined;

    // Check the environment injector first, if it is provided
    if (this._environmentInjector) {
      value = this._environmentInjector.getProvider(
        provider,
        metadata,
        hostOnly
      );
    }

    if (value) return value;

    // Behave as the original getProvider() method if the environment injector is not provided or the provider is not found in the environment injector
    return super.getProvider(provider, metadata, hostOnly);
  }
}

By understanding these different types of injectors, you'll gain a comprehensive insight into how Angular's DI system works. Each injector has its role and scope, and knowing how to use them effectively is key to mastering Dependency Injection in Angular.

3. Services (Providers)

Services are the classes that will be injected into our components. We'll create a few services to demonstrate how the DI system works.

HeroService

import { Injectable } from '../decorators';

@Injectable()
class HeroService {
  getHero() {
    console.log('Fetching hero from HeroService...');
    return 'Superman';
  }
}

export default HeroService;

SidekickService

import { Injectable } from '../decorators';

@Injectable()
class SidekickService {
  getSidekick() {
    console.log('Fetching sidekick from SidekickService...');
    return 'Robin';
  }
}

export default SidekickService;

LoggerService

import { Injectable } from '../decorators';

@Injectable()
export class LoggerService {
  constructor(private log: string) {}

  printName() {
    console.log(`Logging this: ${this.log}`);
  }
}

VillainService

import { Injectable } from '../decorators';

@Injectable()
export class VillainService {
  getVillain() {
    console.log('Fetching villain from VillainService...');
    return 'Joker';
  }
}

DebugService

import { Injectable } from '../decorators';

@Injectable()
export class DebugService {
  constructor(private log: string) {}

  printName() {
    console.log(`Debugging this: ${this.log}`);
  }
}

MutantService

import { Injectable } from '../decorators';

@Injectable()
export class MutantsService {
  getMutant() {
    console.log('Fetching a mutant from MutantsService...');
    return 'Leonardo';
  }
}

4. Demonstrating the DI System

Finally, we'll demonstrate how the DI system works by setting up a hierarchy of injectors and injecting services into a component.

import { createMyComponent } from './create-component';
import { Host, Optional, Self, SkipSelf } from './decorators';
import ElementInjector from './injectors/element-injector';
import Injector from './injectors/injector';
import ModuleInjector from './injectors/module-injector';
import NullInjector from './injectors/null-injector';
import { DebugService } from './services/debug.service';
import { HeroService } from './services/hero.service';
import { LoggerService } from './services/logger.service';
import { SidekickService } from './services/sidekick.service';
import { VillainService } from './services/villain.service';

class MyComponent {
  constructor(
    private heroService: HeroService,
    @SkipSelf() private loggerService: LoggerService,
    @Self() private villainService?: VillainService,
    @Optional() public sideKicksService?: SidekickService,
    @Host() public debugService?: DebugService
  ) {}

  ngOnInit() {
    // Fetch hero, sidekick, villain and logger info
    console.log(this.heroService.getHero());
    if (this.sideKicksService) {
      console.log(this.sideKicksService.getSidekick());
    }
    if (this.villainService) {
      console.log(this.villainService.getVillain());
    }
    if (this.loggerService) {
      this.loggerService.printName();
    }
    if (this.debugService) {
      // New addition
      this.debugService.printName();
    }
  }
}

// Special injector without providers
const nullInjector = new NullInjector();

// Top-level injector; parent of all injectors
const rootInjector = new Injector(nullInjector);

// Module injector, a child of the root, provides dependencies for a module
const moduleInjector = new ModuleInjector(rootInjector);

// Service registration for the module scope
moduleInjector.addProvider(LoggerService, new LoggerService('Module Provider'));
moduleInjector.addProvider(DebugService, new DebugService('Module Provider'));
moduleInjector.addProvider(HeroService, new HeroService());

// Element injector, a child of the module, provides dependencies for components in a DOM element
const elementInjector: Injector = new ElementInjector(moduleInjector);
elementInjector.addProvider(
  LoggerService,
  new LoggerService('Element Provider')
);
elementInjector.addProvider(DebugService, new DebugService('Element Provider'));
elementInjector.addProvider(VillainService, new VillainService());

// Uncomment to inspect the providers in the element and module injector
// console.log('Element Injector Providers:', [...elementInjector['_providers'].keys()]);
// console.log('Module Injector Providers:', [...moduleInjector['_providers'].keys()]);

//Create a new Environment Injector used to provide dependencies to standalone components, lazy-loaded routes, and other parts of your application that are not part of the component hierarchy
const environmentInjector = new EnvironmentInjector(rootInjector);

// Register a provider with the environment injector
environmentInjector.addProvider(MutantsService, new MutantsService());

// Create and initialize the component
const myComponent = createMyComponent(
  MyComponent,
  elementInjector,
  [new HeroService(), environmentInjector],
  true
);

// Uncomment these for debugging DI hierarchy
// console.log('Null injector:', nullInjector);
// console.log('Root injector:', rootInjector);
// console.log('Module injector:', moduleInjector);
// console.log('Element injector:', elementInjector);

4.1 🌳 Hierarchical Injectors: The Backbone of Angular DI

Angular employs a hierarchical structure for its injectors, enabling a granular level of control for dependencies. Our example mimics this using four custom injector classes: NullInjector, Injector, ModuleInjector, and ElementInjector. These classes are arranged in the following hierarchy:

NullInjector
└── Injector
    └── ModuleInjector
        └── ElementInjector

Here, NullInjector is a special top-level injector devoid of any providers, while the Injector class serves as the parent for all other injectors. ModuleInjector provides dependencies at the module scope, and ElementInjector does so at the component or DOM level. This hierarchy allows for provider overrides at any level.

4.2 🧬 Decoding Service Injection: The Nitty-Gritty

In our MyComponent class, several services are brought into play:

HeroService: Directly injected and uses the provider from ModuleInjector. This allows for a centralized place for this often-used service.
LoggerService: Decorated with @SkipSelf(), this service bypasses the immediate injector (ElementInjector) and grabs the provider from its parent (ModuleInjector).
VillainService: The use of @Self() restricts the search to ElementInjector. This makes the injection more specific, ensuring that only local providers are considered.
SidekickService: Annotated with @Optional(), this service is more forgiving. If not found, the component won't break; it simply won't have a SidekickService.
DebugService: Using @Host(), the search is limited to the current ElementInjector and its parents, but not to ancestor injectors like ModuleInjector.
MutantsService: This service is provided by the EnvironmentInjector, which is not part of the standard injector hierarchy. It's designed to supply dependencies to parts of the application that are outside the component tree, like standalone components or lazy-loaded routes.

4.3 🚀 Executing the Code: What Happens Under the Hood?

When this code runs, several things happen sequentially:

Injector instances are created, respecting the established hierarchy.
Service providers are registered with these injectors.
The MyComponent class is instantiated, and its constructor receives the services according to the specified decorators.
Finally, ngOnInit is invoked, interacting with the services to fetch and log data.

This execution flow underscores the intricate but efficient nature of Angular's DI system.

if you want to play with it or to see the full code, you can find it in this stackblitz project

🎈 Conclusion

Recreating Angular's DI system in TypeScript provides valuable insights into its inner workings. We've seen how providers are registered, how injectors maintain a hierarchy, and how dependencies are resolved. With this understanding, you can harness the full power of Angular's DI in your applications. For further details, you can dive deeper into the official Angular Dependency Injection documentation.

If you have any questions or feedback, feel free to connect with me on Twitter, Threads, or LinkedIn. Let's continue to explore the intricacies of Angular and elevate our coding skills together! 💻🚀📘

If you like my content and want to support me, you can do so by buying me a coffee ☕️. I would really appreciate it!

Enhancing My AnalogJs Blog with Transloco for Seamless Translations

Luis Castro — Sat, 07 Oct 2023 12:07:39 +0000

Introduction

Being a Mexican living in the US, I've always valued the importance of bilingualism. It's not just about communication; it's about bridging cultures. With this in mind, I decided to integrate Transloco into my AnalogJs blog, making my content more accessible.

The Bilingual Vision for My Blog

So, the idea is this: When you first land on my blog, it'll check your browser's language setting. If it's set to Spanish, you'll see the content in Spanish; if it's anything else, you'll get English by default. But I wanted to give readers control too. That's where the flag button comes in. Located at a noticeable spot on the page, this button lets you toggle between English (with a USA flag) and Spanish (with a Mexican flag). Just a click, and the entire blog switches languages in real-time. Simple, right? While we're starting with these two languages, this sets the groundwork for possibly adding more in the future.

Transloco: Seamless Content Translations

Transloco is an Angular i18n solution that allows for defining translations in various languages and switching between them seamlessly. Some of its core functionalities include:

Clean and DRY Templates: Ensuring templates remain concise and non-repetitive.
Lazy Load Support: On-demand translation file loading for optimized performance.
Rich Plugins: A diverse ecosystem catering to both development and production needs.
Multiple Fallbacks: Comprehensive support for fallbacks, ensuring content availability.
SSR Support: Compatibility with Angular SSR, allowing for pre-rendered translations.

For a more in-depth look at Transloco, you can refer to the official Transloco documentation.

Integration Steps

Installation: I began by installing Transloco using.

pnpm add @ngneat/transloco.

Configuration: Using the schematic, I added the necessary configuration from the generator. It's crucial to set the SSR to true to pre-render translations, ensuring a seamless user experience.

pnpx nx g @ngneat/transloco:ng-add --blog

Setting Up the Transloco Loader

The first step was to set up the transloco-loader.ts file, which would load the translation files, specifically the es.json and en.json files.

import { environment } from '../environments/environment';
import { HttpClient } from '@angular/common/http';
import { inject, Injectable } from '@angular/core';
import { Translation, TranslocoLoader } from '@ngneat/transloco';

@Injectable({ providedIn: 'root' })
export class TranslocoHttpLoader implements TranslocoLoader {
  #http = inject(HttpClient);

  getTranslation(lang: string) {
    return this.#http.get<Translation>(
      `${environment.baseUrl}/assets/i18n/${lang}.json`
    );
  }
}

Organizing Translation Files

I organized the translation files inside the assets directory, which included the languages I selected during setup ('en' and 'es') in the form of JSON files.

Handling Browser Language Settings

Instead of using the route to determine the active language, I utilized the browser language to determine the active language, ensuring even the blog post slugs were translated. For this, I created a component named translate-button.component.ts.

import { Component, inject } from '@angular/core';
import { NgClass } from '@angular/common';
import { Subscription, take } from 'rxjs';
import { TranslocoModule, TranslocoService } from '@ngneat/transloco';

@Component({
  selector: 'mr-translate-button',
  standalone: true,
  imports: [NgClass, TranslocoModule],
  template: `<ng-container *transloco="let t; read: 'navigation'">
    <li class="w-16">
      <button
        class="btn btn-square btn-ghost relative h-[46px] w-full overflow-hidden"
        [attr.aria-label]="t('aria-label-translate')"
        (click)="changeLanguage()">
        <img
          class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 transform"
          [ngClass]="{
            'translate-y-[20%] rotate-[50deg] opacity-0 transition-all':
              !toggleLang,
            'opacity-[1] transition-all duration-1000 ease-out': toggleLang
          }"
          src="assets/mexico.png"
          height="40"
          width="40" />
        <img
          class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 transform"
          [ngClass]="{
            'opacity-[1] transition-all duration-1000 ease-out': !toggleLang,
            'translate-y-[20%] rotate-[100deg] opacity-0 transition-all':
              toggleLang
          }"
          src="assets/usa.png"
          height="40"
          width="40" />
      </button>
    </li>
  </ng-container> `,
})
export class TranslateButtonComponent {
  #transloco = inject(TranslocoService);
  availableLangs = this.#transloco.getAvailableLangs();
  toggleLang = this.#transloco.getActiveLang() === 'en' ? true : false;
  private subscription!: Subscription | null;

  get activeLang() {
    return this.#transloco.getActiveLang();
  }

  changeLanguage() {
    const lang = this.activeLang === 'en' ? 'es' : 'en';

    this.subscription?.unsubscribe();
    this.subscription = this.#transloco
      .load(lang)
      .pipe(take(1))
      .subscribe(() => {
        this.#transloco.setActiveLang(lang);
      });

    this.toggleLang = !this.toggleLang;
  }

  ngOnDestroy() {
    this.subscription?.unsubscribe();
    this.subscription = null;
  }
}

Organizing Blog Posts

To differentiate between English and Spanish posts, I organized my blog posts as follows:

├── en
│   ├── 2023-06-29-my-second-open-source-contribution.md
│   ├── 2023-07-07-module-federation.md
│   ├── 2023-08-06-the-making-of-my-web.md
│   ├── 2023-08-12-from-scratch-to-storage.md
│   ├── 2023-08-21-first-angular-contribution.md
│   ├── 2023-08-30-first-week-unemployed.md
│   └── 2023-09-10-enhancing-analogjs-blog-with-transloco.md
└── es
    ├── 2023-06-29-mi-segunda-contribucion-open-source.md
    ├── 2023-07-07-module-federation.md
    ├── 2023-08-06-como-hice-mi-blog.md
    ├── 2023-08-12-de-cero-a-almacenamiento.md
    ├── 2023-08-21-primera-contribucion-a-angular.md
    ├── 2023-08-30-primera-semana-desempleado.md
    └── 2023-09-10-mejorando-blog-analogjs-con-transloco.md

This approach required more effort but was essential for compatibility with SSR.

Vite Configuration

I then modified the Vite configuration to pre-render the files:

/// <reference types="vitest" />

import analog from '@analogjs/platform';
import { defineConfig, splitVendorChunkPlugin } from 'vite';
import tsconfigPaths from 'vite-tsconfig-paths';
import * as fs from 'fs';

const getPostRoutes = (language: string) => {
  const posts = fs.readdirSync(`./blog/src/content/${language}`);
  return posts.map(
    post =>
      `/blog/${post.replace('.md', '').replace(/^\d{4}-\d{2}-\d{2}-/, '')}`
  );
};

const postRoutes = {
  en: getPostRoutes('en'),
  es: getPostRoutes('es'),
};
// https://vitejs.dev/config/
export default defineConfig(({ mode }) => {
  return {
    publicDir: 'src/public',
    build: {
      target: ['es2020'],
    },
    plugins: [
      analog({
        prerender: {
          routes: [
            '/',
            '/home',
            '/blog',
            '/about',
            '/contact',
            ...postRoutes.en,
            ...postRoutes.es,
          ],
          sitemap: {
            host: 'https://mrrobot.dev',
          },
        },
        nitro: {
          preset: 'vercel',
          serveStatic: false,
          externals: { inline: ['zone.js/node', 'tslib'] },
        },
      }),
      tsconfigPaths(),
      splitVendorChunkPlugin(),
    ],
    test: {
      globals: true,
      environment: 'jsdom',
      setupFiles: ['src/test-setup.ts'],
      include: ['**/*.spec.ts'],
      cache: {
        dir: `../node_modules/.vitest`,
      },
    },
    define: {
      'import.meta.vitest': mode !== 'production',
    },
  };
});

and finally i integrated the TranslateButtonComponent inside the navbar.component.ts file.

Testing the Integration

Now, to test it out, I had to do the following:

First, I added the initial translation to the en and es JSON files to see if everything was working. I added the first header to both files:

en.json

{
  "home": {
    "header": "Welcome! I'm Luis Castro"
  }
}

es.json

{
  "home": {
    "header": "¡Bienvenido! Soy Luis Castro"
  }
}

Then, I added the structural directive to the home.page.ts for transloco to handle the translation and subscribe automatically to the language changes.

@Component({
  standalone: true,
  imports: [TranslocoModule],
  template: `
    <ng-container *transloco="let t; read: 'home'">
      <section class="z-10 flex w-full flex-1 flex-col">
        <div class="hero flex-1">
          <div class="bg-opacity-60"></div>
          <div class="hero-content text-primary-content">
            <div class="max-w-md md:max-w-[80%]">
              <h1
                class="before:bg-primary after:bg-primary relative mb-5 w-fit text-3xl font-bold
                     before:absolute before:left-[98%] before:top-[70%] before:-z-10 before:h-5
                     before:w-5 before:translate-y-0 before:transition-all before:duration-500 after:absolute
                     after:left-[-15px] after:top-[70%] after:-z-10 after:h-5 after:w-5 after:translate-y-0 after:transition-all
                     after:duration-500 hover:before:translate-y-[-20px] hover:after:translate-y-[-20px] md:text-5xl">
                {{ t('header') }}
              </h1>
              <p
                class="mb-5 text-lg md:text-2xl md:leading-8 lg:leading-[3rem]">
                {{ t('subheader.first') }}
                <span
                  class="bg-secondary text-secondary-content inline-block skew-y-3 border-none font-extrabold"
                  >{{ t('subheader.second') }}</span
                >
                {{ t('subheader.third') }}
              </p>
              <p
                class="mb-5 text-lg md:text-2xl md:leading-8 lg:leading-[3rem]">
                {{ t('more.first') }}
                <span
                  class="inline-block skew-y-3 border-none bg-gradient-to-r from-green-600 via-white to-red-600 font-extrabold text-black"
                  >{{ t('more.second') }}</span
                >{{ t('more.third') }}
                <span
                  class="bg-secondary text-secondary-content inline-block skew-y-3 border-none font-extrabold"
                  >{{ t('more.fourth') }}</span
                >
                {{ t('more.fifth') }}
              </p>
              <p
                class="mb-5 text-lg md:text-2xl md:leading-8 lg:leading-[3rem]">
                {{ t('mission') }}
              </p>
              <p
                class="mb-5 text-lg md:text-2xl md:leading-8 lg:leading-[3rem]">
                {{ t('conclusion') }}
              </p>
            </div>
          </div>
        </div>
      </section>
    </ng-container>
  `,
})
export default class HomeIndexPage {}

Everything works as expected! 🎉

Translating Posts

For the posts the approach was a little more tricky since i needed the slug to change depending on the language, with how AnalogJs handles the content i was able to add a property to the post that i called otherSlug which i used to change the slug depending on the language.

---
title: "Enhancing My AnalogJs Blog with Transloco for Seamless Translations"
slug: enhancing-analogjs-blog-with-transloco
otherSlug: mejorando-blog-analogjs-con-transloco
description: "A step-by-step guide on how I integrated Transloco into my AnalogJs blog, ensuring content accessibility."
author: Luis Castro
coverImage: v1692660417/transloco-integration.png
date: 09-10-2023
---

Then i needed to do two things to make the process work

the first one was to change the blog-list.component.ts to handle the translation by changing the content to an observable that will react to the language changes.

 readonly files = injectContentFiles<PostAttributes>();
  readonly posts$: Observable<ContentFile<PostAttributes>[]> = inject(
    TranslocoService
  ).langChanges$.pipe(
    map(lang => {
      return this.files
        .filter(post => {
          const language = post.filename.split('/')[3];
          return lang === language;
        })
        .map(post => {
          const date = DateTime.fromFormat(post.attributes.date, 'MM-dd-yyyy');
          const dateString = date.toISODate();
          const language = post.filename.split('/')[3];
          return {
            ...post,
            attributes: {
              ...post.attributes,
              date: dateString as string,
              language,
            },
          };
        })
        .sort((a, b) => {
          return (
            DateTime.fromISO(b.attributes.date).toMillis() -
            DateTime.fromISO(a.attributes.date).toMillis()
          );
        });
    })
  );

In summary, whenever the language changes (as detected by TranslocoService), this code will:

Filter the posts to only those of the current language.
Modify the date format of each post and add the language attribute.
Sort the posts in descending order by date.
Emit the modified list of posts through the posts$ observable.

Easy, right? Now, I needed to do something similar with the [slug].page.ts :

readonly allFiles = injectContentFiles<PostAttributes>();
  readonly post$ = this.#transloco.langChanges$.pipe(
    switchMap(lang => {
      return combineLatest([
        of(this.allFiles.filter(file => file.filename.split('/')[3] === lang)),
        runInInjectionContext(this.#injector, () => {
          return injectContent<PostAttributes>({
            param: 'slug',
            subdirectory: lang,
          });
        }),
      ]).pipe(
        map(([files, post]) => {
          const sortedFiles = files
            .map(file => ({
              ...file,
              attributes: {
                ...file.attributes,
                date: DateTime.fromFormat(
                  file.attributes.date,
                  'MM-dd-yyyy'
                ).toISODate()!,
              },
            }))
            .sort(
              (a, b) =>
                DateTime.fromISO(b.attributes.date).toMillis() -
                DateTime.fromISO(a.attributes.date).toMillis()
            );
          const index = sortedFiles.findIndex(
            file => file.attributes.slug === post.attributes.slug
          );
          return {
            ...post,
            nextPost: sortedFiles[index - 1]?.slug,
            previousPost: sortedFiles[index + 1]?.slug,
          };
        })
      );
    })
  );

  ngOnInit(): void {
    this.#transloco.langChanges$
      .pipe(takeUntil(this.destroy$))
      .subscribe(lang => {
        const currentRoute = this.#router.url;
        // Update the route based on the new language
        const newRoute = this.updateRouteBasedOnLanguage(currentRoute, lang);
        this.#router.navigate([newRoute]);
      });
  }

  updateRouteBasedOnLanguage(route: string, lang: string): string {
    const segments = route.split('/');
    const file = this.allFiles.find(file => file.slug === segments[2]);
    const fileLang = file?.filename.split('/')[3];
    if (fileLang === lang) {
      return route;
    }
    const otherSlug = file?.attributes.otherSlug;
    segments[2] = otherSlug || segments[2];
    return segments.join('/');
  }

What is happening here? Well, whenever the language changes, this code will:

The post$ observable emits a post with additional properties indicating the next and previous posts based on the sorted list of files.
The component updates its route to reflect the new language. If a file associated with the current route has a different language version (indicated by the otherSlug attribute), the route is updated to use that version.

This allows a good experience for the readers since they can change the language and the slug will change accordingly.

if you want to see it in action hit the flag at the top right 🤣.

Conclusion

Integrating Transloco into my AnalogJs blog was a decision driven by the desire to connect with a broader audience. It's not just about sharing content; it's about sharing experiences, stories, and cultures. With Transloco, I've taken a significant step towards enhancing my blog's user experience.

If you have any questions or feedback, feel free to connect with me on Twitter, Threads, or LinkedIn. Let's continue to bridge cultures and share stories! 🌍🌉📖

If you like my content and want to support me, you can do so by buying me a coffee ☕️. I would really appreciate it!

Forem: Luis Castro

What It Means to Be a Developer in the AI World

🤖 I'm Reading More Code Than Writing It

💭 Wait, Am I Still a Good Developer?

😰 The Anxiety (and the Confidence)

🧩 Understanding Code vs Writing It

🌟 What Makes a Good Developer in 2026 (and Beyond)

🤔 Final Thoughts

Taking Angulars Signal Forms for a Test Drive, Exploring the Experimental API

Introduction

Why Signal Forms?

Core Concepts

Fields and Field State

The Control Directive

Creating Your First Signal Form

Schema? Validation?

Built-in Validators

Custom Validation

Advanced Features

Conditional Logic

Nested Forms and Arrays

Async Validation

Form Submission and Error Handling

Custom Form Controls

Conclusion

Exploring Angular Resource API

Introduction

📖 Why a New Resource API?

🎯 Core Resource Interface

Key points:

🛠️ Creating Resources

🚀 Specialized HTTP Resources

Additional Response Types

🎛️ Advanced Features

Type Safety with Runtime Validation

Resource Streaming

RxJS Integration

🌟 Status and Error Handling

⚙️ Prefetching and Deferred Loading

📌 Migration and Limitations

🚦 Conclusion

The Dotnet, Nx, AnalogJs (Angular) Stack is here - Part 2

🧬 Where were we?

🧩 The A in the DNA

📝 The Notes Front End

🔌 Connecting Our Front End

🛠️ The Server API Routes

🌟 Conclusion: The DNA Stack in Action

The Dotnet, Nx, AnalogJs (Angular) Stack is here - Part 1

🧬 What is the DNA Stack?

🖥️ .NET Core: The Backbone

🛠️ NX Tools: Streamlining Development

🌐 AnalogJS: The Angular Metaframework

📝 The Notes App

🧩 The D on the DNA

GetNotes Method

GetNote Method

AddNote Method

DeleteNote Method

🌟 Conclusion: Building the Foundation

Making a Wack-A-Molee with AnalogJs - Part 2

👀The Sequel

🐨Wack-a-Molee THE SEQUEL!!

Project Structure

🧠 Core

🧩Building the Pieces

Game Container

Step 1: Define Constants and Interface

Step 2: Component State and Dependencies

Step 3: Setup and Clear Intervals

Step 4: Game Logic Methods

Step 5: Timer Tick Method

Step 6: Game Control Methods

Step 7: Cleanup on Destroy

🐨The mole (since there's no proper mole emoji we will use a koala, don't judge me).

Step 1: Define Component Properties and Outputs

Step 2: Mole Popping Logic

Step 3: Handling the Whack Event

Step 4: Hiding the Mole

Step 5: Resetting States and Clearing Subscriptions

`GetNotes` Method

`GetNote` Method

`AddNote` Method

`DeleteNote` Method

1. Null Injector (`NullInjector`)

2. Root Injector (`Injector`)

3. Element Injector (`ElementInjector`)

4. Module Injector (`ModuleInjector`)

5. Environment Injector (`EnvironmentInjector`)