DEV Community: Mirko Rapisarda

Angular Tooling - How to equip before starting a project

Mirko Rapisarda — Sun, 01 Aug 2021 07:49:34 +0000

A few weeks have passed since the last article on "How to get the most out of Angular configuration" and we were left with a promise: explore together the tools with which to "equip" before tackling an Angular project.

Angular DevTools

Finally, as well as React and Vue, Angular also has its official DevTools, which installs as a simple Chrome extension and provides debugging and profiling capabilities for Angular applications. Once installed, the extension will appear in the "Developer Tools" and will consist of two tabs:

Components: allows you to view the structure of the components that make up the page and edit the status of the components.
Profiler: allows you to profile the application and understand the performance bottlenecks in the change detection phase.

Redux DevTools

Another essential tool if you use Angular with NgRx for the application's state management is Redux DevTools. This tool is also installed as a Chrome extension and allows you to inspect changes in the application's Store while running. The screen appears divided into three sections:

Actions Inspector: allows you to visualize the sequence of actions that are dispatched by the application. It is possible to filter and navigate within the list of actions, with the possibility of executing the "jump" to the state in which the application was in a given moment.
State Inspector: by clicking on the single action, through the appropriate buttons, it is possible to visualize: the detail of the dispatched action (type and payload), the current state of the store (in Tree, Chart, or Raw view), and the differences between the state of the store of the previous action and that of the selected action.
State Recording Navigator: allows you to "play", respecting the timeline of the dispatched actions, the changes made to the state of the store.

Compodoc

Whenever developing an application or library that needs documentation, Compodoc is the right tool for you. This tool allows you to automatically generate the documentation of an Angular project through comments written. Compodoc also allows you to generate a mapping of the routes created and the creation of a navigation menu to navigate between the various components, guards, and interceptors… present within the application.

Installation

Install the package via the command

npm install - save-dev @compodoc/compodoc

Create the file tsconfig.doc.json with the following configuration

{
 "include": ["src/**/*.ts"],
 "exclude": ["src/test.ts", "src/**/*.spec.ts", "src/app/file-to-exclude.ts"]
}

In the package.json add the script

"compodoc": "npx compodoc -p tsconfig.doc.json"

Run the previous script to generate the documentation

npm run compodoc

Compodoc Dependency Graph (NGD)

This tool, developed by the same authors of Compodoc, allows you to generate and view the dependencies tree of your Angular application. This helps us to have a clear idea of how modules, components, directives, pipes, etc are connected and dependent on each other.

Installation

Install the package via the command

npm install -g @compodoc/ngd-cli

In the package.json add the script

"ngd": "npx ngd -p tsconfig.doc.json -o"

Run the previous script to generate the dependencies graph

npm run ngd

Source Map Explorer

As our codebase grows in size, you may begin to experience performance degradation upon initial application loading. This can be caused by several factors (and perhaps it would require a separate article), but one of the causes could be related to the installation of a large number of excessively "heavy" dependencies. Source Map Explorer allows you to view a map that indicates the size in bytes of each dependency installed within the application. In this way, we have a clear idea of which dependencies have an excessive impact on our codebase and consequently, we can evaluate to replace them with a "lighter" library.

Installation

Install the package via the command

npm install - save-dev source-map-explorer

In the angular.json file edit the following configuration properties

"sourceMap": true,
"namedChunks": true,

Run the build command

npm run build

In the package.json add the script

"source-map-explorer": "source-map-explorer dist/your-angular-app-name/**/*.js"

Run the previous script to generate the source map graph

npm run source-map-explorer

VS Code Extensions

If you are using Visual Studio Code as your code editor, installing the following extensions to improve productivity on Angular applications:

Angular Language Service: this extension provides great help when editing Angular templates through autocompletion, AOT diagnostic messages (remember to activate the strictTemplates option in the tsconfig.json file), and quick info.
Angular Snippets: this extension adds snippets to quickly generate: components, directives, guards, modules, pipes, etc.
DeepCode: DeepCode allows you to find bugs, vulnerabilities, and performance issues through a sophisticated AI-based system.
Quokka.js: Quokka.js is a developer productivity tool for rapid JavaScript / TypeScript prototyping. Runtime values are updated and displayed in your IDE next to your code, as you type.

