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

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:

• The most obvious benefits are less-repetition, easy-to-use and easy-to-refactor. Normally creating GET API and to use the loaded data in template will involve a few files: xxx.service.ts, xxx.component.ts, xxx.component.html. This makes code refactoring harder and complicated, and most of the time, the implementation is similar across different component by using HttpClient and RxJs.
• The best use case is for data only loaded once with view rendering, infrequently changed data, or data needs to be cached at client side. By using a http get shell component, the GET calls will be fired only if a user reaches the shell component and wants to see its content, which means the data will be only loaded when browser renders it.

1. Implement shell component

One of the most important feature for this component is flexibility — everything will be configurable, from the url to fetch data from, to the target…