Rxjs - Discovering Subject and Subject Behavior

In frameworks like angular and react we have this behavior that tracks every change of model (a javascript variable which stores state of some ui component) and immediately projects all the model changes to ui.
lets say we want to mimic this behavior without using any framewok.
For example: we have person object in our application that has a boolean "isMale" field (among other fields).

let person = {
  name:"Holden",
  lname:"Colfield",
  isMale:"true"
}

Lets say we need UI to react to change of this "isMale" field, and change checkbox caption accordingly
here is when rxjs can be useful:
One of the options to achieve the desired behavior with rxjs - is to define person object as Behavior Subject

let bSubject = new Rx.BehaviorSubject(person); 

Behavior subject is an observable sequence which makes you able to notify everyone of its subscribers when some change occurs.
Only thing you do is call "next" method of the subject:
(In our app we will trigger change when somebody cliks on the checkbox)

Rx.Observable.fromEvent(checkBox,'change').subscribe(x=> {
   person.isMale = x.target.checked;
   bSubject.next(person);
})

Now our app changes its ui according to changes of observed "person" object...
see running code

Post About Rxjs

What can i say about rxjs?

Rxjs it is a different way of writing the code
For instance, instead of doing this:

document.querySelector('h1').addEventListener('click',(e)=>{
  alert()
}) 

With Rxjs you can write the same thing using this code:

Rx.Observable.fromEvent(document.querySelector('h1'),'click').subscribe((x)=>{
  alert()
})

So whats the advantage of using rxjs?

One of the advantages - is that you can use plenty of various utils which helps you:
For example if you want you code to respond not more than one events per second you can simply write this code:

Rx.Observable.fromEvent(window,'resize')
.throttleTime(1000)
.subscribe((x)=>{
  document.querySelector('h1').innerText =window.outerHeight
})

Which is nice
link to running code

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