A Gentle into to

SPA Routing and Routers

🛣️ 🚏

Gokul Kathirvel

 💻 Front-end Developer, Zoho Corp

🤝 Co-organizer, EmberJS Chennai 

@_gokatz
gokatz.me

💻

🆕

✨

🐣

glimmerjs.com

Routing

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

https://en.wikipedia.org/wiki/Dynamic_routing

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

https://github.com/gokatz/spa-router-demo/

https://glitch.com/edit/#!/spa-server

I Referred...

https://github.com/tildeio/router.js/

https://codeburst.io/client-side-routing-done-right-3464275778bf

Thanks for your time!

Any Queries?

 

❓🤔

A Gentle into to SPA Router

By Gokul Kathirvel

Made with Slides.com

A Gentle into to SPA Router

A brief introduction of how routing is done in single page applications (SPA) and how to build a minimal SPA router from scratch.

  • 1,382

More from Gokul Kathirvel