❤
npm
Sign UpSign In

apoco

1.1.8 • Public • Published

npm version FOSSA Status

Javascript SPA web framework

Apoco is a set of modules that can be used to form a 'Single Page Application' SPA or used as a page or part of a page.It is a real time web framework, with automatic two way synchronisation between browser and server content. The components can be used together or individually.Apoco employs a shadow dom, in so far as the DOM elements are kept in memory and accessed using getters and setters. Apoco can be used with other frameworks.

No need to write HTML

The DOM is treated as a renderer, and the html is generated by Apoco. More in the spirit of a conventional C type window system. Writing html is not required, as Apoco creates all the HTML.

MVC

Apoco uses a MVC pattern, where views are kept as a JSON (like) object, controls in a separate javascript file, and the model can come from another JSON object or the server or a combination of both. For larger and more complex projects an additional build.js file can be deployed, to construct more complex objects

Apoco supports both REST and websockets.

Hierarchical

Apoco is arranged hierarchically starting with windows and ending with nodes and/or fields. It supports multiple windows. Apoco is very fast, as it only updates specific element values sent by the server and doesn't need to update the page. You can also add and remove elements without page refresh. Data types are specified in the fields and nodes

Online manual

You don't have to use the hierarchy, any of the components can be used independently, e.g you can use the display templates without using the Panel, or fields without using displays, but you can't use displays without specifying the appropriate field(s)

You don't have to use Apoco to make an SPA it will happily make the components for any page.

Addressable fields

Apoco components be found by walking the hierarchy, with many methods including getChildren, getParent, getSiblings.

let myField=Apoco.Panel.get("MyPanel).getChild("AChild").getChild("AField");
// similarly 
 
let myPanel=AField.getParent().getParent();
 

Data Integrity

All Apoco components which provide user input have methods to get set and reset the values. Thereby the integrity of the data can be guaranteed, since the journalled value can only be set by a call to setValue.

Example

Apoco panels are generally defined in a config javascript file., for example,

if(!UI){
   var UI={};
}
 
UI.Panels={
    MyPanel:{ components:[{ display: 'tabs',
                            DOM: 'Main',
                            id: 'Tabs',
                            tabs:[{name: 'someName',label: 'Some Name'},
                                  {name:'another', label:'Another'}
                                  ]
                            },
                            {display:'fieldset',
                            DOM:'right',
                            id:'fieldsetDisplay',
                            components:[{node:'heading',size:'h4',text:'Test'},
                                        {field:'select',name:'select_test',options:['one','two','three']}
                                        ]
                            }
                            // add another display template here
                          ]
            },
  AnotherPanel:{ components:[ {display:"form",
                               DOM:"Main",
                               id:"MyForm",
                               onSubmit:function(submit_event,that){ // do something},
                               components:[{name:"email",type:"email"},
                                           {name:"name",type:"string"},
                                           {submit:true,name:"submit",value:"Submit"}
                                           
                                        ]
                               }
                               // add other display components
                         ]
 
              }
 // add another panel here
};
 
 UI.start=["MyPanel","AnotherPanel"];
 

and so your html file might look like this

<!DOCTYPE html>
<html>
<head>
 <script src="js/apoco.js"></script> 
 <script src="js/config.js"></script> <!-- contains the UI.Panel defs above -->
</head>
 
  <body>
 <script>
 
     window.onload=function(){
          Apoco.start(UI.start);
      };
 
    </script> 
    <div id="Main">  <!-- this is the parent of the elements created by Apoco -->
       <div id="right"> <!-- this is another root element used by the UI.Panels above -->
       </div>
    </div>
  </body>
</html>

However you might just as easily add a single Panel with Apoco.Panel.add(some_panel_object);

Apoco is most suited to applications where keeping state and real time updating is required, however,it can be used for any application.

Here are a few "shop front" Websites using apoco.

Perluceo

MyCleverIdea

(eating out own dogfood) Online manual

/apoco/

    Package Sidebar

    Install

    npm i apoco

    Repository

    github.com/snorkelferret/apoco

    Homepage

    github.com/snorkelferret/apoco#readme

    Weekly Downloads

    29

    Version

    1.1.8

    License

    MIT

    Unpacked Size

    4.45 MB

    Total Files

    80

    Last publish

    Collaborators

    • basilvalentine
    Try on RunKit
    Report malware