What is a Full Stack

Full-stack is a complete JavaScript solution which involves JavaScript on both client-side and server-side. There are many full-stack solutions but MEAN stack is the most widely used solution. There are many different variations of the full-stack but it essentially involves:

  • Node.js
  • A database, preferably NoSQL database such as MongoDB
  • Middleware e.g. Express.js
  • Single-page application e.g. Angular.js, Backbone.js, and Ember.js

NoSQL databases

NoSQL databases are schema-less and based on map-reduce. This allows them to be very flexible and highly scalable i.e. ideal for startup projects.

Middleware

The primary goal of middleware is to provide reusable features so that developers don’t have to re-invent the wheel. Features are usually provided as API or utility methods.

Single-page application (SPA)

An SPA is a web application that fits on a single web page but provides a very fluid desktop application-like experience. Several JavaScript frameworks have been developed to facilitate SPA development. The most commonly used are Angular.js, Backbone.js, Ember.js, React.js.

Node.js

For over two decades, the dominant web technologies were based on stateless communications between client and server. Node.js allows real-time two way communication between client and server.

MongoDB

MongoDB is a NoSQL document-based database. It is schema-less, highly scalable, based on map-reduce and above all uses JavaScript as its query language.

Express.js

Express is a web application framework which provides a set of features (APIs and utility methods) as middleware for web and mobile application development

Angular.js

Angular is a Google product and it is Google quality. It is easy to learn but difficult to master. As with any Google product, it improves very rapidly or becomes obsolete very rapidly. If I have to bet on an SPA framework, I would bet of Angular.

Backbone.js

Backbone is a simple framework to facilitate SPA creation. It is ideal for simple SPAs but lack horsepower for complex SPAs. One way to build complex SPAs using backbone is to use is in conjunction with Marionette. This allow every component to be a simple application but the final application to be very complex.

Ember.js

Feature rich and powerful framework for create SPAs. It can easily handle complex SPAs but it does have a steeper learning curve.

React.js

A facebook product that is easy to learn. It allows rapid SPA development and its strength lies in its Virtual DOM which makes the end product run very fast.

Styling

Styling is an important consideration in full-stack development. One way to deal with this challenge is to use styling frameworks such as Bootstrap (http://getbootstrap.com/) or Foundations (http://foundation.zurb.com/). If you need to write your own CSS, it is more efficient to use SASS (http://sass-lang.com) or LESS (http://lesscss.org) than write CSS. SASS and LESS are languages that allow you to write functions which get converted to CSS.

Brackets

Brackets is a free text editor which is well suited for JavaScript development. It is a free open source tool created by Adobe. You should definitely check it out if you are going to be doing any serious JavaScript development.

Testing

Mocha.js Mocha is JavaScript test framework that runs on node.js

<a target="_blank" href="http://chaijs.com>Chai.js Chai is a BDD/TDD assertion library that can be paired with any JavaScript testing framework and work with node.js

Jasmine.js Jasmine is a BDD framework for testing JavaScript. It runs independent of all other JavaScript frameworks.

Other

Grunt.js Grunt is a task runner. It automates repetitive tasks such as compiling LESS files

Gulp.js Automates and enhances workflows

jQuery JQuery is a must learn open source JavaScript library. You need to learn it because it is widely used and you will certainly come across it time and again if you are doing web development. Furthermore, it is used by well known frameworks in some shape and form. For example, Angular contains a mini version of jQuery called jQLite. However, if you load jquery before Angular, it uses jQuery i.e. it has built is support for jQuery.

Other Full-stack solutions

  • Feathers
  • ItemsAPI
  • KeystoneJS
  • Kraken
  • LEAN-STACK
  • LoopBack
  • Sails

Going Forward

Hopefully this wasn't overwhelming and it gave you an overview of what a full stack and what JavaScript technologies are out their and how they fit into JavaScript-based solutions. I would recommend you bookmark this page, and learn these technologies over time. There are multiple choices for everything except node.js. Choose the technologies you like and enjoy programming.