Why is Everyone Using Vite?

Поділитися
Вставка
  • Опубліковано 24 гру 2024

КОМЕНТАРІ • 91

  • @adidibrani
    @adidibrani Рік тому +133

    I think the speed alone is the winning factor. CRA takes longer than my wife takes to dress up

  • @arpitdubey5938
    @arpitdubey5938 Рік тому +29

    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.

    • @dealloc
      @dealloc Рік тому +3

      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.

    • @SamualN
      @SamualN Рік тому +3

      I treat the type checker like a linter. I wouldn't run the linter on every file change during dev

  • @emmanuelgenga7421
    @emmanuelgenga7421 Рік тому +1

    For a beginner with frameworks this is an interesting take

  • @laurapeterson146
    @laurapeterson146 Рік тому +4

    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.

    • @awesome-coding
      @awesome-coding  Рік тому

      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.

    • @laurapeterson146
      @laurapeterson146 Рік тому

      @@awesome-coding Thank you.

  • @anunonim
    @anunonim Рік тому +13

    I appreciate a lot the quality of your videos, man! What do you think of React docs hiding Vite inside a little corner?

    • @awesome-coding
      @awesome-coding  Рік тому +8

      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?

  • @bilimlink
    @bilimlink Рік тому +8

    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.

  • @Mehdi-z4g
    @Mehdi-z4g 2 місяці тому +1

    They prefer simplicity and ease of use, even though they are called developers !!. Additionally, many of their projects remain small in scope. This helps explain the trend of developers gravitating towards Vite.

  • @SebaGomez
    @SebaGomez Рік тому +1

    Thanks! [ESP] Excelente vídeo, muchas gracias.

    • @awesome-coding
      @awesome-coding  Рік тому

      Glad you find it useful!Thank you for the kind words!

  • @Ivan-wm6gm
    @Ivan-wm6gm Рік тому +5

    For react devs do you still use Vite or just use nextjs for personal projects? and why?

    • @kevinkelche8478
      @kevinkelche8478 Рік тому +3

      Nextjs (since its full stack) and you can implement Multiple Architectures such as SSR , SPA or ISR.

    • @okie9025
      @okie9025 Рік тому +4

      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.

    • @awesome-coding
      @awesome-coding  Рік тому +4

      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.

    • @eile4219
      @eile4219 16 днів тому

      I use Vite for small sites. Nextjs is probably better for enterprise web applications. Both are fine

  • @VeaceslavBARBARII
    @VeaceslavBARBARII 11 місяців тому

    3:28 Have you tried to write plugins for Vite?

  • @nate32396
    @nate32396 Рік тому +1

    Just converted my CRA app to vite. It was tedious but so worth it. Especially since CRA is all but deprecated.

    • @awesome-coding
      @awesome-coding  Рік тому

      What where the main pain points in the process?

    • @nate32396
      @nate32396 Рік тому +1

      @@awesome-coding getting vite to recognize the contents of my public folder. It wasn’t hard. Just took some time.

  • @Reelworthy
    @Reelworthy 6 місяців тому +1

    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?

    • @JosueRodriguez08
      @JosueRodriguez08 5 місяців тому

      Nothing , people is just craving complexity

  • @gabrielmalek7575
    @gabrielmalek7575 Рік тому +1

    Vite is awesome I talk about it all the time lol

  • @vaisakh_km
    @vaisakh_km Рік тому +3

    Waiting for next 10 exciting build tool to come out...!!!!

    • @awesome-coding
      @awesome-coding  Рік тому

      😂 I can see it happen

    • @Daijyobanai
      @Daijyobanai Рік тому +1

      Shouldn't have to wait long, probably around a week from now.

    • @vasiovasio
      @vasiovasio Рік тому

      ​@@Daijyobanaithe worst thing is that you are not even sarcastic, but telling facts...

  • @ercnshnyt
    @ercnshnyt 8 місяців тому

    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?

  • @Steve-Richter
    @Steve-Richter Рік тому

    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.

  • @youarethecssformyhtml
    @youarethecssformyhtml 7 місяців тому +1

    It's a blessing so I don't have to configure the annoying webpack

  • @filipkovac767
    @filipkovac767 Рік тому

    @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.

    • @awesome-coding
      @awesome-coding  Рік тому +1

      @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.

  • @compilejs110
    @compilejs110 Рік тому +1

    I love vite

  • @RolandAyala
    @RolandAyala Рік тому +2

    +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.

    • @awesome-coding
      @awesome-coding  Рік тому

      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.

  • @TariqSajid
    @TariqSajid Рік тому +1

    please make a video on how to migrate large react script project to vite with react script env

  • @rahuljoshi8331
    @rahuljoshi8331 Рік тому

    How to migrate an enterprise level application built with creat-react-app to vite.

  • @kurtfth
    @kurtfth Рік тому +1

    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😢

    • @awesome-coding
      @awesome-coding  Рік тому +1

      Sorry to hear that. I'm not doing any work on Windows, so I appreciate you mentioning this!

  • @eli-sv
    @eli-sv Рік тому +1

    Vite is lit 😂

  • @luisbrazilva
    @luisbrazilva Рік тому +2

    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.

    • @awesome-coding
      @awesome-coding  Рік тому +1

      Interesting. Could you elaborate, please?

    • @nikilk
      @nikilk Рік тому +2

      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.

    • @luisbrazilva
      @luisbrazilva Рік тому

      @@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

  • @drinkintea1572
    @drinkintea1572 Рік тому

    This dude's voice reminds me of LowSpecGamers idk why

    • @awesome-coding
      @awesome-coding  Рік тому

      I'm not sure if that's a good thing or not, but thanks! :))

  • @MuhammadIbrahim-x3h
    @MuhammadIbrahim-x3h 4 місяці тому

    You have awesome content.I am stuck on a problem plz guide me on
    I am implementing server-side rendering for a datatable (e.g., blog listing) in my Laravel project. I need to create a JavaScript file for this purpose. Should I place this datatable JS file in the public directory? If so, how do I compile the JS file from the resources directory to the public directory using Laravel Vite?Where should be the file placement in the folder structure.
    project-root/
    ├── resources/
    │ ├── js/
    │ │ ├── app.js
    │ │ └── datatable/
    │ │ └── blogListing.js
    ├── public/
    │ └── build/
    ├── vite.config.js
    ├── package.json
    └── ...

  • @raenastra
    @raenastra Рік тому

    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 :(

    • @awesome-coding
      @awesome-coding  Рік тому +1

      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.

    • @raenastra
      @raenastra Рік тому

      @@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

  • @mikeeomega
    @mikeeomega Рік тому +1

    I'll also give you a comment, here it is...

  • @mawill432
    @mawill432 Рік тому

    give us more..

  • @RudyRdx
    @RudyRdx Рік тому +5

    Are You AI ?

    • @awesome-coding
      @awesome-coding  Рік тому +2

      Aren't we all?

    • @Daijyobanai
      @Daijyobanai Рік тому

      @@awesome-coding I'm all A and not much I.

    • @RudyRdx
      @RudyRdx Рік тому

      @@awesome-coding dead lock .....

  • @samarnagar9699
    @samarnagar9699 Рік тому +1

    its VAITEE

  • @Pareshbpatel
    @Pareshbpatel Рік тому

    {2023-12-14}

  • @jwoods9659
    @jwoods9659 Рік тому +1

    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.

    • @acopier
      @acopier 7 місяців тому

      Actually it's the other way around

    • @iamtharunraj
      @iamtharunraj 4 місяці тому

      I haven't used Webpack yet. Is it better than Parcel and Vite?

    • @haha-eg8fj
      @haha-eg8fj 23 дні тому

      @@iamtharunraj webpack was the old standard. 90% of older web projects were built with webpack.

  • @pourlamouvance
    @pourlamouvance Рік тому

    Typescript is the reason i don't use vite

    • @awesome-coding
      @awesome-coding  Рік тому

      Could you explain this please? Vite is ore than a compiler if you are comparing them like that.

    • @pourlamouvance
      @pourlamouvance Рік тому

      Links get deleted, search greenest programming languages and Ryan Dahl talking about typescript in deno as a first regret

  • @sorinuka
    @sorinuka Рік тому

    Vite is getting popular, right?

  • @SnazzieTV
    @SnazzieTV Рік тому +1

    why people keep pronouncing it veet(f-eet) instead of vite (l-ite)

    • @twinlamp
      @twinlamp Рік тому +21

      Go to 1:05 and pause. Read the first sentence on the page.

    • @awesome-coding
      @awesome-coding  Рік тому +2

      🇫🇷🇫🇷🇫🇷

  • @haha-eg8fj
    @haha-eg8fj 23 дні тому

    So it's similar to the Turbopack build tool used in Next.js.