DejaVue

Michael is joined by VueRouter and Pinia Author Eduardo San Martin Morote aka posva.
Together, they go deep into questions around the de-facto standard state management tool and why people should use Pinia, but also discuss what Data Loaders and Pinia Colada are (not the drink friends!).

Further, the two content creators discuss how Mastering Pinia came together and what challenges are to expect when going from a "live workshop" to recorded videos.

And of course, we can't forget upcoming conferences and meetups - with a sneak peek of what posva might present 👀

Enjoy the episode!

Our Guest

Eduardo San Martin Morote

Chapters

  • (00:00) - Welcome to DejaVue
  • (00:46) - Upcoming Vue Conferences
  • (03:46) - Eduardo's Involvement in VueX
  • (05:03) - Why would you use Pinia?
  • (11:50) - Another view on stores
  • (14:14) - Insights from Mastering Pinia
  • (20:16) - Live Workshop vs recorded videos
  • (26:00) - How to improve tech video content
  • (29:09) - Data Loaders API
  • (34:31) - Pina Colada vs GraphQL
  • (36:15) - RFC for Data Loaders
  • (38:10) - Organising a Meetup
  • (44:56) - Wrapping up with a discount

Links and Resources



Your Host


Michael Thiessen


---

Links marked with * are affiliate links. We get a small commission when you register for the service through our link. This helps us to keep the podcast running. We only include affiliate links for services mentioned in the episode or that we use ourselves.

Creators & Guests

Host
Michael Thiessen
Full-time Vue educator
Guest
Eduardo San Martin Morote
Author of Vue Router, Pinia, VueFire & Vue.js Core Team Member
Editor
Niki Brandner
Sound Engineer

What is DejaVue?

Welcome to DejaVue, the Vue podcast you didn't know you needed until now! Join Michael Thiessen and Alexander Lichter on a thrilling journey through the world of Vue and Nuxt.

Get ready for weekly episodes packed with insights, updates, and deep dives into everything Vue-related. From component libraries to best practices, and beyond, they've got you covered.

Michael Thiessen:

Welcome to DejaVue, your favorite Vue podcast. Although you might not know it yet. Although actually a couple of you have mentioned that you do know it yet. And so that's great to hear. I am with Eduardo.

Michael Thiessen:

Many of you know him. He is the author of Pina, Vue Router, member of the Vue JS core team. He is a freelancer. He's got this course, Mastering Pina. He gives talks.

Michael Thiessen:

He is everywhere. He does lots of things. You can follow him on Twitter. He's got lots of great tweets. And today we're gonna talk about all sorts of things and, Yeah.

Michael Thiessen:

Glad to have you here.

Eduardo San Martin Morote:

Hi, Michael. I'm really glad to be here with you. It's just a shame, Alex is not here today, but really happy to be with you here.

Michael Thiessen:

Yeah. He's away at the, the, Germany conference. So, yeah, lots of conferences going on this this time of year next month. I think me and you and Alex will be in Toronto together. So, yeah, that'll be nice.

Eduardo San Martin Morote:

Yeah. Next week is, VueFes. I will be in Japan, Tokyo.

Michael Thiessen:

Oh, you're oh, yeah. Then there's, yeah. There's that one. Yeah. There's so many to, keep track of.

Michael Thiessen:

I wish I could have the time to like make it to every single one, but then I think I would just be like traveling from, like, September to the end of November. It's just, like, traveling and flying and yeah.

Eduardo San Martin Morote:

I think it's more than a one per month if you average it.

Eduardo San Martin Morote:

If you do everything. And sometimes you want to not want to do only Vue conferences. Right? You want to do more JavaScript conferences. So you put in there a few that are really well known around the world, and then it's just too much.

Eduardo San Martin Morote:

Sometimes they overlap, so you cannot even do it.

Michael Thiessen:

Yeah. I haven't even been to, to a non Vue conference. I've I haven't been to that many conferences. So I've got to have I've been thinking about branching out and trying to figure out which ones to go to, and there are so many. So you'll have to give me some, recommendations maybe.

Eduardo San Martin Morote:

Yeah. I guess in your case, it will be North America. Yeah. Or yeah. It will be North America.

Eduardo San Martin Morote:

I would say, you know, Latin America. For me, it's also nice because they speak Spanish. Oh, yeah. So for me, it's even better than a a conference in the US or in Canada. And so there is JS Conf Mexico, for example.

Eduardo San Martin Morote:

I think it's next week. No. It's the end of this month, actually. It's, in craziness with the, which is, like, it's the same day as Halloween. Okay.

Eduardo San Martin Morote:

And I think in Christian religion, there is another name I always forget because I only know it in Spanish, and then I forget in other languages. I think it's reincarnation. No. It's not reincarnation. Day of the saints, maybe?

Eduardo San Martin Morote:

Day of the dead? I don't know. Anyway, so it's it's coincidence through that, with that period of the year. So in Mexico, specifically, they also it's a very nice period to visit because, apparently, I've never been in that period of the year, but they have some the creations are really pretty. They put flowers and do these kind of outfits to to the dead.

Eduardo San Martin Morote:

I don't know if that's a correct word in English to say to to the dead, but I think people will get the meaning anyway. So it's really pretty. And there is a JS Conf Mexico, which is, yeah, by the end of this month. So that one, if you want to learn Spanish. Otherwise, I will go to the JS Confs if I were you.

Eduardo San Martin Morote:

Yeah. That's where I wanted to get.

Michael Thiessen:

Yeah. I'll yeah. The the North American ones are easier for me to get to for sure, but it's also nice to, like, travel to Europe, and then I can, you know, tack on a little vacation at the end and, you know,

Eduardo San Martin Morote:

I agree on that.

Michael Thiessen:

If I have the time for that. So I have this question that I I've actually written about, but I figured that I would ask you because you are the state management guy and, whether you like that title or not, I think you, you have it. And, so you've created Pina and before that, you had Vue router. And so you've been like doing a bunch of stuff. What was your, was your involvement with VueX?

Michael Thiessen:

I can't remember.

Eduardo San Martin Morote:

UX, I was there helping out a little bit. But honestly, the whole API of the library was just stable, and it was what it was. And I wanted to improve the task grid version, and I wanted to have something more friendly, so that's why I ended up creating Pina. My involvement was rather tragic. The it's like the library was already there when I when I arrived.

Eduardo San Martin Morote:

So Yeah. Maybe some bug fixes. I'm not even sure I contributed to the code. Yeah. Probably that.

Eduardo San Martin Morote:

Nothing unique.

Michael Thiessen:

And so Pina is sort of like the, I would say the, the standard state management library now with, with Vue 3.

Eduardo San Martin Morote:

It works for Vue 2.

Michael Thiessen:

And Vue 2. I haven't used Vue 2 in years, so that's the, I mean, there are definitely lots of people still using Vue 2. So, Yeah, that's a good to know if you are using Vue 2, you can still use Pina. So Pina is state the, like the standard thing, but we've also got ref and reactive for state management and we can create like these simple composables that can do like a little bit of light state management. And if you're using Nuxt, you've also got use state, which handles SSR things.

Michael Thiessen:

There's like a couple little like edge cases and stuff like that with hydration and, some security things that we wanna take care of there. And, and so the question is, okay, we've got these like three main ways of doing state. And how do we know when to use which one, Like when should we be using pina versus just using a couple of refs versus creating a composable or how do you think through this problem yourself? Maybe there isn't like a, like, a single answer or a best practice, but, like, at least just, like, yeah, take us through your thinking on that.

Eduardo San Martin Morote:

Yeah. There isn't a single answer, and the reason is because, you have people who work different ways, and they like to organize their thoughts in different ways. And the composition API makes things very, freestyle. That's not a correct way to say in English, but you are really free to organize the code however you want. And that has these good parts and bad parts.

Eduardo San Martin Morote:

I think it has been covered in other episodes with Evan You. So pinia, when you use the setup stores, which I will really encourage people to to use most of the time because they are really more powerful and flexible, you really have something that looks like a compostable and and that's very intentional, right? I want that to feel as close to pinna as possible because you can reuse all the patterns and the knowledge that you already know. You're not really wasting your time learning. So they cannot you cannot say, oh, but I maybe this disappears later on, and then I will have learned something that I will never use because that's not the case.

Eduardo San Martin Morote:

And so for me, personally, I can see stores as as services, and I've seen other people who also do that. That makes me a little bit happy. Right? When you see that other people actually got that on your library. So I want to use them to encapsulate some logic, not only the state, but also the logic that manipulates the state and interacts with the state.

Eduardo San Martin Morote:

And then the API is designed so that you can really split these small sections of your logic, of your business logic into different stores and then reuse them and combine them however you want. There is a lot of people. There is a and I think this comes from UX, or other I think maybe in Redux Redux. There was also a performance improvement when you were using Redux in React. So I think it it has a lot of background history, and people tend to use global state a lot, way too much.

Eduardo San Martin Morote:

Not only because it it's convenient, but sometimes it was actually solving other issues, like performance in in other frameworks. And so they get used to the those patterns. Personally, I try to, of course, avoid that, and if I see it in projects I work with, I try to explain why and propose other ways. So I will really use it for that global state that also has, some business logic attached to it. For example, the classic example of a cart, usually, you have some some logic attached to it.

Eduardo San Martin Morote:

But another one that I like more is the authentication and the login. Usually you have that information across your application. And depending on the application, it's small or but it's not it can be or most of the time, it's really small, but you still have some other login functions, etcetera. And these service creates an abstraction layer for your application so that if you, you you were using luthia or luci, I don't know how they pronounce that for me. It's a Spanish name, so I say luthia.

Eduardo San Martin Morote:

The authentication library that so the person the author said a few days ago, maybe yesterday or I don't know, it was really recent, that they were deprecating the library and they wanted to just use it as a learning material so people would just check the code to learn how authentication works for reasons. I mean, they have their reasons. So you then realize you have to switch to something else or maybe you migrate to Nuxt and you want to use Nuxt, auth. So because you have this abstraction layer that helps you evolve your application, so I think this is a good way of also thinking and finding the separation layer. I wouldn't use a story if I only need one piece of state.

Eduardo San Martin Morote:

So, for example, I would prefer using use state if I'm using Nuxt. And, of course, if I if I don't need something global, like, anything that is UI, and it's it's it's really encapsulated in the components. This is the easiest case, I think.

Michael Thiessen:

Mhmm.

Eduardo San Martin Morote:

Well, that that doesn't go in a store.

Michael Thiessen:

Okay. Yeah. I think that makes sense. So you're saying the things that are global should go into Pina, but have as little global things as possible. Is that

Eduardo San Martin Morote:

Yeah. That's correct. You have as little global things as possible. And state that is global usually is, comes with some business logic. If you don't have that business logic or if that business logic is not reused, then I would probably stay with use state most of the time, or you can see stores or services.

Michael Thiessen:

Right. Yeah. And, like, I think that makes a lot of sense. I've been doing more recently where I, I like to, like, it's good to have logic in your component and keep that state local. But then I, I often pull the logic out into a separate file just to keep, just because I like to have things readable and like smaller files.

Michael Thiessen:

So if I've got like, I don't know, like a bunch of methods, then I'll pull it out. And even if that's only used in one component and not reused elsewhere, then it's still sometimes nice to have that pulled out into a separate thing. And then, I mean, some people don't like that and they say, oh, too many files. And, you know, there's everyone has like you said before, everyone has like a different way of working and how they like to structure things and and stuff. But I don't know.

Michael Thiessen:

I like that works well for me. And so it's not about the composables are less about global state and more about like organizing logic. Whereas then I guess Pina is, well, I want this thing as a global I've got a user and their authenticated state and like their email address or whatever, their avatar image. And I wanna be able to use that like throughout the app in different places. And so then put that in a pina store.

Eduardo San Martin Morote:

Yeah.

Eduardo San Martin Morote:

I think another thing that maybe helps some people click is that when we look at stores with the options API, so state actions and getters, they're so simple that it doesn't come off as something very flexible or something where you can have a service. And so when you start using setup stores, because you have the full flexibility of just a function and returning whatever you want, Until you don't do that, you don't get to see the full picture of what you can do. And so I have this talk of that is called, disaster class Pina. I think you've probably seen it in person or you were there, but it it talks a little bit about this, and it sees that it says I say at some point that I like to see Stores as composable singletons with SSR Support.

Eduardo San Martin Morote:

So it's like a composable where you have the full power of a composable, but it only happens once too. There are, like, tons of ways of using pinya, and I know sometimes it's just the lazy way. And this is when it's just the lazy way, it's probably not the the good tool. Right? You could use just the ref sometimes.

Eduardo San Martin Morote:

Also, if you don't have SSR, right, you can use a global ref and it works well, although I wouldn't recommend that because you never know. If you move to a nasty, you move to suicide generation. We get into the complexities of what

Michael Thiessen:

Yeah.

Eduardo San Martin Morote:

Development too.

Michael Thiessen:

Well, I think it's an interesting point about the, like, being lazy because I think that's a lot of, a lot of things are affected by that. So when Evan was on talking about Composition API and Options API, he also mentioned that with the composition API, it's better, but only if you're actually like thinking through your stuff. And if you're, if you're going to be lazy about it, then it can end up with like this mess. Whereas the options API, it forces you to have like some minimum level of discipline in like how things are organized. And so I think, and even like, I mean, you could probably look at any any tool or any library and like, if you're lazy with it, then it it ends up working poorly for you and then like you yeah.

Michael Thiessen:

Just because you have pina doesn't mean you can't, like, you can't just stop thinking about what you're doing, you know? So you have this course, Mastering Pina.

Michael Thiessen:

My question is, so I've, I've created a bunch of courses. As many of you know, that's, that is my job. And so, so I was wondering from your perspective, as you created the course and as you are sending it out to people and getting some feedback, were there things that people found surprising or insightful or things that you thought were surprising that people like really latched onto or or maybe even I've had this experience myself where as I dig deeper into actually creating the material, I discover new things myself that I didn't know.

Michael Thiessen:

And, yeah, as you're putting together the course itself, you you learned some new things about pina or how to how to do state management.

Eduardo San Martin Morote:

While I was putting up the course, I and the other different lessons and recording them and doing the exercises. I did fix a few bugs that I found on my on my on my library, so that's great. I mean, it's a win win situation for everybody. I didn't get that many feedback Okay. From the course.

Eduardo San Martin Morote:

Like, most of the feedback I've gotten has been in person from people I've I've known or or through chat. Other feedback is the one I have asked directly to, so Yusco who helped me launch this this course. And I think that has been really great. I I was expecting for maybe some bad feedback too, or maybe they didn't send it to me or maybe they don't want to tell me when they're in person. Right?

Eduardo San Martin Morote:

So I'm still waiting for some of the bad feedback where I could improve, to be honest, which is in retrospect a little bit sad because if you don't improve from something, you'll be I mean, I do I did get to learn a lot, but if you I think I was expecting to learn a bit more about my teaching practice too right, because I have been giving workshops for 7 years too, so or a bit more. So it's something I like doing, and I always ask in the workshop and I usually get useful feedback actually from things that work, things that do not work, and I try to note that down. But, of course, it's a completely different format. Recording videos is really, really different. I'm still waiting for that.

Eduardo San Martin Morote:

I I've seen people I've been very pleased and surprised by how people react to some concepts. And it also helps when I explain some of the concepts. So, of course, master opinion goes really deep into some advanced stuff and it goes deeply technical. And so some people are really surprised when they discover something they didn't know, they never thought about. And that makes me really happy, but I also realize, and this is also when I was writing the course, is that a lot of people don't know things that are supposed to be, in my opinion or from my perspective, that would be a better way to put it in, intermediate.

Eduardo San Martin Morote:

But because I'm always all the time into all these libraries working with them, looking at the source code, I'm more used and I have a bigger context in my head about all the different possibilities, all different things you have to do and you can do with these libraries. So sometimes I go over things that are simple for me too fast, and I think that course helped me also learn that. And in the feedback, I could see that, maybe the course, it focused a lot on intermediate to expert. But in reality, I still go through the basics because I have to. Right?

Eduardo San Martin Morote:

I don't want to get right into difficult stuff. I still want to go through the basics and use that opportunity to really go deep into technical details that are interesting for a lot of engineers out there. And so that's something we we actually realize is that the the course, it seems too specific to pinna. And pinna looks so simple, so easy to use that, well, people are like, why would I need a course about about this, and why is it so expensive? It's like right now, it's, it's less than 300, but the idea is, of course, there are sales around the year, so you can just wait for the sale if the price is really an issue.

Eduardo San Martin Morote:

And the price also changed based on the country. I think you do the same. Additive pricing is called something like that. But, yeah, because people think it's just about opinion. They think it's too expensive, but in reality, it covers a lot more because it goes into global state management, explains all these things, testing, and good practices and composables, and the server side rendering for global state.

Michael Thiessen:

I had wondered about that. Like, you've you've done such a great job of making pinha, like, such a small surface area that you don't have to think about it as much. And it like it just feels like you're writing regular view composition API and like it's just like there's a little there's a little layer in between that, you know, kind of melts away. And so then I do I do understand that people would have that that feeling of, well, why do I need a whole course on it? But it's it's not just a course on pina, it's a course on, like state management in general and like all these other best practices and state management is a big topic.

Michael Thiessen:

And it's like, I've always thought that state management is one of the bigger and trickier things about applications, especially as you get to, like, bigger applications and dealing with global state and too much global state and all of that. So And

Eduardo San Martin Morote:

we have multiple people in one team, and they all have to think together as a team, to where put it. Or do I put stay the abstractions you create not to make them too early? It's it's complicated, and there is no really there is no one answer to it anyway. So just adapt on the go.

Michael Thiessen:

Yeah. And so before you had mentioned that there's a difference you you've done workshops a lot and it's very different going from a workshop to a recording. And I've actually come the other way. I've done lots of recorded courses like video and and stuff. And just in the last year or so have started to do more workshops and stuff.

Michael Thiessen:

So I'd be interested to hear, like, what are, what were the differences that you saw going from a workshop to recorded and like, maybe it's easy to to assume it's like, oh, you just do a workshop and then you just record it instead of, you know, instead of having Yeah. Someone else on the other side, you just hit record and then, like, what's the difference really?

Eduardo San Martin Morote:

So that's what I thought at the beginning as well. But for me, the courses are way more time consuming than a workshop. When I started doing workshops, I would I had my sound exercise that I prepared ahead of time, and by prepared, I mean that I I know where I go to go, I know the different points of features that I wanted to bring the applications to, and so I would just more or less calculate the time I would spend on some concepts on Vue. Because at the beginning, I was doing workshops on Vue, and I would just go through the documentation when I was going to the workshop. That was the preparation.

Eduardo San Martin Morote:

So it took me maybe a week to do preparation for a 3 day workshop. I mean, a week is too is much way more than I did. The preparation was way, way shorter than that.

Michael Thiessen:

Right. You're just climbing, like improvise everything. The points. You're just, like, the little destinations along the way and,

Eduardo San Martin Morote:

like It's a bullet point. Yeah. Yeah. It's like the different points on the path, and then I just figure out the the way and I would make it very dynamic. So I I have no slides and I have been doing workshops without slides for a long time actually, and it has been working well, very well because I use the documentation.

Eduardo San Martin Morote:

Some of the documentation who I actually contributed to a lot in the past, not that much now, but especially with YouTube. And so I would go through documentation and explain things and show you dev tools and life code some stuff, for people to understand, answer questions. And so people get very engaged, in these kind of workshops and then we go through the exercises. And I can make mistakes, I can correct myself, and this is this makes it very natural. Like, it's not an issue.

