Productivity Revolution: Angular Principles in Node

Productivity Revolution: Angular Principles in Node

Angular empowers us with a robust platform that simplifies structuring highly scalable and demanding applications. Nowadays, rapidly changing technologies force us to constantly learn new things. But, what if we could reuse our existing experience? Share language, design patterns, main principles? In this talk you’ll learn how Nest can increase your productivity and how to start your journey to become a Full-Stack TypeScript developer with Angular background.

2c6d09f60e512f388508afe9bebfcd6f?s=128

Kamil Mysliwiec

May 02, 2019
Tweet

Transcript

  1. KAMMYSLIWIEC PRODUCTIVITY REVOLUTION: ANGULAR PRINCIPLES IN NODE

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

    @KAMMYSLIWIEC

  3. KAMIL MYŚLIWIEC SOFTWARE ENGINEER
 @KAMMYSLIWIEC


  4. KAMMYSLIWIEC Adonis Express Koa Nest Fastify

  5. KAMMYSLIWIEC ANGULAR

  6. ANGULAR IS A PLATFORM

  7. KAMMYSLIWIEC ANGULAR COMBINES
 BEST PRACTICES

  8. KAMMYSLIWIEC ANGULAR GIVES
 RIGHT ABSTRACTIONS

  9. NESTJS WWW.NESTJS.COM
 @NESTFRAMEWORK
 KAMMYSLIWIEC

  10. NEST IS 
 A PLATFORM

  11. KAMMYSLIWIEC A HIGHER
 LEVEL OF REUSABILITY

  12. KAMMYSLIWIEC KNOWLEDGE 
 REUSABILITY

  13. KAMMYSLIWIEC EXPERIENCE 
 REUSABILITY

  14. KAMMYSLIWIEC CODE REUSABILITY

  15. KAMMYSLIWIEC

  16. KAMMYSLIWIEC DTO

  17. KAMMYSLIWIEC create(item: CreatePostDto): Observable<Post> { return this.http.post(POSTS_ENDPOINT, item); }

  18. KAMMYSLIWIEC create(item: CreatePostDto): Observable<Post> { return this.http.post(POSTS_ENDPOINT, item); }

  19. KAMMYSLIWIEC @Post() create(@Body() createPostDto: CreatePostDto): Post { return this.postsService.create(createPostDto); }

  20. KAMMYSLIWIEC @Post() create(@Body() createPostDto: CreatePostDto): Post { return this.postsService.create(createPostDto); }

  21. KAMMYSLIWIEC DTO INTERFACES

  22. KAMMYSLIWIEC create(item: CreatePostDto): Observable<Post> { return this.http.post(POSTS_ENDPOINT, item); }

  23. KAMMYSLIWIEC @Post() create(@Body() createPostDto: CreatePostDto): Post { return this.postsService.create(createPostDto); }

  24. KAMMYSLIWIEC DTO INTERFACES SERVICES

  25. KAMMYSLIWIEC $ mkdir my-app && cd my-app $ ng new

    client $ nest new server
  26. KAMMYSLIWIEC $ mkdir my-app && cd my-app $ ng new

    client $ nest new server
  27. KAMMYSLIWIEC $ mkdir my-app && cd my-app $ ng new

    client $ nest new server
  28. KAMMYSLIWIEC CODE REUSABILITY

  29. None
  30. BUILDING BLOCKS

  31. KAMMYSLIWIEC MODULES 1

  32. KAMMYSLIWIEC DECLARATIONS PROVIDERS IMPORTS EXPORTS

  33. KAMMYSLIWIEC DECLARATIONS PROVIDERS IMPORTS EXPORTS

  34. KAMMYSLIWIEC DECLARATIONS PROVIDERS IMPORTS EXPORTS

  35. KAMMYSLIWIEC DECLARATIONS PROVIDERS IMPORTS EXPORTS

  36. KAMMYSLIWIEC DECLARATIONS PROVIDERS IMPORTS EXPORTS CONTROLLERS

  37. KAMMYSLIWIEC CONTROLLERS PROVIDERS IMPORTS EXPORTS

  38. KAMMYSLIWIEC CONTROLLERS PROVIDERS IMPORTS EXPORTS

  39. KAMMYSLIWIEC CONTROLLERS PROVIDERS IMPORTS EXPORTS

  40. KAMMYSLIWIEC @NgModule({ imports: [CommonModule], declarations: [AppComponent], providers: [AppService], exports: [],

    }) export class ApplicationModule {}
  41. KAMMYSLIWIEC @NgModule({ imports: [CommonModule], declarations: [AppComponent], providers: [AppService], exports: [],

    }) export class ApplicationModule {}
  42. KAMMYSLIWIEC @Module({ imports: [CommonModule], declarations: [AppComponent], providers: [AppService], exports: [],

    }) export class ApplicationModule {}
  43. KAMMYSLIWIEC @Module({ imports: [CommonModule], declarations: [AppComponent], providers: [AppService], exports: [],

    }) export class ApplicationModule {}
  44. KAMMYSLIWIEC @Module({ imports: [CommonModule], controllers: [AppController], providers: [AppService], exports: [],

    }) export class ApplicationModule {}
  45. KAMMYSLIWIEC @Module({ imports: [CommonModule], controllers: [AppController], providers: [AppService], exports: [],

    }) export class ApplicationModule {}
  46. KAMMYSLIWIEC PROVIDERS 2

  47. KAMMYSLIWIEC @Injectable({ providedIn: 'root' }) export class CatsService { constructor(

    private httpService: HttpService, ) {} }
  48. KAMMYSLIWIEC @Injectable({ providedIn: 'root' }) export class CatsService { constructor(

    private httpService: HttpService, ) {} }
  49. KAMMYSLIWIEC @Injectable() export class CatsService { constructor( private httpService: HttpService,

    ) {} }
  50. KAMMYSLIWIEC @Injectable() export class CatsService { constructor( private httpService: HttpService,

    ) {} }
  51. KAMMYSLIWIEC GUARDS 3

  52. KAMMYSLIWIEC ROUTE USER

  53. KAMMYSLIWIEC ROUTE USER REQUEST

  54. KAMMYSLIWIEC @Injectable() export class AuthGuard implements CanActivate { canActivate(...): boolean

    { return true; } }
  55. KAMMYSLIWIEC @Injectable() export class AuthGuard implements CanActivate { canActivate( route:

    ActivatedRouteSnapshot, state: RouterStateSnapshot, ): boolean { return true; } }
  56. KAMMYSLIWIEC @Injectable() export class AuthGuard implements CanActivate { canActivate( context:

    ExecutionContext, ): boolean { return true; } }
  57. KAMMYSLIWIEC INTERCEPTORS 4

  58. KAMMYSLIWIEC REMOTE REQUEST

  59. KAMMYSLIWIEC HANDLER REQUEST

  60. MORE

  61. REUSABILITY

  62. KAMMYSLIWIEC DEVELOPER 
 WORKFLOW

  63. KAMMYSLIWIEC NEST CLI

  64. KAMMYSLIWIEC SCHEMATICS

  65. KAMMYSLIWIEC LATEST NEWS

  66. KAMMYSLIWIEC SERVE STATIC

  67. KAMMYSLIWIEC $ nest g angular-app client

  68. KAMMYSLIWIEC @Module({ imports: [ AngularModule.forRoot({ rootPath: 'client/dist/client', }), ], })

    export class AppModule {}
  69. KAMMYSLIWIEC ANGULAR
 UNIVERSAL

  70. KAMMYSLIWIEC $ ng new ssr-app && cd ssr-app
 $ ng

    add @nestjs/ng-universal
  71. KAMMYSLIWIEC $ ng new ssr-app && cd ssr-app
 $ ng

    add @nestjs/ng-universal
  72. None
  73. KAMMYSLIWIEC OPEN SOURCE

  74. KAMMYSLIWIEC

  75. KAMMYSLIWIEC WWW.TRILON.IO

  76. KAMMYSLIWIEC KAMMYSLIWIEC THANK
 YOU @KAMMYSLIWIEC