JSFoo: round the year submissions

What does it actually take to construct a client side router? I’ll show you how to build a basic fully functional client-side router in Vue in under 50 lines of code.

By doing so, we’ll gather an understanding of the relevance/importance of client-side routing and where potential shortcomings can exist.

Outline

In web development, routing often refers to splitting an application’s UI based on rules derived from the browser URL. Numerous tools/libraries exist that allow us to enable routing both on the client and server side of applications.

But what does it actually take to construct a client side router? First, I’ll use the most basic tools that the Vue framework already provides to build a fully functional custom client side router. We’ll then switch over to using the official vue-router library to understand all the benefits that it adds such as nested routes, navigation guards, transition effects, etc.

This talk will be a more defined, extrapolated version of this CSS-Tricks blog post I published - https://css-tricks.com/build-a-custom-vue-router/.

Speaker bio

An engineering graduate and a self-taught web developer, Hassan is currently a Front End Engineer for the App Platform team within Shopify. Prior to being at Shopify, Hassan wore different hats as a Technology Consultant within Deloitte Digital, helping different clients build and scale their front-end applications. Hassan is also the lead author of Fullstack Vue, an in-depth book into building real world Vue.js applications.

Links

• https://twitter.com/djirdehh
• https://www.fullstack.io/vue/