DEV Community: Brad Bodine

How Signals Can Boost Your Angular Performance

Brad Bodine — Wed, 17 Jan 2024 18:56:23 +0000

Angular is a popular framework for building web applications, but it also comes with some challenges. One of them is how to manage state changes and update the view efficiently. Angular uses a change detection mechanism that runs every time an event occurs, such as a user interaction, a timer, or an HTTP request. This can lead to performance issues, especially for complex applications with many components and data bindings.

To solve this problem, Angular introduces a new feature: Signals. Signals are a way to wrap values that can change over time and notify interested consumers when they do. Signals can contain any value, from simple primitives to complex data structures. A signal's value is always read through a getter function, which allows Angular to track where the signal is used. Signals may be either writable or read-only.

Benefits of Signals

Signals offer several advantages over the traditional way of managing state in Angular. Here are some of them:

Granular change detection: Signals allow Angular to know exactly which parts of the application depend on which signals, and only update those parts when the signals change. This reduces the amount of unnecessary rendering and improves performance.
Reactive programming: Signals enable a declarative and reactive style of programming, where you can define how your state is derived from other signals, and let Angular handle the updates automatically. This makes your code more readable, maintainable, and testable.
Easy debugging: Signals make it easy to inspect and manipulate the state of your application at any point in time. You can use the Angular DevTools extension to view the current values of your signals, and even change them on the fly to see how your application reacts.

How to Use Signals

To use signals in your Angular application, you need to import signal from the @angular/core module and use the provided functions to create and manipulate signals. Here are some examples of how to use signals:

Writable signals: Writable signals provide an API for updating their values directly. You create writable signals by calling the signal function with the signal's initial value:

import { signal } from "@angular/core";

...

countSignal = signal(0); // Signal values can be anything, including objects and arrays.

// Signals are getter functions - calling them reads their value.
console.log("The count is: " + countSignal());

// To change the value of a writable signal, you can either .set() it directly:
countSignal.set(3);

// or use the .update() operation to compute a new value from the previous one:
// Increment the count by 1.
countSignal.update((value) => value + 1);

Computed signals: A computed signal derives its value from other signals. Define one using computed and specifying a derivation function:

import { signal, computed } from "@angular/core";

...

countSignal = signal(0);
doubleCount = computed(() => this.countSignal() * 2);

// The doubleCount signal depends on count. Whenever count updates, Angular knows that anything which depends on either count or doubleCount needs to update as well.

increment(qty = 1) {
  this.countSignal.update((value) => value + qty);
}

Binding signals to templates: You can use signals in your templates just like any other expression, by using the {{ }} interpolation syntax or the [ ] property binding syntax. Angular will automatically update the view when the signals change:

<div>
  <h1>Current Count: {{ countSignal() }}</h1>
  <h1>Doubled Count: {{ doubleCount() }}</h1>
  <button (click)="increment()">Increment</button>
</div>

Signal template updates currently require the use of changeDetection: ChangeDetectionStrategy.OnPush in the component. Stack Overflow Explanation

Conclusion

Signals are a powerful feature that can help you write more performant, reactive, and maintainable Angular applications. They are currently available as an experimental feature in Angular 16, and you can try them out by following the Angular Signals guide. If you want to learn more about signals, you can also check out these resources:

I hope you enjoyed this article and found it useful. If you have any questions or feedback,
please let me know. 😊

Jam Aims to be a QA's Best Friend

Brad Bodine — Thu, 11 Jan 2024 22:06:35 +0000

(And a developers too)

Jam is a browser extension that allows you to create the perfect bug report in just one click.

The goal of Jam is to make bug reporting faster for QA's, faster for developers, and overall pain and frustration free.

Imagine how bugs are reported at a company. The bug finder, many times a QA, creates a ticket and tries to give you as much detail as they can on how they ended up seeing the bug that they found. Sometimes the details are slim because to the reporter, it looks pretty obvious that a developer would see the bug right away. But, many times, the developer will have a different result because they may have a different browser, a different system; there could be many reasons that the developer isn't seeing the bug that the reporter is. Many times the developer will says, "it works fine on my end!" and close the ticket, ultimately leaving the product with an error.

With Jam, in one click, you can: take a screenshot, record a video, or capture an instant replay, and Jam will instantly generate a link to share with your team.

The Jam link will also include all the technical diagnostic info your engineering team needs to quickly debug, such as network requests, console logs, device information, and even network speed! It's all captured so you no longer have to reproduce or find the technical diagnostics before reporting the bug.

Once you have your Jam link, simply paste it into a ticket or chat message to share it with engineers, or connect Jam to your issue-tracking tool of choice to create tickets right from Jam. No account is required to view, so engineers can click the link, and at a glance see the bug and why it happened.

Now the QA can capture a perfect reproduction. The developer has all the info they need to fix the bug faster, without a bunch of back and forth trying to figure out why they aren't seeing what the QA saw.

Pain free, easy, simple, bug reporting.

Jam is currently in beta and is free to try.

Checkout Jam.dev

VSCode TypeScript is Stuck!?

Brad Bodine — Thu, 11 Jan 2024 16:55:10 +0000

How many times have you seen this little squiggley in your code and you are sure it shouldn't be there? Happens to me quite a lot. Usually when I install a new package and TypeScript doesn't seem to pick it up. Well there is a quick way to fix it (if it really shouldn't be there).

While you are focused on a typescript file (.ts), open the command prompt cmd + shift + p. Type "restart" in the prompt and look for "TypeScript: Restart TS Server".

Now, assuming you don't have a type or lint error, you will be good to go again.