DEV Community

Akash Kava for Web Atoms

Posted on • Updated on

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

}

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

MVVM Framework for JavaScript for Browser, Xamarin.Forms, Write TSX/TypeScript instead of Xaml and C#, Hot Reload Live Published Xamarin.Forms Apps.

Action Status npm version codecov

Web-Atoms Core

Web Atoms Core is a UI abstraction framework along with powerful MVVM pattern to design modern web and mobile applications.

Xamarin.Forms Features

  1. Use VS Code to develop Xamarin.Forms
  2. Write TypeScript instead of C#
  3. Write TSX (JSX) instead of Xaml
  4. Live hot reload for published app

Web Features

  1. Abstract Atom Component
  2. Abstract Device API (Browser Service, Message Broadcast)
  3. Theme and styles support without CSS
  4. One time, One way and Two way binding support
  5. Simple dependency Injection
  6. In built simple unit testing framework
  7. UMD module support
  8. Full featured MVVM Framework with powerful validation

Folder structure

  1. All views for web must be placed under "web" folder inside "src" folder.
  2. All views for Xamarin Forms must be placed under "xf" folder inside "src" folder.

Example folder structure

src
+--images
|  +--AddButton.svg
|
+--view-Models
|  +--TaskListViewModel.ts
|  +--TaskEditorViewModel.ts
|
+--web
|  +--tasks
|     +--TaskListView.tsx
|     +--TaskEditorView.tsx
|
+--xf
   +--tasks
      +--TaskListView.tsx
      +--TaskEditorView.tsx

Example View

Discussion (0)