Functional State API

Overview

The functional state framework is a simplified object-functional framework for creating dynamic web sites. The fs framework departs from other functional frameworks by embracing state at its core. For more information, please see functional state framework

The functional state module is located at "/lib/davinci/v1.0.0/davinci.mjs";

Try it!

Components

The fs module has a method called render, which when passed an fs component, will render the component to the web page. AS a simple, example, consider the following:

let fs = await import("/lib/davinci/v1.0.0/davinci.mjs");

let label = {
  target:'label-target',
  $html:()=> '<div>Hello World</div>',
}

fs.render(label);
				

Components are simple Javascript objects with a set of framework methods that dictate how they are rendered. Framework methods begin with a dollar sign, so they are easily recognized.

The simplest component has an $html method that just returns some plain HTML. In addition, it has a target attribute that tells the framework where to render the component. The component is passed to the render method, which does the work of rendering.

Dynamic Code

The following code links a button to a label that displays the number of times that the button has been pushed.

let button = {
  $html : ()=>'<button id="button1">push</button>',
  $process:($val)=>{
    $('#button1').click(()=>{
      $val.set('push', new Date());
    })
  }
};

let label = {
  $html:()=>'<div style="height:30px;" id="label1"></div>',
  $imports:()=>['push'],
  number:0,
  $update:(that, $val)=>{
    //the date is not used, but can be retrieved
    let date = $val('push');
    that.number+=1;
    $('#label1').html(that.number);
  }
};

rd.render([button,label],{target:'content'});
				

Result:
Try it!

Dynamic HTML

html

Nested Elements

Elements can contain other elements. Nested elements are specified by the children property.

let container = {
  id:'content1',
  $html:()=> '<div id="content1" style="padding-left:300px;padding-top:300px;"></div>',
  children:[button,label]
}
				

The default behaviour for nesting is that the elements are rendered one after the other. Customized handling of children elements is avaiable.

Adding Style

let container = {
  id:'content1',
  $html:()=> '<div id="content1" style="padding-left:300px;padding-top:300px;"></div>',
  style: `
 #content1 {
	background-color:lightgreen;
 } 
 
  `,
  $process:(that)=>{
	$("head").append($("<style> " + that.css + " </style>"));
  }
}
				

Components

There are a number of predefined components.

html
tables
charts
diagrams

Async

Often times you will need to deal with asynchronous programming. The funtional state framework provides a number of options for running concurrent code.

async

Viewport

The viewport method of the fs framework will render the components, but only when they become visible in the users viewport. This creates a nice effect whereby the components become rendered when the user scrolls to the location in the page where they are located.

let fs = await import("/lib/davinci/v1.0.0/davinci.mjs");
fs.viewport('id' , components);
				

Adding Serialized

The functional state framework is designed to be able to deal with standard davinci components that are created in a blog or workpace. When a blog is saved locally to disk, the components are saved in a plain text representation. For the purposes of the fs framework, these plain text representations are called serialized components.

let fs = await import("/lib/davinci/v1.0.0/davinci.mjs");

fs.render(serialized, {target:'id'});

//OR 

fs.viewport('id' , serialized);
				

The viewport method will only render the components when

Component Effects

component effects