Eduardo San Martin Morote:

People do not expect you to be perfect. They make mistakes too, and it just makes things more natural. And, also, if you have to debug something, they can see how you process an issue, a problem, a bug. And that's actually it's funny because the the times I've I've created a bug by accident of, on my corrections, they enjoyed the solution the most because they were they told me, it was really great to see you go through the debugging process of the the the bug. We learn a lot about how you use the test tools and just your thought process, and then we also get the solution.

Eduardo San Martin Morote:

Whereas, when you do the course, you have multiple ways of doing the course, and I I've tried to see how other people do and find the way that is closer to mine and adapt and just because you have to find your own way, like, with everything. But the thing is you still write. So English is not my native language either. Right? So I don't feel as natural, coming up with a sentence and coming up with the whole explanation about something.

Eduardo San Martin Morote:

I'm completely fluent, but I don't have the same precision on the vocabulary I could have in Spanish and French. And, usually, I have been given workshops in French, and so you can just talk about it very easily. In English, it's a bit more complicated. Also, you have to spend a little bit extra time, a little bit of attention to the pronunciation so it doesn't come off too bad, too poorly. And so to make sure these works well, you basically write out a script.

Eduardo San Martin Morote:

So there is a lot of preparation before recording the the video. I've seen some people who just hit record, and they they start talking about it, and then they edit the thing. And so for me, that didn't work that well. I had to write the whole, text, edit some stuff, create some demos, and maybe you have to create some slides to show what you're talking about. So what I prefer to do is actually show code because that way I don't have to create the slide material which takes even longer to prepare.

Eduardo San Martin Morote:

And then I would have these small notes in the transcript so I can remember where I should what I should show on the screen. Right. And

Eduardo San Martin Morote:

I would hit record, and I would, if I don't have the camera, read try to read with that tone that makes it feel natural. So it doesn't feel like you're completely reading, although people can tell. And probably if they use an AI, They can probably tell. I'm pretty sure. I'm confident.

Eduardo San Martin Morote:

But it still makes things so much more manageable. And then you record the video so much faster because you have the text there. You you don't have to read something and then look at the camera, right, and be like, okay. So now we're going to see how state management works. And the idea is you you want you want to follow the script so well that it's so much easier for you to make mistakes, to mumble.

Eduardo San Martin Morote:

Then you have to repeat the whole sentence, and sometimes there are paragraphs or you forget the middle of the sentence. And to me, this was horrible. I would take, like, 10 times the the amount of time to record. I don't know what you think about it.

Michael Thiessen:

Yeah. So you're saying it was more of, like, the the actual video recording and less about, like, preparing the the different lessons? Because you've have you have experience with the preparation part. Right?

Eduardo San Martin Morote:

It's just that depending on how you do the recording, the preparation process is going to take very long or not. For me, the workshop, the preparation is short. Because the workshop, I can improvise. During the recording, I cannot improvise it well. It just I just mumble a lot.

Eduardo San Martin Morote:

Yeah. So But if I read, recording is fast, but preparation is long.

Michael Thiessen:

With, with Mastering Nuxt, so that was about 10 almost 10 hours of video. It was a lot of video. And I'd I had I wasn't that comfortable on video at the beginning. And so the first few lessons or sections, I actually had to like, I recorded them and I had to rerecord them because they weren't very good. And like the first my first process was what you said, like writing out word for word.

Michael Thiessen:

This is like, I I knew how to write articles. Like, that was something I was comfortable with. So I wrote it like kind of like an article, and then I would, like, try to okay. Read what is this next paragraph? And then, like, look at the camera and then remember what it was that I was gonna say, and then say it while also, like, doing the code changes and remembering what the code changes were.

Michael Thiessen:

And, like, I found that process to be really difficult because I had to, like, remember so many things at once. And I think, like, I do have an advantage in that English is my native language. So like I think

Eduardo San Martin Morote:

But still

Michael Thiessen:

the improvisation part is a bit easier for me. So I switch to just keeping like bullet points of, okay, this lesson, we're gonna start here, then we change this file, and I had, like, the whole like, if we updated a method, I would just copy paste that whole method into the I see. Into the notes so that if I messed up or forgot what I was doing, I I had the whole thing there. So I was like, okay, I know where I'm going. And then I was able to eventually get to a point where I could hit record.

Michael Thiessen:

And it may it still took me a few takes probably, but I would sort of like more improvise my way along and that that ended up working better for me. But the hardest part for me was just getting in front of the camera to begin with. And public speaking is hard. And as I'm sure you you know, and, being in front of the camera is also hard. And it took me, like, I don't know, it would take an hour or 2 to, like, hype myself up and get myself into, like

Eduardo San Martin Morote:

Okay.

Michael Thiessen:

A mental state where I was like, okay, I'm ready. I'm ready to go. Like, there's nothing funny on my face. My my shirt is clean. Like, I don't have anything in my teeth.

Michael Thiessen:

I'm, like, ready to go. And I'm like, I'm ready to record. And then I could hit maybe, like, an hour of recording, and then I would just be, like, mentally drained for that day. And that was the hardest part for me. And so then over time I got better at actually recording and it was less and less exhausting.

Michael Thiessen:

And now I do like this podcast every week and I don't worry too much about it. I just like show up and hit record and we chat and I'm not as self conscious about being in front of the camera just because I've done it so many times now. So

Eduardo San Martin Morote:

yeah.

Michael Thiessen:

So you're gonna be in Toronto next month. What is your talk on?

Eduardo San Martin Morote:

Well, I'm actually, not 100% sure which one I'm going to do. I'm getting to a point where I'm stabilizing the DataLoader's API. So to make it sure, DataLoader's API is an extension to Vue Router. By extension, I mean that it doesn't come in by default at least yet. In any case, it doesn't add to the bundle if you don't use it.

Eduardo San Martin Morote:

That allows you to run a synchronous operation to retrieve data and to be awaited in a navigation guard. Now this is just the baseline, async data in navigation guards. So the interesting part is more all the features that come with it, by using a navigation guard that is, of course, hidden from the user, and so you have a way of declaring these loaders in your pages components. You are collocating code, you have deduplications of requests, you have access to loading error states, you can nest the loaders, you can use some loader information in another one. For example, you need to fetch some user information and then fetch some extra users, some connections, but you don't have this API that allows you to retrieve the whole thing in one go so you can use nested.

Eduardo San Martin Morote:

And all of these works seamlessly and deduced, so you only have one request going. So that's the difficult part of the implementation. And it has been there for, I think, 1 year and a half, like, usable, 1 year and a half. I have been working on it for more than 2 years. Of course, I had a baby in the in between, so that slowed down a little bit the the process of just having doing things and advancing for me.

Eduardo San Martin Morote:

But, the the API is pretty stable. I have I heard very good feedback on it, and I really want to finalize some of the last details. The documentation is already there. There are a few things that I want to improve, make sure that I don't have any breaking changes in mind yet, right, because you don't want to break the API so fast. And so there is a lot to show on how this makes your data fetching so much easier to handle.

Eduardo San Martin Morote:

So and it's such a simple API and it becomes so intuitive. There is so little to learn and so much to get from from the actual its actual implementation that I really want to spread it a little bit more. And the funny thing is that this API, by itself, you can just use it with any basic asynchronous method and it would just work. Right? But the thing that makes it that also made it a little bit difficult for me to implement is that it's not just an implementation.

Eduardo San Martin Morote:

It's also some kind of spec. It's a specification. It's a set of interfaces. So anybody can create their own data loaders. And the goal of this is to not only have the data fetching integrated into the navigation guards but to also be able to use all the libraries that have more full fledged async state management solutions built in.

Eduardo San Martin Morote:

So, for example, Task.query, Swerve or GraphQL, whatever you want. And when I was building these, I've always wanted to build these. I mean, I built in the past some async state management libraries that were very simple, like, and I wanted to use, I wanted to build something a bit more complex. And I have this idea when I started building on Pina because you obviously have the name Pina Colada, which is very nice. For another library.

Eduardo San Martin Morote:

So I really wanted to use and I already know knew I wanted to do something related to, sync state management. So I built, also this, sync state management layer which is pina colada. So it uses pinaclava. It uses a pinaclava store and adds another bunch of composables to have these client side cache that brings your async state management to the next level. It really makes the data fetching in your application even better.

Eduardo San Martin Morote:

So you still have the same almost the same API. It's the same data loaders but you you have the options that are specific to pina colada. And now you get, all the GUIs that come with pina colada, which is where you have stale, fresh. So you can deduce even more requests. You can avoid fetching, like, triggering network requests more often.

Eduardo San Martin Morote:

And any library can do that. Right? They have these specification they need to follow. I have a test suite that I need to probably expose because right now it's still within the mploying view router. So these two topics have some overlap, and I can explain 1 and cover the other one a little bit, but I cannot cover both in one talk.

Eduardo San Martin Morote:

It's too much.

Michael Thiessen:

Yeah.

Eduardo San Martin Morote:

Yet, they cover this topic of async or data fetching because most of the most of the time, let's be honest, people are going to use it for data fetching, but you can do so much more. And so I think in Toronto, I will be speaking about data loaders more than pina colada, but I'm not sure yet because I really want to bring out some talks about pina cola. I think there is a lot of cool things to show.

Michael Thiessen:

Yeah. That sounds really interesting. I'll be waiting to hear that one. To me, it sounds a little bit like what GraphQL is trying to solve, where it's like each component can sort of say what data it needs, but then you have like this global thing that kind of combines it all and and de dupes so you're not fetching extra stuff. Is that kind of similar or like how would you say it's different than, like, what GraphQL

Eduardo San Martin Morote:

is doing? It's gonna work more on the server level. Right? That that specification and that specification specification. Sorry.

