Vasille Core Library
Vasille
core library is frontend solution for safe
, fast
& powerful
applications.
Table of content
- Installation
- How to use Vasille
- How SAFE is Vasille
- How FAST is Vasille
- How POWERFUL is Vasille
- Best Practices
Installation
npm install vasille --save
npm install vasille-less --save
npm install vasille-magic --save
How to use Vasille
There are several modes to use Vasille.
Documentation for beginners (how to create the first project step by step):
Vasille Core Library
- the hard way -low-level
Vasille Less Library
- perfect for me -high-level
Vasille Magic
- perfect for you -highest-level
Full documentation:
Vasille Core Library API
- write anything -low-level
Vasille Less Library API
- write less do more -high-level
Vasille Magic API
- compiler writes for you -highest-level
Getting ready be example
- TypeScript Example
- JavaScript Example (Vasille Magic not supported)
- Flow.js Example (Vasille Magic not supported)
How SAFE is Vasille
The safe of your application is ensured by
-
100%
coverage ofvasille
code by unit tests. Each function, each branch are working as designed. -
strong typing
makes your javascript/typescript code safe as C++ code. All entities ofvasille
core library are strong typed, including:- data fields & properties.
- computed properties (function parameters & result).
- methods.
- events (defined handlers & event emit).
- DOM events & DOM operation (attributing, styling, etc.).
- slots of component.
- references to children.
- What you write is what you get - there is no hidden operations, you can control everything.
- No asynchronous code, when the line of code is executed, the DOM and reactive things are already synced.
How FAST is Vasille
The test project was coded using the next frameworks:
- Angular / Try Initial / Try Optimized.
- React / Try Initial / Try Optimized.
- Vue 2 / Try Initial / Try Optimized.
- Vue 3 / Try Initial / Try Optimized.
- Svelte / Try Initial / Try Optimized.
- Vasille / Try Initial / Try Optimized.
The result of test are demonstrated in figures 1 & 2.
The test result are measured in FPS (frames per second), which is calculated as 1000 / ft
,
where ft
is an average frame time in ms of 20 frames. All values are absolute. Higher is better.
The initial version is updating all the page content in each frame. The page reactivity connections are very complex, and we get poor results in Angular, React, Vue & Svelte.
The optimized version disables the offscreen & non-actual content, which simplifies the reactivity complexity in time. Angular & Svelte give result similar to Vasille. React & Vue continue to be slow in the beginning of test.
Conclusion: The reactivity system of Vasille is very fast and its complexity is not slowing down the application.
Figure 1: Initial version
Figure 2: Optimized version
How POWERFUL is Vasille
The secret of Vasille
is a good task decomposition. The core library is composed of
an effective reactive module and a DOM generation engine based on it.
Reactivity Module
Reactivity module is used to create a model of data. It can contain self-updating values, forward-only shared data. Reactivity of objects/fields can be disabled/enabled manually.
-
Destroyable
is an entity which has a custom destructor. -
IValue<T>
is a common interface for any value container, with next members:-
get $
gets the encapsulated value. -
set $
manually update the encapsulated value, if enabled triggers updating of all linked data. -
disable
disables the reactivity. -
enable
enables the reactivity and triggers updating of all linked data.
-
-
Reference<T>
contains a value of typeT
. -
Mirror<T>
syncs self value with anotherIValue
container, can be used to share a value forward-only. -
Pointer<T>
same asMirror
, but it can switch betweenIValue
target anytime. -
Expression<ReturnType, Args...>
is a self-updating value. -
Reactive
is a reactive object which can have multiple reactive fields, emit/receive events/signals.
DOM Generation Engine
DOM Generation Engine is used to describe a virtual DOM of reactive fragments, which will be reflected into a browser DOM and keep up to date it.
-
Fragment
describes a virtual DOM node, which has siblings, children, parent & slots. -
TextNode
reflects aText
node. -
INode
reflects aElement
node. -
Tag
reflect a self createdElement
node. -
Extension
reflects an existingElement
node. -
Component
reflects aElement
node created by aTag
child. -
AppNode
is root of aVasille
application, can be used to create applications in application. -
App
is root of a definitiveVasille
application. -
DebugNode
reflects aComment
node, useful for debug. -
Watch
recompose children nodes on model value change. -
RepeatNode
creates multiples children nodes using the same code multiple time. -
BaseView
represent a view in context of MVC (Model-View-Controller). -
ObjectView
repeats slot content for each value ofObjectModel
. -
MapView
repeats slot content for eachMapModel
value. -
SetView
repeats slot content for eachSetModel
value. -
ArrayView
repeats slot content for eachArrayModel
value respecting its order.
CDN
ES2015 version
<script src="https://unpkg.com/vasille"></script>
ES5 Compatible version
<script src="https://unpkg.com/vasille/cdn/es5.js"></script>
Flow.js typedef
Add the next lines to [libs]
section in your .flowconfig
file
node_modules/vasille/flow-typed
node_modules/vasille-less/flow-typed
node_modules/vasille-magic/flow-typed
Best Practices applicable to Vasille Core Library
- Reactive Object Practice
- Application
- Application in Application
- Signaling
- Forward Only Data Exchange
- Absolute, Relative & Auto Values
- Signaling Intercepting
- Debugging
- Fragment vs Component
- Extensions
- Model-View-Controller
Questions
If you have questions, fell free to contact the maintainer of project: