CachedWatch in Web Atoms

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);
   }

}

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"));
   }

}

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

web-atoms / core

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

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