A quick look at Vite JS. 💬 Topics: - JavaScript bundlers; - Compiling and Transpiling; - ES Modules; - Working with Vite; - Server side rendering. #javascript
I still remember working on a react project in early 2019, the codebase was large the the local development was slow. I turned off the typechecking in the local environment and relied solely on the vs code ide to help me with the type checking with the good old red squglies, working that way with the code was a breeze.
Thank you for your feedback! I believe they are fighting a loosing battle... I do most of my work in the React ecosystem, and I know everybody hates CRA. Don't get me wrong, CRA was great for a long time, since it was a pain to set up react projects before that. However, nobody can argue that Vite is a way better option. I honestly don't understand why they are just briefly mentioning it in the docs.. it's not like most devs don't know the alternatives. I guess it is a bit weird for them to directly push a tool coming from the Vue space maybe?
Vite (French word for "quick", pronounced /vit/, like "veet") is a build tool that aims to provide a faster and leaner development experience for modern web projects. It consists of two major parts: A dev server that provides rich feature enhancements over native ES modules, for example extremely fast Hot Module Replacement (HMR). A build command that bundles your code with Rollup, pre-configured to output highly optimized static assets for production.
Nice explanation. What did you use to do the animation on the video (like the moving hand icon at 1:07 for example)? I know it's very simple and people have been doing that a lot, but I'm just curious. Is it Premiere Pro or After Effects? Thanks.
Hey! I'm using Premiere Rush (which lacks some of the more advanced animation stuff you see on other videos, but does the job for me). PremierePro does wonders for animations in videos.
@Avesome The SSR example you showed suffers from flash of unstyled content during development, bcs CSS link tags are not populated. I haven't found solution for that. Has anyone? There is no mention of that in docs and it seems like the problem is just ignored.
@filipkovac767 Thank you for outlining this. I will look into the topic further, and come up with a more detailed video on the matter since it is a pretty interesting subject.
In my projects I always make a separate REST API backend using some other framework/language, so on the frontend I use NextJS as a sort of "proxy" to the backend API. NextJS does the heavy work of making your app better for SEO and turning it into an SSR website rather than an SPA.
It really depends on the use case. Next JS is probably the most common React meta-framework these days, but if you need to build a plain and simple SPA without too many architectural constraints I'd still go with Vite + React.
I can code a site in a text editor and console from scratch, build javascript web-apps, facebook-ish sites, whatever... but I cannot understand why I would need vite, why I would want to bundle things, why I would want to put myself in a situation where I needed to compile front-end code, just so I could get excited about HMR. What in the world am I missing?
I am curious about ssg and ssr best practices with vite. I use Nextjs just because of the partial ssg and i am not happy with lack of control. Is Vite has more powerful ssg do you know anything about it?
nobody mention that vite has huge performans penalty development on windows with relatively large codebase like 1k+ files. if it cannot handle by lazy loading, even with slower ssd😢
I get it. It's fast but why is everyone ignoring the huge security risk of exposing your API connections and key because it serves the JSX files in the network activity tab without masking them or encoding them.
I think what Luis was referring to is the ES modules being shipped as such during development as no bundling happens at that point. The code at development phase is as clear and well maintained as the developer wrote it. Hence the lack of obfuscation that bundlers apply was the security risk he intended. This point is however mute as for any release vite actually bundles stuff.
@@nikilk if you inspect the bundle created you will see the api key and anything you store in env exposed. Five what it’s worth, this is something CRA does as well. But exposing the entire JSX structure gives context to how the params were built to harvest from the api and as mentioned, you even have the key. I can’t do screenshots in this thread
I think you might be one step ahead of the bulk of the regular devs with your WASM use case. Not being able to breakpoint in Svelte seems weird though.
+1 vite is awesome (have used w/ several projects, including svelte-kit, solid-start, and qwik-city), but still no match for nextjs dx w/ stateful/live hmr updates, which is gold when iterating on ux.
I think the speed alone is the winning factor. CRA takes longer than my wife takes to dress up
lol
🤣🤣🤣
Don’t be silly. No one who uses CRA Has a wife
😂
No one should be using CRA anyway
I still remember working on a react project in early 2019, the codebase was large the the local development was slow. I turned off the typechecking in the local environment and relied solely on the vs code ide to help me with the type checking with the good old red squglies, working that way with the code was a breeze.
Right. You want typechecking as a separate step from watching, for CI purposes. Let the CI catch errors you didn't catch in your IDE.
I treat the type checker like a linter. I wouldn't run the linter on every file change during dev
I appreciate a lot the quality of your videos, man! What do you think of React docs hiding Vite inside a little corner?
Thank you for your feedback!
I believe they are fighting a loosing battle... I do most of my work in the React ecosystem, and I know everybody hates CRA. Don't get me wrong, CRA was great for a long time, since it was a pain to set up react projects before that. However, nobody can argue that Vite is a way better option.
I honestly don't understand why they are just briefly mentioning it in the docs.. it's not like most devs don't know the alternatives. I guess it is a bit weird for them to directly push a tool coming from the Vue space maybe?
For a beginner with frameworks this is an interesting take
Vite (French word for "quick", pronounced /vit/, like "veet") is a build tool that aims to provide a faster and leaner development experience for modern web projects. It consists of two major parts:
A dev server that provides rich feature enhancements over native ES modules, for example extremely fast Hot Module Replacement (HMR).
A build command that bundles your code with Rollup, pre-configured to output highly optimized static assets for production.
Thanks! [ESP] Excelente vídeo, muchas gracias.
Glad you find it useful!Thank you for the kind words!
Nice explanation. What did you use to do the animation on the video (like the moving hand icon at 1:07 for example)?
I know it's very simple and people have been doing that a lot, but I'm just curious.
Is it Premiere Pro or After Effects?
Thanks.
Hey!
I'm using Premiere Rush (which lacks some of the more advanced animation stuff you see on other videos, but does the job for me).
PremierePro does wonders for animations in videos.
@@awesome-coding Thank you.
I cannot get the chrome dev tools debugger to work correctly in my vite/vue/typescript projects The source maps do not align breakpoints correctly.
@Avesome The SSR example you showed suffers from flash of unstyled content during development, bcs CSS link tags are not populated. I haven't found solution for that. Has anyone?
There is no mention of that in docs and it seems like the problem is just ignored.
@filipkovac767 Thank you for outlining this. I will look into the topic further, and come up with a more detailed video on the matter since it is a pretty interesting subject.
For react devs do you still use Vite or just use nextjs for personal projects? and why?
Nextjs (since its full stack) and you can implement Multiple Architectures such as SSR , SPA or ISR.
In my projects I always make a separate REST API backend using some other framework/language, so on the frontend I use NextJS as a sort of "proxy" to the backend API. NextJS does the heavy work of making your app better for SEO and turning it into an SSR website rather than an SPA.
It really depends on the use case. Next JS is probably the most common React meta-framework these days, but if you need to build a plain and simple SPA without too many architectural constraints I'd still go with Vite + React.
please make a video on how to migrate large react script project to vite with react script env
I can code a site in a text editor and console from scratch, build javascript web-apps, facebook-ish sites, whatever... but I cannot understand why I would need vite, why I would want to bundle things, why I would want to put myself in a situation where I needed to compile front-end code, just so I could get excited about HMR. What in the world am I missing?
How to migrate an enterprise level application built with creat-react-app to vite.
I am curious about ssg and ssr best practices with vite. I use Nextjs just because of the partial ssg and i am not happy with lack of control. Is Vite has more powerful ssg do you know anything about it?
Just converted my CRA app to vite. It was tedious but so worth it. Especially since CRA is all but deprecated.
What where the main pain points in the process?
@@awesome-coding getting vite to recognize the contents of my public folder. It wasn’t hard. Just took some time.
Vite is awesome I talk about it all the time lol
Waiting for next 10 exciting build tool to come out...!!!!
😂 I can see it happen
Shouldn't have to wait long, probably around a week from now.
@@Daijyobanaithe worst thing is that you are not even sarcastic, but telling facts...
It's a blessing so I don't have to configure the annoying webpack
nobody mention that vite has huge performans penalty development on windows with relatively large codebase like 1k+ files. if it cannot handle by lazy loading, even with slower ssd😢
Sorry to hear that. I'm not doing any work on Windows, so I appreciate you mentioning this!
3:28 Have you tried to write plugins for Vite?
I love vite
Vite is lit 😂
Note that Rspack is also coming up, compatible with webpack and also will make module federation as its first class citizen!
Thanks for mentioning it! I'll look into it!
This dude's voice reminds me of LowSpecGamers idk why
I'm not sure if that's a good thing or not, but thanks! :))
I'll also give you a comment, here it is...
I appreciate it!✌️
I get it. It's fast but why is everyone ignoring the huge security risk of exposing your API connections and key because it serves the JSX files in the network activity tab without masking them or encoding them.
Interesting. Could you elaborate, please?
I think what Luis was referring to is the ES modules being shipped as such during development as no bundling happens at that point. The code at development phase is as clear and well maintained as the developer wrote it. Hence the lack of obfuscation that bundlers apply was the security risk he intended. This point is however mute as for any release vite actually bundles stuff.
@@nikilk if you inspect the bundle created you will see the api key and anything you store in env exposed. Five what it’s worth, this is something CRA does as well. But exposing the entire JSX structure gives context to how the params were built to harvest from the api and as mentioned, you even have the key. I can’t do screenshots in this thread
Speed and TS support are nice, but Vite is the reason why I can't easily set breakpoints in my Svelte projects or use WASM in Solid projects :(
I think you might be one step ahead of the bulk of the regular devs with your WASM use case.
Not being able to breakpoint in Svelte seems weird though.
@@awesome-coding maybe it's been fixed, but last I checked, it's got some issues with source maps that makes it difficult to set breakpoints
give us more..
+1 vite is awesome (have used w/ several projects, including svelte-kit, solid-start, and qwik-city), but still no match for nextjs dx w/ stateful/live hmr updates, which is gold when iterating on ux.
I agree. However, one of the many strengths of Vite is it's versatility. As you said, you can use it with pretty much any type of stack.
Are You AI ?
Aren't we all?
@@awesome-coding I'm all A and not much I.
@@awesome-coding dead lock .....
Vite is hard to use and does not give clear errors it's been a pain to buidl my project with i will stick with webpack.
Actually it's the other way around
its VAITEE
VIUUT
Vite is getting popular, right?
Yes it is!
{2023-12-14}
Typescript is the reason i don't use vite
Could you explain this please? Vite is ore than a compiler if you are comparing them like that.
Links get deleted, search greenest programming languages and Ryan Dahl talking about typescript in deno as a first regret
why people keep pronouncing it veet(f-eet) instead of vite (l-ite)
Go to 1:05 and pause. Read the first sentence on the page.
🇫🇷🇫🇷🇫🇷