javascript resources blog post

JavaScript Resource Directory by Ironhack

Front-End / General & DOM

Front-End / General & DOM

ironhack javascript resource directory jquery

If you’ve worked with JavaScript, you probably know about jQuery. jQuery is a rather larger JavaScript library that makes manipulating the content of pages much simpler than plain JavaScript.

jQuery is used both by a lot of websites, and other projects either incorporate it or build upon it. The reason is simple. jQuery reduces the complexity and amount of code that you need to write.

jQuery
jQuery

Front-End / General & DOM

ironhack javascript resource directory dragula

Have you ever seen a website that allowed you to drag and drop pieces of it around and rearrange it? There’s a good chance Dragula was involved.

Dragula is a library that enables developers to create drag and drop features in their websites as easily as possible. It lays down all of the groundwork for you, so you can focus on applying it to the elements of your page.

Dragula
Dragula

Front-End / General & DOM

ironhack javascript resource directory polymer

Polymer is a different sort of library. It allows developers to create custom reusable HTML elements.

Those elements can be dynamic and interactive. Polymer turns static HTML into something which behaves more like an object oriented language.

Polymer
Polymer

Front-End / General & DOM

ironhack javascript resource directory zpeto

Zepto is a lot like jQuery, but it’s super light weight. It’s built to be compatible with jQuery, and it uses the same syntax, but it cuts out a lot of the unnecessary extras that can slow jQuery down.

It doesn’t have the same constraints as jQuery. Zepto doesn’t worry about supporting legacy browsers or often unused parts of jQuery. It focuses on giving developers what they need, and nothing they don’t.

Zepto
Zepto

Front-End / Animation & Graphics

Front-End / Animation & Graphics

ironhack javascript resource directory animate css

Animate isn’t purely JavaScript, but it works using JavaScript to trigger CSS animations, so it’s still worth including.

This very simple library allows developers to include basic CSS animations with minimal effort.

Animate
Animate

Front-End / Animation & Graphics

ironhack javascript resource directory anime

Anime is something similar to Animate, but it uses a lot more JavaScript and is capable of much more complex animations.

It is able to create custom freeform animations that include more motion in a more natural and, well, animated way. Anime’s animations are fluid and natural

Anime
Anime

Front-End / Animation & Graphics

ironhack javascript resource directory d3

Big data has been exploding over the past few years, and developers need a way to visualize and present that data. That’s where D3 comes in.

D3 is designed to make creating a wide variety of data visualizations easy. It provides functions for making visually appealing and animated graphs using large sets of data. D3 is trusted and stable.

D3
D3

Front-End / Animation & Graphics

ironhack javascript resource directory chart

Chart is very much like D3 but simplified. It can easily create animated and well-designed graphs of a number of varieties.

Chart doesn’t have the same number of options as D3, but it is also simpler to use. It’s fairly lightweight for what it is and what it is capable of. For developers looking for a simple charting solution without the overhead of D3, Chart is a great option.

Chart
Chart

Front-End / Animation & Graphics

ironhack javascript resource directory Velocity

Here is another descendant of jQuery. Velocity re-implements jQuery’s animation functionality without the bloat of jQuery.

As its name implies, the goal of Velocity is speed. Surprisingly enough, Velocity hasn’t sacrificed browser compatibility to achieve its goal. Velocity doesn’t exactly use jQuery’s syntax, but it will immediately be familiar to any jQuery developer.

Velocity
Velocity

Front-End / Animation & Graphics

ironhack javascript resource directory parallax

Parallax can empower developers to create amazing animations that play with visual depth to create 3D like effects.

It can create scrolling animations and create the impression of changing perspective. It handles a lot of the hard animation work for you, so you can focus on implementation.

Parallax
Parallax

Front-End / Frameworks

Front-End / Frameworks

ironhack javascript resource directory angular

Angular is a big deal. It was developed by none other than Google, and for a while, it dominated the front-end JavaScript framework space.

Angular is an MVC framework that developers can use to make front-end web applications using JavaScript. It is relatively simple and serves as an integral part of the popular MEAN stack.

Google made somewhat of a mistake, though. Angular 1 and Angular 2 are different frameworks, so there is no smooth upgrade between them. Make sure you know which you’re working with.

Angular
Angular

Front-End / Frameworks

ironhack javascript resource directory ember

Ember is the Rails of front end frameworks. It’s big, opinionated, and powerful. Ember tells you what to do, and if you follow, you can make some great things easily.

Ember is big, though. It comes bundled with the Handlebars templating engine and all the batteries included. This is awesome for larger desktop web applications but might seriously slow down on mobile.

Ember
Ember

Front-End / Frameworks

ironhack javascript resource directory aurelia

Aurelia is another full-featured MVC framework that makes full use of two-way data binding, routing, and custom HTML components.

It’s a great option for developers looking for a more complete framework along the lines of Angular but without the baggage of the of Angular’s versioning.

Aurelia
Aurelia

Front-End / Frameworks

ironhack javascript resource directory mithril

Want something super minimal? Mithril may be for you. Mithril is a fast no-nonsense framework with many of the options that you’d expect from a much larger project.

As a framework, it looks and feels like regular JavaScript. It’s uncomplicated and uses standard JavaScript functions. Mithril is a great option when you need a framework, but don’t want a lot of overhead.

Mithril
Mithril

Front-End / Frameworks

ironhack javascript resource directory backbone

For another more minimal solution, consider Backbone. It aims to provide the structure needed to build powerful web applications.

Backbone is lightweight with a design that focuses on passing data between models, views, and a database. Of course, it has the existing functionality to make building these components easier.

Backbone
Backbone

Front-End / Frameworks

ironhack javascript resource directory riot

Riot is something a bit different. It aims to bring the component based functionality of React and the ability to create custom HTML elements together.

Riot is a minimal framework alternative. If you don’t need a full framework, but do want reusable components, consider using Riot.

Riot
Riot

Front-End / Frameworks

ironhack javascript resource directory redux

Redux isn’t really a full framework. It’s more of an add-on that you can use with React or another view library.

Redux refers to itself as a state container. It attempts to maintain the state of your web applications and enable them to run consistently.

Redux
Redux

Front-End / Libraries

Front-End / Frameworks

ironhack javascript resource directory vue

Vue can look a lot like Angular, but it’s generally more simple. It’s a front-end MVC framework. It comes complete with routing and just about every feature you’d expect from a front end framework.

Despite that, Vue is lightweight and has a simple learning curve. It is intuitive and uncomplicated, and it’s a smaller dark horse project that’s managing to compete with Google and Facebook. Actually, it’s even included it the popular Laravel PHP framework.

Vue
Vue

Front-End / Frameworks

ironhack javascript resource directory react

Facebook made it’s own front end framework, and that’s React. It’s a favorite among developers because it’s easy to learn and teaches developers. React also has a large and active community of developers.

React is centered around building and using independent components. These encapsulated components are reusable and don’t interfere with one another, making them the perfect building blocks of your applications.

React
React

Back-End / Frameworks

The back end is the domain of NodeJS. Node allows JavaScript to run as a back end language, and it’s incredibly powerful. These frameworks work with Node to enable developers to build robust web applications.

Back-End / Frameworks

ironhack javascript resource directory express

Express is another key component of the MEAN stack. It’s a minimal back end MVC framework built on top of NodeJS.

Express is great for building both full featured web applications and APIs. Because Express is minimal by default you have the choice of how much you want to build, and you don’t end up with a lot of features that you’re never going to use.

Express
Express

Back-End / Frameworks

ironhack javascript resource directory meteor

It’s kind of hard to tell where to put Meteor. It’s actually a full stack framework that provides tools for building both the front end and the back end of your web applications.

Meteor would be most comparable to the entire MEAN stack. It provides everything in one package. That means that while Meteor can be convenient, it can also be somewhat inflexible.

Meteor is a complete toolkit that you can immediately begin building a web application with.

Meteor
Meteor

Back-End / Frameworks

ironhack javascript resource directory sails

Sails is actually based on Express. It’s sort of like Rails for NodeJS. It comes with a lot of work already done when you spin up a project.

It abstracts a lot of the more low-level work like interacting with databases away, making the process simpler. Sails also comes with features like automatically generated REST.

Sails
Sails

Back-End / Frameworks

ironhack javascript resource directory koa

There’s an even more minimal solution than Express. Koa. Is a super minimal back-end framework that can still be used to create web applications and APIs.

Koa only provides a middleware kernel and builds upon Node’s existing HTTP modules. It’s much closer to NodeJS itself.

Koa
Koa

Back-End / Frameworks

ironhack javascript resource directory adonis

There’s another great full featured framework, Adonis. Adonis provides all of the major features that you’d expect from an MVC framework, like routing and ORM for handling database connections.

Adonis aims to build in all of the features that you’d want in just about every project so you can get started building your application faster.

Adonis
Adonis