Video details

Let's write a Client-side Routing Library with Svelte

06.27.2022
English

Part 1. Client-side Routing with routes definition ============ 1. Match route and render component https://youtu.be/LbOnjXMOK78 2. History API for client-side navigation https://youtu.be/gSvEOZraFUA 3. Intercepting link clicks with event delegation https://youtu.be/qMnMT8mFGIU 4. Listens to the back event https://youtu.be/545r3QcDXPM 5. Code Splitting and Lazy Loading https://youtu.be/p9dvIOQz-0U 6. Adding the loading indicator for slower networks https://youtu.be/cjlow9heDDo 7. Matching routes with dynamic parameters https://youtu.be/Nux9d4-zrvc 8. Capturing dynamic parameters https://youtu.be/hQHvxWX9I6I 9. Updating route props by reusing component instance https://youtu.be/GqCrdHRphi4 10. Advance matching for parameters https://youtu.be/gOMX6ZbCXrk 11. Rest Parameters https://youtu.be/NC2_pKwId18 12. Multiple layout components for a route https://youtu.be/ZXujMpPWl4k
Part 2. Generating routes definition from folder structure ============ 13. Setting up for File-based Routing https://youtu.be/2g6laP8_4vc 14. Extracting routes by traversing the folder structure https://youtu.be/p5E34OczEAc 15. Extracting parameters from file paths into regular expressions https://youtu.be/N8Z_Z3V6sy8 16. Finding nested layouts components from the folder structure https://youtu.be/l0J02zv6URY 17. Specifying parameter matchers in the file path https://youtu.be/6CWttg6iQmE 18. Ordering routes by its specificity https://youtu.be/1M6qHI7YyLo 19. Adding names to layouts https://youtu.be/LdYKjY34Euk 20. Providing page and navigation stores https://youtu.be/JfZ-sWfcUzU 21. Watch file changes to regenerate route definitions https://youtu.be/tlU9fdmLB98
🎧 Full Playlist https://www.youtube.com/playlist?list=PLoKaNN3BjQX2kY_4kwWrEQTf5VcQi0_Is 🗂 Course files https://github.com/tanhauhau/create-a-svelte-router 🥰 Support me https://www.buymeacoffee.com/lihautan
🔗
Want to learn more from me? Check out these links:
Twitter: https://twitter.com/lihautan Blog: https://lihautan.com/ Newsletter: https://lihautan.com/newsletter Discord: https://discord.gg/RbtgYvExVJ
Thanks for watching 🥰 -- with love, Li Hau