All about JavaScript – Part I – Logical Concepts and Basics

So, I thought I could, at least, try and make ‘Learning Javascript’ a little easier, by providing my point of view of it. This is first part of the series. And, I will get straight to the concepts.

JavaScript is one of the 3 primary languages, used for front-end development (other two are HTML and CSS).

Why did JavaScript come into existence ?

WebPages are traditionally meant to be interactive to a User. Simply put, a User will submit a Request, or will perform an Action, and the Page will get updated accordingly. The User will again perform an Action, and the Page will be updated again.

Before JavaScript, this ‘update’ happened at the Server. This means, that a User performed an Action, a Request was sent to the Server. The Server would generate another Page accordingly, and send back to the User.

But this had a few fundamental problems :-
1) Every Request was sent to the Server and hence the process was very slow for the User.
2) If a User made a mistake, this meant, he/she had to repeat the whole process again. Not a very good User Experience. Even if the Server handled this, the process, again, was very slow, and sometimes, pretty irritating.
3) Because only Server was capable of ‘changing’ the page, all overhead was at Server-level. So, even if a small part of the whole page needed to be updated, the whole page still needed to be generated by the Server. Hence, not a very Flexible and Scalable Product, and wastage of Server Resources.

So, we created JavaScript.

The idea was simple, move page updates, which really didn’t need Server interaction, or limited update to the page, to be moved to the Browsers. This would mean faster WebPages, and less load on Servers. A win-win for all.

Some important pointers about JavaScript are :-

1) JavaScript is single-threaded
This means, that, there is always going to be a single main thread for executing any JavaScript on page. That has changed after the introduction of Web Workers, but more on that later.

2) Because JavaScript is single threaded, it works using Event Loop and Message Queue
All “Executable Code” is added to the message queue, and gets executed when its turn comes. Again, more on this in later parts.

Let us explore the powers of JavaScript in Part – II.

Gradle Tasks for JavaScript and CSS Minification and Combination using ThreadPoolExecutor for Parallel Execution

This is my first post for this blog. And, I am going to start with a posting a task I created for Gradle, for minification and combination of JS and CSS, that too using a ThreadPoolExecutor for faster minification and combination
. Following is an explanation of each section, and finally there will the complete code that you would have to add to your Gradle Build Script. So, lets go!

First, we include the important stuff to start :-

Now, we will write a snippet, which will represent all JS files in a code base :-

This will find all JavaScript files, recursively in all underlying folders. Let’s write something similar for CSS, shall we ? :-

Easy ? Good!

The idea for minification and combination, is that, we need to create a task for each file for minification, and each section for combination. That is, we create tasks dynamically, as follows :-

All tasks here will be created with a name jsMinifyTask_{index}. Again, one task per file for minification.

Something similar for CSS :-

This code will create tasks for minification of CSS files, one at a time.

For combination, I wrote a small JSON structure to make it easy for maintenance. The JSON is :-

This is pretty self explanatory, I guess ? Add up more to make more combined files.

The code which uses this to create tasks for combining files is :-

So now, we are done with creating tasks, and it is time to make them run! I created a wrapper task for this. This will minify all files parallely, and then combine them, parallely. Makes it faster 😉

Runtime.runtime.availableProcessors() will find all available processors and use them.

All that is required now is, writing a simple ‘dependsOn minify’ in the tasks you already have in your build scripts. Voila!

For reference, the complete code is :-

Let me know in comments in case you have problems 🙂