Embed Size (px)
Citation preview
KAMMYSLIWIEC
LEVERAGING ANGULARIN NODE.JS WITH NEST
KAMMYSLIWIEC
KAMIL MYSLIWIEC CREATOR OF NESTJS | CO-FOUNDER OF TRILON.IO
GOOGLE DEVELOPER EXPERT @KAMMYSLIWIEC
KAMMYSLIWIEC
Adonis Express Koa Nest Fastify
KAMMYSLIWIEC
ANGULAR
ANGULAR IS A PLATFORM
KAMMYSLIWIEC
ANGULAR COMBINESBEST PRACTICES
KAMMYSLIWIEC
ANGULAR GIVESRIGHT ABSTRACTIONS
NESTJS WWW.NESTJS.COM
@NESTFRAMEWORK
KAMMYSLIWIEC
NEST IS A PLATFORM
KAMMYSLIWIEC
A HIGHERLEVEL OF REUSABILITY
KAMMYSLIWIEC
KNOWLEDGE REUSABILITY
KAMMYSLIWIEC
EXPERIENCE REUSABILITY
KAMMYSLIWIEC
CODE REUSABILITY
KAMMYSLIWIEC
KAMMYSLIWIEC
DTO
KAMMYSLIWIEC
create(item: CreatePostDto): Observable<Post> {
return this.http.post(POSTS_ENDPOINT, item);
}
KAMMYSLIWIEC
create(item: CreatePostDto): Observable<Post> {
return this.http.post(POSTS_ENDPOINT, item);
}
KAMMYSLIWIEC
@Post()
create(@Body() createPostDto: CreatePostDto): Post {
return this.postsService.create(createPostDto);
}
KAMMYSLIWIEC
@Post()
create(@Body() createPostDto: CreatePostDto): Post {
return this.postsService.create(createPostDto);
}
KAMMYSLIWIEC
DTO
INTERFACES
KAMMYSLIWIEC
create(item: CreatePostDto): Observable<Post> {
return this.http.post(POSTS_ENDPOINT, item);
}
KAMMYSLIWIEC
@Post()
create(@Body() createPostDto: CreatePostDto): Post {
return this.postsService.create(createPostDto);
}
KAMMYSLIWIEC
DTO
INTERFACES
SERVICES
KAMMYSLIWIEC
$ mkdir my-app && cd my-app $ ng new client $ nest new server
KAMMYSLIWIEC
$ mkdir my-app && cd my-app $ ng new client $ nest new server
KAMMYSLIWIEC
$ mkdir my-app && cd my-app $ ng new client $ nest new server
KAMMYSLIWIEC
CODE REUSABILITY
BUILDING BLOCKS
KAMMYSLIWIEC
MODULES1
KAMMYSLIWIEC
DECLARATIONS
PROVIDERS
IMPORTS
EXPORTS
KAMMYSLIWIEC
DECLARATIONS
PROVIDERS
IMPORTS
EXPORTS
KAMMYSLIWIEC
DECLARATIONS
PROVIDERS
IMPORTS
EXPORTS
KAMMYSLIWIEC
DECLARATIONS
PROVIDERS
IMPORTS
EXPORTS
KAMMYSLIWIEC
DECLARATIONS
PROVIDERS
IMPORTS
EXPORTS
CONTROLLERS
KAMMYSLIWIEC
CONTROLLERS
PROVIDERS
IMPORTS
EXPORTS
KAMMYSLIWIEC
CONTROLLERS
PROVIDERS
IMPORTS
EXPORTS
KAMMYSLIWIEC
CONTROLLERS
PROVIDERS
IMPORTS
EXPORTS
KAMMYSLIWIEC
@NgModule({
imports: [CommonModule],
declarations: [AppComponent],
providers: [AppService],
exports: [],
})
export class ApplicationModule {}
KAMMYSLIWIEC
@NgModule({
imports: [CommonModule],
declarations: [AppComponent],
providers: [AppService],
exports: [],
})
export class ApplicationModule {}
KAMMYSLIWIEC
@Module({
imports: [CommonModule],
declarations: [AppComponent],
providers: [AppService],
exports: [],
})
export class ApplicationModule {}
KAMMYSLIWIEC
@Module({
imports: [CommonModule],
declarations: [AppComponent],
providers: [AppService],
exports: [],
})
export class ApplicationModule {}
KAMMYSLIWIEC
@Module({
imports: [CommonModule],
controllers: [AppController],
providers: [AppService],
exports: [],
})
export class ApplicationModule {}
KAMMYSLIWIEC
@Module({
imports: [CommonModule],
controllers: [AppController],
providers: [AppService],
exports: [],
})
export class ApplicationModule {}
KAMMYSLIWIEC
PROVIDERS2
KAMMYSLIWIEC
@Injectable({ providedIn: 'root' })
export class CatsService {
constructor(
private httpService: HttpService,
) {}
}
KAMMYSLIWIEC
@Injectable({ providedIn: 'root' })
export class CatsService {
constructor(
private httpService: HttpService,
) {}
}
KAMMYSLIWIEC
@Injectable()
export class CatsService {
constructor(
private httpService: HttpService,
) {}
}
KAMMYSLIWIEC
@Injectable()
export class CatsService {
constructor(
private httpService: HttpService,
) {}
}
DEPENDENCYINJECTION
KAMMYSLIWIEC
@Injectable()
export class CatsService {
constructor(
private httpService: HttpService,
) {}
}
KAMMYSLIWIEC
@Injectable()
export class CatsService {
constructor(
@Inject(HTTP_SERVICE)
private httpService: HttpService,
) {}
}
KAMMYSLIWIEC
GUARDS3
KAMMYSLIWIEC
ROUTEUSER
KAMMYSLIWIEC
ROUTEUSERREQUEST
KAMMYSLIWIEC
@Injectable()
export class AuthGuard implements CanActivate {
canActivate(...): boolean {
return true;
}
}
KAMMYSLIWIEC
@Injectable()
export class AuthGuard implements CanActivate {
canActivate(
route: ActivatedRouteSnapshot,
state: RouterStateSnapshot,
): boolean {
return true;
}
}
KAMMYSLIWIEC
@Injectable()
export class AuthGuard implements CanActivate {
canActivate(
context: ExecutionContext,
): boolean {
return true;
}
}
KAMMYSLIWIEC
INTERCEPTORS4
KAMMYSLIWIEC
REMOTECLIENT
KAMMYSLIWIEC
HANDLERREQUEST
MORE
KAMMYSLIWIEC
PIPES
KAMMYSLIWIEC
EXCEPTION FILTERS
KAMMYSLIWIEC
SWAGGER
KAMMYSLIWIEC
WEBSOCKETS
KAMMYSLIWIEC
@SubscribeMessage(‘events')
handleEvent(client: WsClient, data: string): string {
return data;
}
MICROSERVICES
REUSABILITY
KAMMYSLIWIEC
DEVELOPER WORKFLOW
KAMMYSLIWIEC
NEST CLI
KAMMYSLIWIEC
SCHEMATICS
KAMMYSLIWIEC
LATEST NEWS
KAMMYSLIWIEC
SERVE STATIC
KAMMYSLIWIEC
$ nest g angular-app client
KAMMYSLIWIEC
@Module({
imports: [
AngularModule.forRoot({
rootPath: 'client/dist/client',
}),
],
})
export class AppModule {}
KAMMYSLIWIEC
ANGULARUNIVERSAL
KAMMYSLIWIEC
SERVER-SIDERENDERING
KAMMYSLIWIEC
$ ng new ssr-app && cd ssr-app$ ng add @nestjs/ng-universal
KAMMYSLIWIEC
$ ng new ssr-app && cd ssr-app$ ng add @nestjs/ng-universal
KAMMYSLIWIEC
OPEN SOURCE
KAMMYSLIWIEC
KAMMYSLIWIEC
WWW.TRILON.IO
KAMMYSLIWIECKAMMYSLIWIEC
THANKYOU
@KAMMYSLIWIEC
