True path to become a JavaScript Ninja — II
In the last tutorial we went through the first phase of becoming a JavaScript Ninja, which is learning phase. If you haven’t went through last tutorial, first visit this link and go through that because these three phases are like blocks stacked onto each other. If you truly want to become a JavaScript Ninja you have to follow the path as per described.
After going though my last tutorial, we know pretty much about JavaScript and now we will proceed further.
🔅 Lets continue to Practicing Phase
There is a famous quote by Vladimir Horowitz :
“ The difference between ordinary and extraordinary is practice. ”
In this phase we will try to become extraordinary by practicing JavaScript a lot and learn how to play with a lot of code which is already written in JavaScript ( Libraries ). In this phase we will go through following topics :
- JavaScript Libraries & Frameworks
- Task runners & module bundlers
- Callbacks & Promises
- Arrow functions & Destructuring.
Let’s Start the journey.
👋 Join us in our journey and be a valuable part of our community. We will spread our knowledge by sharing our knowledge and ideas.
⚜️ JavaScript Libraries & Frameworks
As you are now familiar with JavaScript. Its time to build something but wait.. do you have to code each and every thing that will be in your application ? Well fortunately the answer is Big No!!. There are a lot of libraries and frameworks out there which will help you building full-featured application without writing each and every thing on your own.
Lets move one step further and start using libraries and frameworks which will help you building awesome and great stuff.
JavaScript Libraries
You probably must heard about JavaScript libraries. A JavaScript library is a library of pre-written JavaScript which allows for easier development of JavaScript-based applications, especially for AJAX and other web-centric technologies. There are a lot of great developers who have written a lot of *.js libraries and they all are available to us. We can use them as per our requirement. Some of the most famous and kind of necessary javascript libraries are listed below :
- Lodash / Underscore
- jQuery
- ReactJS
- Moment, and a lot more…
Go through each of them and start using them in your application.
⚠️ There are a lot of JavaScript libraries out there, click here to know about them…
JavaScript Frameworks
A JavaScript framework is an application framework written in JavaScript. It differs from a JavaScript library in its control flow a library offers functions to be called by its parent code, whereas a framework defines the entire application design A developer does not call a framework; instead it is the framework that will call and use the code in some particular way. Some JavaScript frameworks follow the model–view–controller paradigm designed to segregate a web application into orthogonal units to improve code quality and maintainability.
⚠️ For complete list of JavaScript Libraries and Frameworks, click here …
⚜️ Task Runners & Module Bundlers
Task runners and module bundlers are kind of necessary if you are building a JavaScript application now. We will cover why we need this but first let us know what they actually are. Lets go through definitions first :
Task runners
A task runner is exactly what it sounds like, a program that can execute tasks based on specific criteria. Common usages are to set up a task that runs every time a certain file is changed (or group of files) so you don’t have to explicitly recompile every time, or to restart a server every time you restart the database.
Task runners helps in concatenating .js files, minifying it, etc.
Module bundler
One major functionality of Module bundler is that they stitches together all modules into a single file (a bundle) before the execution. They concat multiple JavaScript files into one which helps websites load faster. Development leads to a pile of unstructured files regardless of how much you have tried to structure it. Module bundlers are always present at your side to clean up this mess.
- Webpack
- Browserify, etc.
Benefits of using task runner and module bundlers :
- Check Javascript files for errors
- Concatenate other included scripts into one file
- Minify Scripts
- Watch files for changes and rerun tasks as needed
- Run BrowserSync for testing in multiple browsers and devices at once
- Compile Sass into CSS
- Run Autoprefixer on the new CSS to catch any vendor prefixes we may have missed
- Minify the prefixed CSS
⚠️ Dig-deep and learn more about gulp, grunt and webpack. Click here…
⚜️ Promises & Callbacks
Asynchronous code is one of the master powers that JavaScript developers have. JavaScript is always synchronous and single-threaded. If you’re executing a JavaScript block of code on a page then no other JavaScript on that page will currently be executed.
As well as, JavaScript can also be asynchronous like in case of AJAX calls. Functions is treaded as a value in JavaScript and you can pass values to functions as parameters. Here is when callbacks comes into action. You can pass a functions to the other functions and instruct them to execute them whenever you want.
⚠️ Read more about asynchronous executing. Click here. We will dig-deep into this concept in next phase. So, if you have any kind of doubts in your mind regarding asynchronous execution. You can ask me in the comment section below.
Callbacks
A callback function, also known as a higher-order function, is a function that is passed to another function (let’s call this other function “otherFunction”) as a parameter, and the callback function is called (or executed) inside the otherFunction.
A callback is basically a function which you pass with one function as a parameter or you can pass this function further to other functions until you reached at your final result and then execute that function there. It helps us a lot while writing async code.
⚠️ Click here to read more about callbacks.
Promises
A Promise object represents a value that may not be available yet, but will be resolved at some point in the future. It allows you to write asynchronous code in a more synchronous fashion.
A Promise is in one of these states:
- pending: initial state, neither fulfilled nor rejected.
- fulfilled: meaning that the operation completed successfully.
- rejected: meaning that the operation failed.
function doSomething() {
return new Promise( function( resolve, reject ){
if( true ) {
resolve( 'success' );
} else {
reject( 'error' );
}
});
}function onSuccess( response ) {
console.log( response );
}function onError( error ) {
console.log( error );
}var firstPromise = doSomething(); // It will return promise
firstPromise.then( onSuccess, onError );
As the Promise.prototype.then() and Promise.prototype.catch() methods return promises, they can be chained
⚠️ Learn more about promises , click here… or visit MDN
⚜️ Arrow functions & Destructuring
ES6 brings a lot of features with itself. Two of the most important features are arrow functions and destructuring.
Arrow Functions
Arrow functions are similar to other functions but with little modifications in the syntax as well as working. An arrow function expression has a shorter syntax than a function expression and does not bind its own this, arguments, super, or new.target. These function expressions are best suited for non-method functions, and they cannot be used as constructors.
var fun = function( a, b ) {
return a * b;
}// Similar to above functionvar fun = ( a, b ) => a * b;
⚠️ Read more about arrow functions, click here and here..
Destructuring
The destructuring assignment syntax is a JavaScript expression that makes it possible to unpack values from arrays, or properties from objects, into distinct variables.
var a, b, rest;
[a, b] = [10, 20];
console.log(a); // 10
console.log(b); // 20
[a, b, ...rest] = [10, 20, 30, 40, 50];
console.log(a); // 10
console.log(b); // 20
console.log(rest); // [30, 40, 50]
({ a, b } = { a: 10, b: 20 });
console.log(a); // 10
console.log(b); // 20⚠️ Learn more about destructuring, read more…
Add both of these in your arsenal also. They both are much more important than you think. Practice them a lot.
.. That’s All… Its end of Second Phase ! …
About this post
This post is the second instalment to its series “True path to become a JavaScript Ninja”. Next will be on next Monday Morning at 08:00 AM (UTC+05:30). Stay tuned!
Happy Coding !!
If you like this article, please give it some claps 👏 and share it! If you do not like this post or have any type of questions regarding anything that i mentioned in this post. Feel free to ask me. Just post an issue in my “Ask Me Anything” by clicking here.
For more like this, follow me on Medium or Twitter. To ask a Question visit this link. More about me on my website.
Don’t forget to 👆 subscribe our weekly-newsletter service for web hackers. All latest articles and stuff like trending repositories, straight to your mailbox 📬.
