pico-client

pico app framework

Example

An obligatory Todo App to demotrate the framework. The example source code can be found here

Browser Compatibility

* Android Browser: compatible
* Chrome/Chromium: compatible
* Safari: compatible
* Safari ios: compatible
* Firefox: compatible
* IE 11: compatible
* IE 10 and below: not compatible

Features

$3

A pico client is data driven, meaning that the application structure is not defined by script but by data. The data file is in json file format. The data file format is closely assemble to lisp syntax. for example

``json
["name", "type", "content", "meta data"]
`

and the example of a complete project file
`json
[
["component1", "view", [
["moduleA", "view", []],
["moduleB", "view", []]
]],
["component2", "view", []]
]
`

$3


`javascript
var
dep1 = require('vendorA/dep1'),
dep2 = require('vendorB/dep2')

this.load=function(){
dep1.doSeomthing()
dep2.doSomething()
}
`

$3

pico archieved decentralized configuration by making spec files joinable during runtime.

A spec file with a entry point (a special js file) can be compiled to a bundle file, the build script generate single .js file based on the configuration file and the entry point

to add external spec to current spec, use dynamic require load the external spec and spawn to render it

`javascript
require('/path/to/external/spec', (err, spec) => {
if (err) return console.error(err)
this.spawn(specMgr.create('id-here', 'view', [], spec))
})
`

Complete example at example/bundle

#### Create bundle
`
npx pclient-build
`

$3


move environment dependant config to a separate config file, inject the env config to main config in the main js file
`javascript
var specMgr= require('p/specMgr')
var View= require('p/View')
var project = require('cfg/xin.json')
var env = require('cfg/dev.json')
var main

return function(){
specMgr.load(null, null, project, function(err, spec){
if (err) return console.error(err)
main = new View
main.spawnBySpec(spec, null, env)
})
}
`

$3

Code spliting is done at the project file level, each bundle can hae it own project file and project can be load lazily during runtime

$3

pico-client supported asynchronous module loading, therefore no circular dependencies issue

$3

syntax of pico-client is heavely burrow from commonjs and amd to reduce learning curve

$3

for recursive view component such tree view
`javascript
// tree-node.js
return {
deps: {
'tree_node': 'view', // self referencing
},
create(deps, params){
this.spawn(deps.tree_node) // or, this.spawn(deps.tree_node, null, [deps.tree_node.splice(0, 3)]]
}
}
`

Caveat

$3

pico modules are loaded in series orderly, what it means is module declared at top always load first and pico ensure it is loaded completely before loading the next module.
One caveat is submodule may not ready during event call. for example project configuration as follow
`json
[
["modA","view",[
["modA-subA","view",[]]
]],
["modB","view",[]]
]
`
if modB event call modA immediately in create function, modA-subA may not ready when modA receive the event. modA should listen to moduleAdded emitted by modA-subA before using any functionality from modA-subA

$3

ModuleA
`javascript
var obj={
a:1,
print:function(){
console.log(obj.a)
}
}
return obj
`
if ModuleA.print method was call in ModuleB
`javascript
var modA=require('ModuleA')
modA.print() // 1
`
what if ModuleA.a was changed in ModuleB?
`javascript
var modA=require('ModuleA')
modA.a='hello'
modA.print() // 1
`
print result is still 1, that's because 'hello' is set on modA placeholder, to make ModuleA.a an editable property, make this changes to ModuleA
`javascript
var modA=require('ModuleA')
var obj={
a:1,
print:function(){
console.log(modA.a)
}
}
return obj
``