Angular and AOT

Intro

It is a long time since i started to play with new angular (currently 5 beta). Currently i found that i know very little about AOT feature, so i think, it is good time to write a post about it.

So, What is this AOT thing about?

AOT - means Ahead Of Time Compilation, but what exactly is being compiled? after all we talking about javascript - an interpreted language which needs no compilation!
According to that it saying at angular site - the AOT is configuration that makes angular to precompile the HTML templates of components, and thus saves the the HTML processing (here is that "compilation" means in this case) from being performed at application runtime.

Sounds Like A Good Thing, So How Can I Get It In My Project?

If you use angular-cli tool for your project scaffolding it is very easy: Instead of usual

ng serve 

command, you can use

ng serve  --aot=true

command
You can see the difference in chrome dev tool:
ng serve

ng serve --aot=true

As you can see - the load time reduced to almost half size with AOT option

Source Maps

In this post i will talk a little about source maps - what are they and which problem they solve, and how to get them in your project.
So, if you sitting comfortably - lets begin

Minification

It pretty common that in nowadays project all javascript files are minified (or uglyfied) and concatenated into one file. Why?
Because to have project devided to many files(although it is convenient for developers) makes loading process slower (less performant).
Also it is a good practice not to expose your javascript logic to everybody...
But what about debugging the minified code? is it possible?

Source Maps

The answer is - yes, but (there is always a catch!) you must first configure the source map task to run alongside with magnification task. Source maps - are files (decorated with .map extension) which generated during uglification, which are (citing from this great guy) - links pieces of your minified bundle back to the original, unbuilt files.

How to get it work inside you project?

That is easy: Assuming that you have minification task run by Grunt-contrib-uglify task, all you need to do is to add following option:

...
uglify: {
    dist: {
        src: ['<%= src.js %>'],
        options: {
            sourceMap: true // - this will do the magic!
        },
        dest: '<%= distdir %>/js/<%= pkg.name %>.min.js'
    }
},
...

And now, after running grunt build task (which includes uplifting) you can see in your distilled folder the ".map" files and ,once you open your chrome dev tools and try to search for some line of your code - you will see the following picture:

Thats all - now you have source maps in your project...

One more trick

Of course - source maps are good as long as we talking about dev environment. In order not to create them at your production environment you can use conditional configuration:

...
uglify: {
    dev: {
        src: ['<%= src.js %>'],
        options: {
            sourceMap: true
        },
        dest: '<%= distdir %>/js/<%= pkg.name %>.min.js'
    },
    prod: {
        src: ['<%= src.js %>'],
        dest: '<%= distdir %>/js/<%= pkg.name %>.min.js'
    }
}
...
grunt.registerTask('prod', ['recess:min', 'uglify:prod', 'copy'])

Now, for production build you can simply call:

 node_modules/.bin/grunt prod

My Implementation For Promises.All

Recently been asked again on some interview to write my own implementation of "Promises.All", so i decided to write a post in which i'll explain all i know about promises.

What Are Promises?

According to MDN - The Promise is object that represents the completion or failure of an asynchronous operation, and its resulting value. The "asynchronous" meaning is that the time when the result will finally came is unknown. Promise can have three following statuses: pending, fulfilled and rejected
Example:

function myAsyncFunc(){
  return new Promise((reject, resolve) => {
     resolve(true);
  })
}

To get result of this function you will need to use following syntax:

myAsyncFunc().then(function(result){
  console.log(result)
})

Usually promises used to handle asynchronous ajax requests like:

fetch('https://api.github.com/users/angular/repos').then(data=>data.json())

Chaining Promises

What if you need perform some async operations consequentially (one after other)?
For example - to get all repositories of some organization and after get info of the first one?
Well you can use some nested "then" like this:

fetch('https://api.github.com/users/angular/repos')
.then(data=>data.json())
.then(data=>{
    fetch('https://api.github.com/repos/angular/angular.js')
    .then(repoData=>repoData.json())
    .then(repoData=>{
       console.log(repoData);
    });
})

This will work but code is sprayed on lot of "levels", More accurate syntax is to return values of each promise result:

fetch('https://api.github.com/users/angular/repos')
.then(data=>data.json())
.then(data=>{
   return fetch('https://api.github.com/repos/angular/angular.js')
})
.then(data=>data.json())
.then(repoData=>{
    console.log(repoData);
});

Promise.All

Sometimes you need some requests parallel way (all at once). Angular has for this case $q.all method which receives array of promises and fires callback with arguments for each result of promises list.
Important! results should be ordered in the same order as promises in the array, even if some reults came much later than preceding ones....
Here is my implementation for "promises all"

let all = (promises) => {
  //datas is object 
  let datas={};
  //must return promise
  return new Promise((resolve, reject)=>{
    //runs for each promise
    promises.forEach((promise, idx)=>{
      promise.then(p => {
        datas[idx]=p;//stores results at index property
        if(Object.keys(datas).length===promises.length) { //Object.keys(datas).length is indicator that last result received
          let  res =  Object.values(datas); 
          resolve(res) 
        }  
      })  
    });//foreach
  });
}