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:
- Implement get shell component
- 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: