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
- Data Binding, simple arrow functions to bind the UI elements
- Styled Support
- AtomRepeater - Lightweight List Control to manage list of items
- Chips control
- Dual View support (Mobile and Desktop)
- Smallest syntax
- Faster rendering
- Simple Data Validations
- RetroFit inspired REST API Support
- No additional build configurations
- Event re routing, it helps in reducing number of event listeners on page.
- UMD and SystemJS Module Loader
- Packer, to pack all JavaScript in single module along with dynamic module loader support
- FetchBuilder, fetch builder allows you to build REST request in fluent way and execute them with single…
Top comments (0)