{"id":22064698,"url":"https://github.com/ldarren/pico-client","last_synced_at":"2025-03-23T18:14:04.615Z","repository":{"id":4176874,"uuid":"5293272","full_name":"ldarren/pico-client","owner":"ldarren","description":"pico html5 framework","archived":false,"fork":false,"pushed_at":"2023-04-16T02:29:57.000Z","size":18345,"stargazers_count":1,"open_issues_count":15,"forks_count":1,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-03-01T13:39:02.261Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ldarren.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2012-08-04T05:04:07.000Z","updated_at":"2021-11-14T08:31:03.000Z","dependencies_parsed_at":"2023-07-06T19:01:45.215Z","dependency_job_id":null,"html_url":"https://github.com/ldarren/pico-client","commit_stats":{"total_commits":1599,"total_committers":6,"mean_commits":266.5,"dds":"0.034396497811131965","last_synced_commit":"3ea36d7cc0a9296393cfa4a771fa1264eabfdc95"},"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ldarren%2Fpico-client","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ldarren%2Fpico-client/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ldarren%2Fpico-client/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ldarren%2Fpico-client/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ldarren","download_url":"https://codeload.github.com/ldarren/pico-client/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245144973,"owners_count":20568056,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-30T19:13:14.954Z","updated_at":"2025-03-23T18:14:04.589Z","avatar_url":"https://github.com/ldarren.png","language":"JavaScript","readme":"# pico-client\npico app framework\n\n## Example\n[An obligatory Todo App](https://cdn.rawgit.com/ldarren/pico-example-todo/master/bin/todo/index.html) to demotrate the framework. The example source code can be found [here](https://github.com/ldarren/pico-example-todo)\n\n## Browser Compatibility\n * Android Browser: compatible\n * Chrome/Chromium: compatible\n * Safari: compatible\n * Safari ios: compatible\n * Firefox: compatible\n * IE 11: compatible\n * IE 10 and below: not compatible\n\n## Features\n### Data Driven\nA 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\n\n```json\n[\"name\", \"type\", \"content\", \"meta data\"]\n```\n\nand the example of a complete project file\n```json\n[\n    [\"component1\", \"view\", [\n    \t[\"moduleA\", \"view\", []],\n\t[\"moduleB\", \"view\", []]\n    ]],\n    [\"component2\", \"view\", []]\n]\n```\n\n### Lazy Load At Component Level\n```javascript\nvar\ndep1 = require('vendorA/dep1'),\ndep2 = require('vendorB/dep2')\n\nthis.load=function(){\n    dep1.doSeomthing()\n    dep2.doSomething()\n}\n```\n\n### Decentralized Configuration\npico archieved decentralized configuration by making spec files joinable during runtime.\n\nA 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\n\nto add external spec to current spec, use dynamic `require` load the external spec and `spawn` to render it\n\n```javascript\nrequire('/path/to/external/spec', (err, spec) =\u003e {\n\tif (err) return console.error(err)\n\tthis.spawn(specMgr.create('id-here', 'view', [], spec))\n})\n```\n\nComplete example at `example/bundle`\n\n#### Create bundle\n```\nnpx pclient-build\n```\n\n### Manage environment config with dependency injection\nmove environment dependant config to a separate config file, inject the env config to main config in the main js file\n```javascript\n    var specMgr= require('p/specMgr')\n    var View= require('p/View')\n    var project = require('cfg/xin.json')\n    var env = require('cfg/dev.json')\n    var main\n\n    return function(){\n        specMgr.load(null, null, project, function(err, spec){\n            if (err) return console.error(err)\n            main = new View\n            main.spawnBySpec(spec, null, env)\n        })\n    }\n```\n\n### Code Spliting\nCode spliting is done at the project file level, each bundle can hae it own project file and project can be load lazily during runtime\n\n### Support circular dependencies\npico-client supported asynchronous module loading, therefore no circular dependencies issue\n\n### Syntax similar to commonjs and amd, easy to pickup\nsyntax of pico-client is heavely burrow from commonjs and amd to reduce learning curve\n\n### Support recursive view component\nfor recursive view component such tree view\n```javascript\n// tree-node.js\nreturn {\n\tdeps: {\n\t\t'tree_node': 'view', // self referencing\n\t},\n\tcreate(deps, params){\n\t\tthis.spawn(deps.tree_node) // or, this.spawn(deps.tree_node, null, [deps.tree_node.splice(0, 3)]]\n\t}\n}\n```\n\n## Caveat\n### sub-module readiness\npico 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.\nOne caveat is submodule may not ready during event call. for example project configuration as follow\n```json\n[\n\t[\"modA\",\"view\",[\n\t\t[\"modA-subA\",\"view\",[]]\n\t]],\n\t[\"modB\",\"view\",[]]\n]\n```\nif 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\n\n### External editable static property\nModuleA\n```javascript\nvar obj={\n\ta:1,\n\tprint:function(){\n\t\tconsole.log(obj.a)\n\t}\n}\nreturn obj\n```\nif ModuleA.print method was call in ModuleB\n```javascript\nvar modA=require('ModuleA')\nmodA.print() // 1\n```\nwhat if ModuleA.a was changed in ModuleB?\n```javascript\nvar modA=require('ModuleA')\nmodA.a='hello'\nmodA.print() // 1\n```\nprint 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\n```javascript\nvar modA=require('ModuleA')\nvar obj={\n\ta:1,\n\tprint:function(){\n\t\tconsole.log(modA.a)\n\t}\n}\nreturn obj\n```\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fldarren%2Fpico-client","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fldarren%2Fpico-client","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fldarren%2Fpico-client/lists"}