>> All right. To start off, we're gonna talk about the core languages that make up our Vue.js application. And so we're gonna start with single file components, which is probably one of the the backbone of a lot of what makes Vue.js's developer experience. So ergonomic and fun to build on.
[00:00:17] As a quick overview for those who might be new to Vue for the first time. The idea here is that you have these files that have the extension .vue. And these .vue files are what we refer to as, single file components or SFCs, that you'll see often referred to in articles.
[00:00:51] And for those wondering though, this will automatically get like split out a build time into its various pieces, so that it's performant. But as far as the ergonomics of developing with it, single file components have proven to be quite useful as far as keeping the scope of concerns all into one file.
[00:01:26] But as far as production grade level apps, a majority of the bugs often encountered in my experience are often not actually due to type violations. And so the thing about TypeScript, right? Is that while it does a lot to enhance the developer ergonomics of ensuring you're documenting what code is expecting, as we know, TypeScript does not inherently guarantee type safety, right?
[00:02:46] Meaning that when you hover over it, you'll actually be able to see snippets of basically what the types are. And so I'll make sure to include a resource that y'all can see later. But this is something that again is very much to the Vue sort of ethos as far as like, allowing you to achieve the effect of documenting types but not in a way that requires you to like overhaul your entire code base.
[00:03:11] And so for those who have done some research as far as Vue and TypeScript when it came to Vue2, TypeScript was not considered in the original design. So a lot of the ergonomics regarding especially things like Vuex are kind of painful to hack around at the moment. So if your application is already in Vue2, it's probably not worth it to upgrade it to TypeScript at this point because you're probably more in the maintenance mode, and there are less benefits than people think as far as like spending that time to upgrade.
[00:03:42] On the other hand, if you're starting a brand new project from with Vue3, Vue3 has been completely rewritten from the ground up using TypeScript. And so this means that tooling, especially as the ecosystem continues to mature, we'll get a significantly better as far as TypeScript support. And so if you and the team are interested in trying out TypeScript and seeing how it works on a brand new project, I definitely would recommend trying it out on a brand new Vue3 project.
[00:04:23] This means that their familiarity with things as strongly typed languages, these are not as familiar with them. So there is an on boarding cost in addition to just the sheer fact of migrating everything over. So being cognizant of that mental overhead as far as pushing a team forward, pushing a team forward on time is important to consider when making those decisions.
[00:04:46] So we have a question regarding whether or not these like typing applies to proptypes and so in this regard on Vue2 because props already inherently have the ability to give basic types. I think that and custom validators that usually will do the tricks far as typing your props without converting your whole code base into TypeScript.
[00:05:05] But again, if your team does find the value in enhancing the entire application to TypeScript, it certainly can be used with prop types.
>> Discussion with a colleague yesterday, actually, we were wondering why Vue is recommending export default for single file components. And if you're not sure, it's okay, since it just came up yesterday and I saw it in your slide example, I thought I'd ask.
>> Okay, got it. So, there is a question regarding, why Vue, by default, in single file components uses the export default rather than sort of named exports. And so from what I understand, Vue will actually do its part to actually like pull out the name of the component and those things.
[00:05:47] So it does a little bit of optimization as far as helping like sort of name bundles and point them to the right places. So, as far as I'm aware, that's why export default is what we use, by default, lots of defaults on single file components.