LEVERAGING ANGULAR IN NODE.JS WITH NEST · kammysliwiec kamil mysliwiec creator of nestjs |...

KAMMYSLIWIEC

LEVERAGING ANGULARIN NODE.JS WITH NEST

KAMMYSLIWIEC

KAMIL MYSLIWIEC CREATOR OF NESTJS | CO-FOUNDER OF TRILON.IO

GOOGLE DEVELOPER EXPERT @KAMMYSLIWIEC

KAMIL MYŚLIWIEC SOFTWARE ENGINEER

@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