Web Atoms

Lightweight JSX JavaScript framework.

Published by Web Atoms
Distributed by ComponentSource since 2020

Prices from: $ 391.02 Version: 2.0.4 Updated: Dec 14, 2021

Screenshot of Web Atoms

Web Atoms Features

Use TypeScript + TSX instead of C# + Xam
Use TypeScript + TSX
Simple Dependency Injection in JavaScript with simple attributes
Dependency Injection
Easy to use REST Decorators for AJAX Service
Simple REST Service
Access .NET runtime object/methods/properties
Access .NET Runtime
Easy access to third party controls
Third Party Controls
Composable Style Sheet
Xaml StyleSheet
Create reusable custom components in JavaScript
Custom Component
Observe with Watch and Validate
Observe View Model
Load and Action for Data Processing
Data Processing
Use TypeScript + TSX instead of C# + Xam

Use TypeScript + TSX instead of C# + Xam

Maintaining UI in JSX (TSX) enables you to remotely host all files in web server. VS Code offers excellent code completion. Web Atoms support libraries include various intellisense helpers.

Web Atoms

Editing TypeScript in VS CodeIntellisense for all Xamarin.Forms controls along with CLR type description.
Editing TypeScript in VS CodeIntellisense for all Xamarin.Forms controls along with CLR type description.
One Time, One Way & Two Way BindingVery easy to create binding in JavaScript with simple lambda expressions to create rich bindings.
One Time, One Way & Two Way BindingVery easy to create binding in JavaScript with simple lambda expressions to create rich bindings.
Click for more

Image 1 / 2

Editing TypeScript in VS CodeIntellisense for all Xamarin.Forms controls along with CLR type description.
One Time, One Way & Two Way BindingVery easy to create binding in JavaScript with simple lambda expressions to create rich bindings.
Simple Dependency Injection in JavaScript with simple attributes

Simple Dependency Injection in JavaScript with simple attributes

Web Atoms provides simple dependency injection with constructor and property injection with simple decorators for Singleton/Transient injection. You can also create mock placeholder, which is used in design mode to test your UI components separately. And with global Injection, you can avoid use of global variables and unit test services with mocks.

Web Atoms

Constructor & Property InjectionSimple decorators to easily inject dependencies at runtime and design time (unit tests as well).
Constructor & Property InjectionSimple decorators to easily inject dependencies at runtime and design time (unit tests as well).
Web Atoms LocalizationEasy to implement multilingual support by creating injectable String Resources.
Web Atoms LocalizationEasy to implement multilingual support by creating injectable String Resources.
Click for more

Image 1 / 2

Constructor & Property InjectionSimple decorators to easily inject dependencies at runtime and design time (unit tests as well).
Web Atoms LocalizationEasy to implement multilingual support by creating injectable String Resources.
Easy to use REST Decorators for AJAX Service

Easy to use REST Decorators for AJAX Service

Creating a REST Service interface in Web Atoms is very easy with a set of decorators. While invoking methods, everything is transparent to the user. The ability to mock REST Services will make testing UI Components very easy.

Web Atoms

Simple DeclarationEasily readable set of decorators that correspond to HTTP Verbs.
Simple DeclarationEasily readable set of decorators that correspond to HTTP Verbs.
Custom JSON OptionsCustomize naming convention, date parser etc.
Custom JSON OptionsCustomize naming convention, date parser etc.
HeadersEasily set HTTP headers in the method.
HeadersEasily set HTTP headers in the method.
Click for more

Image 1 / 3

Simple DeclarationEasily readable set of decorators that correspond to HTTP Verbs.
Custom JSON OptionsCustomize naming convention, date parser etc.
HeadersEasily set HTTP headers in the method.
Access .NET runtime object/methods/properties

Access .NET runtime object/methods/properties

Easily access .NET runtime object/methods/properties in JavaScript with camel case member names. You can expose a property on a 'bridge' that derives from 'IJSService'. 'IJSService' can declare a method with IJSContext and IJSValue[] or any .NET runtime objects (they are marshalled as weak references). When you specify the first parameter as IJSContext, conversion is skipped, this is ideal when you want to send variable number of parameters to service.

