Hot vs Cold Observables

Recently I noticed the following code In the tests of some effect:

   const action = new fromActions.LoadPosts();
   actions$.stream = hot('-a', { a: action });
   const expected = cold('-b', { b: completion });
   
   expect(effects.loadPosts$).toBeObservable(expected);

This effect purpose is to activate request in response of "load posts" action:
Here is the effect code:

   loadPosts$ = this.actions$.ofType(postActions.LOAD_POSTS).pipe(
    switchMap(() => {
      return this.postService
        .getPosts()
        .pipe(map(posts => new postActions.LoadPostsSuccess(posts)));
    })
  );

According to Ben Lesh's explanation here: "observable is cold if its underlying producer is created and activated during the subscription"
In our case - the producer is Ajax request to "/post" API.
Since request is NOT made until someone subscribed to it - it considered cold
Unlike "loadPosts" action - which is hot:

export class LoadPosts implements Action {
  readonly type = LOAD_POSTS;
}

And here is what the test us checking - is in response to hot action, the cold request is following

SPA with vanilla javascript

It is 2019 now and javascript (es2019) is much more powerful than in the old days.
The following article is encourages me to try and see what can be gone when you using only plain js:
For example - to display a list of GitHub users from previous post it is anough to use the native javascript "map" :

document.querySelector('#container')
  .innerHTML = users.map(({login, count}) => `<li>${login} - <span>${count}</span></li>`).join(''); 

As result - the list with usernames and repos number will created on the page.

For completion of the picture we can add the "next" button that will display the next page:

 <button onClick="go()">next</button>
 <span>page:
    <i id='currPage'></i>
 </span>
 <ul id='container'>
 </ul>

The code for all this UI logic will be no more than 20 lines:

// getting data for page & displaying
function getPage(currentPage = -1) {
  currentPage++;
  // display loadign animation
  showLoader();
  
  getData(currentPage * 10).then((users) => {
     // display the number of page 
     updatePage(currentPage + 1);
     document.querySelector('#container')
       .innerHTML = users.map(({login, count}) => `<li>${login} - <span>${count}</span></li>`).join(''); 
  });
  return currentPage;
}

// display loading animation
function showLoader() {
  const img = '';
  document.querySelector('#container').innerHTML = img;
}

// displayes page number
function updatePage(page) {
  document.querySelector('#currPage').innerText = page;
}

// goes to nex page
function go() {
  page = getPage(page);
}

// getting page first time
page = getPage();

This is very minimalistic, but yet - kind of SPA!

What Is GraphQl

GraphQl - is query language.
A way you can quickly and clear explain what kind of data you want
Graphql can be compared to REST API:

In REST:

By sending request to "/users" url you telling server that you asking for users
By sending request to "/users/123" url you telling server that you asking for user with id 123

In GraphQl

the ways to "explain" to server what exactly you want are much wider:
Here is example how we can achieve the total repos count of user, only instead of using v3 GitHub api (like in previous posts)
we using GitHub grpahQL v4 api:

function getReposCount(user) {
  // graphQL query
  const query = `query {
     user(login: ${user}) {
       repositories {
         totalCount
       }
     }
  }`;

  const body = JSON.stringify({ query });

  const uri = `https://api.github.com/graphql`;
  return fetch(uri, {
    method: "POST",
    headers: { Authorization: `bearer ${token}` },
    body
  })
  .then(d => d.json())
  .then(data => {
    // extract only count field
    const {
      data: {
        user: {
          repositories: { totalCount: total }
        }
      }
    } = data;
    return total;
  });
}