View Code? Open in Web Editor NEW

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

TypeScript 99.89% JavaScript 0.10% Batchfile 0.01%

core's Introduction

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 await.

Web Controls

ComboBox (wrapper for SELECT element)
AtomControl (base class for all other controls)
AtomRepeater
PopupWindow, PopupWindowPage

Services

WindowService - to host AtomWindow and retrieve result
RestService - RetroFit kind of service for simple ajax
BrowserService - An abstract navigation service for Web and Xamarin

Development guidelines

Use TypeScript module pattern
Do not use namespace
Organize single module in single TypeScript file
Import only required module and retain naming convention
Use default export for UI component
No Atom.get and Atom.set
Do not use underscore _ anywhere, not in field name not in get/set
Do not use set_name method name, instead use get name() and set name(v: T) syntax for properties.

How to run unit tests?

Import test class src\test.ts
Run node .\dist\test.js

How to get code coverage?

Install istanbul, npm install istanbul --save-dev
Install remap-istanbul, npm install remap-istanbul
Cover Run, .\node_modules\.bin\istanbul.cmd cover .\dist\test.js
Report Run, .\node_modules\.bin\remap-istanbul -i .\coverage\coverage.json -t html -o html-report
Open generated html-report on browser

Recommend Projects