Conclusions

Tackling an Angular project with the right tools can make a difference in the early stages of a project. In this article, we have introduced you to some of the tools that are part of the "toolbox" of each Devmy project. In the next Angular article, we will discuss one of the greatest allies of any good developer: ESLint and Prettier. We will see together how to configure them on Angular and how to migrate from TSLint to ESLint.

How to get the most out of Angular configuration

Mirko Rapisarda — Wed, 12 May 2021 19:28:32 +0000

The first time I approached front-end development in Angular I was a bit off guard, especially for those like me who come from a back-end environment (specifically PHP) and are used to using strong typing within their projects (also thanks to static analysis tools such as Psalm or PHPStan).

Working for a year now on the construction of projects in Angular, in fact, I could not help but notice that, although the framework uses TypeScript extensively, we often tend to leave it in “silent” mode, not fully exploiting the potential of the compiler.

Even in the organization of the folders, I have often found a lot of confusion, with the tendency to insert too much logic in the components, when these should simply take care of taking the data and showing them by relegating the fetching of the data and the operations of manipulation of them, which do not concern necessarily the state of the components, to the services.

These scenarios I witnessed led me to create a series of articles to shed light on some concepts of Angular and the best practices to be adopted to improve development on this framework. This first article will indicate some tips on getting the most out of Angular installation and TypeScript configuration.

Angular Strict Mode

The first operation we can perform is to enable Angular strict mode already during the installation phase, using the command:

ng new [project-name] --strict

This mode enables:

The strict mode of TypeScript and other flags that we will analyze
Enable the Angular flags: strictTemplates and strictInjectionParameters
Reduces the size of budgets by ~75%

TypeScript Strict Mode

Angular strict mode automatically enables the following TypeScript flags within the tsconfig.json file. These could also be enabled by manually editing the TypeScript configuration file:

strictPropertyInitialization

This flag signals a compile error if the class properties are declared, but not initialized in the constructor. Therefore, the following code snippet would throw an error:

@Component({...})
class AppComponent {
  // Error: Property 'title' has no initializer
  @Input() title: string;
}

To fix it we can initialize the property in the constructor or during the declaration:

@Component({...})
class AppComponent {
  @Input() title = '';
}

strictNullChecks

This flag reports an error if we try to use null or undefined when we expect to receive a concrete value:

interface Person {
    firstName: string;
    lastName: string;
    age: number;
}

// Error: Type 'null' is not assignable to type 'Person'
const developer: Person = null;

console.log(`${developer.firstName} ${developer.lastName}`);

noImplicitAny

This flag is my favorite because it allows an error to be reported if we leave any type as an inferred implicit type. This does not mean that we can no longer use any type (although I personally advise against its frequent use, because it makes the use of TypeScript useless), but that we simply have to explicitly specify the type (even if this is any) in every property, parameter and variable declared.

@Component({...})
export class AppComponent {
  // Error: Parameter 'value' implicitly has an 'any' type
  onAddClick(value) {
    // Do stuff...
  }
}

To correct the error we can explicitly indicate the type any or indicate a more specific type:

@Component({...})
export class AppComponent {
  onAddClick(value: Person) {
    // Do stuff...
  }
}

strictBindCallApply

This flag is a little more anonymous, in summary, it allows TypeScript to verify the correctness of the types passed as a parameter even a function is called via the call, bind, and apply methods:

function toInt(x: string) {
  return parseInt(x);
}

const number1 = toInt.call(undefined, "10");

// Error: Argument of type 'boolean' is not assignable to
// parameter of type 'string'
const number2 = toInt.call(undefined, false);

strictFunctionTypes

This flag verifies that when assigning functions the parameters and return values are compatible with the subtypes:

function log(x: string) {
  console.log(x.toLowerCase());
}

type StringOrNumberFunc = (ns: string | number) => void;

// Error: Type '(x: string) => void' is not assignable to type 'StringOrNumberFunc'
const func: StringOrNumberFunc = log;

There are three other options that, although they are not automatically enabled by setting Angular strict mode, I highly recommend setting them manually:

