Forem: Fabio Biondi

Exploring Angular Signal Forms (v.21)

Fabio Biondi — Thu, 11 Sep 2025 09:05:07 +0000

I published a video about the new Angular Signal Forms, available in Angular 21.0, in which I write several examples to use some of the new (and still experimental) Signal Forms API.

It was recorded in Italian but the track translated by YouTube into English is available.

Here the topics:

0:00 Create an Angular v.21 project
1:40 My First Signal Forms
3:03 Multiple Fields
3:29 Populate Forms
4:51 Dirty and Touch
6:26 Built-in Validators & Errors
9:05 Custom Validator
10:51 Async Validator
15:50 Derived States and Computed
17:04 fetch with httpResource
19:36 Debounce with RxJS
22:54 Form Submit
24:12 FrontEnd Training & Courses

I hope you enjoy it.

TIP: CoreWebVitals, SSR and SSG

Fabio Biondi — Mon, 15 Jan 2024 14:51:39 +0000

In this screen you can clearly see the difference between an Angular (v.17) project that uses Client Side Rendering (on the right) and the same project that uses pre-rendering techniques instead (on the left), and in particular I am using Static Site Generation (SSG).

I used Angular but the basic concept is identical even if you use other frameworks / front-end libraries

🙋‍♂️ Do you see the differences?

The interesting part to note is how the Core Web Vitals (CWV) scores are positively affected, especially LCP and FCP, Largest Contentful Paint and First Contentful Paint respectively. In other words, the first element displayed on the screen and the largest element on the page are rendered significantly earlier than with client side rendering.

⚡️ Why?

1) you don't have to make REST calls on the client side but it is made by the server. The request is faster and consequently also the rendering.

2) Then, the template is rendered on the server and immediately visible. There is no need to wait for the entire JavaScript bundle to be loaded, make a REST call, and then have the client render. There's a big difference!

3) Thanks to server side rendering or static generation, the CWV value of TTFB is reduced (i.e. the Time To First Byte, a metric that measures the time between the request for a resource and the arrival of the first byte of a response)

💰 Higher Core Web Vitals scores translate into:

better UX
better SEO
more conversions (it is proven that a site / app that loads in less time converts much more)

Are you already using SSR / SSG in your (front-end) projects or/and do you think to use these rendering patterns in the future?

Follow me on LinkedIn for more tips...

TIP: how to boost your app's performance with (Angular) computed signals

Fabio Biondi — Wed, 10 Jan 2024 10:53:34 +0000

This is an Angular Tip but works with other frameworks/libs that use signals

🎓 INTRO

Every time a signal changes, all dependent computations are re-triggered.
This can be a performance bottleneck.

Consider a counter signal and a computed signal that returns a boolean to indicate if the counter isZero or not.

isZero = computed(() => this.counter() === 0);

This computed signal is used to change a color based on its value.
The color turns red when the counter is zero, and green otherwise.

Usage:

<span [style.color]="isZero() ? 'red' : 'green'">

The isZero() function is called every time counter changes.

❌ ALTERNATIVE VERSION

You may also simplify the template creating a new computed Signal to set the color:

isZeroColor = computed(
 () => this.counter() === 0 ? 'red' : 'green'
);

Usage:

<span [style.color]="isZeroColor()">

This setup works, but there's a catch!

The isZeroColor() function is called every time counter changes, even when not necessary.
I.e. from 2 to 3, from 3 to 4, since the value is always false.

🚀 What if we could minimize the computations?

💡 How? Creating a computed signal from another computed signal.

isZeroColor = computed(() => this.isZero() ? 'red' : 'green');

🔑 Key Benefit: isZeroColor is recalculated only when isZero changes.
This means if counter changes from 1 to 2, isZeroColor doesn’t recompute since isZero remains false. It only recomputes when counter goes from 1 to 0, changing isZero from false to true.

🌟 Result: We've just optimized our application! This approach reduces unnecessary computations, leading to better performance.

🤔 Why This Matters: In complex applications, such optimizations can significantly reduce the workload on the browser, leading to smoother and faster UIs.

Angular Standalone components - CheatSheet

Fabio Biondi — Mon, 08 Jan 2024 02:58:08 +0000

Standalone components are one of the features that have definitely simplified the use of Angular.
They have been available since version 14 of the framework and, version after version, they have been further enhanced and improved.

Since Angular v.16, the Input decorator supports several new features, including:

➡️ "required": enforce that a given input must have a value
➡️ "alias": change the name of an input in templates
➡️ "transform (fn)": transform the input value
➡️ "transform (booleanAttribute)": coearcing values to boolean
➡️ "transform (numberAttribute)": coearcing values to number

But in the next releases of Angular we will have a fantastic news:
the input signals! 😍

Stay tuned!

oh I was forgetting... 😅
I attach a simple cheatsheet to list some of them

Qwik & Arduino with Johnny Five

Fabio Biondi — Mon, 13 Nov 2023 23:11:15 +0000

Some days ago I have shared some experiments I have recently done with Qwik and Arduino on my LinkedIn and Twitter profiles.

A lot of people asked me more details about it, so I wrote this article to explain what I did.

Anyway, as the post title suggests, we can control Arduino, Raspberry and other micro-controllers directly from a front-end application built in JavaScript 😱.

Johnny Five

Some times ago I have played with johnny-five, a JavaScript Robotics & IoT platform.
In short words, we can communicate with our Arduino or Raspberry by using JavaScript with a very friendly syntax.

For example, to blink a LED you can :

1) Connect a LED to PIN 13 of your Arduino board:

2) Create a JavaScript module, i.e. index.js:

const { Board, Led } = require("johnny-five");

// connect your board
const board = new Board();

// when board is ready
board.on("ready", () => {

  // Create a standard `led` component instance
  const led = new Led(13);

  // "blink" the led in 500ms
  // on-off phase periods
  led.blink(500);

});

3) Run the code in your terminal

node index.js

I have used Node v.18

Here you can find more details about the installation of Johnny Five and how the previous example works:

• Johnny Five Get Started
• Johnny Five Examples

Qwik

Qwik is a full-stack web framework to create super-performing and SEO friendly applications.

One of its most interesting features is the server$ functions, that allow you to create a function that is always executed on the server.

server$ is a form of RPC (Remote Procedure Call) mechanism between the client and server, just like a traditional HTTP endpoint but strongly typed thanks to Typescript, and easier to maintain.
Source: Qwik server$ Documentation

Following I show you a very basic example of server$ function:

import { component$, useSignal } from '@builder.io/qwik';
import { server$ } from '@builder.io/qwik-city';

// executed on server
const serverGreeter = server$((firstName: string) => {
  const greeting = `Hello ${firstName}`;
  return greeting;
});

export default component$(() => {
  // Signal to contains the input value
  const text = useSignal('');

  return (
    <>
      <label>
        Your Name:
        <input bind:value={text} />
      </label>

      <button
        onClick$={async () => {
          // invoke the server$ function 
          // passing the input text value
          // when button is clicked 
          const greeting = await serverGreeter(text.value);
          alert(greeting);
        }}
      >
        greet
      </button>
    </>
  );
});

Blink LED with Johnny Five & Qwik

Since the Qwik $server function always run on server, we can use any package designed to run in a Node.js environment.

So my first thought was:

maybe I can use Johnny Five directly on Qwik to control my Arduino

And yes, it worked! 😍

Let me show you how I did:

1) First, connect a LED to PIN 13 of your Arduino Board:

2) Create a new Qwik Project:

# create the project
npm create qwik@latest

# Run the project 
npm run dev

This process creates a basic Qwik Project with a couple of routes.

3) Now we can open and update the default route component (routes/index.tsx):

create a button whose click we invoke the server function
import the "johnnyfive" package, create a Board instance and use its API to define the PIN 13 and blink the connected LED:

// routes/index.tsx
import { component$, useSignal } from '@builder.io/qwik';
import { server$ } from '@builder.io/qwik-city';

import five, { Board, Led } from 'johnny-five'

const board = new five.Board();

const arduinoBlink = server$(() => {
  // Define LED PIN
  const led = new Led(13);
  // Blink
  led.blink(555);
});


export default component$(() => {
  return (
    <>
      <button
        onClick$={async () => {
          // Blink LED
          // Invoke the server function 
          // when button is clicked
          await arduinoBlink();
        }}
      > BLINK LED </button>
    </>
  );
});

Johnny Five Blink Example

LCD display

Johnny Five allow us to easily use sensors, LCDs, Servo / Motors, Joysticks and several other devices.

For example you can easily write into a LCD display as well:

// Define LCD PINS 
const lcd = new five.LCD({ pins: [7, 8, 9, 10, 11, 12] });
// Move the cursors to positio 0,0 and display a text
lcd.cursor(0, 0).print('Hello Qwik!');

So, as you can imagine you can use this snippet of code in a Qwik server$ function as we did to blink the LED.

1) First, we can create a JS module in which we write the functions that contains the logic to communicate with the hardware and that are invoked by the server$ function:

// arduino.server.ts
import { server$ } from '@builder.io/qwik-city';
import five, { Board, Led } from 'johnny-five'

const board = new five.Board();

export const arduinoBlinkFn = () => {
  const led = new Led(13);
  led.blink(555);
};

export const arduinoLCDFn = server$((
  text1: string, text2: string
) => {
  // Define LCD PINS 
  const lcd = new five.LCD({ pins: [7, 8, 9, 10, 11, 12] });
  // display text1 in the first line of the display
  lcd.cursor(0, 0).print(text1);
  // display text2 in the second line
  lcd.cursor(1, 0).print(text2);
});

2) Now we can simply create the UI in Qwik using JSX syntax, adding a couple of text inputs and a button to send both texts to the device.

The arduinoLCDFn() server function is invoked when the button is clicked, passing the values of both text inputs.

// routes/index.tsx
import { component$, useSignal } from '@builder.io/qwik';
import { server$ } from '@builder.io/qwik-city';

import { arduinoBlinkFn, arduinoLCDFn } from '~/arduino.server.utils';

const arduinoBlink = server$(() => {
  arduinoBlinkFn()
});

const arduinoLCD = server$((
  text1: string, text2: string
) => {
  arduinoLCDFn(text1, text2)
});


export default component$(() => {
  const textRow1 = useSignal('');
  const textRow2 = useSignal('');

  return (<>

    <button
      onClick$={async () => {
        await arduinoBlink();
      }}
    > BLINK LED </button>

    <input type="text" bind:value={textRow1} placeholder="row 1"  />
    <input type="text" bind:value={textRow2} placeholder="row 2"  />

    <button
      onClick$={async () => {
        await arduinoLCDFn(textRow1.value, textRow2.value);
      }}
    > WRITE ON LCD </button>

  </>);
});

Here the final result:

Conclusion

Of course it's nothing special but this example demonstrates the simplicity and flexibility with which we can use any JavaScript modules within the server function.

How cool is that?
What do you think?

Redux is not DEAD!

Fabio Biondi — Sun, 06 Nov 2022 10:30:13 +0000

WHY REDUX IS NOT DEAD even if every year you can read some articles or devs that say the opposite?

First of all I love #redux especially since "Redux Toolkit (RTK)" and RTK query has been released . It has been significantly simplified compared to the past.

Redux Toolkit offers several utilities to handle your store, actions, selectors, side effects and now (thank to Redux Toolkit Query) caching, prefetch, loading/error/pending states, pagination and more.

Redux is a library but also a pattern : you don't need to reinvent the wheel every time, and each developer of your team can easily understand what are you're doing and where to find stuff since it's opinionated.

📘 REDUX DEV TOOLS
There are many reasons why I love Redux but one of the most important is because it has amazing "Redux Dev Tools".
As you can see from the attached image you can keep everything under control and it is essential when your application grows and you have to manage complex states in relation to each other.
Furthermore it's also useful to understand the flow of your actions and how your application works.

Let's imagine a complex authentication process or complex views that involves a lot of steps, side effects and state updates: old and new team members can easily understand how your app works just opening Redux Dev Tools.

Anyway the main tabs of Redux Dev Tools is the most important and allow you to track anything:

1) what action is emitted and its payload
2) the current state and how it's updated after an action
3) what is changed from the previous state (thanks an useful DIFF panel)

But there is more:
➡️ Time Travel Debugging
➡️ Jump and Skip actions
➡️ save and load a JSON snapshots (imagine to have a bug: you can save a snapshot, send to anyone and re-create the scenario)
➡️ remote debugging
➡️ see the structure of your state by using the "chart graph"
➡️ and more...

Of course it's not simple as other micro state managers and you should not use it in any application or any case.
But there are scenarios in which this can be really useful.

😅 UNPOPULAR OPINIONS

1) Context is not a valid replacement of Redux.
2) I love Zustand, JOTAI, Valtio and other micro state managers. They are super easy to use and valid solutions for a lot of scenarios.
3) I know that some of these state managers partially support Redux Dev Tools but not completely because of different approaches.
4) We may write a state manager from scratch, or use Context or other state managers to create our own state manager but why reinvent the wheel?
Redux exists since the beginning, it's solid, tested, has a huge ecosystem, maintained and it's well know from a lot of devs

esbuild: creiamo un'applicazione React / TypeScript e analizziamo le principali features 🇮🇹

Fabio Biondi — Thu, 27 Oct 2022 10:25:58 +0000

I'm sorry. This post and the long video tutorial are in italian only but all slides are in english and there are live coding sessions so you should understand all steps : )

ESBuild nasce con l'obiettivo di velocizzare la generazione dei bundle di progetti JavaScript ed è alla base di strumenti ormai diffusissimi come ViteJS.

Scritto in GO, garantisce performance 10-100 volte superiori a quelle di WebPack, RollUp e Parcel!

Dopo un'introduzione su ESBuild creeremo da zero un progetto con il supporto di React e TypeScript, analizzeremo le API per generare bundle da CLI e JavaScript, gestiremo build su file system e in memoria, compileremo file JSX e TSX, gestiremo assets, plugin, web server molto altro.

TOPICS
00:00 Introduction
03:57 TypeScript compiler
04:52 Compile with ESBuild
06:03 React: Server Side rendering
09:30 React: Client Side rendering
11:50 Build API
13:00 Multiple Components
13:57 CSS
17:40 Source Map
18:30 Exclude Deps
19:25 Tree Shaking & Minify
22:22 Watch
24:25 Bundle Analyse
26:40 Images & ESBUILD loaders
27:30 Serve
29:20 3rd party plugins
30:40 Write Plugins
40:15 Final Thoughts

Astro Build: how to use React, Vue and Svelte in the same page using "islands"

Fabio Biondi — Thu, 27 Oct 2022 10:23:03 +0000

Astro is a new web framework that is very different from the others.

It's not a replacement of React, Angular or VueJs because it allows to build fast web sites focused on content using a new concept called island.
An island, by default, is a static template with no javascript so it loads very quickly but it can also be an interactive UI built with React, Svelte, Vue or most of the modern front-end frameworks.

Astro supports several other interesting features but in this video I wanna show you how you can mix several frameworks onto the same page.

Angular v.14 + ESBUILD = -25/40% build time

Fabio Biondi — Thu, 15 Sep 2022 20:48:18 +0000

Angular v.14 now supports esbuild, a "new" super fast JavaScript Bundler, also used by ViteJS.

I have tried it right now in a small Angular project (about 10 modules) and it almost halved the build time (-44%).

