A Gentle into to

SPA Routing and Routers

๐Ÿ›ฃ๏ธ ๐Ÿš

Gokul Kathirvel

ย ๐Ÿ’ปย Front-end Developer, Zoho Corp

๐Ÿคย Co-organizer, EmberJS Chennai

๐Ÿ†•

Routing

Routing is a process where a router can forward data via a different route or given destination based on the current conditions

Routing in Web Apps

๐Ÿ—บ๏ธย  Mapping

ย 

๐Ÿงญย  Directing

ย 

โค๏ธ URLย โค๏ธ

What's the BIG deal?

Efficient URLs

๐Ÿง ย  Easy to remember

ย 

๐Ÿ’กย  Meaningful

ย 

๐Ÿ’ฏย  Cover maximum app state

ย 

๐Ÿงฑย  Structured

ย 

Types

Traditional Routing

SPA/Client-side Routing

Traditional Routing

๐Ÿ—„๏ธย  Server Driven

ย 

๐Ÿ”—ย  User navigates to an URL

ย 

๐Ÿ“„ย  Request for a new document

ย 

๐Ÿ”„ย  Full page reload

ย 

๐ŸŽจย  New document gets painted

ย 

SPA Routing

๐Ÿ–ฅ๏ธย  Client Driven

ย 

๐Ÿ”—ย  User navigates to an URL

ย 

๐Ÿ’พย  Request for a supporting data

ย 

โ†ชย  Partial page update

ย 

๐ŸŽจย  New section gets painted

ย 

Why SPA Routing?

๐Ÿ’จย  Instant Routing

๐Ÿšณย  No extra round trips

๐Ÿง ย  Intelligent updates

Let's build a basic

SPA router

๐Ÿ—๏ธ

Routing Variants

๐Ÿ‘† ย Clicking Link inside the App

โชย  Seeking Forward or Backward

๐Ÿ“ญย  Direct page address

Framework Agnostic!

Ember-Router Inspired!

โบ๏ธย Live Code

Just a tip of Iceberg

โ†˜๏ธย  Nested page routing

โ“ย QueryParams

๐Ÿ ย  Default Index pages

๐Ÿ“ฆย  And a lot more...

The Code

I Referred...

Thanks for your time!

Any Queries?

ย 

โ“๐Ÿค”

Made with Slides.com