DEV Community: Erik Henrique

Creating Type-Safe Forms in Angular: Advanced Tip 🤯

Erik Henrique — Fri, 11 Aug 2023 16:11:55 +0000

When developing complex applications in Angular, one common challenge is dealing with forms and their validation. As applications grow, so does the complexity of forms, leading to potential errors and maintenance difficulties. To address these challenges, Angular provides a powerful form handling module, @angular/forms, which allows developers to create dynamic and type-safe forms. In this tutorial, we will explore a helpful utility type created by me called WithControlsFrom that enhances the form-building process by providing type-safe controls for form fields.

Introduction to `WithControlsFrom` type

The WithControlsFrom type is a versatile utility that assists in creating type-safe forms using the @angular/forms module. It simplifies the process of binding form controls to an interface, ensuring that the form's structure aligns with the interface properties. This utility type generates a type that defines each property of the interface as an optional form control. This way, you can avoid common errors like assigning an incorrect data type to a form control or referencing a non-existing property.

Let's dive into an example to see how WithControlsFrom can be used effectively.

Example: `UserModel` Form

Suppose we have an interface UserModel representing user data:

export interface UserModel {
  id: number | null;
  name: string;
  gender: string;
}

We want to create a form for capturing user information using the @angular/forms module. Here's how we can utilize the WithControlsFrom type to achieve this:

import { Component } from '@angular/core';
import { FormBuilder, FormControl, FormGroup } from '@angular/forms';

// 👇 This bind any interface with the FormGroup generating a type-safe form matching existing keys and FormControl type 🙂
export type WithControlsFrom<T> = {
  [P in keyof T]?: FormControl<T[P]> | FormArray<FormControl<T[P]>> | FormGroup<{ [K in keyof T]: FormControl<T[K]> }>;
};

@Component({
  selector: 'app-user-form',
  template: `
    <form [formGroup]="userForm">
      <label>
        ID:
        <input type="number" formControlName="id" />
      </label>
      <label>
        Name:
        <input type="text" formControlName="name" />
      </label>
      <label>
        Gender:
        <input type="text" formControlName="gender" />
      </label>
    </form>
  `,
})
export class UserFormComponent {
  userForm!: FormGroup<WithControlsFrom<UserModel>>;

  constructor(private readonly _formBuilder: FormBuilder) {
    this.userForm = this._formBuilder.group<WithControlsFrom<UserModel>>({
      id: this._formBuilder.control(null),
      name: this._formBuilder.control('Father Horse'),
      gender: this._formBuilder.control(777), // Throws: Type 'FormControl<number>' is not assignable to type 'FormControl<string>'. Type 'number' is not assignable to type 'string'.
      xyz: this._formBuilder.control(''), // Throws: Object literal may only specify known properties, and 'xyz' does not exist in type 'WithKeysFrom<UserModel>'.
    });
  }
}

In this example, we've created a UserFormComponent that defines a form group named userForm. The form group is constructed using the WithControlsFrom type, which ensures that the form controls correspond to the properties of the UserModel interface. Each property is mapped to a corresponding form control, and the form's HTML template uses the formControlName directive to bind the form controls to the input elements.

Conclusion

In this tutorial, we explored the WithControlsFrom utility type, which greatly simplifies the process of creating type-safe forms in Angular applications. By leveraging this utility, developers can ensure that their form controls align with the structure of the underlying data model, reducing the risk of errors and improving code maintainability. This type-safe approach to form creation enhances the development experience and contributes to the overall robustness of Angular applications.

For more information on working with forms in Angular, you can refer to the official Angular documentation.

Remember that using WithControlsFrom can significantly enhance the reliability and maintainability of your forms, ensuring that your code remains consistent with your data models. Happy coding!

References:

Disclaimer

This article was made with a little help from ChatGPT.

What are Progressive Web Apps (PWAs) 📱💡

Erik Henrique — Wed, 27 Oct 2021 23:54:03 +0000

The concept of PWAs (Progressive Web Apps) is not new. It has been around since 2015, when Google introduced this new form of web experience on mobile devices. In the past few years, PWAs have gained strength and more people are betting on this idea. But, what are PWAs exactly? A Progressive Web App is a web app that uses modern browser features to provide users with an experience similar to a native application. These apps are hosted on servers, accessible by URLs and indexed by search engines. According to Google, PWAs should be:

Reliable

