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>
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;">👍 {{ likes }} </button>
<button @click="disLikes++" style="color:red;">👎 {{ disLikes }} </button>
</p>
</div>