Caught in the Middle! A story of HTTPModule and Interceptors

A presentation highlighting the benefits of migrating applications to leverage the power of HTTPClient Module over HTTP Api and HTTP Module for legacy enterprise scale applications.

Additionally, it is connected to a repo you can download, to play with GraphQL, ApolloClient, Lazy Loading in Angular, Authentication Guards and HTTP Interceptors.

GraphQL/Express Server: https://github.com/anfibiacreativa/myapp-server
Apollo Client: https://github.com/anfibiacreativa/myapp-apollo-interceptors

Transcript

1. Natalia Venditto @ ngVikings Copenhagen 2019
   Caught in
   The Middle!
   Photo by Alexandre Debiève on Unsplash
   

   View Slide

2. Photo by Annie Spratt on Unsplash
   Photo by Hello I'm Nik on Unsplash
   Build us a very
   large app!
   It connects to
   Many apis!
   

   View Slide

3. View Slide

4. Content Policies: Structure
   v2.0.0 v2.1.2 v2.2.4 v2.3.1 v2.4.3 v4.0.0 v5.2.2
   https://github.com/angular/angular/blob
   /master/CHANGELOG.md
   

   View Slide

5. View Slide

6. View Slide

7. Hello?
   Can I have some
   data, pls?
   The typical HTTP over TCP/IP request/response thingy.
   

   View Slide

8. Ack! What’s your
   Exact request?
   The typical HTTP over TCP/IP request/response thingy.
   

   View Slide

9. Let me see,...
   We have some
   options...
   The typical HTTP over TCP/IP request/response thingy.
   

   View Slide

10. I can allow for
    that only if
    you give me the
    headsup
    The typical HTTP over TCP/IP request/response thingy.
    

    View Slide

11. What about a…
    Errm, some csrf
    token, a few cookies
    Aaaand, this
    credentials
    The typical HTTP over TCP/IP request/response thingy.
    

    View Slide

12. The typical HTTP request thingy.
    CoOL!
    You can now
    Get what you
    Pinged for!
    

    View Slide

13. Life BEFORE
    the HTTPClient
    Module
    

    View Slide

14. View Slide

15. Life WITH
    the HTTPClient
    Module
    Mild-Panic Emoji by @cassidoo
    

    View Slide

16. TOKENS
    HTTPClient Module perks ...
    ■ Typed req/res
    ■ Observable based API’s
    ■ Streamlined error handling
    ■ Event progress
    ■ Req/Res Interceptors
    

    View Slide

17. Photo by Annie Spratt on Unsplash
    Photo by Chris Moore on Unsplash
    Interceptors____
    

    View Slide

18. TOKENS
    Interceptors...
    ■ Must be provided in the root
    module
    ■ Get executed in the order
    provided
    

    View Slide

19. View Slide

20. Interceptor 1
    Interceptor 2
    Interceptor N
    Interceptor N
    Interceptor 2
    Interceptor 1
    Request
    Response
    

    View Slide

21. TOKENS
    Interceptors use cases...
    ■ Caching and logging data
    Catching errors
    ■ Implementing authentication
    

    View Slide

22. Photo by Annie Spratt on Unsplash
    Photo by Keegan Houser on Unsplash
    JWTokens____
    

    View Slide

23. TOKENS
    Types of tokens
    ■ XSRF (CSRF) Token
    ■ Session validation token
    ■ XYZ API Key… etc.
    

    View Slide

24. TOKENS
    Usually these tokens...
    ■ Expire after each use
    in an idempotent request
    ■ Must travel back and forth
    with each request
    

    View Slide

25. Photo by Annie Spratt on Unsplash
    Photo by Thierry Chabot on Unsplash
    RouteGuards___
    _
    

    View Slide

26. TOKENS
    Route Guards...
    ■ CanActivate
    ■ CanactivateChild
    ■ CanDeactivate
    ■ CanLoad
    ■ Resolve
    

    View Slide

27. TOKENS
    $ code .
    

    View Slide

28. Thank you!
    @anfibiacreativa
    All images are from unsplash.com
    Including all cats (By several authors)
    https://unsplash.com/search/photos/kitten
    Gifs by Tenor
    https://tenor.com
    Learn more at
    https://github.com/anfibiacreativa/myapp-apollo-interceptors
    

    View Slide