Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/shyjal/essential-frontend-tools-frameworks

A curated list of Tools, Libraries and Frameworks essential for Frond-end developers.
https://github.com/shyjal/essential-frontend-tools-frameworks

frameworks-essential frontend frontend-framework javascript

Last synced: about 2 months ago
JSON representation

A curated list of Tools, Libraries and Frameworks essential for Frond-end developers.

Awesome Lists containing this project

README

        

# Essential-Frontend-Tools-Frameworks
A curated list of Tools, Libraries and Frameworks essential for every Frond-end developer.

For more elaborated list goto [Frontend Dev Bookmarks](https://github.com/dypsilon/frontend-dev-bookmarks) by dypsilon

# JavaScript

**Frameworks**

- [AngularJS](https://angularjs.org/) ( The Superheroic MVW )
- [Meteor](https://www.meteor.com/) ( Client + Server )
- [EmberJS](http://emberjs.com/) ( Simple templating, used by yahoo, groupon )
- [Backbone](http://backbonejs.org/) ( Lightweight, fast )
- [Knockout](http://knockoutjs.com/) ( Simplify dynamic JavaScript UIs with MVVM )

**UI Frameworks**

- [ReactJS](http://facebook.github.io/react/) ( The V in MVC, Fast dom manipulation with Virtual dom )
- [Famo.us](https://famo.us) ( Hardware accelerated engine )

**Libraries**

- [jQuery](http://jquery.com/) ( Dom manipulation specialist )
- [ZeptoJS](http://zeptojs.com/) ( lightweight jquery )
- [PrototypeJS](http://prototypejs.org/) ( Modifications in standard JavaScript and Dom functions )

**Utility libraries**

- [Underscore](http://underscorejs.org/) ( Adding additional features to JS )
- [Loadash](https://lodash.com/) ( Also called as high performance underscore )

**Other Libraries**

- [RequireJS](http://requirejs.org/) ( Include modules to your application )
- [Modernizr](http://modernizr.com/) ( Feature detection )
- [Normalize.css](http://necolas.github.io/normalize.css/) ( Handle styles for different browsers the html5 way )

**Productivity boosters**

- [Grunt](http://gruntjs.com/) ( Task automator )
- [Bower](http://bower.io/) ( Package manager like npm )
- [Gulp](http://gulpjs.com/ "new") ( Automates work flow )
- [Yeoman](http://yeoman.io/) ( Builds scaffolds to start with )

**JS Preprocessors** ( Compiles into normal js : less repetition, more manageability)

- [Coffeescript](http://coffeescript.org/) ( The golden rule of CoffeeScript is: "It's just JavaScript" )
- [Typescript](http://www.typescriptlang.org/) ( Typed superset of JS from microsoft )

**Mobile specific**

- [Ionic Framework](http://ionicframework.com/) ( More like angularJS+Bootstrap for mobile)
- [jQuery Mobile](http://jquerymobile.com/) ( If you know jquery you already know this )
- [Sencha touch](http://www.sencha.com/products/touch/)
- [HammerJS](http://hammerjs.github.io/) / [QuoJS](http://quojs.tapquo.com/) ( Better touch event handlers )

# CSS

**CSS Frameworks**

- [Bootstrap](http://getbootstrap.com/)
- [Foundation by zurb](http://foundation.zurb.com/)
- [HTML5 Boilerplate](https://html5boilerplate.com/) ( Opensource starter template containing best practices )

**CSS Preprocessors** ( Compiles into normal css : less repetition, more manageability )

- [Sass](http://sass-lang.com/)
- [Less](http://lesscss.org/)

# General

**Web components**

- [Polymer](https://www.polymer-project.org) by Google
- [WebComponents](http://www.webcomponents.org)

**UI kits**

- [Dojo](http://dojotoolkit.org/)
- [KendoUI](http://www.telerik.com/kendo-ui)

**Graphic**

- Visualization
- [ThreeJS](http://threejs.org/) ( Javascript 3D library)
- [D3](http://d3js.org/) / [C3](http://c3js.org/) ( Canvas based rendering for data intensive apps )
- [Raphel](http://raphaeljs.com/) ( Svg based )
- [Paper.js](http://paperjs.org/)
- [amCharts](http://www.amcharts.com/)

- Animation
- [Move.js](http://visionmedia.github.io/move.js/) ( jQuery like animation with css3 transitions )
- [Velocity.js](http://julian.com/research/velocity/) ( Best of jQuery and CSS transitions combined )
- [Animate.css](http://daneden.github.io/animate.css/) ( Animate with css classes )

**Nice to know**
- [How Javascript works in browser](https://www.youtube.com/watch?v=8aGhZQkoFbQ)
- [Browser Diet](http://browserdiet.com/en/)
- [You might not need jQuery](http://youmightnotneedjquery.com/)
- [Introduction to webcomponents](https://www.youtube.com/watch?v=fqULJBBEVQE)
- [Yeoman grunt bower basics](https://www.youtube.com/watch?v=gKiaLSJW5xI)

# Useful stuffs
- [SubmlimeText](http://www.sublimetext.com/) / [Brackets](http://brackets.io/)
- [Chrome Dev tools](https://developer.chrome.com/devtools) / [Firebug](https://addons.mozilla.org/en-us/firefox/addon/firebug/)
- [JSBeautifier](http://www.jsbeautifier.com)
- [JSLint](http://www.jslint.com)
- [Google fonts](http://www.google.com/fonts/)
- [JSfiddle](https://jsfiddle.net/)
- [CodePen](http://codepen.io/)
- [Responsinator](http://www.responsinator.com/)
- [FontAwesome](http://fortawesome.github.io/Font-Awesome/)
- [Fontello](http://fontello.com/)
- [BrowserSync](http://www.browsersync.io/)
- [Postman](http://www.getpostman.com/)