Guide to Vite JS – Modern Fron-End Development Tool

1
(No Transcript)
2
A Comprehensive Guide on Modern Frontend Tool

• To advance the performance of online applications
  and developers' experience, new technologies must
  be adopted. Evan You, the sole creator of the
  VueJS framework, introduced Vite JS as a response
  to it.
• Inspiring features of Vite.js, a cutting-edge
  front-end development tool, include a rapid
  server start, a hot module replacement (HMR) that
  replaces modules in a flash, rich functionality,
  an optimised build, server-side rendering, and
  more.
• To assist you and to understand why Vite is one
  of the greatest front-end build tools, we've
  created an article that will walk you through
  what Vite JS is, how it functions, and its
  special features.

3
What is Vite JS?

• The outstanding build tool Vite is exclusively
  accountable for greatly enhancing the front-end
  development experience. This quick development
  tool, which primarily emphasises speed and
  performance, aids in the smooth construction and
  maintenance of online applications.
• The main purpose of Vite JS is to build a
  development environment that is effective for
  working with popular frameworks like Vue, React,
  and plain Javascript programmes. By using
  Vite.js, you can obtain a rapid and responsive
  development tool with a fully flexible API right
  out of the box.

4
Top Features of Vite JS

• Lets see the features of using Vite over other
  popular module bundlers to improve your business
  applications performance.
• Faster Builds
• Framework-agnostic
• Improved CSS Support
• Experimental Support for Server-side Rendering
• New Plugin System

5
(No Transcript)
6
How Does Vite Works?

• It was difficult to deal with the browser support
  for Es6 modules during the launch of the ES
  modules in ES2016. Many browsers now frequently
  offer ES modules in native form to address that
  problem. It implies that import and export
  statements can now be defined natively.
• In addition, you have complete freedom to
  directly import inside your HTML file by simply
  stating that you are importing a module using the
  type module attribute in your script tag, as
  shown below
• ltscript type"module" src"filename.js"gt lt/scriptgt

7

• And if I talk about ViteJS documentation, ES
  import syntax is served directly to the browser
  in our source code.
• With the help of the native-supported browser is
  solely responsible for parsing them
  automatically, making HTTP requests for each
  import.
• On the other hand, the development server
  typically receives HTTP requests from the browser
  and executes any necessary code changes. Simply
  put, it boosts the application speed and makes
  the Vite server insanely fast.

8
Why Should You Opt For Vite?

• After having a look at how Vite works, its time
  to see the primary reasons for using Vite, a
  leading front-end build tool.
• Hot Module Replacement (HMR)
• Bare Module Resolving
• On-demand Compilation
• Configuration Option

9
How to Create a Vite Application?

• Below are the step for creating a Vite
  application. Lets get started.
• The command for creating a Vite app is npm create
  vitejs_at_latest new-vite-app. Once you type this
  command, youll see the screen with different
  options like

10

• Here, new-vite-app is the name of the project. As
  you can see, there are a lot of template options
  available to create an application. Currently,
  well go with the React framework.
• Now its time to run the following commands to
  complete the Vite installation.
• gtgtcd new-vite-app
• gtgtnpm install
• gtgtnpm run dev
• Once you run these commands, youll see a URL for
  your Vite application.
• There you go. Congratulations, youve made it
  possible.

11
Vite 4.0 New Features and Upgrades

• At Qcon International Software Development
  Conference, Vite 4.0 release date was March
  2729, 2023. So, if your next question is whats
  new in Vite 4.0?, Ive come up with major updates
  introduced in Vite version 4.0.
• Vite 4.0 comes with advanced vite.new
• With the help of the command, pnpm create vite,
  you can easily create a new vite project with any
  framework. Alternatively, you can use vite.new to
  open a standard template online.
• Moreover, you can also run the command pnpm
  create vite-extra to get access to different
  templates directly from other available
  frameworks.

12

• Vite 4.0 introduces a new React plugin using SWC.
• One of the best alternatives for React projects
  after Babel is Speedy Web Compiler (SWC). So, if
  youre dealing with the implementation of React
  Fast Refresh, SWC is the right option for your
  business project.
• Here, we are talking about Vite 4.0, so two
  advanced plugins help you deal with React
  projects _at_vitejs/plugin-react and
  _at_vitejs/plugin-react-swc (new).
• Vite 4.0 are fully compatible with modern
  browsers.
• By default, Safari 14 is the browser that is
  considered to be a modern browser build,
  especially for wider ES2020 compatibility.
• So, you can efficiently use BigInt and nullish
  coalescing operator for modern builds without
  transpiling.

13

• Environment Variables with Vite 4.0
• Vite 4.0 is the latest version that uses dotenv
  16 and dotenv-expand 9. So, for example, you need
  to wrap value with quotes if you have a value
  including or .
• -VITE_APPxyza bc
• VITE_APPyzab cd
• Apart from these features, there are some other
  major upgrades like
• Vite 4.0 allows you to import CSS as a String.
• With its environmental impact, Vite 4.0 plays a
  vital role in enhancing the app installation and
  increasing Vites packaging size.
• To provide better performance with collaborators,
  Vite Core and vite-ecosystem-ci make your vite
  development process a smooth one.

14
Conclusion

• I trust that you now have a clear understanding
  of what Vite is and how it significantly improves
  the developer's experience. When compared to
  other front-end build tools like Parcel and
  Snowpack, Vite is simpler to set up and requires
  less effort to use.
• If you were to ask me personally, I would
  personally choose Vite JS over other built-in
  tools, especially if I wanted to stay away from a
  framework that used minified scripts and styles.
• Contact Albiorix Technology if you need front-end
  development services. Our team of enthusiastic
  developers works hard to deliver the best IT
  solutions available.

15
THANK YOU
Contact Us (91) 991-308-8360 / 1 (912)
528-5566 inquiry_at_albiorixtech.com livealbiorix.te
ch For More Information Visit Us
At www.albiorixtech.com