Quantum - designed to work with HTML and CSS, and web components, without using a server. You can build the design of your application on HTML and CSS, and run it as a normal application. Features: Quantum allows computations in C# and the native JavaScript. Drawing graphics occurs by Skiasharp/OpenL. This allows you to increase the speed of drawing elements. This is not Electron, and not a new browser. This technology allows you to use HTML/CSS rate for your needs. WebAPI repeats API browsers, and you should not feel a significant difference in C# and JS using Quantum.
The API Documentation is available on the web to browse.
This is an experimental version. She is unstable. Some components are redesigned to the specifics of the .NET platform. The project is not optimized. Optimization is currently highlighted.
Because the technologies of VPF, VF, Android, they do not simultaneously provide flexibility and cross-platform. For a quantum you do not have to learn something new. If you know the basics of CTML, that will be enough.
| Group | Element | Support |
|---|---|---|
| HTML DOM | HTMLElement | Yes |
| HTML | html | Yes |
| HTML | body | Yes |
| HTML | HTMLFormElement | Yes |
| HTML | HTMLCanvasElement | Yes |
| HTML | HTMLAnchorElement | Yes |
| HTML | HTMLAudioElement | No |
| HTML | HTMLBRElement | No |
| HTML | HTMLButtonElement | Yes |
| HTML | HTMLDivElement | Yes |
| HTML | HTMLImageElement | No |
| HTML | HTMLInputElement | Yes |
| HTML | HTMLHeadElement | Yes |
At stage 1, the document loading html. Loading styles and scripts is based on the html file, or separately, by means of a bindig. DOM is built tree.
+---------+
| DOM |
+---------+
▲ +---------+
| | Reflow |
+---------+ +---------+ +---------+ +---------+
| HTML |---►| Parser |---►| Content |---+ ▲
+---------+ +---------+ +---------+ | |
| ▼ ▼
+-----------------------------+ +---------+ +-------------+ +----------+
| | Binder |---►| Frame tree |---►| Painting |
| +---------+ +-------------+ +----------+
▼ ▲
+----+----+ +---------+ +---------+ |
| CSS |---►| Parser |---►| Rules |---+
+---------+ +---------+ +---------+
For rendering, OpenGL and SkiaSharp are used. They allow you to draw elements through GPU if possible. The collected data from stage 1 is accumulated and transferred to stage 2. Built render tree. Transforms styles for SkiaSharp. Build lineup. The tree with the elements of the arrangement is transmitted to OpenGL where the final output to the screen takes place.
+--------------+
| Skia paint |---+
+--------------+ |
▲ ▼
+--------------+ | +------------+ +----------+
| Painting |---+ | Transform |---►| Display |
+--------------+ | +------------+ +----------+
▼ ▲
+--------------+ |
| Сomposition |---+
+--------------+
For cross-platform audio playback, a special module is used that uses AFPlay/AFInfo for MacOS, NAudio for Windows, and must be implemented for Android and Linux.
LocalStorage is a repository, analogous to the fact that in browsers, with the ability to expand and store data in a database. Allows to integrate. By default, serializes data to hml and stores directives in the root.
You can choose the language you want to use.
+--------+ +--------+ +--------+ +--------+ +--------+ +--------+
| HTML | | CSS | | DOM | | Window | | Window | | Window |
+--------+ +--------+ +--------+---+ +--------+ +--------+ +--------+<--+
|Document| | Sheet | | Window | | | OpenGL | | Skia | | Events | |
| Parser | | Parser | | Init | | | Init | | Init | | Init | |
+---+----+ +---+----+ +--------+ | +----+---+ +----+---+ +---+----+ |
: : ^ | : : : |
| | | | | | | |
+------------+-------------+ |<-----------+------------+-----------+ |
| | | | |
| : : : |
+--------+ +---------+ +--------+ | +----+---+ +----+---+ +---+----+ |
| | | | | | | | Script | | Window | | HTML | |
| Render |<-| Compose |<---| Styles |<--+ +--------+ +--------+ +--------+<--+
| | | | | | | HTML | | Inputs | | Events |
+--------+ +---------+ +--------+ +--------+ +--------+ +--------+