The Four Javascript Libraries We’ve Been Waiting For

When navigating the vast ecosystem of Javascript libraries, it’s easy to get lost among the hundreds of open-source tools available. Whether you need something as simple as an image slider, or a more complex MVC library, it’s important to consider the best resources to build a successful project.

Recently we’ve been very interested in unique forms of interaction; from touch-animation libraries, to simple mobile utilities like “pull-to-refresh.” We are constantly looking for precise tools that allow developers to create great user experiences. In this post we’ve collected four new Javascript plugins that have really captured our attention.

___

Screen Shot 2014-02-14 at 3.17.00 PM

Paper.js
A library that creates complex vector animations in a simple, more accessible way

Paper.js is robust yet easy to get started with. If you’ve ever tried to draw complex vector shapes in an HTML canvas using native Javascript, you probably know how frustrating it can be. Paper.js aims to make this process a little less daunting by offering “…a clean Scene Graph / Document Object Model and a lot of powerful functionality to create and work with vector graphics and bezier curves, all neatly wrapped up in a well designed, consistent and clean programming interface.” *

We have implemented this functionality offered by Paper.js in our projects. It makes getting off the ground easy; in under an hour, we are able to get a simple, yet interesting experiment working in our browsers and tablet devices.

___

thumbnail-1

ThreeSixty
A jQuery library that creates draggable 360 views.

Working with 3D in the browser can be challenging, especially because the options are limited. Flash, the most obvious and widely used tool for web animation, is not supported in iOS and requires a third party plugin. Flash’s limitations are what make the ThreeSixty plugin a great alternative. It is not only  supported in iOS but also takes a new approach to animation in web applications.

The magic behind ThreeSixty is its simplicity: take a simple mouse event script, combine it with a collection of frames and an index value, and suddenly, it all comes together. The result is pretty impressive performance specs. Since there’s not much JS animation happening, this solution is very lightweight for a [pseudo-] 3D interaction.

Try utilizing this library when using 360 panoramic views, rotating product images, or creating an animation of your cat dancing. The possibilities are endless!

___

Screen-Shot-2013-11-01-at-11.50.02-AM

Hook.js
A library that brings the “pull-to-refresh” functionality to your web apps.

Apple’s iOS is known for being the most innovative mobile operating system to date. It is responsible for creating new standards in user interactions that are intuitive and expected in all native apps. Some examples include mobile style navigation, swipe events and the idea of “pull-to-refresh”, which has become a natural action on  mobile experience.

Hook.js is ideal for bringing “pull-to-refresh” into your web applications. To bring the best experience to our users, it is vital that we use tools like Hook.js to create interfaces that incorporate emerging UX standards. Use this library to capture the pull event, then do whatever you want in the callback (reload the page; do an AJAX call; or just rerun some Javascript and update the view).

___

Screen Shot 2014-02-14 at 2.31.26 PM

Stalactite
A library that reflows content without using “position: absolute;”.

 Stalactite is a very cool jQuery plugin that allows you to reflow content within a container or the viewport. This functionality was first popularized by Metafizzy with their plugin Isotope; however, this library holds more promise for production code, as it interacts well with other static content on the page. In comparison to Isotope, Stalactite does not position the child elements absolutely, but uses “position: relative” instead, allowing for content to flow naturally without conflicting with static elements on the page.

The beauty of Stalactite is its logic. Instead of doing all of the positioning math before rendering the page, the Stalactite plugin does all of the math as each element is added to the DOM. The options provided allow for both fixed-width, and fluid layouts.

___

The variety of Javascript plugins available to use on any given project is extensive. To  produce quality work, it is critical to find the right tools. We are fascinated by resources that enable us to optimize production. Innovative tools like these Javascript libraries are what drive the future of web development.

Looking for great resources? Here are a few sites to get you started:

alistapart.com

smashingmagazine.com

net.tutspus.com

dailyjs.com

javascriptweekly.com

View Archive