Vue CLI Alternatives and Q&A

[00:00:00]
>> Okay, so I've talked a lot about the Vue CLI and why it's awesome. There are many other things that we can go into, I mean, people have whole workshops and stuff dedicated to this. But I also want to acknowledge the fact that Vue CLI is not perfect for every scenario.

[00:00:12]
Like a lot of things we discussed today, there are gonna be times where the things I'm recommending won't necessarily make sense given your context and the problem you're trying to solve. And so the main examples when it comes to alternative to Vue CLI is for example, micro-frontends. This is becoming more of a big thing as we have a lot of legacy architecture that it already works but let's say you only need a little bit of dynamic functionality.

[00:00:35]
Migrating your whole app or building all of it n Vue CLI would honestly be overkill and so in that case I would recommend using the CDN import as well. Think of it like a jQuery import, you drop in the helper function and then you make the little bit on your application that needs to have that view functionality and then leave the rest alone.

[00:00:55]
So micro-frontends are a great example where typically Vue CLI's not the best use case. Another example where Vue CLI doesn't make sense is for legacy migrations. So I know a lot of people we deal with legacy code bases that have been on Ruby on Rails or you know, some PHP framework for a long time.

[00:01:15]
And so, a lot of us as developers want to leverage the latest and greatest but what happens is that when we do that, a lot of times it doesn't align necessarily with product because they want to ship new features and they need to get stuff to the users.

[00:01:28]
And so in those scenarios, rather than saying, hey, can we stop feature development for a month while we migrate our legacy app to Vue, right? Most stakeholders are not going to buy into that because again, that's a developer ergonomic and so they're not as concerned with those things.

[00:01:43]
Instead, what you can do is this is where the CDN is extremely useful, because you can bring on the CDN package of Vue just like you would in a micro-frontend. And this way, you would slowly build features with Vue, basically progressively migrating the legacy app over time until it makes sense, when you have basically most of the pieces put together and most of the thing in Vue.

[00:02:06]
Then you can probably make the case that, hey if we just spent a week or two on this, a few of the developers can go ahead and actually move it over to Vue CLI and we'll have the full build pipeline. And if you're wondering, does that really work at scale?

[00:02:19]
100% it does, because Git lab is probably the proverbial example at this point of doing this, because they were on Ruby on Rails system, and they needed to migrate over so, or sorry, they wanted to migrate over. And what they did is exactly that, they dropped in the CDN and just kept progressively migrating certain pages, and not even just pages, certain pieces on the page until one day, a lot of pieces of Git lab are actually on Vue CLI now.

[00:02:44]
So it does work at scale. And finally, when it comes to things like server-side rendering, and you basically need more assistance on this piece, this is where instead of Vue CLI, I would highly recommend checking out Nuxt. And so Sarah Dresdner has her introduction to Nuxt course that you can check out on frontend masters.

[00:03:05]
But Nuxt is definitely a framework to keep in mind as far as an awesome framework that takes what already makes Vue great and then gives you even more built-in things. That allow you to focus on building a cool application, but then taking care of things like server-side rendering, progressive web apps those sort of things.

[00:03:23]
So definitely check that out as an alternative. So the question we have here is, how do I feel about Vite? So also some people pronounce it Vite, I guess a little bit of trivia, is that like Vue it's based on a French word, and Vite in French means fast.

[00:03:39]
And so Evan's been working on a new project called Vite. Which is basically, an ESM bundler that allows you to basically compile your application and just a different way of approaching Build Tools, rather than say, for example, Webpack. And so while Vite and to be honest, I think a lot of frameworks are exploring this concept right now.

[00:03:59]
It lacks the, it's still a new idea that people are pushing and trying out the limits on. But a lot of times when it comes to enterprise level applications, let's face it, we have a lot of dependencies. And while it be great to be on the cutting edge of things, we do need things to be stable.

[00:04:16]
So I think for anyone looking to do, again, if you're talking about production grade level apps. I would recommend sticking with Webpack, because the ecosystem is very solid there's a lot of support for it. But as far as like side projects and playing around with Vite and other sort of build tools that can take render time down from seconds to hundreds of milliseconds, definitely worth playing around with.

