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
Example View Model
Web Controls
- AtomComboBox (wrapper for SELECT element)
- AtomControl (base class for all other controls)
- AtomItemsControl
- AtomListBox
- AtomPageView (control browser that hosts other control referenced by url)
- AtomWindow
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
- Do not define any default export
- No
Atom.get
andAtom.set
- Do not use underscore
_
anywhere, not in field name not in get/set - Do not use
set_name
method name, instead useget name()
andset 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