Alkali

Alkali

The alkali metals are a set of elements known for being extremely reactive, conductive, and lightweight. Likewise, the alkali library provides reactive, conductive data flows, with pure JavaScript objects, native element extensibility, for nimble, fast, responsive applications. Build highly efficient and fast applications, with UI components driven by standard JavaScript objects using modern functionally reactive techniques, and without large framework impositions or overhead.

• Consistent, encapsulated bi-direction reactive data flow

  Assymetrical bi-directional reactivity provides robust, yet simple and easy data bindings to elements and inputs, and even data flow through reversible functions

  fahrenheit = new Variable(68)
  celsius = multiply(subtract(fahrenheit,32), 5/9)
  new Form([
    Label([
      'Fahrenheit: ',
      NumberInput(round(fahrenheit, 3))]),
    Label([
      'Celsius: ',
      NumberInput(round(celsius, 3))])
  ])
      

• High-perfomance granular lazy-execution for optimized rendering

  

  End-to-end optimization, using rendering frame-driven lazy execution, cached computations, granular data flows, and incremental updates that make your applications fast by default, without the bloat of component abstractions or virtual doms.

  someNumbers = new Variable([1, 2])
  // define a transform
  sum = someNumbers.to((array) =>
  	array.reduce((a, b) => a + b))
  // make all the changes you want
  someNumbers.put([2, 4])
  someNumbers.push(5)
  someNumbers.splice(2, 1, 6)
  // and the renderer will only recompute as needed for the rendering frame
  new Div(sum)
      

• Simple, elegant, declarative syntax for defining visual/UI structure

  Element constructor based layouts, with reactive variables, produces a declarative syntax fully define components and structures, defining what you want, instead of how you want, making it easier to write and easier to understand.

  new Table([
    TR([
      TD(['Hello']), TD(['World'])
    ])
  ])
      

• Extensible, web component-based architecture

  Extend native elements, for to-the-metal interaction. Leave behind leaky, heavy abstractions and wrappers. The native component system is the last component system you will ever need to adopt.

  MyDiv = Div('.a-class')
  // use native APIs and properties
  container.appendChild(new MyDiv({
    innerHTML: 'some content'
  }))
      

• Leverages new EcmaScript generator and class syntax

  Use generator syntax for reactive functions, and class syntax to extend native elements.

  class MyDiv extends Div {
    *render() {
      this.textContent = `Fahrenheit is
      	${yield fahrenheit} and
      	celsius is ${yield celsius}`
    }
  }
  new MyDiv()
      

• Reactive nested objects/properties, collections, and validation

  A robust data model designed for complex object structures, and built-in validation.

  person = new Variable({})
  new Form([
    Label([
      'Age: ',
      NumberInput(person.property('age')),
      Div(person.property('age').validation)]),
    Label([
      'Name: ',
      NumberInput(person.property('name')),
      Div(person.property('name').validation)])
  ])  

• Babel Plugin for convenient syntax

  Tranform standard JavaScript expressions into reactive and reversible expressions, capable of continuous, reactive evaluation of variables with cleaner, intuitive syntax.

• Inspectable data flows

  Reactive programming opens up the ability to statically inspect data flows in your application, seeing how elements are driven by variables.