Angular: How I Moved 90% GETs Into a Cacheable Shell Component

Neo Liu
3 min readJun 26, 2022
Photo by Aphiwat

For web applications, having a lot of similar GET APIs is normal, but creating them is repetitive and tedious for developers.

Inspired by Flutter’s everything is a widget concept, I was thinking if it is possible to encapsulate the whole flow of a GET API into a shell component, which will allow developers to flexibly pass the loaded data from the shell to the content component/template which really needs it. And below is how it finally looks like.

In this article, I will break down the implementation into two parts:

  1. Implement get shell component
  2. Implement indexedDB client-side caching

This cacheable shell component is now available on npm: ngx-http-get-shell

0. Why & Where to use it?

Before start, there is a question I need to answer:

What’s the benefits and the best use case?

Here below is my two cents for this question:

--

--