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

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

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay