10 Tips I Wish I Knew When I Started Using Angular

By Wassim CHEGHAM | @manekinekko

How To Be Successful With Your Next Angular Projects.

 

12

This talk is based on my own experience.

DISCLAIMER

YOURS MIGHT BE DIFFERENT!

« Make it work,

make it right,

make it fast (if needed) »

- Kent Beck

Common bad practices to avoid.

Common successful patterns.

We will cover...

Microsoft

Sr. Developer Advocate (JavaScript)

Wassim Chegham

@manekinekko

@manekinekko

@wassimchegham

https://wassim.dev

Open Source creator

hueaction.dev

hexa.run

ngx.tools

xLayers.dev

More at wassim.dev

Community Contrib.

Angular GDE (core team alumni.)

Bazel Web Team contributor

GDE for the Google Assistant

Angular Universal (original core team alumni.)

GDE for GCP (alumni.)

Auth0 Ambassador

Member of the Node.js org. (OpenJS Foundation)

NestJS contributor

Compodoc core team

It's about Code & People.

Let's talk about Code...

Angular Modules convention.

Core

Shared

Features

Project's internal APIs.

Interceptors, ExceptionHandler...

 

No business logic!

Local & global Shared APIs

 

Possibly business logic.

Modules, Components, Services, Pipes, Directives...

 

Business logic only!

GSM: Global Shared Module.

AppModule

SalesModule

ContactModule

CartModule

...

Global Shared Module

Modules, Providers, Components, Directives, Pipes, etc.

FormsModule

BrowserModule

RouterModule

LSM: Local Shared Modules.

AppModule

SalesModule

ContactModule

CartModule

...

Thin Global Shared Module

FormsModule

BrowserModule

RouterModule

SalesSharedModule

ContactSharedModule

CartSharedModule

...

Red flags!

Avoid cluttering the global Shared Module. Use local shared modules.

Tip 01.

Avoid putting Providers in the global Shared Module (Providers corruption!)

Tip 02.

NgModules are going to be optional in the (long) term.

Tip 03.

Lazy Loaded Modules.

export const routes: Route[] = [
  {
    path: '',
    redirectTo: '/home',
    pathMatch: 'full'
  },
  {
    path: 'home',
    loadChildren: () => import('../home/home.module')
                           .then(e => e.HomeModule)
  },
  {
    path: 'editor',
    loadChildren: () => import('./editor/editor.module')
                            .then(e => e.EditorModule)
  },
  {
    path: 'upload',
    loadChildren: () => import('./upload/upload.module')
                            .then(e => e.UploadModule)
  },
  {
    path: '**',
    redirectTo: '/home'
  }
];
export const routes: Route[] = [
  {
    path: '',
    redirectTo: '/home',
    pathMatch: 'full'
  },
  {
    path: 'home',
    component: HomeComponent
  },
  {
    path: 'editor',
    component: EditorComponent
  },
  {
    path: 'upload',
    component: UploadComponent
  },
  {
    path: '**',
    redirectTo: '/home'
  }
];

Angular libraries.

$ ng generate library my-awesome-logger

Manual scripting.

➜  scripts git:(master) / tree
.
├── clean-changelog.js
├── cloudbuild
│   ├── deploy.sh
│   ├── kubectl
│   │   ├── Dockerfile
│   │   ├── cloudbuild.yaml
│   │   ├── kubectl.bash
│   │   └── publish.sh
│   ├── ngcontainer
│   │   ├── Dockerfile
│   │   ├── cloudbuild.yaml
│   │   ├── nginx.conf
│   │   └── publish.sh
│   └── xlayers.template.yaml
├── github-create-comment.bash
├── local-build.sh
└── stamp-build.bash
$ ng add @scope/deploy

You should start investing in Schematics and Builders.

Tip 04.

TypeScript "path alias".

