New router on the block - Angular Vienna Dec '20

Transcript

1. NEW ROUTER
   ON THE BLOCK
   Miroslav Jonaš
   @meeroslav
   

   View Slide

2. HELLO!
   I am Miroslav Jonaš
   @meeroslav
   

   View Slide

3. History of angular routing
   angularjs
   ui-router
   @angular/router
   @ngrx/router
   react-router
   angular-routing
   2010 2013 2014 2016 2017 2020
   angular-route
   ng v2 v4 v11
   @meeroslav
   

   View Slide

4. Brandon Roberts
   @meeroslav
   

   View Slide

5. Short history of angular-routing
   CREATED
   June 23rd
   TWEET
   July 2nd
   FIRST PR
   July 13th
   @meeroslav
   

   View Slide

6. @meeroslav
   

   View Slide

7. @meeroslav
   

   View Slide

8. @meeroslav
   

   View Slide

9. OK… SO WHAT’S
   DIFFERENT?
   Well, glad you asked
   @meeroslav
   

   View Slide

10. 621kB
    Entire package
    2
    Dependencies
    18kB
    UMD/Ivy bundle size
    *
    SIZE
    MATTERS!
    @meeroslav
    

    View Slide

11. GUARDS?
    JUST NGIF-IT
    @meeroslav
    

    View Slide

12. INVALID
    ROUTE
    ORDER
    @meeroslav
    

    View Slide

13. Where we’re going
    THERE IS NO
    INVALID ROUTE ORDER
    @meeroslav
    

    View Slide

14. RESPONSIVE ROUTING
    ROUTER R
    O
    U
    T
    E
    R
    @meeroslav
    

    View Slide

15. RECURSIVE ROUTES
    RECURSIVE ROUTES
    RECURSIVE ROUTES
    RECURSIVE ROUTES
    RECURSIVE ROUTES
    RECURSIVE ROUTES
    RECURSIVE ROUTES
    RECURSIVE ROUTES
    RECURSIVE ROUTES
    RECURSIVE ROUTES
    @meeroslav
    

    View Slide

16. IS IT A
    REPLACEMENT?
    No, an upgrade!
    @meeroslav
    

    View Slide

17. NOW?
    Depends...
    @meeroslav
    

    View Slide

18. IF YOU NEED...
    › Redirections
    › Nesting
    › Lazy loading
    › Guards
    › Stream of Params
    › Auxiliary routes
    @meeroslav
    

    View Slide

19. BUT IF YOU NEED...
    › Complex guards
    › All params stream
    › Resolves
    › Some other config/event magic
    @meeroslav
    

    View Slide

20. @meeroslav
    “Step-by-step” approach
    

    View Slide

21. “Ask not what Angular can do for
    you - ask what you can do for
    Angular”
    @meeroslav
    John F. Kennedy
    

    View Slide

22. THANKS!
    Any questions?
    @meeroslav
    https://github.com/brandonroberts/angular-routing
    https://recursive-ng-router.netlify.app/
    https://responsive-ng-router.netlify.app/
    › Presentation template by SlidesCarnival
    

    View Slide