Ever since the advent of HTML5 and ES6, the web is moving forward at the speed of the Millennium Falcon.
While the world was still in awe at Angular’s superpowers, the React phenomenon happened. And while the average corporate Java dev gets over the overwhelming pace of events, Angular 2 and Polymer will be ready to refill their pile of things to be amazed at.
And that is a good thing. It means better APIs, better developer ergonomics, and most importantly, better resulting products.
At work, I often have to develop simple web-based utilities that Do One Thing and Do It Well™. For times like these, I carry a small toolbox that meets my needs in under 20 kB minified and gzipped.
Let’s face it. Even those who still use jQuery, do not use every nook and cranny of it. Zepto, the lightweight jQuery-compatible library, meets most of your needs when it comes to DOM manipulation, event handling and AJAX. Usually, the only time you need the full weight of jQuery is when you’re using one of its add-ons like jQuery UI or jQuery Mobile. In most other cases, Zepto gets the job done just fine.
That being said, using jQuery in 2016 is fine, really. If it works for you, then go use the heck out of it.
You could fill your DOM with AJAX-received data using Zepto alone, but it makes your code look like really delicious spaghetti. This is where (arguably) the simplest templating engine, Mustache, comes in. No nonsense, logicless templates.
I like Mustache because it is simple and works cross-browser. However, it does have a slight learning curve. Some day, when the world stops using Internet Explorer, I plan on replacing Mustache in my toolbox with maybe t7.
Pure is a tiny CSS library from Yahoo! which is surprisingly handy and beautiful for something that’s less than 4 kB. It doesn’t come with all the bells and whistles of Bootstrap, but if you want pretty forms, buttons, tables and grids, go for Pure.
You might ask, why I prefer not to use more robust frameworks which make a far better developer experience.
Blunt answer: because this works.
Reasonable answer: because I’m not building a GitHub. I don’t see the point of adding more kilobytes to an application, unless absolutely needed. Better developer experience is no substitute for better user experience.
These tiny tools are generally enough to build a nice, clean web app that is just a semi-dynamic interface to a fairly robust backend with a solid REST API.
I’m not saying that Angular/React/Ember/Bootstrap/ are useless. I’m just saying, don’t use them just because they are there and they are cool. Ask yourself if you can do the job and still keep your code uncluttered without using them. Aim for less, not more.
“Perfection is achieved, not when there is nothing more to add, but when there is nothing left to take away.”
—Antoine de Saint-Exupery, French Writer
I just posted this on Echo JS, and realized what a perfect example it is of a simple, unfancy web app. They run on just jQuery.
Pedro Canterini developed this nifty Unfancy Starter, which bundles a slightly modified and refined version of the aforementioned toolbox into an easy, preconfigured scaffold.
4 thoughts on “How to Write Unfancy Web Apps”
jQuery & Zepto will forever be relevant! 🙂 (maybe unfancy but hey)
LikeLiked by 1 person
I just went through an exercise of choosing what framework should I use. It’s not for a web application or even a website, but just a web interface to an embedded device (think home router, but not as complicated). I almost felt like I HAD to choose among angular, react, ember, etc. In the end, common sense prevailed and I said screw it, the interface is so simple, plain old jquery is good enough, so what if that’s not leet. I never heard of zepto, but now I will take a look at it to see if I can get it even simpler than jquery. Thanks!
Hi Ed, thank you for commenting.
Zepto is just jQuery, with some parts (intentionally) missing, and it does not play as well with older browsers as jQuery does. You can always switch out one for another without changing your code.
Their is also the new bliss.js by Lea Verou, between jQuery and Vanillajs
LikeLiked by 1 person