Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/dozjs/doz
A JavaScript framework for building UI, almost like writing in VanillaJS. For modern browser.
https://github.com/dozjs/doz
es6-proxy javascript-framework props proxy tagged-template-literals ui-components vanilla-js vdom vdom-library
Last synced: 30 days ago
JSON representation
A JavaScript framework for building UI, almost like writing in VanillaJS. For modern browser.
- Host: GitHub
- URL: https://github.com/dozjs/doz
- Owner: dozjs
- License: mit
- Created: 2018-03-31T07:25:13.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2023-09-11T14:25:09.000Z (over 1 year ago)
- Last Synced: 2024-11-03T06:09:50.545Z (about 1 month ago)
- Topics: es6-proxy, javascript-framework, props, proxy, tagged-template-literals, ui-components, vanilla-js, vdom, vdom-library
- Language: JavaScript
- Homepage: https://doz.js.org
- Size: 6.12 MB
- Stars: 44
- Watchers: 3
- Forks: 4
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
- awesome-github-star - doz
README
Almost like writing in VanillaJS. For modern browser.
Documentation
| API
| Demo
| Browse example code
👉 SEE A PROJECT BUILT WITH DOZ 👈
Look at the code on Codepen
## Why
- 🎼 Works with tagged template literals
- 🎳 Component based
- 🧩 WebComponent ready
- 🏪 Global stores
- 😆 Global components
- 🔫 Fast performance
- 💅 Scoped style
- 📡 Uses ES6 proxy to observe changes
- 😁 Simple and familiar API
- 😱 No extra syntax like JSX
- 💣 No confusion with props and state
- ⛏ Extensible through: plugins, mixin, components
- 📽 CSS animation support
## Get started
```
$ npx doz-cli app my-app
$ cd my-app
$ npm start
```
## Example
```html
```
#### Component definition
ButtonCounter.js
```javascript
import {Component} from 'doz'
export default class ButtonCounter extends Component {
constructor(o) {
super(o);
this.props = {
counter: 0
};
}
template(h) {
return h`
button {
font-size: 16px;
padding: 20px;
}
count ${this.props.counter}
`
}
increase() {
this.props.counter++;
}
};
```
#### Make an app with the component defined above
app.js
```javascript
import {appCreate} from 'doz'
import ButtonCounter from './ButtonCounter'
appCreate('#app', ButtonCounter);
```
## Doz ecosystem
- 👨🏻💻 [doz-cli](https://github.com/dozjs/doz-cli) provides a boilerplate to creating app and component
- 👨🏼🎨 [doz-ssr](https://github.com/dozjs/doz-ssr) server side rendering
- 🤳🏼 [doz-snap](https://github.com/dozjs/doz-snap) transforms app to static HTML
- 👩🏼🚀 [doz-router](https://github.com/dozjs-cmp/doz-router) a complete component for routing
- ✍🏼 [doz-metatag](https://github.com/dozjs/doz-metatag) a plugin for managing basic OG meta tag in your app (perfect with doz-ssr)
#### CDN unpkg
```html
import {Component} from 'https://unpkg.com/doz/dist/doz.min.js'
//...
```
## Changelog
You can view the changelog here
## License
Doz is open-sourced software licensed under the MIT license
## Author
Fabio Ricali