If you want to try it (but it's still experimental!) you can simply add the suffix '-esbuild' in your angular.json file as shown in the attached image.

...

"architect": {
 "build": {
  "builder": "@angular-devkit/build-angular:browser-esbuild",
     "options": {

...

More info and tutorials about Angular, React, RxJS and JS on my YouTube Channel

Create Web Components in Lit, publish on npm & use in Angular 14, React 18 and Vanilla JS Projects (free video course)

Fabio Biondi — Sun, 21 Aug 2022 12:35:00 +0000

I have published a free mini-course to create Web Components using the Google Lit library and TypeScript.

In this series you will also learn how to publish your Web Components on NPM and how to use them in Vanilla JavaScript, Angular 14 and React 18/TypeScript projects.

I use ViteJS to create VanillaJS, React18/TS and the Lit projects, while I use Angular Cli to create the Angular 14 Project

♥️ Don't forget to subscribe my YouTube Channel ♥️

1. Create a Lit Project

2. Create a Web Component with Lit

3. Styling Components with CSS e Custom Props

4. Component Properties

5. Slot

6. Built-in Directives: when

7. Mouse Events

8. Emit Custom Events

9. Publish web components on Npm

10. Use the component in Vanilla JS projects

11. use classMap, update component and re-publish on Npm

12. Use the component in Angular projects

13. Use the component in React 18 projects

♥️ Let me know what you think and don't forget to subscribe my YouTube Channel ♥️

How to create React UIKIT components in TypeScript that extends native HTML Elements

Fabio Biondi — Fri, 08 Jul 2022 21:50:24 +0000

In the front-end ecosystem, UiKits are collections of utilities and several components, such as:

<Card />
<TabBar />
<Carousel />
<Row /> and <Col />
<GoogleMap />

Each component has usually its own custom layout and could accepts several properties. For example, a <GoogleMap /> component could accept the "coordinates" and a "zoom" value as properties:

<GoogleMap coords={coords} zoom={zoom} />

Sometimes we need to create components whose layout is created from scratch. In other cases their layout may be based of native elements.
Some examples:

<MyButton />: that extends <button> element capabilities
<MyImg />: that extends <img> element
and so on.

Let's imagine a button component that must display an icon next to the label that I can use as the code below:

<MyButton icon="💩"> CLICK ME </MyButton>

This component should accept the icon and children properties and its definition may looks like the following:

interface MyButtonProps {
  icon: string;
}

function MyButton(props: PropsWithChildren<MyButtonProps>) {
  const { icon, children } = props;
  return <button className="btn btn-primary">
    {icon} {children}
  </button>
}

So we can use the component in this way:

<MyButton icon="💩"> DO SOMETHING</icon>
<MyButton icon="😱"> CLICK ME</icon>

In order to be more flexible, the <MyButton /> component should also accepts all the native button properties. For example we may need to listen the onClick event or set the disabled attribute:

<MyButton icon="💩" onClick={() => {}} disabled />

So we can simply add them to the Component's Property Type and apply them as attributes of the <button> element:

// 1. Add the properties 
interface MyButtonProps {
  icon: string;  
  disabled: boolean;   // ➡️ native prop
  onClick: (e: React.MouseEvent) => void; // ➡️ native prop
  // ➡️ other native props
}

function MyButton(props: PropsWithChildren<MyButtonProps) {

  const { icon, children, onClick, disabled } = props;
  // 2. apply all props one by one
  return <button disabled={disabled} onClick={onClick} className="btn btn-primary">
    {icon}
    {children}
  </button>
}

What could I do to avoid manually passing all properties of a native button?

There is a trick!

We can simply use an intersection type to combine our custom props with all the HTMLButtonElement properties to automatically support all native buttons properties:

export function MyButton(
  props: PropsWithChildren<MyButtonProps & React.ButtonHTMLAttributes<HTMLButtonElement>>
) { 
 // ... component here ...
}

Now your component supports all buttons properties and we can apply them simply using this trick:

// apply all props as button attributes
return <button className="btn btn-primary" {...props}>

However icon and children are not valid button's properties so we can use destructuring to create a rest property that contain all the properties except them:

  const { icon, children, ...rest } = props;

  // Now we apply all props except icons and children
  return <button className="btn btn-primary" {...rest}>
    {icon}
    {children}
  </button>

And that's all.
Here the final source code to create a button that support icon, children and all native button properties:

import { PropsWithChildren } from 'react';

interface MyButtonProps {
  icon: string;
}
export function MyButton(
  props: PropsWithChildren<MyButtonProps & React.ButtonHTMLAttributes<HTMLButtonElement>>
) {
  const { icon, children, ...rest } = props;
  return <button className="btn btn-primary" {...rest}>
    {icon}
    {children}
  </button>
}

USAGE EXAMPLE:

<MyButton 
  icon="💩" 
  type="submit"
  disabled={...} 
  onClick={...} 
  onMouseOver={...} 
> CLICK ME </MyButton>

You can also be interested to read this article:
Create a React / TypeScript Generic component