--- title: "Vue.js Global Conference: An interview with Eduardo San Martin Morote" description: "In this video I'm interviewing Eduardo San Martin Morote from the Vue core Team. Eduardo works on the Vue Router and in this interview we dive deep into what he did for the refactor of the new Vue 3 router." date: "2020-08-19T12:00:10.000Z" url: "https://timbenniks.dev/videos/tim/077-uufbfcipaly" youtube_url: "https://www.youtube.com/watch?v=uuFBfCIpAlY" playlist: "tim" image: "https://i.ytimg.com/vi/uuFBfCIpAlY/maxresdefault.jpg" tags: ["composable-architecture", "frontend", "product-strategy", "devrel"] --- # Vue.js Global Conference: An interview with Eduardo San Martin Morote In this video I'm interviewing Eduardo San Martin Morote from the Vue core Team. Eduardo works on the Vue Router and in this interview we dive deep into what he did for the refactor of the new Vue 3 router. Watch on YouTube: https://www.youtube.com/watch?v=uuFBfCIpAlY ## Transcript in this video i am interviewing eduardo from the 4gs core team and we're doing this interview in the context of his talk at the fuges global conference i'm doing a collaboration with the organizers where we basically get me to interview the speakers i talk about their talk and we go in depth in the technology bit about it and then afterwards we finish up with some other questions so without further ado this is the interview with eduardo from the refugees core team for fuji's global conference [Music] this interview is in context of the fujias global conference and of course you as a core team member who speaks on a lot of conferences you speak on this one as well so can you say to the audience like what is your talk about and also what will they learn all right so my talk this time will be again the again about the router uh so it'll be about the new version of the voucher and there are a few couple things that happen in between my last talk in february about it so this one will be more focused on the new things and how to migrate over whereas the last one had a bigger focus on uh the router architecture and the changes that uh i brought to the new version of the router um so hopefully these so you have to prepare the talk as you can imagine but uh i do have like half of the content ready and with all the things that happen in between some rfcs uh i think there are quite a few exciting things to learn and just get some practical practical knowledge about how to migrate your existing view router code to the new version for v3 okay and um did you have to introduce breaking changes in the new one yeah there are a few breaking changes they're quite light except for like um the biggest change is an improvement because people were not enjoying the promise basically i mean we can talk about that later everyone but there is that i'm trying to list them uh as much as i can on the on the repository oh yes and of course our typing uh names that change uh because they make more sense and they could still change even though we are on rc they won't change after the on the on that time of course but uh sorry i'll never see they can change because they were around better but they won't change on everything sure they're unlikely to change okay and i'm wondering did you notice any like people who doing super creative crazy code around the router that now that you introduce those changes that will have like some crazy amount of work or is it did you generally not see that no i don't think i've seen that okay um if anything it's made existing plugins some existing plugins easier to write or unnecessary okay that's nice so did you like change the way you can have like these injection things of like before routing and after routing is that the main change or is it maybe just like naming and how things are coded or the the whole the whole navigation flow is pretty much the same okay with the introduction of the introduction of uh composition functions for before update and before leave okay uh we could also add i i think that that part of the api still needs people to experiment with things and come up with ideas but at the end the good part the cool part about the composition api is that we can build it on top and it will be full fully shakeable so the idea is to provide things that are convenient for people but they can be built already with the existing api of the router i think a lot of changes are changes are consistency like things are more consistent um the errors the the problems that you may see are you can see them uh the same in different places and coding is better and the biggest biggest change is dynamic routing there is a ranking system for the routes so now we know how to order them basically okay because i was thinking what could be a new first feature in a router but dynamic routes could be pretty cool of course um i was also thinking like i'm more of like an accessibility buff so i'm always thinking about stuff like that and recently i've seen a whole bunch of apps where you then go to the new page but of course if you had scrolled down already you go to the new page you you're also scroll down on the new thing that you say so in your router are you taking responsibility for those kind of things to like move up the page or tell people hey don't forget about this kind of stuff or is that more something that you maybe write down in the docs and say this is best practice the scroll so the scrolling scroll behavior has been uh improved a little bit so for instance um it's all about the navigation navigation now is more consistent on how it happens and the results that you get so basically a navigation a push or replace returns a promise and okay the promise resolves uh whatever whatever happens the promise will resolve so if the navigation succeeds it goes to the end uh or there is a redirection um in the middle but then you get somewhere you're actually navigating somewhere the promise resolved uh with nothing if the navigation doesn't succeed so for example it's a border because you call a next false in the navigation guard or because there is an error that happened in the middle oh that's to be different um or because you um there is another navigation that happened in between that was resolved first so the the pending navigation that was being resolved is just dropped yeah um then the promise will still resolve oh for example you're trying to navigate the same location so the router says well there is nothing to there is nothing to change so we just do don't do anything yeah the premise will resolve but it will give you a navigation failure as a result value so you can check whatever happens ah so you can work with it that's actually a really clean solution well at least there's one way to use it and that's what's nice about it right and then you can also choose to do that scroll stuff or whatever and so go on sorry yes sorry so the thing is that's the first layer and yeah and the thing the thing is now the scroll behavior happens whenever that promise resolved and it's consistent with after each which wasn't the case before okay so basically anytime there is a navigation whereas it fails or anything it will invoke the scroll behavior so this means that you can also recreate very easily basically if you the same code that you may have in your application you can use it on the new router and probably it will probably work better okay but for twice on the same encore anchor yeah yeah it's a anchor link yeah exactly yeah so because you are already there the router will not create a new navigation okay right oh that's cool but let's go behavior will trigger okay right so when you look at things like next and what they have when you go to a new route there's like a little loader bar on the top um would that's kind of stuff now be easier as well with the new router and maybe it's it's just if you now have a few cli projects for example you can just add that kind of stuff really easily it's it's i think it's more consistent it was already easy to add with the guards yeah exactly but you will see it have to do with the guards like it's still uh like something that needs to be done on username yeah sure so it's something that we could have plug-in for it like for sure it's easy to deal with plug-in with the router and just um pass the router instance the plug-in and that and you're done so um i remember from your previous talk about this that you were looking into how it would work with different browsers and kind of straight characters in the url right what i see lately very often is that yeah we have an american website but it can also be shown in arabic or whatever and then urls change strange characters come in did you have to change a whole bunch for this or maybe you guys care less about these kind of things now because it happens less what's the story behind that so there are a few um angles to the problem yes so we're dropping a lot of support support for older browsers okay um i mean internet explorer is not a browser anymore but we support internet explorer nine up to nine in the previous version that's not that's serious wow yeah it does it wasn't that serious for the time being exactly this is like two three years ago right that you started five five there you go so ie9 was still working i mean i mean when i wasn't i wasn't even building view router then it was evan but it was like four years ago four or five yeah i-9 was still was the thing back then it's not a thing fortunately right now or mostly isn't you still have companies that need internet explorer 11. yeah i currently have a project where i need to do 11 because it's this global thing so people from all around the world have to use it this time it's a react project it's something else let's not touch that up now but that's pretty interesting right that still happens so did you have to do a lot of different kind of code or maybe for safari which is the new ie10 right how did that work i had to test to manually test a lot of things because even though the specifications of some rfcs are saying something about the encoding which i also spent quite some time reading not the whole extent of it because they are very long yeah that's pretty crazy how these specs are written right i mean they they try to go in in um they try to go in detail that's perfect because when you have a specific problem you're gonna find your answer uh and also for people implementing the api which are the browsers not they know how to encode things and well it was fun to test out things on the browsers i basically have had did multiple times over the year the whole thing happened over a year i think because i was rediscovering new things and trying new things and i had my test page where i would test the different characters and see what browsers were doing and finding some inconsistencies regarding the rfcs or the specification yeah but browsers being consistent among them uh and realizing that there was also an error c and the specification that were living more or less together internet explorer was following the rfc which is more strict that the specification okay and that there are some characters that are still preserved but i mean encoded by by like prohibited on the url without encoding uh like they say for example like a unicorn character has to be encoded on the url yeah always there are some ascii characters that also need to be encoded so there was a character i think it was the bracket or the curly brace um that was not required to be encoded by the specification but was proposed to be encoded on the rfc maybe for future use and some sure syntax on the url yeah but that never happened or at least didn't happen yet uh however browsers are encoding it so when you write that character on the url browser browser uh chrome and firefox are going to encode that value for you so you don't send an incorrect euro but internet explorer um what is funny is that it sends an encoder request because otherwise it's not a legal request like it's not a legal url yeah legalization um spec compliant yeah legal stuff well legal it's kind of a fun way to say it because maybe there are some security issues there but let's call it compliant sure but the funny thing is that the some browsers like internet explorer give you the encode the unencoded values like the raw values on the javascript side whereas the browser the other browser like firefox and chrome they give you the encoder so on window.location that whole object it might sometimes be different than what you see in the url between browsers yes that's the the problem wow you basically wrote a big switch case i can imagine no no no no no no you have so there is a try catch just in case sure um and falling back on it's just a parsing so it's not an expensive operation it's not exactly okay whole view router code is inside a track edge now yeah exactly very interesting for the hoisting of the of the variables in that size forget about three shades yeah exactly these kind of things they actually matter so much when you build something that needs to work super low level and basically everybody will use it it's pretty amazing so you really have to think about that stuff so did you like heavily unit test every line of this thing i have a lot of unit tests i have almost 500 unit tests on the router wow awesome uh probably some of them are like repetitions because i i do have a few loops like i have for example i sometimes i test the push and replace even though replace is calling push and behind the scenes uh i did it behind like i did before just in case because i wasn't sure if i would have to um diverge in implementation so i just wanted to go uh on a higher level test yeah this is always a bit hard like when does it become an integration test like in in this level probably that's not true this still works a unit test right yeah i have most of my tests are integration yeah well yeah if it's super low level it's generally just a javascript function so you don't really have to exactly right these are just all free i do test them so for example i test my encoding functions or sure although there isn't much to test because basically the code is very straightforward so you you just write the comments above and say we have to do this this this and why or the links references of stuff and then there is just a replace yeah exactly so are you gonna just unit test the replace that's kind of funny but no i didn't no basically i think i i did integration tests that make sure that some results were encoded and others were not and i didn't bother on uh mocking the like doing a unit test marking the the function that is imported by the router i'm just checking if it's code and just sure encoded or unencoded that should be fine like otherwise you spent so much time on this so i have one last question on this subject like you see quite often if you use view cli for example you say okay i want to have like it's truly going to be single page app or it might have some ssr later you might get different schemes for the url right you get the hashbang url that we used to see all the time but sometimes you can just use window push or stuff like that did you have to do a lot of work to separate those two or how does that work so in the previous version um there there is a whole web hash history implementation yes in the current innovation the web hash implementation just uses the push state api oh yeah so you just push but with the hash attached so you keep state of the url and then you just push that in yeah so because the the older browser that we need to support is internet explorer 11 and this was supported since 10. you can still use the push state api with files and with other urls you just need to put the whole url first okay when pushing so this is actually nice history like yeah it became much easier now yeah it was uh because i was back in the day when i didn't use view or it was maybe just version some alpha version like really back in the day we built this ourselves so i remember doing that oh yeah you told me about it man like you don't want to be doing that kind of stuff but yeah twitter did it so why didn't we do it you know what i mean yeah also the hash is even more inconsistent it's so inconsistent we couldn't really get it to work every time and anyways let's not go in the past this is about the future so um a little bridge here because i remember in our previous interview so i'll put a card in the video so users can actually see that also we briefly discussed on like how open source works and how you could potentially monetize it and since that time we now have github sponsors of course patreon is quite big and i remember i think you went for github sponsors right so can you maybe explain like how that went is is this actually a solution um or do you still need to go in like crazy ways to to actually make some money so i still have to work more or less i do have not that much because i'm lucky enough to uh take some money from the open collective it's probably people can see it i take more or less an average of three thousand uh euros a month on average plus some expenses for uh co-working okay and that's public like everyone there is is there on the open collective okay so before we go on like i'm not sure if everybody knows what this open collective is could you explain it oh yeah all right open collection is the it's um share funds for the vgs organization okay so um courty members are taking money when they work so for example so that he is being paid thanks to that he works full-time on on view okay uh i i'm also working full-time although i still have to do other like small workshops and stuff like that yeah exactly yeah make some money on the company and pay the taxes and everything yeah sure because you have to pay taxes because you have your own company i guess so it's a little bit complex especially in paris okay so i guess i don't know so for now you get it from open collective which is plus the sponsors yeah exactly so let's talk about the sponsors a little bit because me personally i'm pretty interested in how that works because right now i make all these youtube videos but it's a lot of effort right and if i got a little bit of help i could do so much more it's not like i need money for what i do no i need money to get it to the next level let's say which is maybe a different approach to what you have but can you talk to me about your experience in that field well the sponsorship uh github sponsor is pretty smooth um they pay you through strike depends on contrary thing but okay uh maybe not maybe they pay always through stride and then it's automatic so basically when i reach a certain threshold on github they pay to strike and then you can pay you get paid to your bank so there is a very very small percentage that he's taken off yeah so stripe takes like a fee for transferring right yeah probably yeah it's mostly quite small probably a percent small person is that the same as these other payment systems like paypal do probably yeah probably okay so um then well you set up your tiers pretty much like patreon yeah um and then well you have to promote yourself to get some sponsors yes are you doing what other patreons do like you're going to get some behind the scenes footage and then you become a patron and you see more about me you're like how does that work for you when you do open source work like this yeah i think i i want um i wish i could i could go like evan but it's not gonna happen uh uh for example everyone is able to work full-time and he doesn't have to worry about it he doesn't have to worry about creating extra content for for the people he's already building view and that's already serving a lot of people if you look at other people's they they try to provide some extra value to the people who they are sponsoring so for example they release content or there is guillaume does that also i think he does some private content like content that is all accessible for people who are sponsoring him ah okay that's pretty interesting but like but still on you sorry go on i i don't know what is the content exactly i know i know that he did that on patreon um but i don't know if he he doesn't forget sponsors yeah i'm pretty interested in how it works because it kind of is still on you yourself to get people in to sponsor right but that's kind of part of the game i guess exactly i think that's part of the game and there was this article recently recently is about three weeks ago the guy's named kaleb cliff ponzio i think so basically he he explained the article is very nice uh uh he explains how he gets there and what worked for him and so basically what works the best for him is providing content that is specific to the software he's building and giving for free he's open source and just providing that content for people who are sponsoring him which is what he calls sponsorwear it's interesting it's a nice fit with the name he this guy knows his marketing that's nice i guess he's not yeah he seems to be good yeah um so i'll put that link in the description so people can follow the the article sure and so it's interesting because he he provides educational content basically that's one screencast okay so um would you do something similar because i'm thinking about doing something similar uh on very specific topics about the router of you or next mostly things about the router but not necessarily only and um making them available for sponsors who are above a certain um uh how do we call that a certain tier a tier yeah exactly because i can imagine let's say you have certain tiers and you work with some company like where i work with fall tech for example and we have some complicated projects i can imagine instead of paying you whatever for support meetings we could actually sponsor you a certain tier and then we get more personalized help to me that sounds a nice model yeah but i wouldn't do that apparently that doesn't work very well okay good to know that's what john later later you know his name is pronounced again beautifies author ah tell me that that thing didn't it wasn't that attractive for people at the end okay interesting if if i want to provide i see that a lot of people do that on the sponsors uh i i don't know if i have it um if i want to provide some pet support i would just do consulting because i can do it yeah sure because consulting is likely more it's better for money i can imagine yes probably but it's also because it's just more straightforward yeah a company uses paying a service exactly yeah it's in the flow of how they want to get a help exactly and uh i can do it other developers cannot because maybe they don't have they are not working as freelancers yeah exactly you have this kind of freedom where you can kind of move around and do what you need at the right moment but you created that freedom for yourself so that's also something people can aspire to right yeah so just before the interview you said that you might be working on a project to ease this kind of sponsorship thing and i know you didn't finish so let's not go too deep but can you describe it a little bit or at least what is your idea so my idea is i have content i that is more advanced or that is very practical that doesn't really fit a documentation but it's more about it it's educational content basically so it could be articles it could be videos i like videos i like the the format um but i don't want to go to the level or like the quality level is one thing you could say quality level of uh a course maybe like a full-fledged course a course that you could find in your mastery or of your school um i don't wanna maybe go that deep uh but i wanna cover topics and show them and talk about it yeah and so how to do it in a more casual way so it's like we need to talk for people kind of mini conference talks kind of we touch on a subject we go slightly deeper and then people have a coach feeling basically it's watching live coding and yeah solving an issue uh implementing something and showing how to do it it could be like an article but i mean i probably also do articles so the thing is i want to give that to uh some people who are sponsoring me a certain amount like ten dollars or or or a bit more probably is already good yeah and uh to do that so to restrict the content for your sponsors i need to build well something to make it work like otherwise i what do i do i just send emails or i send a music yeah it's kind of strange so you're going to build your own patreon but with nicer technology probably no are you no i rely on github sponsors ah cool okay so i can check uh i check what who if people are sponsoring me so i can show them the content so github sponsors has like an api or some hooks that you can look into they have an api and they have hosts well i'm building the platform um well i'm building it for myself but at the end i can just add a little bit of code to make it work for other people so all the developers will show sponsorship yeah so that's what i'm doing basically i'm building something that will help other people who have a sponsorship to make it easier to share and restrict access to content cool if i have a github account i can go at once your service is done of course i can log in with github and then it knows me and it sees if i have this sponsorship thing going on and i can set up my stuff basically it's a it's a bit different it's more about if you want to check someone else's content uh okay you the the platform will let you do it or not based on you will be able to log in with github yeah and then i will be able to check if you can see the content or not okay cool and others people can post content after logging in with github yeah and limit the access to the content okay this is pretty exciting um because i'm i'm i'm looking into all the sponsorship stuff and how it could work and where to do it from and who takes the least chunk of your money if somebody donates how the politics are it's yeah it's not an easy system to navigate within but yeah it's nice if smart people take it upon themselves to put something in place and using the the backbones of stuff that already works well but that's always interesting to me you don't want to reinvent the wheel of course but it's still an interesting approach so eduardo thank you very much for joining me today and um i hope to see you in person soon yeah uh hopefully well we're leaving him in the same city so yeah soon all right cheers man bye goodbye thank you for having me