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
MVVM Framework for JavaScript for Browser, Xamarin.Forms, Write TSX/TypeScript instead of Xaml and C#, Hot Reload Live Published Xamarin.Forms Apps.
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
- Use VS Code to develop Xamarin.Forms
- Write TypeScript instead of C#
- Write TSX (JSX) instead of Xaml
- Live hot reload for published app
Web Features
- Abstract Atom Component
- Abstract Device API (Browser Service, Message Broadcast)
- Theme and styles support without CSS
- One time, One way and Two way binding support
- Simple dependency Injection
- In built simple unit testing framework
- UMD module support
- Full featured MVVM Framework with powerful validation
Folder structure
- All views for web must be placed under "web" folder inside "src" folder.
- 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
Top comments (0)