'Full Stack JavaScript' as the term says is a development stack where all the components are written or worked with JavaScript. But why full stack JavaScript is gaining so much traction now? The answers lie in the way developers built web applications in past.
A 'Full Stack JavaScript' environment will now employ libraries / Frameworks that can be used by writing the code in JavaScript. But why would we want to do that? For one obvious reason - reusability of human resources. A full stack developer or a team of developers working a on a project with the whole stack in the same language which they are proficient in is always a desired state.
JavaScript a browser specific language would naturally be employed in Web Applications Development. In old days we had 'JavaScript' being used as a client side scripting language - whereas the server code was written mostly in Java, Perl, PHP, C# etc. We again had separate building tools for both the sides.
It was very common in those days to witness embedded script in the html files like the one below
<script>
<?php
if ( $location === 'California') {
?>
document.getElementById("location").text("California")
<?php
}
?>
</script>
As anyone working with JavaScript based web applications today would be in a state of shock and awe after reading this code would also appreciate the advent of modern JavaScript frameworks like Angular, Backbone and Ember and the most common way to talk to the server / database through REST APIs.
The concept of moving the server side rendering to client side rendering coupled with advancements on JavaScript template engines has eased the life of UI Developers by allowing them to write their complete code in just JavaScript.
But this is just half the problem solved. You would still need developers dedicated to backend/middleware development writing code in languages other than JavaScript and although the two teams could share information they won’t be able to collaborate on their code.
To bridge this gap the answer is simple: Put JavaScript on the server
After years of trial and error Node.js emerged. Node.js is a JavaScript interpreter based on V8- a JavaScript to machine code compiler from Google.
Node.js is a standalone compiler that can be deployed anywhere and which would understand JavaScript. Thus allowing us to put JavaScript on the server. Node.js also brings along the concept of Non-Blocking Programming.
Non-Blocking Programming in simple words puts aside time consuming tasks by specifying what should be done once these tasks are completed and allowing processor to handle other tasks in the meantime.
Let us take a look at how this works.
var resultSet = db.query("select * from 'cached_users'");
drawTable(resultSet);
doSomethingElse();
In the above code the function doSomethingElse will not get executed until we have a response from query method of the object db and the drawTable method renders the table. Thus in order to avoid this waste of time - promise / non blocking programming pattern is employed. Take a look at the code below
db.query("select * from 'cached_users'", function (resultSet) {
drawTable(resultSet);
});
doSomethingElse();
The code above would execute doSomethingElse before drawTable as the resultSet would not have been returned by the server by then. This is also known as a callback. Javascript has callback and event loops in-built.
All right, time to cut short the chase. The introduction to Node.js was meant to show the possibility of server side JavaScript. However, this is not a possibility anymore and a huge ecosystem is developing around JavaScript - which means we already have tools/frameworks to write web application using full stack JavaScript. So let us identify the building blocks of a web application stack and then let us talk about the JavaScript options available for each of them.
- Application Logic
- Database
- Server
- Cache Layer
- Client Side Script
- UI Frameworks
- DOM Manipulation libraries - e.g. jQuery
- Utility Libraries - e.g. UnderscoreJS, lodash
- Application Management
- Application Scaffolding + Dependency Management
- Test
- Build
Database
MongoDB
MongoDB is a NoSQL based database which uses JavaScript as its query language but is not written in JavaScript. It stores the information in JSON format thus the JSON objects can be directly saved and accessed from the database.
Server
Node.js
Much has been discussed about Node.js above. Node.js is normally used with componentization libraries like ExpressJS to set up routers and connection with database. There is a Nodejs - MongoDB driver that would allow nodejs to save and retrieve information from MongoDB database in JSON format. Node.js has a huge community around it and thus you will find all the possible third party libraries that you would need while writing code in nodejs.
Client Side scripting
Client side scripting is responsible for managing DOM interactions and maintaining a sync between the database and the view. A lot of research has been done in this area and a lot of MV* (Model-View) / MVC (Model-View-Controller) frameworks+libraries have sprung up.Angular JS, Ember and Backbone are the most prominent and widely used. Let us discuss about Angular JS - as discussion of all the Javascript UI Frameworks is outside the scope of this blog.
Angular JS
A high level framework which not only helps in segregating the code into proper camps of 'Model', 'View' and 'Controllers' but also has many features like dependecy injection, two way data binding, directives, view-controller scope, filters which makes it stand out in the crowd and many developers use it for its shear size of UI functional offerings.
There are a lot of utility functions that are provided as part of some very good written libraries liek underscore and lodash.
Let us take a look at what kind of function utilities they offer us to reuse saving us from rewriting that code.
// Map an array
var originalArr = [1, 2, 3, 4, 5];
var mappedArr = _.map(originalArr, function(datum) {
return datum + 1;
});
console.log(mappedArr);
// Output: [2, 3, 4, 5, 6]
var users = [
{user: 'Ricky', age:25, occupation: 'Cricketer'},
{user: 'Maxwell', age:29, occupation: 'Student'},
{user: 'Brendon', age:25, occupation: 'Cricketer'},
];
var players = _.find(users, {occupation: 'Cricketer'});
console.log(players);
// Output: [ {user: 'Maxwell', age:29, occupation: 'Student'}, {user: 'Brendon', age:25, occupation: 'Cricketer'} ];
These are some very basic code snippets that I have written above - much more complex functional utilities can be found in the docs.
Shown below is a typical architecture of a full stack JavaScript application.
The application management tools like building and testing complete the ecosystem of the whole web application development. We shall be discussing more about it in the next part of this series.