Eduardo San Martin Morote:

Here we have something that is completely, I mean, it can be server side because you have ASR rendering, but it's specific to the front end code, I would say

Michael Thiessen:

Oh, yeah.

Eduardo San Martin Morote:

To be more clear. That's what it handles.

Michael Thiessen:

Okay.

Eduardo San Martin Morote:

It optimizes your data fetching in your application code. So you still consume your APIs. It doesn't, yeah, it doesn't bring anything to your APIs. You don't need to change your APIs. Your APIs, they come the way they want as long as you have a promise.

Eduardo San Martin Morote:

That's all you need.

Michael Thiessen:

Perfect. Yeah. That that sounds nice. I I haven't I know you talked about this last year at the conference. I don't know if you mentioned it on stage, but I remember you mentioning the data letters thing to me.

Michael Thiessen:

And, yeah. Yeah.

Eduardo San Martin Morote:

I did mention it on stage too, I think.

Michael Thiessen:

Okay. Yeah. I need to, I need I should check this out because it looks, really good. Do you have the documentation on the Yeah.

Eduardo San Martin Morote:

The documentation is pretty ready. It's, it's live. It's uvr.esm.ease. We're a domain name, but it means I'm plug in v router dot e s m, which are my initials. Eduardo sanmartin morote.

Eduardo San Martin Morote:

Okay.

Michael Thiessen:

Yeah. We'll put that in the, the show notes for for you all to to find. And, yeah, is there an RFC somewhere if people wanna give feedback on?

Eduardo San Martin Morote:

So, yeah, there was an RFC, and it's still there. I did convert the whole RFC into documentation because this was getting

Michael Thiessen:

so big.

Eduardo San Martin Morote:

Okay. Never reaching an RFC, so big. And it's like how many pages? 7, 8 pages of documentation now. So the repository is public.

Eduardo San Martin Morote:

We have discussions for ideas for anything you want to discuss. The RFC is more like the technical view, but documentation is comprehensible any anyway.

Michael Thiessen:

Yeah. So if you're yeah. If anyone's interested in this, check it out and, give feedback. Feedback is always good. Yeah.

Michael Thiessen:

Especially, like, right now because it's not v one yet, so it's easier to, to break things like you were saying. So, Exactly.

Eduardo San Martin Morote:

Yeah. Have an impact.

Michael Thiessen:

Yeah. It's gonna be exciting. I data fetching is always, like, I don't know why it is so difficult in a lot of ways because you have all these different dependencies and like, even in some of the simple apps that I'm building, like I have my own little course platform and, running into issues with like, I'm fetching the same data on like every single page. So then I'm like, okay, I can use Nuxt.

Eduardo San Martin Morote:

Put it in a store?

Michael Thiessen:

Things. Yeah. Put it in a store or you can cache it or like there's, I mean, there's a 1000000 different ways to do it. And, just like trying to figure out, okay, what's the the best way? What's the simplest way?

Eduardo San Martin Morote:

Yeah. So also one of the issues is that you don't have a standardization of how to do data fetching, and they will have the pros and cons.

Michael Thiessen:

Mhmm. And

Eduardo San Martin Morote:

so I also go through that in some of the talks.

Michael Thiessen:

Yeah. Yeah. I'm I mean, we, we need better, data fetching stuff, so I'm here for it.

Michael Thiessen:

So one of the things you, you put in the notes here are, organizing a meetup.

Eduardo San Martin Morote:

Alright. So I started the Vuejs meetup in Paris. I think it was 2017. It was a while ago. Maybe 2016.

Eduardo San Martin Morote:

I'm not really sure. And then so it was actually really nice. Like, I had some people who could help at some point, and we did have a time where we had a meetup every month.

Michael Thiessen:

Okay.

Eduardo San Martin Morote:

And it's pretty nice as an organizer, as and as an attendee. I think that in these cities, depending on the countries, I don't know all the countries, I know that in the US, they also do this, but in Paris at least, there is a big tech community, and you have a lot of events about languages, frameworks, all the things, and you can go there. You can help organize. Of course, it's all free. So if you organize, it's not something you get paid for, but you need to spend a little bit of time on it.

Eduardo San Martin Morote:

And most of the time, they are monthly. And people come, give a talk. It's also a way for people to start giving talks. Right? It's like a smaller version.

Eduardo San Martin Morote:

It's like the beginner, level public speaking.

Michael Thiessen:

Yeah. And this is how

Eduardo San Martin Morote:

I started also. I still remember how nervous as well I was the first time I was just speaking in front of was that, I don't know, 70 people. It was so so so little in a meetup compared to what you had at a conference. And it's such a it's a fun experience, even organizing honestly, because it's not that much work, especially if you're not alone because you can split the task. And so currently in Paris, we there is Elise and now Florian, so 2 other people.

Eduardo San Martin Morote:

Elise is at the Vue.js Germany conference right now. She was giving a talk about pina cola. Florian is he joined recently. He was helping with the organization too. And with more people, when you're by yourself, honestly, it's a little bit, boring if you don't get any people to help you, if you don't manage to have people join.

