While Vue.js‘ popularity continues to sky rocket, there are some alternatives when you want to keep the declarative style but Vue.js is far too much for smaller requirements.
One is Stimulus from the team at Basecamp:
Alpine.js offers you the reactive and declarative nature of big frameworks like Vue or React at a much lower cost.
Listen to Caleb Porizo, author of Alpine.js, talk all about it on this episode of Full Stack Radio.
I was just reviewing an accessibility presentationÂ where the author had an interesting slide on the top 15 UI libraries on GitHub with 1500+ watchers. Here they are with links and descriptions (my own comments in italics):
- impress.js – It’s a presentation framework based on the power of CSS3 transforms and transitions in modern browsers and inspired by the idea behind prezi.com. (GitHub page).
- chosen -Â Chosen is a library for making long, unwieldy select boxes more friendly. Another plugin we love and use in a number of projects.
- jQuery-File-Upload -Â File Upload widget with multiple file selection, drag&drop support, progress bars and preview images for jQuery.
- spin.js -Â An animated CSS3 loading spinner with VML fallback for IE.
- deck.js – Modern HTML presentations (GitHub page).
- Skeleton -Â A Beautiful Boilerplate for Responsive, Mobile-Friendly Development.
- Foundation -Â An easy to use, powerful, and flexible framework for building prototypes and production code on any kind of device.
- showoff -Â the best damn presentation software a developer could ever love (example).
- ajax-upload -Â A file upload script with progress-bar, drag-and-drop (GitHub page).
- isotope -Â An exquisite jQuery plugin for magical layouts.
- Timeline JS -Â Beautifully crafted timelines that are easy, and intuitive to use. This actually looks really cool and very pretty.
- etherpad-lite -Â An Etherpad based on node.js – Our goal is to make collaborative editing the standard on the web.
- ColorBox -Â A lightweight customizable lightbox plugin for jQuery.
Some thinks that jump out at me from the above is that frameworks are very popular and, similarly, prestation frameworks are also very popular. There must be a deep hatred of PowerPoint and Keynote among web developers! The other take away for me is how a very small project – such as chosen – can become hugely hugely popular.
We’ve been minifying and bundling CSS and JS for years to ensure quick page loads of the applications we build. We’ve now generalised, documented and packaged the tool we use for this and released it under a BSD license so others can benefit.
Most web developers know that including lots of JS and CSS files in their sites slow page load times down. Most also know that these files should be minified and bundled into one file on production sites. Most developers don’t do this though. It’s a lot of extra steps in putting your new changes live.
Also, using CDNs or setting expiry times into the future for mostlyÂ static files such as CSS and JS also significantly improves page load as clients will grab these files once and use their local cache until their expire. This also poses issues for web developers that is easily overcome by versioningÂ these files – literally adding a version number to the bundles – for example min.bundle-v6.cssÂ would be version 6 of the CSS minified and bundled file.
We’ve been doing both of these for a long time with the sites we build. We’ve now generalised, documented and packaged the tool we use for this and released it under a BSD license so others can benefit. See our page on GitHub to download this tool and for examples of its use:
This tool will:
- automatically find all CSS/JS files in a given directory namedÂ
xxxÂ is a three digit ordering / sequence number;
- minify these files and create a single file bundle including them in the correct order;
- automatically generate template include files allowing production / development mode (i.e. use individual CSS/JS or bundles based on an application option);
- versioning for those using CDNs, future expiry dates, etc to ensure clients load fresh JS/CSS bundles.
If you use it, please drop us a note to let us know how you get on!Â