https://github.com/ultimaweapon/dovm-core
Next generation front-end framework. It's powerful!
https://github.com/ultimaweapon/dovm-core
dovm framework single-page-application spa typescript
Last synced: 8 months ago
JSON representation
Next generation front-end framework. It's powerful!
- Host: GitHub
- URL: https://github.com/ultimaweapon/dovm-core
- Owner: ultimaweapon
- License: mit
- Created: 2021-10-12T10:59:04.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2022-04-12T09:48:24.000Z (about 4 years ago)
- Last Synced: 2024-10-23T00:12:01.688Z (over 1 year ago)
- Topics: dovm, framework, single-page-application, spa, typescript
- Language: TypeScript
- Homepage:
- Size: 18.6 KB
- Stars: 2
- Watchers: 0
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Document Object View Model
[](https://www.npmjs.com/package/@dovm/core)
Document Object View Model (DOVM) is a next generation framework for building a website by utilizing a full power of TypeScript.
## Problems of current frameworks
### React
- Virtual DOM.
- JSX is a mess.
### Angular
- Too big.
- Too complicated.
- No freedom for project structure.
- Slow.
### Vue
- Virtual DOM.
- No type safety in template.
- Limited type safety between component.
### Svelte
- TypeScript support is horrible.
- Reactivity rely on compiler.
### What is the problem with Virtual DOM?
Well, this blog from Svelte should explain the problems of Virtual DOM: https://svelte.dev/blog/virtual-dom-is-pure-overhead
If you are an experienced React or Vue developers I believed you already faced the problem by yourself.
## DOVM
After we developed Cloudsumé, we decided to create our own framework due to all of available frameworks solve one problem but introduce another problem. Right now we currently experiment DOVM with our own company website: https://ultima.inc
### Design goal
- No Virtual DOM.
- Freedom on project structure.
- Simple and lightweight.
- HTML template instead of JSX, which is compile down into a render function.
- 100% type safety with TypeScript even in the template.
- Fully asynchronous everywhere.
- Direct access on DOM when you need it without any barrier.
- Automatic update only affected DOM when binding data updated using observer pattern.
- Direct access on child component.
- Easy on unit testing due to Dependency Injection.
### Runtime requirements
- ES2017
## Usage
### Install
```sh
npm i --save-dev @dovm/core
```
### webpack configurations
Refer to [dovm-loader](https://github.com/ultimicro/dovm-webpack) for how to configuring webpack.
### Type information for DOVM file
Before you can import DOVM file into TypeScript file you need to create `.d.ts` file with the following content in the root of repository:
```ts
// dovm.d.ts
declare module '*.dovm' {
export function render(): Promise;
}
```
### Settings for Visual Studio Code
Currently there are no extensions for VS Code to support DOVM. A simple workaround for syntax highlighting is to treat DOVM file as HTML file like this:
```json
{
"files.associations": {
"*.dovm": "html"
}
}
```
### Application root
The following code will replace your `body`:
```ts
import { AppContainer, ComponentActivator, ServiceCollection } from '@dovm/core';
import App from './app';
bootstrap();
async function bootstrap() {
const services = new ServiceCollection();
services.add(ComponentActivator, () => new ComponentActivator());
const app = new App({ services, container: new AppContainer() });
await app.render();
}
```
```ts
// app.ts
import { Component } from '@dovm/core';
import { render } from './app.dovm';
export default class App extends Component {
}
App.prototype.render = render;
```
```html
Hello, world!
```
### Router
Refer to [@dovm/router](https://github.com/ultimicro/dovm-router) for how to use.
## License
MIT