Wassim Chegham PRO
Senior Developer Advocate @Microsoft ★ Angular contributor ★ Bazel contributor ★ GDE @Google ★ creator of @itsjustangular / hueaction.dev / ngx.tools / xlayers.dev / angular.run / thundr.dev
By Wassim CHEGHAM | @manekinekko
How To Be Successful With Your Next Angular Projects.
12
Microsoft
Sr. Developer Advocate (JavaScript)
Wassim Chegham
https://wassim.dev
More at wassim.dev
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
Project's internal APIs.
Interceptors, ExceptionHandler...
No business logic!
Local & global Shared APIs
Possibly business logic.
Modules, Components, Services, Pipes, Directives...
Business logic only!
Modules, Providers, Components, Directives, Pipes, etc.
Avoid cluttering the global Shared Module. Use local shared modules.
Avoid putting Providers in the global Shared Module (Providers corruption!)
NgModules are going to be optional in the (long) term.
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'
}
];
$ ng generate library my-awesome-logger
➜ 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.
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';
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.
* This is now by the default since Angular v12.
Consider keeping up to date with the latest releases:
ng update [--next]
$ npm install source-map-explorer --save-dev
$ ng build --source-map
$ source-map-explorer dist/project-name/main*
Setup a Source Maps Explorer and CLI Budget as part of your CI/CD.
You should consider the Component DevKit.
Avoid importing GSM in the TestBed Module!
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...
... Don't let one person HOLDS all the knowledge. Don't be that hero!
Join the Angular communities on Twitter, DEV, Discord, etc.
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.
By Wassim Chegham
« 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?
Senior Developer Advocate @Microsoft ★ Angular contributor ★ Bazel contributor ★ GDE @Google ★ creator of @itsjustangular / hueaction.dev / ngx.tools / xlayers.dev / angular.run / thundr.dev