DEV Community

Cover image for From jQuery to advanced components
Dario Mannu
Dario Mannu

Posted on • Edited on

From jQuery to advanced components

So you're running your successful webiste that's been around for decades using jQuery but you're under pressure by the Framework Mafia to switch under their umbrella?

There may be another option for you that won't involve a whole app rewrite.

You know how in Africa many countries skipped building expensive roads, replacing them with roundabouts, bridges and tunnels and they went from walking to advanced drone deliveries instead?
You can do the same.

Welcome Rimmel.js, a simple UI library that lets you use the most modern composable UI components straight in your existing jQuery applications.
No build tools required, just plain, native Vanilla tagged templates:

const remoteData = fetch('/api/data')
  .then(res => res.json())
;

$('#target').rml`
  Result: <span>${remoteData}</span>
`;
Enter fullscreen mode Exit fullscreen mode

Why bother using components?

If you're not sure, or you've never used components, the key advantage is unparalleled reusability. A component works like a microchip. It does something well, and you can use large numbers of them without limits.

This won't break any of your existing jQuery application, so you can start by just adding one bit at a time, like in the example above.

More tighly integrated support may come in the future, given enough demand. For instance, you might be able to embed $.when() or $.ajax() calls direclty in your templates like this:

const remoteData = $.fetch('/api/data');
const delayed = $.when(...);

$('#target').rml`
  Remote data: <span>${remoteData}</span>
  Async op: <span>${delayed}</span>
`;
Enter fullscreen mode Exit fullscreen mode

Conclusion

Progressively adding reusable components using Rimmel.js can suddenly put your jQuery app at the forefront of technology again, wihout having to perform a full migration. Rimmel runs in any jQuery or vanilla JS application out of the box and brings you the most powerful reactive design patterns available in JavaScript today.

How does this sound? Drop a comment below.

Learn More

Top comments (3)

Collapse
 
benny00100 profile image
Benny Schuetz

lol ... love the term "Framework mafia" ;-)

Collapse
 
werliton profile image
Werliton Silva

Nice

Collapse
 
framemuse profile image
Valery Zinchenko

Looks cool