chrysalis.js

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

import { h, render } from '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)

import { h, render } from 'chrysalis.js'
  
const Timer = {
  state: { seconds: 0 },
  
  tick() {
    this.setState(state => ({
      seconds: state.seconds + 1
    }))
  },  
  
  oncreate() {
    this.interval = setInterval(() => this.tick(), 1000)
  },
  
  onremove() {
    clearInterval(this.interval)
  },
 
  render({ seconds }) {
    return (
      <div>
        Seconds: {seconds}
      </div>      
    )
  }
}
 
render(<Timer />, document.getElementById('app'))

React (26 SLOC)

import React from 'react'
import ReactDOM from 'react-dom'
 
class Timer extends React.Component {
  constructor(props) {
    super(props)
    this.state = { seconds: 0 }
  }
 
  tick() {
    this.setState(state => ({
      seconds: state.seconds + 1
    }))
  }
 
  componentDidMount() {
    this.interval = setInterval(() => this.tick(), 1000)
  }
 
  componentWillUnmount() {
    clearInterval(this.interval)
  }
 
  render() {
    return (
      <div>
        Seconds: {this.state.seconds}
      </div>
    );
  }
}
 
ReactDOM.render(<Timer />, document.getElementById('app'))

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