3 awesome JavaScript frameworks

As a web developer, you could easily work with a new JavaScript framework each day. Frameworks like AngularJS and jQuery are popular and stand out. If you are not willing to experiment, you are well-advised by using them.

If you are looking for something outside the quasi-standards, then it will be hard to find the right things. Here are three which I recently found I liked pretty much. If you have made better choices - let me know in the comments!

MinifiedJS

MinifiedJS is a lightweight alternative to jQuery . I was looking for something like that quite a while, and only found ZeptoJS. Zepto looked good but had no Internet Explorer support when I last checked. Meanwhile it has IE 10+ support, but that didn’t help me that much.

I was a bit sceptic when my friend Simon recommended me MinifiedJS. But it’s great. The syntax is easy to understand for everybody who worked with jQuery and Underscore before. It’s feature complete and “feels great”. For me, it is a framework with batteries included. It lets you manipulate DOM, create Animations, supports Events, Promises and Ajax and so on and so on.

The size is only 8kb, with legacy IE support 9kb. Even then it is smaller than Zepto, which needs 9.1kb or jQuery 2.0 which is huge with 29kb.

Using it is like usual, with some nice sugar:

var MINI = require('minified');
var $=MINI.$;

$(function() {
   $('.work-img').on('click', function(e) {
      var galleryId = this.get('%gallery');
  });
});

In the example above, you would load minified first. If you are not using RequireJS, don’t worry: it’s optional. Just write the line, and MinifiedJS will take care of the rest. In line two, you have the free choice that identifier you want to use for Minified. No more clashes.

As with jQuery, you can wait with running JavaScript until the DOM fully loaded.

Also inspired by frameworks like jQuery, I can catch a click on an element. Inside my event handler, I am instantly in the right context. Nice: with the special “%gallery” I can easily access data-attributes. My HTML tag would therefor look like:

<div data-gallery="1">...</div>

This kind of operators are everywhere in MinifiedJS and make things a lot easier. You can have them for any taste: for CSS classes, styles and much more.

For me, MinifiedJS has replaced jQuery, even when the only source of knowledge appears to be the official docs. That doesn’t bother me that much, as the docs itself are excellent.

ScrollMagic

I was wasting some time with Waypoint to work on some advanced scrolling behavior for my customer. It just didn’t work right, and so I moved on to ScrollMagic.

This little framework gave me all super powers I needed to make scrolling a better experience. Unfortunately, the documentation is far from perfect, and you could doubt some coding decisions made by the ScrollMagic developers.

Nevertheless, if you have made the first steps and accepted things are not that beauty, it works well and reliable.

Here is how it would look like:

var controller = new ScrollMagic.Controller();
var menuContainer = $('.menu-container');

new ScrollMagic.Scene({
  offset: 10
}).on("enter", function () {
  menuContainer.animate({$$fade: 1}, 200, 0);
}).on("leave", function () {
  menuContainer.animate({$$fade: 0}, 200, 0);
}).addTo(controller);

First, you always have to create a so-called Controller. Later you can add various scenes to that Controller. In the case above, I defined the animation should start after 10 pixels of scrolling. When this happens, the “enter” function will be called. If I return to the initial starting point, the “leave” function will be called.

In these functions, I use MinifiedJS to show/hide a div. In other terms, once you start scrolling, the menu will fade in.

Of course, not only offset scrolling is supported. You can easily define your custom hooks and trigger-elements and create pretty complicated things. Check the examples.

Green Sock: GSAP

ScrollMagic supports GSAP very well. This framework is for creating CSS animations. You certainly could use MinifiedJS for some or a lot of the things GSAP does, but in the end GSAP is specialized and in some cases the better choice.

Once you loaded the ScrollMagic plugin for GSAP and the GSAP code itself, you can do things like that:

new ScrollMagic.Scene({
  triggerElement: element
})
.setTween(element, 0.5, {css:{opacity:1}, ease:Power3.easeOut})
.addTo(worksController);

The code above creates a new scene. Instead of defining enter/leave methods, we are adding a Tween. Tweens are GSAP terms for something that counts up numbers (or down). In this case, my element got an initial opacity of 0.7. It’s a bit transparent. When the ScrollMagic scene is triggered, the Tween will be started. Within 0.5 seconds, the opacity would increase to 1, which means: fully visible.

GSAP supports a lot of advanced visualizations. Especially the “easing” is very interesting when demo-ing charts.

Enjoy! And let me know if you have experienced any other cool JavaScript frameworks recently!