DEV Community

Cover image for Alternative Lightweight JavaScript libraries that could replace jQuery
Ramakrishna Anand
Ramakrishna Anand

Posted on

3

Alternative Lightweight JavaScript libraries that could replace jQuery

Sometimes we need to move on, learn new things and tools to improve our workflow and productivity. You may ask, frameworks like React, Vue is too much for simple use cases like small websites or landing pages. We found two simple, lightweight JavaScript alternatives to jQuery you might find helpful

Alphine JS

Alpine.js is for developers who aren’t looking to build a single page application (SPA). It’s lightweight (~7kB gzipped) and designed to write markup-driven client-side JavaScript.

The syntax is borrowed from Vue and Angular directive. That means it will feel familiar if you’ve worked with those before. But, again, Alpine.js is not designed to build SPAs, but rather enhance your templates with a little bit of JavaScript.
It’s like a replacement for jQuery and JavaScript, but with declarative rendering

Sample Code:

<script src="//unpkg.com/alpinejs" defer></script>

<div x-data="{name:''}">
  <label for="name">Name:</label>
  <input id="name" type="text" x-model="name" />
  <p x-text="name">
</div>

Enter fullscreen mode Exit fullscreen mode

Link

Petty-Vue

petite-vue is indeed addressing a similar scope to Alpine, but aims to be small and more vue compatible. It provides the same template syntax and reactivity mental model with standard Vue. However, it is specifically optimized for "sprinkling" small amounts of interactions on an existing HTML page rendered by a server framework.
petite-vue is around half the size of Alpine.

petite-vue has no transition system (maybe this can be an opt-in plugin). It can also be used without a build step. Simply load it from a CDN:

Sample Code:


<script src="https://unpkg.com/petite-vue" defer init></script>

  <div v-scope="{ likes: 0, disLikes: 0 }">
    <p>
     <button @click="likes++" style="color:green;">&#128077;  {{ likes }} </button>
     <button @click="disLikes++" style="color:red;">&#128078;   {{ disLikes }} </button>
    </p>

  </div>

Enter fullscreen mode Exit fullscreen mode

Link

Sentry blog image

Identify what makes your TTFB high so you can fix it

In the past few years in the web dev world, we’ve seen a significant push towards rendering our websites on the server. Doing so is better for SEO and performs better on low-powered devices, but one thing we had to sacrifice is TTFB.

Read more

Top comments (0)

Heroku

Simplify your DevOps and maximize your time.

Since 2007, Heroku has been the go-to platform for developers as it monitors uptime, performance, and infrastructure concerns, allowing you to focus on writing code.

Learn More

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay