# Introduction
## What is Web Atoms?
"Web Atoms" is an light weight advanced MVU framework to write web applications in HTML5. Using JavaScript modules, you can divide large app into smaller modules, also offer localization using modules with reduced app size.
## Requirements
1. TypeScript or JavaScript
2. NodeJS with NPM
## UMD Loader
All web atoms modules are transpiled in SystemJS module, however for optimized performance, we recommend using web atom's own module loader.
```html
Web Atoms Core Samples
```
# Atom Control
AtomControl is the root class, which offers data binding, event re-routing and disposables. AtomControl can contain multiple html elements and each element can have its own different binding.
```tsx
export default class TaskList extends ContentPage {
public search = "";
// simple dependency injection
@InjectProperty
private taskService: TaskService;
public async init() {
// two way binding
// so whenever the value is updated
// search will be set, and anyone
// watching it, will refresh.
this.headerRenderer = () =>
this.search)}/>
;
// automatically refresh items
// if search was updated.
// It will also load items first time.
this.render(
);
}
}
```
In above example, `Bind.oneWayAsync` will watch for any changes in `this.search` and as soon as it gets updated, it will execute the function, however if the previous execution is still in process, 3rd parameter (cancelToken) can be used to abort the search.
`Bind.twoWaysImmediate` will cause `this.search` to be set whenever user makes any changes.