While programming HTML5-based applications I came along a lot of libraries and good JavaScript projects. In this blog post I want to share a small selection of my favorite libraries that I’m using almost every day especially since I’m involved in creating more and more pure HTML-5 JavaScript, Ajax and HTML + CSS3-based apps and also using server side JavaScript with node.js for several projects. So here are the most useful JavaScript libraries you can use to give a new touch to your projects and websites.
Three.js
I’ve started a small project with Three.js and the LeapMotion last year (I wanted to visualize and manipulate a complex 3D object only over a web browser) and was really impressed by the power of this library. Three.js will let you load and render your 3D content (let’s say a nice OBJ 3Dcar you have) in any WebGL compatible web browser . The workflow is really easy to follow and the learning path is really very quick, especially if you have knowledge in using other 3D engines like min3D, Unity or even Away3D. The principles are the same: a scene – or better said a scene graph -, you add children and some lights and here you have your 3D environment 😉
Don’t think Three.js is kind of experimental just to check how powerful your latest Chrome web browser is! No, even complete games are now implemented using Three.js and once you will have seen this F1-Game demo entirely running with Three.js you will understand why this library and WebGL rock !
And even The Hobbits are using this lib : http://middle-earth.thehobbit.com/
So convinced by the power of Three.js? Then grab your favorite 3D prog export your object and directly publish it on your webpage and WebGL and Three.js do the rest!
Official website: www.three.js
P.S: If you want to read more about how to implement outstanding Three.js games or web-experience you can discover how the team behind the Middle Earth experience have created their unique website check: http://www.html5rocks.com/en/tutorials/casestudies/hobbit/
D3.js: Visualize your data
Box plot? Voronoi, Treemap, sunburst, Node-link Tree, anyone? By taking a look onto the D3.js Gallery you will understand why this library is so cool. This library will pickup your JSON data and with a few lines you will be able to turn awful looking data arrays into a wonderful good-looking interactive visualizations.
https://github.com/mbostock/d3/wiki/Gallery
Official website: www.d3js.org
Flot.js
Want to integrate a chart component with some interactivity – let’s say when you hover over a point to get additional information about a value? Moreover if you are looking for a visualization that can be updated over AJAX you will definitely need this library. Flot.js is imho the best solution to generate graphs and charts and will easily help you to visualize almost any dataset like sensor values coming from a home automation system or temperature from your weather station or even Dow Jones stock values. And of course you can customize it (colors, fonts, interactivity) with a few lines. My favorite chart JavaScript plotting library that works with jQuery.
Official website: www.flotcharts.org
Babylon.js
The first time I’ve heard of Babylon.js, I thought : yet another WebGL library?! The tech demo is really impressive. So what are the differences between Three.js and Babylon.js ? I have the feeling that the whole import work flow from 3D software are better supported. Additionally an online sandbox is available in which you can try out your 3d objects before starting your own project. The debate around which lib is the best one has started on the web : http://www.sitepoint.com/three-js-babylon-js-comparison-webgl-frameworks/
I would say, Babylon.js is pretty young (the first version was released in August 2013) and deserves a chance to be tested: the tech demo are very promising and the fact that user input and some physic engines are directly incorporated (over hand.js and cannon.js) should also be a positive point for game devs.
http://www.babylonjs.com/sandbox/
Official website: www.babylonjs.org
Moment.js: Time calculation without head-scratching
Does your client want you to implement a count-down or a stylish clock working with JavaScript? Or perhaps you need to quickly build a birthday reminder app or to check if the date the user’s has just entered in a form is valid. Or perhaps you are scratching your head to know if the 12 July 1998 was a Sunday or a Monday? If date calculations and temporal arithmetic are not your cup of tea, moment.js is the solution. For me, it’s the best library for validating, manipulating, and formatting dates including time zone support with Javascript. A real must-have whenever you think you must use new Date() 😉 And it will also work with node.js!
Official website: www.moment.js
Mustache.js : Templating made easy
I’m pretty sure that you have faced this situation: for each news post retrieved from your database you’d like to print it out within a given div or span. And here comes the point where you start to “hack” and mix your own for loop code with your data-structure values and logic, ending up with spaghetti code :
for(var counter = 0;counter<articles.length;counter++)
{myOutput ="<div class=\"news\"">" + articles[counter].title + "</div><div class=\"news_conten\t">"+articles[counter].content+"</div>";}
Oww…. This is really bad code and not very easy to maintain. And here comes Mustache.js: you define a HTML document template (with divs, span) and where your data values should be replaced you place a mustache or better said this: {myValue} and automatically everything is done for you.
Pretty nice time saving library and easy to maintain, as you will only need to change your template and not have to re-modify the complete loop. Even companies like Twitter are using mustache and it’s small brother hogan.js (www.hogan.js)
Official website: www.mustache.js
Easel.js
Easel JS (along with the other CreateJS libs) is a nice lib that will allow you to manipulate and turn any HTML5 canvas into an interactive object). You will mainly use this library when you want to develop games or if you want to build some spritesheet based animations and display them. Flash and Actionscript devs will love this lib because the API re-uses some of the principles and class-names and functions that are commonly used in Actionscript (yep BitmapAnimation). CreateJS also offers you several free AIR-based tools like ZOE (http://www.createjs.com/#!/Zoe) or Omega to optimize your PNG export and generate spritesheets out of your SWF when you are using Flash CS 6 to generate your animation.
Official website: http://www.createjs.com
Video.js
A few years ago when you wanted to integrate a video player in a page it was awful, as you needed to check whether flash was enabled, check if theres a video ActiveX component (yes for IE) installed and this was a very painful task. Then with YouTube you had the option of embedding a video directly into your page by only putting an iframe instruction. But what happens if you don’t want to upload your MP4 video on video sharing platforms such as YouTube or Vimeo?
Video.js solves this problem: integrate video.js and upload your MP4 video directly onto your server, specify the path of it in a parameter and voila! Video.js will also generate the timeline bar and all the play pause buttons automatically.
Official website: www.video.js
Popcorn.js
This library is really awesome if you are planning to integrate complex video functionalities on your website or if you need to control an embedded video very precisely. It offers a lot of features like a event-based and frame-based control of YouTube, Vimeo or SoundCloud videos and a very easy integration into any website.
Just imagine that you can now build your own karaoke app or synchronously display subtitles of your favorite video by only using a few lines of JavaScript. It’s also the ideal lib for tutorials or e-learning website and is currently used by http://sketchpad.cc/.
Official website: www.popcorn.js
Quintus HTML 5 game engine
and to finish with something funny, we have Quintus.js, the unique and very easy to configure 100% HTML5 game engine. With this engine you will be able to build your own Super Mario – flavored game. Everything is 100% configurable, and the handling of key-events for desktop and mobile version of your game is also integrated in Quintus.
Official website: www.html5quintus.com
Node.js
JavaScript has also taken a bigger importance on the web, since it can be used to write server-side code without having to learn a new language like PHP or ASP. This is possible thru Node.js – you might have heard this name if you are . I’m personally a big fan of node.js cause it is really easy to implement your own server with own internal routines and it has a bunches (not to say tons) of so-called npms (packages that you can download from the web) in a few seconds. If you are not ready to learn PHP or another server language, node.js is the solution for you!
Official website: www.nodejs.org
Cheerio for node.js
If you are looking for the name of this library on Google you will find it closely linked to the word “web scrapping”. In reality Cheerio is a port of jQuery for node.js. It means you can traverse DOM documents and use functionalities like selectors in your own server without having to use complex substring or regexep stuff : and here comes the magic of Cheerio: you can use integrate it in your own server and scrap a defined webpage: let’s say you would like to get the header text of your favorite sports page: you download the whole page, store it as a document and use the same jQuery syntax you are using for client-side dev to extract the text.
If you are interested in scrapping we pages with node.js you can also use phantom.js
Official website: https://github.com/cheeriojs/cheerio
Phantom.js for node.js
Testing, page automation or perhaps only web scrapping? If you are looking for a handy lib that solves these tasks then Phantom.js is the solution! Phantom.js is used by several well-known Javascript libs (jQuery, ember.js…) to automate their tests and checks if everyhting works like expected without having to have a real physical person in front of a web browser constantly clicking and refreshing the pages. A perfect lib if you want to completely test your website and check if the user’s input is correctly handled.
Official website: http://www.phantomjs.org
Node-YQL for node.js
This lib is really nice, as you will be able to use YQL (Yahoo! Query Language) – which is in some way really SQL-like to get results from several Yahoo! Services like Weather Forecasts or Flickr by only calling one line of code: everything else is done in the background. For Flickr search you will need an API_key, but the weather forecasts and WOEID lookup can be triggered without an API key
Install Node-YQL and enjoy the full power of YQL. This library is particularly interesting if you want to aggregate several results from Yahoo! Services without having to call each each API separately or if you are planing to build a mash-up service.
https://developer.yahoo.com/yql/console/#
https://yuilibrary.com/yui/docs/yui/nodejs.html
Official website: https://github.com/derek/node-yql
CSS-Tricks
Want to know how to make a textured button with a small inset of one px that rotates while passing with your mouse over it? Or perhaps you want to know how to correctly setup a mobile-first template for your client? Then CSS Tricks is a good site for helping you solve these kind of design problems. The authors have an , I’m pretty sure you will find one or two nice Tips even if you are a top designer and think that you know everything about styling a page. And yes IE is also a topic on this page
Official website: www.css-tricks.com
Flexslider by WooThemes
One component that every professional webpage needs is an image slider. The number of pages implementing this feature has grown really fast since famous websites like Apple.com used it. FlexSlider is really easy to use and within a few lines you will get a beautiful slider with controls and nice features such as fade animations and custom navigation options.
Official website: http://www.woothemes.com/flexslider/
Dabblet
We all know js.fiddle (jsfiddle.net) that lets you share some piece of JavaScript code with your friends or to share you’re nice function. With a bunch of pre loaded libraries. Fiddle is very nice for online testing. Dabblet can be considered as the CSS fiddle. As a designer we also know how sometimes it can be complex to test and modify CSS code, reload a page and re-re-re-check that everything looks like expected. With Dabblet you can not only test your CSS code, but also share it and integrate the visual result into your website
Official website: www.dabblet.com
Brackets
Brackets is a nice open source program that will help any web developer in its daily tasks and you will directly understand why. When you are developing you will constantly modify your CSS, your HTML file and your JavaScript files. And then you switch to your browser and press F5 to see if everything works like expected: have you counted how many times you do this in a hour to test if your page is ok. Sure if you have tools like Dreamweaver you have the nice live code preview option: but the license for Dreamweaver costs a little bit money and if you only want to quickly design something, it’s perhaps an expensive solution.
Brackets is certainly the open-source solution you are looking for : not only it provides a powerful live CSS3 HTML editor with a lot of cool plugins like auto completion but you can also modify your CSS or content and through node.js running in the background it will immediately update the website in your favorite browser. There is also the nice feature of “line highlighting”, so you directly know which div or HTML DOM element you are currently editing. Doing a full description of this unique must-have software would be too long, so take your mouse and download this wonderful piece of software.
P.S: Brackets is completely implemented using HTML5 technologies (yes the user-interface is HTML and Javascript powered) and fully uses the power of node.js for live preview updates. It’s one of the best native HTML5 based app around!
Official website: www.brackets.io