import { ApiService } from '../../../core/api.service.ts';
import { CatsService } from '../../../services/cats.service.ts';
// tsconfig.json
{
  "CompilerOptions": {
    "baseUrl": "src",
    "paths": {
      "@core/*": ["app/core/*"]
      "@services/*": ["app/services/*"]
    }
  }
}
import { ApiService } from '@core/api.service.ts';
import { CatsService } from '@services/cats.service.ts';

JIT vs AOT.

Components

Code Generation

Compiler *

(Parser, Lexer, AST)

VM Code

(Renderer *)

JIT Compilation

(run time)

AOT Compilation (build time)

* In v8: ViewEngine. In v9+: Ivy

Build in Prod* mode (AOT) as often as possible.

Tip 05.

* This is now by the default since Angular v12.

Consider keeping up to date with the latest releases:

ng update [--next]

Tip 06.

Runtime performance checkup.

$ npm install source-map-explorer --save-dev

$ ng build --source-map

$ source-map-explorer dist/project-name/main*

Runtime performance checkup.

Setup a Source Maps Explorer and CLI Budget as part of your CI/CD.

Tip 07.

Design systems...

Choose one!

& the one that matches best your needs

You should consider the Component DevKit.

Tip 08.

Testing, what and how.

Test only the business logic.

Think also about edge cases (e.g. NaN/0).

Separate your code for easier testing.

Avoid importing GSM in the TestBed Module!

Tip 09.

Let's talk about People...

SRP/DRY principles.

Think in terms of responsibility (SRP).

Smart/Presentational/Atomic components (DRY).

What does this code solve?

this.entries$ = this.queries$.pipe(
  map((query: string) => query ? query.trim() : ''),
  filter(Boolean),
  debounceTime(500),
  distinctUntilChanged(),
  switchMap((query: string) => this.fetchEntries(query)),
  filterByOwnerType(OwnerType.User)
);

this.organizations$ = this.selectedRepository$.pipe(
  map((repository) => repository && repository.owner.organizations_url),
  switchMap((url: string | false) => {
    return url ? this.fetchUserOrganizations(url) : of(undefined);
  }),
);

Embrace Reactive Functional Programming but...

Tip 10.

... Don't let one person HOLDS all the knowledge. Don't be that hero!

Tip 11.

Comments and Documentation.

Think about you or a colleague 6 months later.

Comment/document only what's needed.

Document the "why" and not only the "what".

Remember...

to have fun!!

Join the Angular communities on Twitter, DEV, Discord, etc.

Tip 12.

Tips recap.

01. Avoid cluttering the Global Shared Module. Use local shared modules.

03. NgModules are going to be optional in the (long) future.

02. Avoid putting Providers in the global Shared Module.

04. You should start investing in Schematics and Builders.

05. Build in Prod mode as often as possible (by default since v12).

06. Consider keeping up to date with the latest releases.

07. Setup a Source Maps Explorer and CLI Budget as part of your CI/CD.

08. You should consider the Component DevKit.

10. Embrace Reactive Functional Programming.

11. Don't let one person HOLDS all the knowledge.

09. Avoid importing Global Shared Modules in the TestBed Module!

12. Join the Angular communities on Twitter, DEV, Discord, etc.

@manekinekko

Do you have more tips? Tweet them to me at:

Thanks!

@manekinekko

Wassim Chegham |

10 tips I wish I knew when I started using Angular | Angular World Tour

By Wassim Chegham

10 tips I wish I knew when I started using Angular | Angular World Tour

« Make it work, make it right, make it fast » - Kent Beck We all know this quote. But we sometimes stop at the first stage, lacking time or prioritization. Onboarding a new developer in a team is the best time to check if your codebase is « scalable and healthy ». We will explain in this talk some feedbacks from many years doing consulting on Angular projects with concrete use-cases: - what are the bad practices to avoid? - what are the opinionated choices of Angular which can help you? Regardless of your team's size or your colleagues' experience, what are the best architectural choices you can do to enhance that?

  • 5,491

More from Wassim Chegham