Web Atoms

Click for more<strong>Access .NET runtime object/methods/properties</strong><br /><br />
Easy access to third party controls

Easy access to third party controls

Accessing third party control is very easy, you can generate one-time class declaration and use it inside your JSX.

Web Atoms

Click for more<strong>Easy access to third party controls</strong><br /><br />
Composable Style Sheet

Composable Style Sheet

To style the components, you can use AtomStyle class. Since these are pure TypeScript classes, you can use any TypeScript expression to compose your style. AtomStyle exposes name property which contains uniquely generated class name to avoid conflicts.

Web Atoms

Extend AtomStyleExtending AtomStyle is very easy, all CSS properties are described as key value pairs.
Extend AtomStyleExtending AtomStyle is very easy, all CSS properties are described as key value pairs.
Easily apply style classStyle classes are unique, so they do not conflict, also you can easily track which styles are in use and which aren’t. Problem that LESS/SASS can’t solve.
Easily apply style classStyle classes are unique, so they do not conflict, also you can easily track which styles are in use and which aren’t. Problem that LESS/SASS can’t solve.
Click for more

Image 1 / 2

Extend AtomStyleExtending AtomStyle is very easy, all CSS properties are described as key value pairs.
Easily apply style classStyle classes are unique, so they do not conflict, also you can easily track which styles are in use and which aren’t. Problem that LESS/SASS can’t solve.
Create reusable custom components in JavaScript

Create reusable custom components in JavaScript

To make reusable components easy, Web Atoms provides inherited “LocalViewModel” which can be used to create view model for reusable views. This makes it very easy to separate component logic into testable view model.

Web Atoms

Click for more<strong>Create reusable custom components in JavaScript</strong><br /><br />
Observe with Watch and Validate

Observe with Watch and Validate

ViewModel contains Watch, Validation, Load and Action decorators to encapsulate common UI logic. Watch is used to watch changes on any property chain starting from 'this'. Watch decorator is applied on a read-only accessor which updates UI automatically when any of property referenced via this is updated. Validation is done via @Validate decorator on a read-only accessor. Validation is updated as soon as the property is modified. Only difference between Watch and Validate is, validate is only initialized when 'this.isValid' is requested first time in code.

Web Atoms

WatchUI bound to this property is updated whenever any `this.*.*…` expression changes.
WatchUI bound to this property is updated whenever any `this.*.*…` expression changes.
ValidateForm validation made easy with @Validate.
ValidateForm validation made easy with @Validate.
Click for more

Image 1 / 2

WatchUI bound to this property is updated whenever any `this.*.*…` expression changes.
ValidateForm validation made easy with @Validate.
Load and Action for Data Processing

Load and Action for Data Processing

@Load decorator provides easy way to load asynchronous data. It reports exceptions and cancels previous operation and provides a cancelToken which can be used to check if cancellation was requested.

Load decorator can also watch for changes in any referenced expression, making it very easy to observe and load data when a change occurs.

Load decorator automatically takes care of debouncing (cancelling previous request).

'@Action' decorator can be applied on a method which will automatically display an alert if there was any error. And it will invoke validation before executing the method. Display an success alert after completion if configured. You can also configure 'confirm' to request confirmation (e.g. for delete operations).

Web Atoms

Load DecoratorTakes care of cancellation and reporting errors.
Load DecoratorTakes care of cancellation and reporting errors.
DebouncingAutomatically cancel previous request when user is still typing.
DebouncingAutomatically cancel previous request when user is still typing.
ActionAutomatically issue remote operation on a user event.
ActionAutomatically issue remote operation on a user event.
Click for more

Image 1 / 3

Load DecoratorTakes care of cancellation and reporting errors.
DebouncingAutomatically cancel previous request when user is still typing.
ActionAutomatically issue remote operation on a user event.