Creatе UI quickly and easily
A lightweight JS-library for building fast, modern & scalable applications
Why use?
- 🍭 Just 1kb runtime
- ⚡️ Fast due to Virtual DOM inside
- 🔨 Declarative and intuitive API
- 🌺 Component-based (without class-syntax)
- 🍬 Learns in 15 minutes
Installation
Get Chrysalis Starter Kit, if you do not want to setup the environment (Webpack inside)
Install the Chrysalis and then import what you need
For dev environment
via NPM
npm install chrysalis.js
Optionally you can install the babel plugin for transform JSX, that provide more readable syntax for VDOM elements.
// setup the .babelrc "plugins": "transform-react-jsx" "pragma": "h"
For browser
via CDN
<script src="https://unpkg.com/chrysalis.js">
const h render = Chrysalis
Timer example
Chrysalis (20 SLOC)
const Timer = state: seconds: 0 { this } { thisinterval = } { } { return <div> Seconds: seconds </div> }
React (26 SLOC)
Component { superprops thisstate = seconds: 0 } { this } { thisinterval = } { } { return <div> Seconds: thisstateseconds </div> ; } ReactDOM
Vue (22 SLOC)
<template> <div> Seconds: {{ seconds }} </div></template> <script> export default { data() { return { seconds: 0 } }, methods: { tick: function() { this.seconds++ } }, mounted() { this.interval = setInterval(() => this.tick(), 1000) }, beforeDestroy() { clearInterval(this.interval) } }</script>
Get Involved
PRs are welcome!
- just fork it
- and submit PR
License
Chrysalis created with ❤️ by heavy · Released under the MIT License.
j-heavy.github.io · GitHub @j-heavy · Twitter @_heavykj