[00:04:37]
But as far as production app goes I don't think it's quite at that level yet.
>> Is the Vue CLI extendable? So if our organization wanted to make our own configuration that we wanted to replicate.
>> So the question here is, is Vue CLI extendable? And so yep, the short answer is yes.

[00:04:59]
When it comes it comes to Vue CLI, basically think of it as the preset, that allows you to do what you mostly want to do, right? Which solves most of your use cases but at the end of the day, it still has a Webpack underneath, and you can extend upon the configuration, to whether do custom imports, or reconfigure things.

[00:05:17]
And so true to Vue's ethos we wanna give you just enough to get you up and running for most of the scenarios you're solving for, but in case you need an escape hatch at Vue CLI can totally allow you to do that.
>> Is Vite comparable is Snowpack?

[00:05:30]
>> Another question we have is regarding Vite and whether it's similar to Snowpack. And so yeah, after listening to one of Evan taught recently, yeah, so both of them were kind of conceived in parallel without knowing the existence of one another. So yeah, Snowpack is another example of another sort of exploration of what it'll be like to use ESM as a primary build rather than Webpack.

[00:05:52]
So as additional clarification to the question regarding the extensibility of Vue CLI, the scenario being presented is that what if we wanted to actually constrain down the options, right? So, let me switch over. So one of the things we have here in the Vue CLI is that, so the scenario here is that when you create a new project, that there are basically different presets, so let me just do MVC again.

[00:06:16]
So basically defining the various presets that are available so this can be done out of the box. In the event you wanna basically define what goes in here, so that they can't choose their own. And then to the extent that if someone needs to configure what options are actually included in the Vue CLI.

[00:06:33]
Vue CLI it is open source repo, so I don't see any reason why you couldn't force the repo and then have basically people install your company's version of the Vue CLI. That would then at least touch updates but then you can configure the pieces that you might wanna necessarily maybe restrict down.

[00:06:48]
So something l wanted to mention an extension of our discussion regarding extensibility of the Vue CLI is to mention that it's actually a plug in architecture with Vue CLI. That l sort of mentioned it in the modern mode, sorry, when l was in the Vue UI. But basically what Vue CLI offers when it comes to plug ins is it allows you to have basically have default ways of installing thing.

[00:07:11]
And so you would simply run in this case, so you can see in the docs example for Vue Router you would do Vue add Router. And what that would do is not simply just NPM install the Vue Router but it'll actually go ahead and scuffle different pieces for you as far as what it does.

[00:07:28]
So just to demo this actually, I think it'll be easier if there's a sort of a visual example of this. So here for example, right, we have our production grade view repo and let's say we wanted to add TypeScript. Now typically what you might do is you go NPM, install TypeScript, create your Ts config, and you have to make sure the Vue plugin knows how to watch all your types of builds.

[00:07:49]
But it's actually a lot easier than this with Vue CLI's plugin architecture, you can go vue at typescript. And so it's gonna go through and the plugin architecture allows you to do this sort of further extensibility. So you can write your own and those sort of things but you can see here that it allows me some options for the plugin, right?

[00:08:06]
So in this case, I don't want class style syntax, yep, give me Babel and can go ahead and convert my GS file to TS, sure, go ahead and do that for me, and allow GS to be compiled. You can see that capital N is the default, so I'm gonna go ahead and say no as well.

[00:08:19]
And then skip type checking of all declaration file is gonna go ahead and do that, so that's recommended. And then so it's going to go ahead and invoke the generator, install all the various dependencies, you need to make sure that it works with Vue properly. And then what you're gonna see here now is that we actually have had a bunch of our files change.

[00:08:37]
Vue has not only gone in and created things like our tsconfig, which for anyone who's configured tsconfig from scratch, it's actually a decent amount of work and a decent breath of an API to learn. On top of that, it goes ahead and make sure that various things exists, inside of review app.

[00:08:54]
So you can see that here's the shim file that allows it to tell typescript more about what doc view files are, for example. It's already converted all of our JavaScript files to TS, for example. And it scaffolded even our Hello World here to already swap out the language into the TS and then already use the defined component which we need in order to work with TypeScript when it comes to our components.

[00:09:19]
So these are things that the plugin architecture allows you to do as far as extending the functionality and also helping to, for example, like define conventions. Per the situation we brought up earlier regarding a company wanted more defined conventions regarding how things are done. So, hopefully that's helpful.