@TheoSteiner chats with @posva (Eduardo) about his talk at Vue Fes Japan, exploring upcoming developments in the Vue.js ecosystem.
Guest
@posva (Eduardo)
Core contributor to Vue.js
Author of Pinia and Vue Router
Involvement with Vue.js
Eduardo has been involved with Vue.js for about 8 years, starting with version 0.12.
Proficient maintainer of open source libraries in the Vue.js ecosystem (Vue Router & Pinia)
About Pinia
Pinia is the official state management library for Vue.js
It facilitates easy migration from Vuex and has enhanced support for TypeScript.
Stores can be defined via the option API or the composition API
You can think about stores as “Components without UI”
Recently Eduardo is working on a next-generation project called “Pinia Colada”
About Vue Router
Vue Router is the official routing library for Vue.js
It enables type-safe routing & is highly configurable
Recently Eduardo is working on next generation features, such as typesafety, file-based routing & data loaders in a next-generation project called “unplugin-vue-router”
Vue Fes Japan Talk: Async State Management with Vue Router
Data loaders support asynchronous state management by integrating navigation and data fetching
They use route guards to load data during navigation, handling errors and caching
Data Loaders are a spec other tools can implement
Community and Open Source
Eduardo balances his work between open source contributions and freelancing
He continuously improves his libraries based on community feedback
@TheoSteiner Hey there, my name is Theo Steiner and you are listening to UIT Inside, our weekly podcast
@TheoSteiner for front-end developers who love user interfaces and technologies.
@TheoSteiner You might be wondering why I am speaking in English and not Japanese as usual.
@TheoSteiner The reason is, we have a special guest on the show today, and I am very excited for you to meet him today.
@TheoSteiner Eduardo, could you give us a brief self-introduction?
@posva Yes, sure.
@posva Last week.
@posva How was it?
2. Eduardo's Journey with Vue.js
@posva It was great.
@TheoSteiner Honestly, it's such a nice conference.
@posva To me, it's crazy.
@TheoSteiner As someone who has organized conferences before, it's crazy how dedicated the team is, how
@TheoSteiner many they are, like 60.
@TheoSteiner I think there were 60.
@TheoSteiner And the organization, the coordination, the level of detail is impressive.
@TheoSteiner I don't think we go that deep, at least in France.
@TheoSteiner You know, the conferences I helped.
@posva So for some reason, I was like, oh, I'm going to do this.
@TheoSteiner For people who are just doing that for free, I think it's really amazing.
@posva It's really impressive.
Speaker_2 I respect it.
@TheoSteiner Yeah, it was also my first Vue Fest, and I was super blown away.
@TheoSteiner So like, I'm usually more active in the Svelte community, and we can only dream of having
@posva a conference this big in Japan.
@TheoSteiner I mean, I'm trying my best, but so far, yeah, nowhere near that level of professionality.
@TheoSteiner And you actually, you did a talk at the Vue Fest Japan.
@TheoSteiner We're going to dive into that later.
@TheoSteiner But first, how did you get to be a core contributor on Vue?
@TheoSteiner Like, what's your history in the Vue community?
@TheoSteiner So my history with Vue started, I think it's eight years now.
@TheoSteiner I didn't really know down the year.
@TheoSteiner Maybe I should at some point, actually look at the date.
@posva But it's pretty early.
@TheoSteiner It's pretty early days of Vue.
@TheoSteiner I started using Vue on version 0.12.
@posva 0.12?
@TheoSteiner Yeah, it was just released.
@posva It was right after 0.11.
@TheoSteiner For example, I know Kazupon, who is also a core team member.
@posva He's a member of the team.
@TheoSteiner And was one of the organizers of Vue Fest.
@TheoSteiner He was there in 0.11, maybe before even.
@TheoSteiner And so I remember seeing his face already in the issues and pull request.
@TheoSteiner And so initially, I was working at a company as a consultant.
@posva So I was really young.
@TheoSteiner I was right after my studies.
@TheoSteiner And we were doing a lot of AngularJS.
@TheoSteiner I don't know which version it was at the time.
@TheoSteiner I find as I kept using it, I found a lot of issues.
@TheoSteiner And also the mental model didn't fit the way I like to think.
@TheoSteiner So I felt like it was getting more in the way.
@TheoSteiner I would check up documentation more often than not.
@TheoSteiner And in the evenings, I would check out all the libraries that were existing.
@TheoSteiner I think Riot was also one of the libraries at the time.
@TheoSteiner React, of course, was also there.
@TheoSteiner And Vue really clicked with me when I started using the documentation.
@TheoSteiner I started building projects because of the simplicity.
@TheoSteiner So it was a very different time, honestly.
@TheoSteiner The whole bundler scene was not there.
@TheoSteiner We were still using Gulp and Grunt.
@TheoSteiner So it was very different.
@TheoSteiner The kind of performance, not performance, but things were not as fast when building,
@posva right?
@TheoSteiner So we have other interests in other things.
@TheoSteiner And it was more in the API and how simple it made to communicate between I have this
@TheoSteiner mental model of data I want to display and I want to base that as a source of truth.
@TheoSteiner And I want it to render always and to always be updated.
@posva That was the main, main issue, the most important one.
@posva I think nowadays we forget about that a lot.
@posva Yeah.
@TheoSteiner I think it was a lot, but in those days it was very important.
@posva So I started using it a lot.
@TheoSteiner I started diving a lot in the issues, commenting here and there, sometimes helping out with
@TheoSteiner triaging mostly, I think.
@TheoSteiner So I would help people, help people with their issues to see if there were bugs or not.
@TheoSteiner So I will tell them, oh, you're just doing this, but you should be doing that.
@TheoSteiner When I look back, back at my comments, I can see that there is a lot of, at least I improved
@posva a lot.
@TheoSteiner It wasn't that great back then helping people.
@TheoSteiner Also English is obviously not my first language.
@TheoSteiner Although I'm fluent, I think a few years ago, I would definitely have a different
@posva tone with speaking.
@TheoSteiner So maybe more direct, or I would just not have the same level of subtlety when speaking,
@TheoSteiner which is fine in open source, I think.
@TheoSteiner So at some point Evan also asked for a core team to be formed and to reach out to him
@TheoSteiner via form maybe, I think, in order to more formally, more formally, more formality, more
@TheoSteiner of a formality to create a team, have a Slack, and we could discuss about things a little
@TheoSteiner bit more organized.
@TheoSteiner And so that's how I really got into the Vue core team.
@TheoSteiner I think, so Kazubong was also there, and we were like 20, a bit less.
3. Overview of Pinia
@TheoSteiner A lot of the people from the initial team has disappeared, not disappeared, but they
@posva are not there anymore.
@TheoSteiner Maybe they passed on to something else.
@TheoSteiner In the end, it's always difficult, I think, to contribute to open source and have a full
@TheoSteiner time job.
@TheoSteiner Definitely something you cannot do at all ages.
@TheoSteiner I think the window is actually very short.
Speaker_3 Yeah.
@posva Or you have...
@TheoSteiner You have a life where you have a lot of freedom, which is not something everybody can afford.
@TheoSteiner And as again, with age comes more issues, even with health or anything, you have more,
@posva you're more likely to have issues.
@TheoSteiner If you want to have a family, then that's another thing.
@posva You have more responsibility.
@TheoSteiner So yeah, there is a small window, I think, in developer's life where you have these opportunities
@TheoSteiner to join some kind of community and try to be part of it in different ways.
@TheoSteiner And once that time window has passed, you can not join in the same way.
@TheoSteiner Or because you cannot, you won't be able to find yourself.
@TheoSteiner So if you get the opportunity, you have to grab it.
@TheoSteiner I'm already wanting to go off script because you said you started with Vue version zero
@TheoSteiner and I only started with version three.
@TheoSteiner So I'm really interested in what the API looked like at version zero.
@TheoSteiner It was honestly the biggest difference is options API.
@TheoSteiner At the beginning, it was really based on options.
@TheoSteiner So we have separations of type of things.
@posva We have data methods.
@posva We have a lot of things.
@posva We have computed.
@TheoSteiner There was a compiler.
@TheoSteiner Where is it?
@TheoSteiner I think there was no compiler in the beginning.
@posva Compiler is V1 or V2.
@TheoSteiner Maybe V2 actually.
@TheoSteiner So it was more of modifications to have done directly.
@TheoSteiner But I think Angular would also like that.
@TheoSteiner And the main idea was there and it hasn't changed.
@TheoSteiner The fundamental idea of having a source of truth and you write your template and you
@TheoSteiner have some syntax on top of HTML that is still valid in HTML was there.
@TheoSteiner Also, you had a lot of and this was a big strength back then.
@TheoSteiner It's not a big strength that more than much anymore, but it's still something that only
@TheoSteiner Vue has compared to any other framework in front end.
@TheoSteiner It's that you can still have an HTML.
@TheoSteiner You have your page with HTML and you have these extra things that are Vue.js specific
@TheoSteiner and you add JS on top for the Vue and it will re like not hydrate because it's not SSR.
@posva It's not the right term, but it will rebuild the HTML.
@posva So it's not a big deal.
@TheoSteiner So you don't need a build phase.
@posva Essentially, that's the point.
@TheoSteiner You don't need a build phase to actually use Vue.
@TheoSteiner And some projects I did in a consultancy, which now use Nuxt, if I'm not mistaken, but
@TheoSteiner I haven't been there for many years.
@TheoSteiner They started using Vue 1 and Vue 1 with templates and in the back end, it was like symphony.
@TheoSteiner So PHP and Vue helped us have a more maintainable front end code than using jQuery.
@TheoSteiner So it really it really was a better replacement for jQuery.
@TheoSteiner It helped to have this concept of components also, which hasn't changed.
@posva The concept of components has been the same.
@posva So yeah, that was the big thing.
@TheoSteiner No build phase and only options API.
@TheoSteiner Yeah, everything has changed a lot with composition API, but you can still write option API today
@posva and it still works, which is yeah, the backwards compatibility of Vue is great, I think.
@TheoSteiner So you're a very proficient open source library author.
@posva Yes.
@TheoSteiner And as you said earlier, maybe best known for Pinia and Vue.js.
@posva Yeah.
@TheoSteiner I'm a router or router, however you say it.
@posva American.
@TheoSteiner So let's dive maybe a bit into Pinia.
@TheoSteiner So Pinia is a state management library.
@TheoSteiner We use it actually here at Line Yahoo Corporation.
@TheoSteiner And thank you for that.
@TheoSteiner So what does Pinia enable?
@TheoSteiner So Pinia, it doesn't enable that much.
@TheoSteiner And that's the good thing about Pinia.
@TheoSteiner And it really is about global state management and having a centralized solution that is
@TheoSteiner safe and is compatible to use.
@TheoSteiner So it's the official state management solution.
@TheoSteiner You don't need to use it in other projects.
@TheoSteiner And you could get away by having like global, even global refs in some projects.
@TheoSteiner It's more about the some standards it introduces.
@TheoSteiner So people when going from a project to another, they will still be able to use the Pinia functions.
@TheoSteiner The API honestly is very small.
@TheoSteiner In the end, the surface API is really small.
@TheoSteiner The idea really is to be able to define global state in a way that looks like Vue.
@posva So Pinia is very, very simple.
@posva It's a very simple, very easy to use.
@posva It's a very simple, very easy to use.
@posva And it's very, very easy to use.
@posva So for example, you have two types of store.
@TheoSteiner You have option stores, which are going to look more like options API.
@TheoSteiner So you also have state, you have getters and actions, which basically is the equivalent
@TheoSteiner of a component data computed and methods.
@posva It's pretty much the same.
@TheoSteiner So you can also see the store as a component without a template that is always there, that
@TheoSteiner is outside of the tree of components.
@TheoSteiner And then you have setup stores, which are like composition, so composables, which are
@TheoSteiner functions that use the composition API.
@posva So you can see the store as a component.
@TheoSteiner You have the function API to encapsulate logic.
@TheoSteiner And so these offers a very low level of granularity.
@TheoSteiner You can really split up things, organize the code, the data, the functions the way you
4. Insights on Vue Router
@posva want.
@TheoSteiner And so Pinia allows to define a global composable, kind of like a singleton.
@TheoSteiner And it works with SSR, it has dev tools as well.
@TheoSteiner So it really tries to make things as close as Vue for state management.
@TheoSteiner And it was also a way to migrate more easily from Vuex.
@posva Because Vuex is not only a state management tool, but it's also a way to migrate more easily from Vuex because Vuex is a state management tool.
@posva And so Pinia is a very good example of this.
@TheoSteiner It's at the time of Vue 3, even Vue 2 has a poor TypeScript support.
@TheoSteiner And this is also inherent to the way the API is created and the way you interact with the
Speaker_4 store.
@TheoSteiner We would have what we call magic strings.
@TheoSteiner So we would access the store via these in components, dot dollar store, for example.
@posva We have dollar something.
@TheoSteiner And so there is no way to infer, I mean, you can infer with some manual code now in TypeScript,
@posva but not any of the time.
@posva It wasn't that easy in the time.
@TheoSteiner And it has other issues like you always have a big store with everything inside, even if
@TheoSteiner you create modules or you have to do dynamic modules.
@TheoSteiner But it's still it requires some extra code.
@TheoSteiner So Pinia has been engineered in a way that it doesn't get in your way.
@posva All these things, you get them for free is inherent to the API.
@TheoSteiner So I think I'm really happy with that part of things that it's mostly people don't don't
@TheoSteiner really see them because you don't need to.
@posva And I think that's the best kind of API when it's invisible.
@posva Yeah, that's true.
@posva It's a very lightweight API.
Speaker_5 And I love your work.
Speaker_5 I love your work.
@TheoSteiner I love your explanation of it basically being a component that is shared between other components,
@TheoSteiner but it doesn't have a template.
@TheoSteiner And that's like, especially true since you can use the composition API and the option
@posva API.
@TheoSteiner So it's, it's almost like a view component without a template.
@TheoSteiner Yeah, as I said, so a question regarding the the way you author Pinia stores is the composition
@TheoSteiner API is it like recommended to use it over the options API?
@TheoSteiner There is no like recommended.
@TheoSteiner Because it depends what you mean by recommended, right?
@TheoSteiner For me personally, yeah, I prefer to just you always use composition API, just to have
@TheoSteiner a more coherent writing of stores.
@TheoSteiner The reason is, there are things you cannot do with options, option stores simply, because
@TheoSteiner you are limited to are organizing things by type.
@TheoSteiner If you want to go have, what is the word in English, if you want to live it up your your
@posva your game and the way you organize code, you will have to go to a lower level.
@posva So you can't do that.
@posva You can't do that.
Speaker_6 You can't do that.
Speaker_6 You can't do that.
@posva You can't do that.
Speaker_7 You can't do that.
@posva You can't do that.
Speaker_7 You can't do that.
@posva So you have to go into a lower level in terms, sorry, you will have to go into a lower level
@TheoSteiner of code organization, which means that you are exposed to more risk, but you also have
@posva more control.
@TheoSteiner And this is where you should learn and grow.
@TheoSteiner And this is where you can create actually better code organic organization than just
@posva having a type organization.
@TheoSteiner So because of this, personally, I will recommend to use the setup stores whenever possible.
@TheoSteiner But some people are still not there, they are learning, and the option stores are there
@posva for them too.
@TheoSteiner I think this is also a good point to show that for people starting view was also a great
@TheoSteiner choice because of this because of the options API.
@TheoSteiner So when people are starting, they feel so much more comfortable not having to think
@TheoSteiner about where to put things.
@TheoSteiner Because the they are organizing by type is like having a I forgot the word where you
@TheoSteiner put your socket like a structure, not a structure, but in your clothes closet, where you put
@TheoSteiner your your clothes, you usually like a drawer.
@posva Exactly.
@posva Thank you.
@TheoSteiner So you can organize each kind of things, right?
@TheoSteiner Most people organize them by kind of thing.
@TheoSteiner So I have t shirts, you have pants, you have socket socks, you have underwear, right?
@posva So this is very easy to do.
@TheoSteiner I think mentally, we are used to this kind of mental model.
@TheoSteiner That's why it's also very easy for people to get started with view and why it was so
@TheoSteiner attractive for people in the first place, especially in view v1 and stuff, because people
@TheoSteiner just will look at a view code and be like, Oh, I understand right this right away, because
@TheoSteiner they can see data, they can see methods.
@TheoSteiner Now, when it gets complicated, the component is not easy, right?
@TheoSteiner So that's why the composition API helps.
@TheoSteiner Very interesting view as a drawer for your mind, or like the options API as a drawer
@TheoSteiner for to organize your code.
@TheoSteiner Okay, so that's Pinia.
@TheoSteiner And you're also known for another very, very big library, you've router, how did you come
@posva to write view router?
@TheoSteiner I think it's like the most common router API and not router, the most common router library
@posva in view.
@posva So how did it come to that?
@TheoSteiner So in view, we have official solutions.
@TheoSteiner So the idea is we gather feedback, we consider also a lot of backward compatibility things.
@TheoSteiner And we try to move fast when we need to move fast, and then we move slow to not break things.
@TheoSteiner So I think I applied this well to your router, because I slowed down on the parts where I
@TheoSteiner could break API's.
@TheoSteiner And I went fast when I needed to, but I still took the time it needed to develop.
@TheoSteiner I got into it very early on my journey with view, I think.
@TheoSteiner And I wrote the v4 version.
@TheoSteiner So there was a lot of things to take into account.
@TheoSteiner The v4 version of your router is for view three.
@TheoSteiner And routers are very interesting topic.
5. Data Loaders and Async State Management
@TheoSteiner Everybody takes them for granted, but they're very complex.
@TheoSteiner And their responsibility spans all over the application code.
@TheoSteiner So it's it's a really hard piece of software to design property.
@TheoSteiner And sometimes it's better not to over design it.
@TheoSteiner So by that, I mean, not creating too many API's.
@posva But rather exposing lower level API's.
@posva So that's the first thing.
@posva And then the second thing is, I think, is the user experience.
@TheoSteiner Because people have opinions, and people want to use their own abstractions for some stuff.
@TheoSteiner So it's better to not over commit in an API that might end up not being useful in many
@TheoSteiner cases, but still adding to the bundle.
@TheoSteiner And ViewRouter is one of the most powerful routers out there, actually, when you in terms
@TheoSteiner of features, it has been way more powerful than any other in many years.
@TheoSteiner Now we have a lot of typed routes and typing like parameters.
@posva Yeah.
@TheoSteiner And there are a few features now that I'm still adding back to the router.
@TheoSteiner But even though it was one of the pioneers, I think, in typed route in typed pages and
@TheoSteiner type safety in ViewRouter, we have these for two years now.
@posva And there are other concepts that were not there.
@TheoSteiner So for me, it was a very interesting topic, but very time demanding.
@TheoSteiner And it's a big challenge because people don't really take a look too much into the router
@posva or it's like, yeah, it's just there.
@posva Also maybe a marketing issue on my side, to be honest.
@TheoSteiner I recently dove into your ViewUnplugin router, the one that has like full type safety and
@posva file based routing.
@TheoSteiner And I have to say that it's like a new way of doing routing because it's like end to
@posva end type safe.
@posva And I don't think we had that before in the view world.
@posva No, no.
@TheoSteiner I mean, oh, actually, yes, we did have some things that were so there was something in
@TheoSteiner the Nuxt ecosystem that was similar.
@TheoSteiner And I think I talked to the author of the library.
@posva And I think I talked to the author of the library.
@TheoSteiner And I'm not completely sure.
@TheoSteiner I'm trying to roll back to rewind in my memory.
@TheoSteiner So they had something similar.
@TheoSteiner They were using a different approach because they were only for Nuxt, right?
@posva It was specifically for Nuxt.
@TheoSteiner So you already had the file based routing.
@TheoSteiner It's a little bit different, but the idea is still the same.
@TheoSteiner Based on the file structure, you can infer the types of the routes.
@TheoSteiner And the way you do it in ViewUnplugin router is really cool with the like you create virtual
@posva modules.
@posva Yes, yes.
@TheoSteiner And then you import types from the virtual modules.
@TheoSteiner That's like as a as a techie.
@posva I just like that.
@TheoSteiner When I saw that, I was like, Oh, this is so cool.
@TheoSteiner It was a big headache with the with TypeScript.
@TheoSteiner Sometimes he's I can imagine he doesn't work and you don't know where to debug because
@TheoSteiner it's mostly the augmentation.
@posva You have to solve the type.
@TheoSteiner Yeah, you have to you remove stuff.
@TheoSteiner You comment stuff out and you're like, Oh, now it works.
@posva I comment this out.
@posva Now it doesn't work.
@posva You start tweaking things.
@posva Yeah.
@posva Type augmentation is can be a pain.
@posva Yeah.
@TheoSteiner It's a pain to debug for sure.
@TheoSteiner So the ViewUnplugin router brings us to the next section of our episode.
@TheoSteiner You actually had a talk at the ViewFest Japan, an amazing talk.
@posva I really enjoyed it.
@TheoSteiner And it was titled Async State Management with ViewRouter.
@TheoSteiner So what what is up with that?
@TheoSteiner What is async state management with view?
@TheoSteiner State management is so when something funny is people usually when they hear async state
@TheoSteiner management, they hear async and then state management.
@TheoSteiner But the real split is async state management.
@TheoSteiner And it's just a differentiation from state management or global state management.
@TheoSteiner When we say state management, it can be both.
@TheoSteiner Async state management, it's just a very generic word to say we handle the async state.
@TheoSteiner So that means is the operation running?
@posva Do we have an error?
@posva Do we have the data back?
@posva Can we refresh it?
@TheoSteiner So there is a lot of things around that and we can add things like cache, persistence,
@posva refreshing.
@TheoSteiner So by not refreshing, but rehydrating from the persistence, pausing, resuming.
@TheoSteiner There is a lot of things you can go really, really far.
@TheoSteiner So most of the time, this means data fetching in web applications.
@TheoSteiner We're not going to lie to ourselves.
@TheoSteiner The truth is that it still goes a little bit further.
@TheoSteiner The truth is that it still goes a little bit further because you can also integrate other
@posva kinds of async state management.
@TheoSteiner So you could have WebSockets and other more complex operations.
@TheoSteiner But data fetching is going to be the main topic.
@TheoSteiner So I'm going to limit to talking to data fetching.
@TheoSteiner Because it should be what most people are familiar with.
@TheoSteiner It means that so the talk was really about combining these data fetching that is not
@TheoSteiner always in the router to the router and the benefits of doing so.
@TheoSteiner The most of the time when you do data fetching or async state management in general, you
@TheoSteiner have some kind of solution that handles that.
@posva Is it loading?
@TheoSteiner Did we have an error?
@TheoSteiner Otherwise if you write the code by yourself, which you can, it's a lot of boilerplate.
@TheoSteiner So you end up abstracting it and then you keep adding features.
@posva And then it becomes a bit of a mess.
@TheoSteiner And you may end up writing your own library like like that's the query swear or not have
@posva their own implementation.
@TheoSteiner So the talk is more about is really about combining these solutions with the router
@TheoSteiner to bring also the benefits of being able to integrate data fetching into the navigation.
6. Community Involvement and Open Source
@TheoSteiner Because well, there is a lot of some of the benefits that are talked about in the in the
@posva talk.
@TheoSteiner But there can be easily summarizing to you want to be able to control the navigation.
@posva This means redirecting to a page.
@TheoSteiner If the user has no access, display the page with an error, maybe if it's a 404, when you
@TheoSteiner want to display the detail of a of a document in the database, but also having a better
@TheoSteiner analysis knowledge of what is going on in your page.
@TheoSteiner So if you just load the data synchronously on when the component mounts, your navigations
@TheoSteiner are going to be instant, and you will not have any metrics on what are the pages that
@TheoSteiner take the longer to load from our client side perspective.
@posva Because if you have service and rendering.
@TheoSteiner As long as you load the data on the server, you can see how that so it's more of a realistic
@TheoSteiner point of view on what is fast, what isn't fast in your application, integrating into
@TheoSteiner the navigation allows you to know how long take on the client side some of the pages.
@TheoSteiner So analytics wise, this is very nice too.
@posva And so this is that's it.
@TheoSteiner That's the that's the point, right is having these benefits, but without giving up all
@TheoSteiner the benefits of using a full fledged as in state management library, and this is the
Speaker_8 data loader, basically, or loader.
@TheoSteiner The name is not really sexy, but I don't think it requires to be that.
@TheoSteiner It's just it's loads something.
@posva That's it.
@TheoSteiner So my understanding is that data loaders are implemented on top of route guards or route
@TheoSteiner guards like the before enter route.
Speaker_8 Yes.
@TheoSteiner Yeah, route guards or middlewares, you can call them whatever you want.
@TheoSteiner The concept is the same is a function that runs before the navigation is confirmed, and
@TheoSteiner allows to control the navigation outcome.
@TheoSteiner By control, I mean cancel.
@TheoSteiner So abort redirect.
@posva And also delay.
@posva It's a synchronous.
@TheoSteiner Yeah, I think that really gives you a lot of flexibility because you can get the data
@TheoSteiner and look into the data and decide based on the data you got where you redirect the user
@TheoSteiner to or if you have to cancel or do something else.
@TheoSteiner It's a really beautiful pattern, I think.
@TheoSteiner Did you have like, any any sort of inspiration for this pattern?
@posva Yeah, definitely.
@TheoSteiner So I try to when I come with these ideas, I mean, the loading into a navigation guard,
@TheoSteiner that's something that has been has existed for a long time.
@TheoSteiner But I wanted to have an API that allow me to collocate the code that is relevant to
@TheoSteiner data fetching to the code that displays that results.
@TheoSteiner So usually this means page components.
@TheoSteiner In page components, I want to be able to define loaders without being limited to it.
@posva This is also the important part.
@TheoSteiner I don't want to be limited by this collocation.
@TheoSteiner And I want to be able to use it right away underneath.
@TheoSteiner When you have the navigation guards, you really are away from the component because it's a
@posva global thing.
@posva It's in the router.
@posva So I did look at what the navigation guards are.
@TheoSteiner I did look at what other frameworks were doing with loaders in general, because every single
@TheoSteiner framework had their own version of loader.
@TheoSteiner And they are mostly doing a very simple version compared to the version I'm doing.
@TheoSteiner So I wasn't really satisfied with the inspiration I got.
@TheoSteiner But it was still great to see that other people were going in a similar direction, because
@TheoSteiner I've been trying to advocate for the navigation in navigation data fetching for a long while.
@TheoSteiner And some of them do not really integrate into the navigation because they only do it on
@TheoSteiner server side, but not on client side.
@posva And so data loaders are basically the same.
@TheoSteiner They're both server and client side.
@TheoSteiner They're really hooked into the navigation itself.
@TheoSteiner And so the reason I say that some of the frameworks have a more simplified version is because
@TheoSteiner they don't allow, sometimes they don't allow multiple loaders, for example.
@TheoSteiner They don't allow nesting loaders, which is something I didn't talk about in the talk.
@TheoSteiner But you can nest loaders and have serial, by default is parallel, which I didn't even
@TheoSteiner say, but because I think it should be granted, like take it for granted.
@TheoSteiner Your navigation should maximize the parallelization of loading.
@posva As well.
@TheoSteiner So you can do the best, as much as it could.
@TheoSteiner And so the data loaders do this and you don't even need to worry about it, but you don't
@TheoSteiner need to have one loader per route.
Speaker_4 You can have multiple ones.
@TheoSteiner So you don't even think you need that and you don't even need to think about it.
@TheoSteiner And then you can also combine it with the full fledged libraries that bring all the
@TheoSteiner features like cache, persistence, as I was saying before, or just do the basic one.
@TheoSteiner So that's definitely something that no other framework has, right?
@TheoSteiner Having a loader that can be augmented like a spec.
@posva Yeah.
@TheoSteiner It's maybe a level lower than other frameworks.
Speaker_9 Yeah.
@TheoSteiner If I, for example, think of Remix or SvelteKit, which have a similar loading pattern, but
@TheoSteiner then it's not as composable because you don't have the loader itself that you can freely
@posva pass around.
@posva Exactly.
@posva Yeah.
@TheoSteiner You can still, for example, in Svelte, you could use the loader that is in your layout
@TheoSteiner and await it or something, but it's not as composable and low level as the data loaders
@TheoSteiner in Vue Router, which I think are really nice.
@TheoSteiner They're really cool, but they don't have this general, like a standard pattern.
@TheoSteiner And what I especially love about them is that there is not one data loader.
@TheoSteiner Like in your talk you were like, actually I lied to you.
@TheoSteiner There's no data loaders because data loaders are just a spec.
@TheoSteiner And for example, one that comes default with Vue Router is the basic.
7. Eduardo's Educational Activities
@TheoSteiner Yeah, you have two defaults.
@TheoSteiner So like two official implementations in a way is the basic, as you were saying.
@posva So you can rename it.
@TheoSteiner bother too much with the naming is like define define basic loader and this is just takes a
@TheoSteiner function that returns a promise that's it and then the sorry and the colada there is the define colada
@TheoSteiner loader so this one is based on pinia colada and pinia colada is is a layer on top of pinia so you
@TheoSteiner can call it whatever you want is it uses pinia to so more specifically the stores to handle the
@TheoSteiner the data the global data the global state management and it adds sprinkles on top the
@TheoSteiner all the goodies for cache sync state and invalidation optimistic updates a lot of things
@TheoSteiner that are really useful and it makes it also in a way that is really progressive which is something
@TheoSteiner we really like in Vue so it should be simple to get started it should be simple to go further
@TheoSteiner away by adding things so you shouldn't be rewriting your whole code when you need to
@posva make things more complex
@posva you shouldn't be rewriting your whole code when you need to make things more complex
@TheoSteiner most of the time you should be able to just add things to the to the code you already have
@TheoSteiner and still stay simple i want to dive into pinia colada a bit further later on but like other than
@TheoSteiner the two basic loaders um you provide by default what what kind of loaders could be implemented
@TheoSteiner what like why is it a spec yeah it's a spec because i didn't want to lock in my users into
@TheoSteiner some specific implementation so the basic loader doesn't use any other library right it doesn't
@TheoSteiner have any other implementation so it only has data error loading state and you can refresh the data
@TheoSteiner without navigating that's pretty much pretty much it error management loading state data and
@TheoSteiner refreshing and any any implementation can add their set of features so like pinia colada does add the
@TheoSteiner cache and persistent annotation invalidations this is handled by an external library which is
@TheoSteiner independent to the router it works by itself right so we have some glue code you can you can even
@TheoSteiner think about the define uh the loaders as a whole but i'm not sure if we can get a lot of validation
@TheoSteiner loaders as glue code.
@TheoSteiner And then you could have something with other libraries
@TheoSteiner that other people use.
@posva So it could be TanStackQuery, which
@TheoSteiner is a very popular solution for async state management.
@posva And Pina Colada actually has an API
@TheoSteiner that looks a lot like TanStackQuery.
@TheoSteiner It's obviously on purpose to be able to seem familiar to people.
@posva And you can also do ViewFire.
@TheoSteiner So ViewFire would have the, what would be special about ViewFire
@TheoSteiner is that you will wait for the initial data to be ready,
@TheoSteiner and then it will become real time, something like that.
@TheoSteiner And so WebSockets, you could imagine something similar.
@TheoSteiner You wait for the WebSocket to be set up and the connection
@TheoSteiner to be ready, and then it's just alive.
@posva It's just there.
@TheoSteiner Of course, you still need to handle
@TheoSteiner some of the intrinsic behaviors of WebSockets,
@TheoSteiner like disconnecting and stuff like that.
@TheoSteiner That's a whole different story.
@TheoSteiner So you could imagine any loader that
@TheoSteiner integrates with any other technology, library
@TheoSteiner or technology, and that brings their own very special set
@TheoSteiner of features that is not specific to data loaders.
@TheoSteiner Because the idea is really, as long
@TheoSteiner as you implement these internal, like,
@posva I mean, low level API that the router relies on
@TheoSteiner for the navigation guard to run and to get data, it will work.
@TheoSteiner And it has a lot of features that are actually
@posva more complex to implement that it looks like,
@TheoSteiner like the ability to have consistent updates.
@TheoSteiner So the loaders are meant to delay updating the data
@TheoSteiner until navigation is validated, which is very abstract concept.
@TheoSteiner But when you have client side loading based on the routes,
@posva if you navigate to a different route,
@TheoSteiner and you have multiple parts of the application that
@posva have different fetches, you may end up
@TheoSteiner with data that arrives at different times.
@TheoSteiner And so, for example, you have profile information,
@posva which is the demo that I showed.
@TheoSteiner You might have some information that takes longer to load.
@TheoSteiner And you will have the information of the user
@TheoSteiner be displayed with different user information, actually.
@TheoSteiner But it looks like you're looking at one person.
@TheoSteiner So you have, like, this Frankenstein of information.
@posva So data loaders also are meant to fix that.
@TheoSteiner And no matter what library you use,
@TheoSteiner of course, you need to implement it
@TheoSteiner and I have a big suit of tests that you need to pass in order
@TheoSteiner to say, OK, this is a compatible data loader, but it's there.
@posva It's .
@posva That's really cool that you're trying
@TheoSteiner to verify that the community provides are actually
@TheoSteiner functional data loaders.
@TheoSteiner So given you can use Pina Colada or something like Vue
@TheoSteiner Query inside the data loaders, I wonder how they make data
@TheoSteiner loading, I think declarative is the key word here,
@posva where you define the dependencies.
@TheoSteiner So you can use the same thing for a set of data
@TheoSteiner and you refetch the data whenever the dependencies change.
@TheoSteiner How does it work if I put the declaration inside the loader?
@TheoSteiner Like, does the loader need to know about the state?
@TheoSteiner What do you mean by declaration?
@TheoSteiner Like, what are you putting inside?
@TheoSteiner Like, for example, if I put the use query inside the
@TheoSteiner You mean to create your own version of the query?
@posva Oh, sorry, of the loader?
Speaker_9 Yes.
@TheoSteiner No, it's a bit more complicated than that.
8. Closing Remarks
@TheoSteiner You need to create some custom defined, a query loader, for example,
@TheoSteiner a Tansy query loader that will at some point call use query
Speaker_3 instead of its code.
@posva Oh, OK.
@posva So I see.
@TheoSteiner So it's not as easy as just putting the loader into the query
@posva into the loader.
@TheoSteiner The reason it requires some, it's definitely not easy.
@TheoSteiner Also, because some of the features that I have on the loaders
@TheoSteiner are a bit complex.
@TheoSteiner So if you look at the implementation for the basic loader,
@posva it's a bit shorter.
@TheoSteiner The loader is a bit longer because of the extra features it had.
@TheoSteiner And they can serve as a starting point as well.
@TheoSteiner The reason is I tend to move a lot of the complexity
@TheoSteiner from the user code to the library code as much as possible.
@TheoSteiner I really believe that a good API should be very easy in 80%.
@TheoSteiner It's difficult to explain without the words,
@TheoSteiner but I have another talk where they explain this,
@TheoSteiner what is a good design, a good API design.
@TheoSteiner So for 80% of the use cases, it should be very easy.
@TheoSteiner And then it should get exponentially harder
@TheoSteiner to get things done.
@TheoSteiner So you're sacrificing the real hard work
@TheoSteiner and the real uncommon use cases for a more complex code,
@TheoSteiner but making extremely easy to get what most people need to do.
@TheoSteiner So you have a kind of curve.
@TheoSteiner What was the curve?
@TheoSteiner If you have the complexity.
@TheoSteiner Yeah, how common it is.
@TheoSteiner So on the original act, it goes like, is this very common?
@TheoSteiner And then the vertical acts will be the difficulty.
@TheoSteiner And so it should be something like it goes very low,
@posva and then it goes up really quick.
@TheoSteiner It's like it's, OK.
@posva So it should be.
@posva OK.
@TheoSteiner It's like an inverted logarithmic curve.
@posva Yes.
@TheoSteiner I haven't done a lot of math of this kind for a long time,
@posva so I don't want to say anything.
@TheoSteiner There is some exponential in there.
@posva Yeah, yeah, yeah.
@TheoSteiner So you optimize for the most common use cases
@TheoSteiner and sacrifice the very complex use cases.
@posva I mean, you don't sacrifice them.
@TheoSteiner You just make it a bit harder to implement them.
Speaker_2 Yeah, it's hard.
@TheoSteiner Sacrifice the API, I would say.
@TheoSteiner So the API is not adapted for those cases.
@posva This is very abstract.
@TheoSteiner But the idea is only very, very extremely personalized use
@posva cases.
@TheoSteiner It should be a little bit hard.
@TheoSteiner It should be harder to do, but not impossible.
@posva Not impossible at all.
@TheoSteiner It's just that you roll back to the lower level of the API,
@posva so you have to implement some other things yourself.
@TheoSteiner And so it requires way more work than having a linear API, which
@posva I think is really bad API design.
@TheoSteiner So you said earlier that the Vue community strives to always
@TheoSteiner have one solution for one problem.
@TheoSteiner Is there a similar effort with data loaders?
@posva Yes.
@TheoSteiner OK, so what I mean is, what I said is more,
@TheoSteiner we have official solutions for the,
@posva so we have official solutions.
@posva That's the short version.
@TheoSteiner It means that anything that is really needed in applications,
@TheoSteiner like the core foundation of, the core foundation should be,
@posva we have official solutions.
@TheoSteiner So that's the router and state management alongside Vue.
@posva And then we have things like ESLint.
@posva And there are other things that right now,
@TheoSteiner I don't have any other testing abstraction as well.
@TheoSteiner So we try as much as we can to have official solutions
@TheoSteiner for the things that are important, DevTools as well.
@TheoSteiner And then other specific solutions are created by the community,
@TheoSteiner right, contributed by the community.
@TheoSteiner Next, in the end, is still a community project in a way.
@TheoSteiner Internationalization, it's also a community project, and so on.
@TheoSteiner So data loaders, similar to Pinia,
@posva I like to start projects on the side.
@TheoSteiner That way I can iterate a bit faster on the ideas that are not leveled as,
@posva as official.
@posva And once they get leveled as official,
@TheoSteiner you get a lot more of users that have different, more different,
@TheoSteiner a more, a different demographic, right?
@TheoSteiner So you have people who have different levels of knowledge,
@TheoSteiner and it takes a lot more effort to adapt the documentation,
@TheoSteiner some of the warnings, some of the APIs as well,
@TheoSteiner to match the same level of quality that we have in Vue, I would say.
@TheoSteiner So it's easier to iterate faster during this period with less documentation,
@posva simplified API.
@TheoSteiner So you only have users who are actually quite good.
@TheoSteiner They are, they are more experienced developers, more seasoned developers.
@TheoSteiner And so they're able to give you interesting feedback,
@TheoSteiner which is not the case for some of the beginners developers.
@posva But then once you get official,
@TheoSteiner you need to be able to be easy for beginners as well.
@TheoSteiner And this is way harder than it looks like.
@TheoSteiner So actually, the reason I'm asking is on the Vue Unplugged in Router repository,
@TheoSteiner I looked through the issues and there are quite a few issues from like Vue,
@TheoSteiner Nuxt maintainers.
@TheoSteiner And I wondered, is there maybe a future where Nuxt uses the next generation Vue router under the hood?
@TheoSteiner So it already uses, this is why there are some issues with that.
@TheoSteiner It already uses, but only for the types.
@posva Okay.
@TheoSteiner So in the future, I mean, I talked to Daniel and Sebastian and I'm close to the team anyway.
@TheoSteiner So I try to ensure that there is nothing breaking for them.
@TheoSteiner In the future, it will be better if it could be completely integrated.
@TheoSteiner So for that, I only need to make sure that every piece of API is open enough for Nuxt to work with it.
@TheoSteiner Right now, they don't use the parsing of the file system.
@TheoSteiner So some of the APIs I expose them only for them.
@TheoSteiner So they can actually generate the types based on a structure.
@TheoSteiner And they can build a structure themselves.
@posva I think something like that.
@TheoSteiner So for example, you have an experimental type pages like on Nuxt config that you can set to true.
@TheoSteiner You have type routes, but you don't have the data.
@TheoSteiner You have data loaders and all the features.
@TheoSteiner So I need to build, which is one of the things that I do right now is build the modules to make that easy.
@TheoSteiner But there's still, because they don't use the Vite plugin, there is no parsing on the code.
@TheoSteiner And some of the things happen at build time to make just your life a little bit easier.
@TheoSteiner Like you can even remove the export of the data loaders and stuff like that.
@posva And it will still work.
@TheoSteiner So these are still not working on Nuxt unfortunately.
@posva Actually, a little fun side fact.
@TheoSteiner My team uses a Vue Unplugin router.
@TheoSteiner And I use Vue Unplugin router internally.
@posva And I needed to convince my boss before.
@TheoSteiner Because we were building this SBA and it has been around for a long time.
@posva And it's built on Vue router.
@TheoSteiner And I wanted to like introduce loaders.
@TheoSteiner And I didn't want to like write my own, roll my own version on top of before entry route hooks.
@TheoSteiner So I looked into your library and I was like, oh, this is beautiful.
@TheoSteiner But it had this like small little experimental label on it.
@TheoSteiner So I showed it to my boss and he was like, experimental.
@TheoSteiner That might be a hard, a hard thing.
@TheoSteiner It might change after, after.
@posva So I looked who is using it.
@TheoSteiner And I found it inside the Nuxt dependencies.
@TheoSteiner So I was like, I went to my boss and I was like, look, Nuxt is depending on it.
@posva There's not going to be so much breaking change.
@TheoSteiner But yeah, of course, we knew it was a high risk adventure.
@TheoSteiner But it was better than the opportunity, which was like hand rolling our own stack.
@TheoSteiner No one knows Vue router better than you.
@TheoSteiner So who else to implement it?
@posva Thanks.
@TheoSteiner And most of the API, yeah, it's, it's been good.
@TheoSteiner It's been pretty much stable.
@TheoSteiner Like most of the changes are, are small.
@TheoSteiner The whole structure, like if you use file based routing, the whole file based routing has been pretty much stable from the beginning because it was supposed to be mapped to what Nuxt could do.
@TheoSteiner I didn't want to buy shed too much on the syntax.
@TheoSteiner So there are a few things that do not exist in Nuxt.
@TheoSteiner Well, I mean, just one mainly named named views.
@posva So I had to introduce a syntax for that.
@TheoSteiner And I will probably introduce syntax.
@TheoSteiner Similar to SvelteKit or Nuxt, I think, where you have a page or route with a plus in the front or a dollar or whatever.
@TheoSteiner And these allows you to define sometimes information that are relative to the route.
@posva But you don't have a page.
@posva So you can have nesting of information like meta properties and stuff like that.
@posva And there are a few things that can change, but minor breaking changes.
@posva Most of the APIs, if they are exposed, they are unlikely to change too much.
@posva And everything.
@posva So things that are actually experimental, they are marked experimental again inside of the package.
@posva This is experimental, could change because I'm still having confirm.
@posva I think it's mostly the editable tree, editable route tree or something like that, which is it's a bit too much.
@posva You have to it's supposed to allow users to map to a route array.
@posva So you're able to edit the tree in a way that is similar to how you edited routes array, which is something people used to do a lot.
@posva But.
@posva Because it's done at build time, it gives the type safety.
@posva And so this part of being edited at build time also includes also add sorry limitations like you cannot add a random code into the functions.
@posva For example, anything that is not so realizable cannot be added to the tree.
@posva They have these limitations that you have to overcome in runtime.
@posva But people already already did that.
@posva So they should be able to copy paste that code anyway.
@posva Very interesting.
@posva And for data loaders, I believe they are like one of the more stable.
@posva Parts of the experimental view, which are sweet.
@posva Do you have like an estimate for when they might make it to the official viewer to the official view router?
@posva I don't know.
@posva It's true that in the future I would imagine integrating the unplugging view router or maybe just a VEET plugin.
@posva I know I'm not sure yet of how to integrate everything because I have issues that I can only fix issues with HHMR.
@posva So hot module replacement that can only be fixed for VEET.
@posva And I just don't have the capacity to write the code for how many bundlers do we have like six?
@posva It's just too much.
@posva So Webpack and VEET usually they work pretty much the same.
@posva And as long as people have the same API as VEET, it should be fine.
@posva My goal is probably to include this in view router package at some point.
@posva Not in the package in the repository.
@posva It will still be a separate package that you install, I think, because it's important to keep the separation for major version is just easier.
@posva It's not far from having a stable version.
@posva I think I have a few.
@posva This is just more personal.
@posva I take a lot of time to mark a version as stable way more than other people.
@posva And it's more that with personal life.
@posva I have delayed this a lot, but it's not far from having a stable release that I have like few small changes.
@posva I want to add to loaders improvements, which should not even be breaking changes.
@posva But just in case I have to wait, I have the naming the default naming because you can configure the naming of the routes anyway.
@posva So I wanted to change the default naming maybe to be easy to differentiate from a string path.
@posva So I still need to think a little bit about it.
@posva See what other people are doing.
@posva See if somebody has a better idea.
@posva And maybe sometimes it helps you see things from a different perspective.
@posva And apart from that, I think it's all features and it hasn't had any.
@posva It hasn't had many breaking changes.
@posva I mean, I still had nine breaking changes, right?
@posva Technically, because I had version 10.
@posva I mean, 0.10.
@posva So I do breaking changes.
@posva Since I'm still on 0. something, the breaking changes happens on the minor.
@posva So any minor version is a breaking change, at least sometimes small ones.
@posva To give a comment from a user perspective, the breaking changes have not been very big.
@posva It was very easy to adjust to them.
@posva I'm glad.
@posva I don't even remember anymore what were.
@posva The dialogs did have a breaking change.
@posva They were quite big, but it was necessary because I discovered a big flaw.
@posva I'm trying to check.
@posva What did I have?
@posva I have a breaking change.
@posva It requires your router for 0.4.
@posva Okay.
@posva Okay.
@posva Create router now requires the explicit router.
@posva So it was for TypeScript.
@posva Yeah, it was like I discovered flows and I was like, okay, I need to fix this.
@posva And then eight was a lot of data loaders.
@posva Yeah, it was changing types.
@posva Honestly, the whole type was I felt like it was so fragile at the beginning and also did
@posva relying on the virtual files on V has been a little bit of a roller coaster sometimes
@posva through no longer relative to routes folder.
@posva So this was more like a fix.
@posva Yeah.
@posva I mean, it's not that our fixes technically, but it's like, oh, I could break people.
@posva So let's just, oh, actually, no, there are another many breaking changes because before
@posva I was just doing it for features sometimes.
@posva There are a few like rename five pattern to five patterns because it's, I was an array.
@posva Yeah.
@posva These are small, small changes, but hopefully, yeah, it hasn't had big change, big, big breaking
@posva change for a while.
@posva I think it's June.
@posva No, may, may was the last one.
@posva The big last one.
@posva So I think like, this is probably all the time we've got for today.
@posva Mr.
@posva I guess I can always look myself as if your company uses, uses the sponge, the open source.
@posva I do consider reaching out or for sponsorships.
@posva I'm still looking to find a balance between the open source and freelancing.
@posva And I have very nice options for companies to have a direct connection.
@posva I can direct being able to just talk to me about the issue, the issues they have.
@posva So they can, the developers are usually really happy with these because they can ask very
@posva technical questions or again,
@posva I can help them debug bugs and it saves them hours.
@posva So it's really just worth the money, which is just sponsoring.
@posva You also have courses, right?
@posva Yeah.
@posva I have a mastering Pina course, which is named after Pina, but in reality is very, it's about
@posva stores.
@posva So it helps you out.
@posva It helps you learn a lot about view itself, the composition API.
@posva And yeah, it's very recent.
@posva It has only one year old.
@posva So it's still very, very, very, uh, what's the term not up to date, but relevant.
@posva Yeah.
@posva It's relevant.
@posva No, it's relevant for the currency.
@posva Yeah.
@posva So it's been very, very good.
@posva Like people are like, yeah, I learned so much.
@posva None of these, I never thought about these, never saw these API anywhere else.
@posva
And now I can use it for some, some of my features and it simplifies my code so much.@posva Yeah.