noImplicitReturns

This flag allows TypeScript to report an error if all paths to a function do not return a value:

// Error: Not all code paths return a value
function lookupHeadphonesManufacturer(color: string) {
  if (color === 'blue') {
    return 'beats';
  }

  'bose';
}

noUnusedLocals

This flag allows a TypeScript to report an error if a declared variable is not used:

// Error: 'OnInit' is declared but its value is never read
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title: string = 'Devmy Example Project';

  // Error: 'subtitle' is declared but its value is never read
  private subtitle: string = 'Hello World';

  // Error: 'log' is declared but its value is never read
  private log(value: string): void {
    console.log(value);
  }
}

noUnusedParameters

This flag allows TypeScript to report an error if a function parameter is not used:

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title: string = 'Devmy Example Project';

  // Error: 'value' is declared but its value is never read
  onOptionChange(value: number) {

  }
}

If it’s mandatory to indicate the parameter, but it isn’t necessary to use it, we can simply tell TypeScript to ignore it by replacing or prefixing the parameter name with an underscore:

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title: string = 'Devmy Example Project';

  onOptionChange(_value: number) {

  }
}

Strict Angular Template

By enabling Angular strict mode, these flags are also automatically activated:

strictTemplates

If enabled, Angular will check within the template files that type interface is complying:

// app.component.ts

interface User {
  firstName: string;
  lastName: string;
}

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title: string = 'Devmy Example Project';
  users: User[] = [
    {
      firstName: 'Mario',
      lastName: 'Rossi'
    },
    {
      firstName: 'Maria',
      lastName: 'Rossi'
    },
    {
      firstName: 'Carlo',
      lastName: 'Rossi'
    }
  ];
}

// app.component.html

<div>
  <ul>
    <li *ngFor="let user of users">
      <!-- Property 'age' does not exist on type 'User' -->
      {{ user.firstName }}-{{ user.lastName }}: {{ user.age }}
    </li>
  </ul>
</div>

strictInjectionParameters

If enabled, Angular will report an error if it is not possible to determine which type to inject for the parameter specified in the constructor.

Angular Bundle Budgets

When running the build, the Angular application must respect the maximum allowed budgets. If our application exceeds this size, the build will fail. This forces us to deploy performing applications without overly “heavy” dependencies.

By default Angular has quite high budgets:

Up to a build size of 2MB, we will receive a simple warning, exceeding 5MB an error will be displayed during the build phase
Up to a component style size of 6KB, we will receive a simple warning, exceeding 10KB you will get an error during the compilation phase

By activating Angular strict mode, these budgets are reduced by ~ 75%, allowing us to immediately identify if we have introduced an excessively “heavy” dependency:

Up to a build size of 500KB, we will receive a simple warning, exceeding 1MB an error will be displayed during the build phase
Up to a component style size of 2KB, we will receive a simple warning, exceeding 4KB you will get an error during the compilation phase

To make sure we respect the size of budgets set we must:

Use the source-map-explorer tool to inspect the impact of the dependencies installed within the application
Use lazy-loading
Avoid large imports into component styles

Conclusions

Although Angular strict mode may seem overly restrictive at first, I assure you that activating it will make your code more robust, less prone to bugs, and easier to update. From version 12 the Angular team has seen fit to make the strict mode as default mode, but, for pre-existing projects, it could be a godsend to go and activate the various flags!

In the next article, I will talk about the recommended tools to speed up the development and use of Angular in everyday life 🤓

Stilo - A utility-first Flutter library for rapid UI development

Mirko Rapisarda — Sun, 08 Nov 2020 15:04:42 +0000

I started to study Dart and Flutter a couple of months ago because I've always been fascinated by mobile development, but my web background has always blocked me from approaching this different, but at the same time, similar world. Flutter gave me the possibility to approach mobile development in a very fast and easy way (and that's amazing for a lazy person like me 😆).

When I started developing the first projects my "web mentality" asked myself: "How can I structure the style of my app (colors, spacings, borders, box shadows, font sizes, etc.) to avoid code duplication and speed up the development process? Why there isn't a Tailwind's like library?". These questions brought me to create Stilo, a utility-first Flutter library for rapid UI development.

Utility as first

Stilo does not replace Flutter as framework, but it wraps Flutter classes to create a list of constants to deal with: borders, spacings, font sizes, widths, heights, box shadows, transforms, opacity, and much more…

But let's go to see some examples of Stilo's constants and how to use them.

Examples

1. StiloBorderRadius

This class defines constants to deal with border-radius (all, top, right, bottom, left, horizontal and vertical directions)

import 'package:stilo/stilo.dart';
Container(
  width: 200,
  height: 200,
  decoration: BoxDecoration(
    borderRadius: StiloBorderRadius.a4, // 6.0 radius all
    color: Colors.orange,
  ),
)
----------
Container(
  width: 200,
  height: 200,
  decoration: BoxDecoration(
    borderRadius: StiloBorderRadius.t5, // 9.0 radius top
    color: Colors.yellow,
  ),
)
---------
Container(
  width: 200,
  height: 200,
  decoration: BoxDecoration(
    borderRadius: StiloBorderRadius.be2, // 3.0 radius bottom-end
    color: Colors.orange,
  ),
)

2. StiloSpacing

This class defines constants to deal with spacings

import 'package:stilo/stilo.dart';
Column(
  children: <Widget>[
    Container(width: 200, height: 100, color: Colors.orange),
    StiloSpacing.y20, // space with 60.0 height
    Container(width: 200, height: 100, color: Colors.indigo),
  ],
)
------------
Column(
  children: <Widget>[
    Container(width: 200, height: 100, color: Colors.orange),
    StiloSpacing.x3, // space with 9.0 width
    Container(width: 200, height: 100, color: Colors.indigo),
  ],
),

3. StiloFontSize

This class defines constants to deal with font sizes

import 'package:stilo/stilo.dart';
Container(
  child: Text(
    'Hello World',
    style: TextStyle(fontSize: StiloFontSize.lg), // 13.5 font size
  ),
)
---------------
Container(
  child: Text(
    'Hello World',
    style: TextStyle(fontSize: StiloFontSize.xl5), // 36.0 font size
  ),
)

4. StiloLineHeight

This class defines constants to deal with line heights

import 'package:stilo/stilo.dart';
Container(
  child: Text(
    'Hello World',
    style: TextStyle(
      height: StiloLineHeight.tight, // 1.25 line height
    ),
  ),
)
---------------
Container(
  child: Text(
    'Hello World',
    style: TextStyle(
      height: StiloLineHeight.relaxed, // 1.625 line height
    ),
  ),
)

5. StiloWidth / StiloHeight

These classes define constants to deal with widths and heights

import 'package:stilo/stilo.dart';
Container(
  width: StiloWidth.w5, // 20.0 width
  height: StiloHeight.h5, // 20.0 height
  color: Colors.orange,
)
---------------
Container(
  width: StiloWidth.w48, // 192.0 width
  height: StiloHeight.h20, // 80.0 height
  color: Colors.orange,
)

Conclusion

These were just some of the constants that Stilo defines for you and, in upcoming releases, many more utility classes will be introduced to help you in the development process of your next app 😉

To follow the project and suggest new features open an issue on Github

To install Stilo in your project use the pub package manager

DEV Community: Mirko Rapisarda

Angular Tooling - How to equip before starting a project

Angular DevTools

Links

Redux DevTools

Links

Compodoc

Installation

Links

Compodoc Dependency Graph (NGD)

Installation

Links

Source Map Explorer

Installation

Links

VS Code Extensions

Conclusions

How to get the most out of Angular configuration

Angular Strict Mode

TypeScript Strict Mode

strictPropertyInitialization

strictNullChecks

noImplicitAny

strictBindCallApply

strictFunctionTypes

noImplicitReturns

noUnusedLocals

noUnusedParameters

Strict Angular Template

strictTemplates

strictInjectionParameters

Angular Bundle Budgets

Conclusions

Stilo - A utility-first Flutter library for rapid UI development

Utility as first

Examples

1. StiloBorderRadius

2. StiloSpacing

3. StiloFontSize

4. StiloLineHeight

5. StiloWidth / StiloHeight

Conclusion