New router on the block - Angular Vienna Dec '20

Slide 1

Slide 1 text

NEW ROUTER ON THE BLOCK Miroslav Jonaš @meeroslav

Slide 2

Slide 2 text

HELLO! I am Miroslav Jonaš @meeroslav

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

Brandon Roberts @meeroslav

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

@meeroslav

Slide 7

Slide 7 text

@meeroslav

Slide 8

Slide 8 text

@meeroslav

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

GUARDS? JUST NGIF-IT @meeroslav

Slide 12

Slide 12 text

INVALID ROUTE ORDER @meeroslav

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

RESPONSIVE ROUTING ROUTER R O U T E R @meeroslav

Slide 15

Slide 15 text

RECURSIVE ROUTES RECURSIVE ROUTES RECURSIVE ROUTES RECURSIVE ROUTES RECURSIVE ROUTES RECURSIVE ROUTES RECURSIVE ROUTES RECURSIVE ROUTES RECURSIVE ROUTES RECURSIVE ROUTES @meeroslav

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

NOW? Depends... @meeroslav

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

BUT IF YOU NEED... › Complex guards › All params stream › Resolves › Some other conﬁg/event magic @meeroslav

Slide 20

Slide 20 text

@meeroslav “Step-by-step” approach

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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