CachedWatch in Web Atoms
#mvvm#typescript#javascript
Akash Kava

Akash Kava @akashkava

About: Author of Web Atoms

Location:
India
Joined:
Jan 6, 2018

CachedWatch in Web Atoms

Publish Date: Jun 25 '19
8 0

In Web Atoms, we can simply write @Watch on a getter which returns Promise<T> and getter will be read by UI automatically when any of referenced properties will change.

Old way 


export default class TaskListViewModel extends AtomViewModel {

   public search: string = "";

   @Inject
   private taskService: TaskService;

   @Watch
   public get tasks(): Promise<ITaskModel[]> {
      return this.taskService.list(this.search);
   }

}
Enter fullscreen mode Exit fullscreen mode

There was a small problem, if we were to read tasks property again and again in different parts of UI, every time it would fire REST API to backend, and results would still be the same.

So we introduced, @CachedWatch which will cache results of last successful api call, unless any of input parameters were changed.

New Way 


export default class TaskListViewModel extends AtomViewModel {

   public search: string = "";

   @Inject
   private taskService: TaskService;

   @CachedWatch
   public get tasks(): Promise<ITaskModel[]> {
      return this.taskService.list(
         this.search,
         this.newCancelToken("tasks"));
   }

}
Enter fullscreen mode Exit fullscreen mode

We are introducing two concepts here, first @CachedWatch and CancelToken. Imagine user types on search text box, and on every keyboard event, this property will refresh. But once user has immediately typed next character, we want to cancel previous search.

We can do this by creating newCancelToken with a key that is same as property name, it will create and return a new token and it will cancel previous token for the same key.

This will abort previous REST API.

Web Atoms intelligently delays REST API calls by 100ms, so if previous token is cancelled immediately, it will not start previous request at all.

Web Atoms is powerful MVVM JavaScript framework completely written in TypeScript, which can be extended to any other platforms. Currently supported on Web and Xamarin.Forms

Dive into samples

https://www.webatoms.in/samples.html#contextId=0

GitHub logo web-atoms / core

Light weight feature rich UI Framework for JavaScript for Browser with Dependency Injection, Mocking and Unit Testing

Action Status npm version codecov

Web-Atoms Core

Lightweight JavaScript framework with MVU Pattern with Data Binding in JSX.

Note, MVVM is now deprecated, we have realized that MVVM often adds more code then the benefits. Since JavaScript allows mixin, its easy to incorporate reusable logic with mixin rather than MVVM. MVU pattern is better suitable for faster development.

Web Features

  1. Data Binding, simple arrow functions to bind the UI elements
  2. Styled Support
  3. AtomRepeater - Lightweight List Control to manage list of items
  4. Chips control
  5. Dual View support (Mobile and Desktop)
  6. Smallest syntax
  7. Faster rendering
  8. Simple Data Validations
  9. RetroFit inspired REST API Support
  10. No additional build configurations
  11. Event re routing, it helps in reducing number of event listeners on page.
  12. UMD and SystemJS Module Loader
  13. Packer, to pack all JavaScript in single module along with dynamic module loader support
  14. FetchBuilder, fetch builder allows you to build REST request in fluent way and execute them with single…


View on GitHub


Comments 0 total

    Add comment