Declá - declarative apps framework

Decla.js is game changing frontend framework of 2021! Everything you like and ever wanted - writing fast, superlight, functional and simple web apps. Common packages out of the box, bunch of examples and tutorials, fastest growing framework community.

Briefly before we begin, Decla components are pure functions, they don't create any side effects, instead they return declarative structures to describe side effects. So for example, instead of returning explicit vdom, they return declarations of dom effects to be taken. This allows handling any kind of side effect in appropriate way, making components design simple and predictable. Read more: Decla.js Virtual Effects, Decla Components

One more thing to mention, Decla framework makes your frontend development fast and easy, so please hit the like button and share with friends to give it more juice!

Simple Component and App

Creating component is as easy as to write a function, because Decla components are simple js functions:

import { app, dom } from 'decla'

function Hello({ h }){

  return h('h1', {}, [
    h('text', 'Hello World!')
  ])
}

app(Hello, {}, dom(document.body))

function Hello({ domEffect }){
  return [domEffect, { tagName: 'h1', attrs: {} },[
    [domEffect, { tagName: 'text', attrs: 'Hello world!' }]
  ]]
}

Try it on CodePen. It is recommended to use hyperscript or jsx to make your code more readable and elegant. Read more: Using hyperscript and jsx

Stateless Component and App

Decla is state driven framework, meaning it re-renders app on any state change (initial state is passed while app is mounting, see example below). Decla components are stateless, they interact with app state using state decorators like useState(getter,setter).

import { app, dom } from 'decla'
import { intervalEffect } from '@decla/effects'

const Counter = ({ useState, h }) => {
  const [count, incCount] = useState(
    state => state,
    state => ++state
  )

  return [
    count < 10 && [IntervalEffect, { 
      action: incCount,
      every: 1000, 
    }],
    h('text', count)
  ]
}

app(Counter, 0, dom(document.body))

Try it on CodePen. Decla takes care about cancelling and (re)starting effects depending on returned structure, this gives freedom and more advanced control over effects. Read more about effects: Decla Effects

Components composition and App

This expample shows how simple components composition can be, and how to handle user actions

import { app, dom } from 'decla'

const RandomCat = ({ useProps, h }) => {
  const { say } = useProps()

  return h('img', { 
    src: `https://cataas.com/cat/says/${say}` 
  })
}

const CatApp = ({ useState, h }) => {
  const [cats, incCats] = useState(
    cats => cats,
    cats => ++cats
  )

  return [ 
    h('input', {
      value: 'Get Random Cat!',
      onclick: incCats,
      type: 'button',
    }),
    [RandomCat, { 
      say: `Random-cat-${cats}`
    }]
  ]
}

app(CatApp, 0, dom(document.body))

Try it on CodePen. Decla differentiates components from effects by names, effect's name should always end with 'Effect' (this means effects cannot be declared as arrow functions), read more: Decla API

Congratulations!

Now you are decla.js developer! Yes, that's easy! Slap the like button to let us know we are on the right direction, stay tuned and safe!

Want some more of Decla.js?

• Getting started
• Installing decla
• Decla API
• Using common packages
  • Using time effects
  • Using http effects
  • Using persistence effect
  • Using router component
  • Using hyperscript and jsx
  • Server side rendering
• Writing custom effects
• Testing decla components/apps
• Decla apps examples
• Other tutorials

Community

We are open to any question, feedback or improvement, feel free to join our community channel discussions or file an github issue for some help.

License

MIT