When it is opened in a user’s home screen, a Progressive Web App loads instantly, regardless of the state of the network, and never shows the downasaur, even under uncertain network conditions. As the main features of the PWA are pre-stored in cache, it is able to eliminate dependency on the network, ensuring an instant and reliable experience for its users.

Fast

About 53% of users leave a website if it takes more than 3 seconds to load. Once they have loaded, users expect websites to be fast, without irregular scrolling or slow response in their interfaces. Most websites load all files and images (which are usually the heaviest) when accessed for the first time and this ends up impacting users’ experience, since they have to wait for the end of this process to start interacting with the website.
For this reason, a PWA should not only open quickly when accessed, but should also have a short response time on its interfaces, to reduce what is called Time to Interactive (TTI), loading files and making calls to other resources and sources only when really necessary.

Engaging

PWAs should make users feel like they are in a native app. Progressive Web Apps can be installed and stay on the user’s home screen, without the need for an app store. They offer an immersive, full-screen experience and can even re-engage users with Push Notifications.

Is the “Mobile App Era” ending?

The mobile app boom that began in July 2008, when Apple launched the App Store, is no longer the same. Many companies know how difficult and costly it is to get people to download their apps. Have you ever stopped to think about how many apps from the App Store or Play Store you download each month?
According to The State of Mobile 2019, from App Annie, in terms of time of use, the most used apps in 2018 were communication and social networking apps, responsible for 50% of the time spent on apps globally. They were followed by video players and editors (15%) and games (10%). According to Statista, 96% of users’ time is spent on 10 applications. Of that 96%, most of the time is used in up to 3 apps.

Source: https://www.statista.com/chart/3835/top-10-app-usage/

Given this scenario, it becomes increasingly important to understand how users relate to apps, to identify aspects of user experience that can be improved, not only in the original apps themselves, but to make suggestions and to use in other options.

User retention

Retention is a measure of the percentage of users who return to an app sometime after its purchase. For apps, retention is assessed by the number of users who continue to use an application, for example, one, two or three months after its download. Turnover is the opposite, measuring the percentage of people who do not return to a product or service after a certain period of time, migrating to other options in the market.
According to data from Localytics, 43% of users continue using apps a month after downloading them, which means that 29% of users generate turnover and are no longer using those apps after a month. Things get worse as time goes by, reaching an average of 71% churning rate in the 3rd month.

Source: https://www.localytics.com/lp/cheat-sheet-overall-app-benchmarks-h2-2018/

Retention can also be more thorough, being measured by how many users return to an app in a specific number of days after its download. About 24.9% of users revisit apps one day after downloading them, while only 9.4% of users revisit apps two weeks after their download.

Source: https://www.localytics.com/lp/cheat-sheet-overall-app-benchmarks-h2-2018/

Therefore, just having an app in stores does not mean that people will use it or even download it. In the world of native apps — in which large user bases, traffic, among other points, are necessary for monetization — however wonderful a new application idea may be, it costs more and more advertising and promotion to reach a critical mass and generate revenue efficiently.

What is the difference between developing a native app and a PWA?

Building native apps can be a very expensive solution for some companies, as it requires the maintenance of two software development teams, one for Android and the other for iOS. As it is necessary to ensure that both versions of the app are up to date, developing new features can greatly impact the productivity of a team or a company.

Since all that is needed in order to develop a PWA are web technologies, there is no need for multiple teams with expertise in different operating systems. For iOS apps, it is still necessary to go through Apple’s review with each new version. On the other hand, a PWA is hosted on a server and accessed through an address in the browsers bar. Therefore, it doesn’t need Apple’s approval and doesn’t have to have its new versions sent to app stores.

On Android, Google’s Play Store already supports the publication of PWAs, which brings many benefits and makes users’ experience better, as if they were using a real installed app.

Thus, for the development of PWAs, it is only necessary to have knowledge in web technologies (there are several options between frameworks and libraries) to serve users of practically all platforms, without having to be an expert in each user’s preferred operating system.

Another important aspect to be considered when developing apps and PWAs is the space needed to install them on a hard drive. A growing trend are cloud-based services and Software as a Service (SaaS) models delivered by browsers instead of installed software. Today, we already have many well-established SaaS, such as Netflix and Spotify, which also serve app users. However, the idea of a SaaS is that all that is needed for the experience is an Internet connection.

The aim of a SaaS is to be able to be accessed from any device, anywhere. This concept is very similar to the principles and characteristics of PWAs. As PWAs are an option that considers both the reduction of space on the hard disk needed for an app, the reduction of data needed for it to work, and also have offline versions that make them less dependent on an internet network, they can be a means to achieve a SaaS that is even more accessible and independent.

Checklist

There is a list of items and features created by Google that define what is expected of a PWA:

Progressive: made for any user, regardless of their preferred browser;
Responsive: made for any device (desktop, tablet or mobile);
Connectivity-independent: works even if the user is offline;
App-like: the user should feel as if they are in a native app;
Fresh: no need to download updates from the application, the browser will simply detect a new version and update it automatically if necessary;
Safe: done only with HTTPS (Hyper Text Transfer Protocol Secure), seeking to ensure that the domain or address is verified;
Re-engeable: through Push Notifications, the user can be constantly engaged;
Installable: an icon can be added to the main work area of a smartphone and desktop with just one click; Thus, while there are many things that can lead a baseline PWA to a good experience, the checklist provided by Google can help teams to create the best possible experiences for users. The list includes, according to them, all the things that are needed for a baseline PWA and how to take it a step further and provide fantastic usability by thinking about users, the (often limited) conditions they may have and not the platform itself. One tool that can help a lot during the development of PWAs is Lighthouse, also created by Google. Initially, the tool was designed to audit PWAs, but its main goal is to assist in improving all aspects of a Web App. It can be run via terminal or installed in Chrome as an extension. The tool applies tests to a website, offering tips, suggestions and possible solutions in 5 different aspcts: Performance, Accessibility, Best Practices, SEO (Search Engine Optimization) and PWA.

These 5 different categories in Lighthouse seek to identify, according to metrics studied by Google, what are the scores of a website or PWA according to these studies. This directly impacts the ranking or position of the site when a user searches on Google, because the search algorithm also takes this ranking into account.

Limitations with respect to native applications

A downside to PWAs is that they do not yet have full control over the hardware of the device on which they are installed. Bluetooth, contact list and Near Field Communication (NFC) are some examples of features that can’t be accessed by PWAs yet (access https://whatwebcando.today to see more limitations).

Another point is that while Google, Microsoft and Mozilla are betting high on this new approach, Apple is not focused on it yet. In iOS 11.3 of Apple’s mobile operating system, support has been added to the basic set of new technologies behind the idea of Progressive Web Apps (see more here https://firt.dev/notes/pwa-ios/). However, there is still a lot to be implemented and corrected to provide the user experience that is expected from a real PWA. Apple doesn’t seem to be in a hurry to implement full support for these apps — for example, one of the basic points that isn’t yet supported on iOS, but not mandatory in the PWAs, is the option of sending Push Notifications. Still, even if Apple doesn’t fully adopt PWAs, they’re already a reality and are all around us with remarkable results, some examples of which we’ll explore next.

Case Studies

Below, we can see some of the big companies in the world that have already adopted PWAs and the results they have brought to these companies:

Tinder

URL:https://tinder.com/?lang=pt-BR

Tinder PWA, the relationship app, developed its own PWA in about 3 months. While the Tinder Android app requires 30 MB of space, its PWA version offers the main Tinder experience at a data cost of 2.8 MB. The PWA also appears to encourage more activity from users. Compared to users of the native app, PWA users swipe more, send more messages and use the app for longer periods of time.

Uber

URL: https://m.uber.com

Uber needed an app that could be used by anyone, regardless of the speed of their network or device. Its solution was to develop a PWA that mimics its native features in functionality, but that had a significantly smaller MB size of stored data. Using small libraries and SVGs (Scalable Vector Graphics) instead of images where possible, Uber‘s Progressive Web App is just 50 KB and loads in less than three seconds even on 2G networks!

Twitter

URL: https://mobile.twitter.com/

Although smartphone adoption had grown to 3.8 billion connections by the end of 2016, 45% of mobile connections are still on slower 2G networks, according to the GSMA (Global System for Mobile Communications Association), a trade body that represents the interests of mobile network operators worldwide. With Twitter Lite — the PWA version of Twitter, a social networking app — it is possible to preview images and videos before choosing which ones to upload fully. This reduces data usage by up to 70%, turning Twitter more accessible in areas where mobile data is expensive.

iFood

URL: https://www.ifood.com.br/pwa

iFood, a Brazilian food delivery app, also recently launched its PWA. This version occupies only 280 KB on Android, but does not include notifications about the status of orders and coupons — although the iFood team is already working on it, according to the app.