Eduardo San Martin Morote:

But when you are with more people, you feel like like just organizing an event with with friends. It's like, oh, it's like like you're throwing out a party, more or less.

Michael Thiessen:

Right.

Eduardo San Martin Morote:

People come, they want to learn about something and then chat with other people. Yeah. Hang out. With other people in tech. Hang out.

Eduardo San Martin Morote:

And after COVID so during COVID, of course, it was just it was closed, and slowly later, they started to appear a bit more clearly the scenes of meetups is damaged. He It hasn't recovered yet. I think it's recovering in a way. I don't think it will ever recover because meetup has also changed a lot of its policies, the platform itself. But it will be nice to see more Meetup communities appearing around the world for for for you.

Michael Thiessen:

Yeah. Yeah. I've thought about, doing one before, and I I wasn't sure about how much time commitment it would take. I think the biggest thing is trying to find a space to do it in. So I'd need to, like, how do you handle, how do you figure that out?

Michael Thiessen:

Like, do you have like companies offering to give like, office space? I I think I've seen that done before or, like, how Yeah.

Eduardo San Martin Morote:

That's how it works. You usually have people companies that want to host, because they get some exposure from it. And so it's important to have some kind of network. So if you go to meetups, you get to know these people, and then you get to have the context of companies that are willing to host the event. So you have to get into the the Meetup scene in a way, but it's accessible.

Eduardo San Martin Morote:

Like, it's completely free. You just go to the events and meet people. It's time consuming at the beginning, I think, and then you can safely assume that, okay, if I put 1 hour or less every week, I can organize this in a more, streamlined or smooth way. As long as you have speakers, of course, you need to have speakers.

Michael Thiessen:

Yeah. And then you have to get people to speak. And, Yeah. So yeah, I think of there there are, so I'm in Waterloo, which is just outside of Toronto, and it's it's a smaller city. I think, I don't know, 300, 400,000 people.

Michael Thiessen:

So it's not that big, but the the

Eduardo San Martin Morote:

thing that 400,000 people? That's that's a small city. Yeah. Well That's a small city.

Michael Thiessen:

I know, but in so in I think in in Canada, it's like the 10th biggest city.

Eduardo San Martin Morote:

Oh, it's not the biggest. So, Top 10?

Michael Thiessen:

Yeah. Top 10. So it's pretty good. And so we have, partly because we have a a university here, but, it's also, like, got a lot of, tech tech startups. Blackberry was founded here, and I think that's historically part of the reason why.

Michael Thiessen:

So when there's like, when they had a rough time, you know, like 15 years ago, then a lot of people left and, started other tech companies. And so then it's just kind of like created a whole, a whole, like, texting here. So there's, like, so many so many software developers and, tech companies. And that's actually, like, why I'm I'm here because, there were jobs here. So I came here.

Michael Thiessen:

So I think there's a JavaScript meetup here, which I have been meaning to attend, but I haven't gone out to yet. Yeah. Having a be having a baby recently makes things a bit different, but there could be a chance that a Vue meetup would have enough, enough people come out to it.

Eduardo San Martin Morote:

How many times do they do the JS? For you, like, is it every month or every time?

Michael Thiessen:

I think it's every month.

Eduardo San Martin Morote:

Every month. Every month is it's, like, amazing. It's, like, the best. But I think going for 1 every 4, every 3 months is totally fine too.

Michael Thiessen:

Yeah. 1 part of it is, I think now a lot of companies are just remote. And so, like, for

Eduardo San Martin Morote:

me Yes.

Michael Thiessen:

And a lot of other people, we're just, like, sitting in our basements and chatting, like, over the internet to people. And so seeing other people in person that you can talk to about similar interests and, and stuff is, is so nice.

Michael Thiessen:

Well, I think that brings us to the end of the podcast episode for today. Thank you for coming on and talking about all the different things. Are, is there anything else you would like to say or like where can, where can people find you if they wanna follow-up and connect with you?

Eduardo San Martin Morote:

Follow me on Twitter, I suppose. I think that's where I contact more. I've been trying to be more active lately. Yep. Or GitHub or Discord for connecting.

Michael Thiessen:

Okay. Well, all the links will be in the description. If you are wanting to, meet up with me and Eduardo and Alex in Toronto, we have special code deja view. If you go, you'll get 15% off on, tickets for that. And you can come meet us in Toronto and we'll be there.

Michael Thiessen:

We can hang out and talk about data loaders and whatever else we wanna talk about.

Eduardo San Martin Morote:

Meetups, whatever.

Michael Thiessen:

Yeah. And, yeah. If you haven't, seen any previous episodes or wanna catch up, we've got I think this is episode 30. So we've got a bunch and, you know, check out one with Evan. We've got one with Daniel row.

Michael Thiessen:

We've got a whole bunch of awesome people that we've talked to in the past. Awesome topics. So you can check that out and we will see you in the next one.