$30 off During Our Annual Pro Sale. View Details »

New router on the block - Angular Vienna Dec '20

New router on the block - Angular Vienna Dec '20

Miroslav Jonaš

December 21, 2020
Tweet

More Decks by Miroslav Jonaš

Other Decks in Programming

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