Few quick steps to learn core parts of angular 2+

Actually, there is no quick steps to learn any tools or technology unless we are interested or committed to goal of our learning curve.

I just added this title as a temporary one, nothing came up in my mind suddenly. so simply added.

I’m just going list down the various steps/core parts that should be covered in the learning curve of angular 2+

And the steps are,

Step 1
Learn how to install Node.js & npm, whats the purpose of it, and how to use it

Step 2
What is TypeScript? – classes, interfaces, objects

Step 3
Angular CLI – Understanding project structure/architecture, entry point of application

Step 4
Bootstraping, ngmodules, Angular dependency injection

Step 5
Data binding, Observables & Promises, Pipes, and event handling in application

Step 6
Navigation & Routing,

Step 7
Testing – Karma, Jasmine

Step 8
How to deploy your apps in server

 

I think these are some core parts that needs to learned for building a basic angular application. If you think something could be add up in this, please mention those in comment section.

I’m planning to write each steps in detail in upcoming posts. And the question arrives in my mind or probably some people mind in my network,

  • So this is another how to angular posts?
  • So same story, different post?
  • Before you complete these post, the next version will get release
  • Are people going to read these?

And the answer I tell to myself,

I write to practice my skills, experiment my knowledge, and so on. It makes me happy. So, lets do this.

Happy blogging!

 

P.S. I shall add posts on each steps mentioned above and link those topics to this posts.

The Debouncing technique

Event Listeners are really a great bonus for JavaScript. They help in improving the user’s experience and interaction with the web page. JavaScript has a lot of event listeners, a whole lot of them. These event listeners are very active and they keep watching your every move on a webpage (Beware! They are watching you!). When the desired action/event occurs, they immediately call the function that is attached to them.

As you know, computers are very fast, incredibly fast, a simple event can be fired a zillion times. For example, a scroll event listener will fire a million times for every scroll that you do, the same goes for the resize event. Just imagine how much load it can put on browsers if a function is called million times continuously? Phew! Poor browser 😔 Here comes our savior and hope “The debouncing and throttling function”.

Debouncing is a technique that is used to limit the rate of execution of a function. This drastically improves the performance of a browser, when a tedious function is attached to an event Listener like onScroll, onResize, etc. A debounce function in minimum takes two parameters – the function to be debounced and the wait time in milliseconds and in turn returns a debounced function. Now with this returned function you can debounce a scroll/resize event handler to be fired once for every specified wait time. A simple debounce function as taken from Underscore.js is given below, it is very simple, it simply calls the function passed to it at regular intervals using the setTimeout and clearTimeout functions.

// From Underscore.js library
function debounce(func, wait, immediate) {
    var timeout;
    return function() {
        var context = this,
            args = arguments;
        var later = function() {
            timeout = null;
            if (!immediate) func.apply(context, args);
        };
        var callNow = immediate && !timeout;
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
        if (callNow) func.apply(context, args);
    };
};

 

You have read till here and still clueless about what a debouncing function is? I have an analogy for you 😃 Read until the end!I know a teacher back in my school, she was very good in teaching but at the same time, she had eyes all-over the school, in the walls, canteens, classrooms and literally everywhere. She used to watch all my mischiefs and report them back to my parents immediately. In short, she was a mischief listener (a kind of event Listener). As soon as I do a mischief and before I could reach home, there would be a great welcome ceremony organized by my mom with dad as a chief guest along with spicy scoldings and sometimes with more delightful trashings.

Let me write the above in JavaScript using JQuery

$('Samuel').on('mischief', reportHisParents());
As days went by, I became naughtier and thus she had to often report back to my parents. This was going on until one day, my parents became tired and annoyed by my mischiefs and her reportings. So, one day they visited my school and told her “Hello madam, It is good that you report our sons mistake every now and then, but we are tired of hearing them every day, can you please report them on a monthly basis, during every parents-teachers meet up?”. She replied “I would be glad to”, with an evil smile. From then on, my mischiefs were not reported immediately to my parents but only once in a month, during the Parents-teachers meetup. 😃
Then it became
var reportMonthly = debounce(reportHisParents(), 2629800000); 
// 2629800000ms = 1 month

$('Samuel').on('mischief', reportMonthly);

This is what debouncing does, it does not fire a function as soon as it is invoked, instead, it waits for the specified time and then fires the function.

Hope you understood the concept of debouncing. If you like this post and want more posts like this on the web and tech-related topics, please subscribe (there is a button in the bottom right corner). Also feel free to share your thoughts in the comment section 😃

Meet you with a next post about throttling function!

PS: I was a very good kid during my school days. You can find me on the first bench, doing all my homework on time and laughing at all the silly jokes that my teachers would crack. The story above was made up just to illustrate the concept of debouncing 😃 To know more about me visit my blog.

References:
JavaScript Debounce Function