{"id":13432484,"url":"https://github.com/catberry/catberry","last_synced_at":"2025-05-16T06:07:11.551Z","repository":{"id":15010279,"uuid":"17735839","full_name":"catberry/catberry","owner":"catberry","description":"Catberry is an isomorphic framework for building universal front-end apps using components, Flux architecture and progressive rendering.","archived":false,"fork":false,"pushed_at":"2022-01-03T15:22:48.000Z","size":2881,"stargazers_count":796,"open_issues_count":7,"forks_count":39,"subscribers_count":38,"default_branch":"master","last_synced_at":"2025-04-08T15:13:45.448Z","etag":null,"topics":["components","framework","isomorphic","javascript","progressive-rendering","universal","web"],"latest_commit_sha":null,"homepage":"https://catberry.github.io/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":"Open360cam/360CamCode","license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/catberry.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2014-03-14T04:57:35.000Z","updated_at":"2024-11-29T13:50:59.000Z","dependencies_parsed_at":"2022-09-05T00:50:56.535Z","dependency_job_id":null,"html_url":"https://github.com/catberry/catberry","commit_stats":null,"previous_names":[],"tags_count":141,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/catberry%2Fcatberry","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/catberry%2Fcatberry/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/catberry%2Fcatberry/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/catberry%2Fcatberry/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/catberry","download_url":"https://codeload.github.com/catberry/catberry/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254478190,"owners_count":22077676,"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":["components","framework","isomorphic","javascript","progressive-rendering","universal","web"],"created_at":"2024-07-31T02:01:12.234Z","updated_at":"2025-05-16T06:07:06.542Z","avatar_url":"https://github.com/catberry.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# Catberry\n\n[![Build Status](https://travis-ci.org/catberry/catberry.svg?branch=master)](https://travis-ci.org/catberry/catberry) [![codecov.io](http://codecov.io/github/catberry/catberry/coverage.svg?branch=master)](http://codecov.io/github/catberry/catberry?branch=master)\n[![Gitter](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/catberry/main?utm_source=badge\u0026utm_medium=badge\u0026utm_campaign=pr-badge\u0026utm_content=body_badge)\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://raw.githubusercontent.com/catberry/catberry/master/docs/images/logo.png\" /\u003e\n\u003c/p\u003e\n\n## What the cat is that?\n\nCatberry was developed to help create [\"isomorphic/Universal\" Web applications](https://github.com/catberry/catberry/blob/9.0.0/docs/index.md#isomorphicuniversal-applications).\n\nLong story short, isomorphic/universal applications are apps that use the same codebase on both the server and client environments to render what the client would see as a \"[Single Page Application](http://en.wikipedia.org/wiki/Single_Page_Application)\".\n\n## TLDR;\n\nInstall [Catberry CLI](https://www.npmjs.com/package/catberry-cli) using following command:\n\n```bash\nnpm install -g catberry-cli\n```\n\nUse Catberry CLI to create an empty project with [Handlebars](http://handlebarsjs.com/) support like this:\n\n```bash\ncatberry init empty-handlebars\n```\n\nOr an example application that works using GitHub API:\n\n```bash\ncatberry init example\n```\n\nAlso, you can get a list of all templates:\n\n```bash\ncatberry init ?\n```\n\n## Useful links\n\n* [Catberry Documentation](https://github.com/catberry/catberry/blob/9.0.0/docs/index.md)\n* [Get Started Guide](https://github.com/catberry/catberry/blob/9.0.0/docs/index.md#get-started)\n* [Plugins and Tools](https://github.com/catberry/catberry/blob/9.0.0/docs/index.md#plugins-and-tools)\n* [Catberry's homepage](https://catberry.github.io/)\n* [Todo application](https://github.com/catberry/catberry-todomvc)\n* [Example application](https://github.com/catberry/catberry-example)\n\n## Why should I use that?\n\n### Architecture\n\n* The entire architecture of the framework is built using the [Service Locator](https://github.com/catberry/catberry/blob/9.0.0/docs/index.md#service-locator) pattern – which helps to manage module dependencies and [create plugins](https://github.com/catberry/catberry/) – and [Flux](https://github.com/catberry/catberry/blob/9.0.0/docs/index.md#flux), for the data layer\n* [Cat-components](https://github.com/catberry/catberry/blob/9.0.0/docs/index.md#cat-components) – similar to [web-components](http://webcomponents.org/) but organized as directories, can be rendered on the server and published/installed as NPM packages\n* Catberry builds a bundle for running the application in a browser as a [Single Page Application](http://en.wikipedia.org/wiki/Single_Page_Application)\n* [ES2015/ES6 support](https://nodejs.org/en/docs/es6/) – native on the server/Node.js and using [Babel](http://babeljs.io/) for a browser\n* The whole framework's API uses [Promises](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Promise)\n* Framework itself is an [express](https://github.com/visionmedia/express)/[connect](https://github.com/senchalabs/connect) middleware, which means you can use it with other [middlewares](http://expressjs.com/en/guide/using-middleware.html)\n\n### Rendering\n\n* Fast and efficient [progressive rendering engine](http://www.phpied.com/progressive-rendering-via-multiple-flushes/) based on\n[node.js streams](http://nodejs.org/api/stream.html#stream_api_for_stream_implementors) on the server\n* Browser rendering does not block the [Event Loop](https://developer.mozilla.org/en/docs/Web/JavaScript/EventLoop), which means your app's UI will never be frozen\n* [Handlebars](https://github.com/catberry/catberry-handlebars), [Dust](https://github.com/catberry/catberry-dust) and\n[Pug](https://github.com/catberry/catberry-pug) template engines are [officially supported](https://github.com/catberry/catberry/blob/9.0.0/docs/index.md#template-engines) (and you can implement your own provider to support any other)\n* Efficient DOM event listening using [event delegation](http://davidwalsh.name/event-delegate)\n\nFor more details please proceed to [Catberry Documentation](https://github.com/catberry/catberry/blob/9.0.0/docs/index.md).\n\n### Typical Cat-component example\n\n```javascript\n'use strict';\n\nclass CoolComponent {\n\n\t/**\n\t * Creates a new instance of the \"CoolComponent\" component.\n\t * @param {ServiceLocator} locator The service locator for resolving dependencies.\n\t */\n\tconstructor(locator) {\n\t\t// you can resolve any dependency from the locator.\n\t}\n\n\t/**\n\t * Gets data for the template.\n\t * This method is optional.\n\t * @returns {Promise\u003cObject\u003e|Object|null|undefined} Data for the template.\n\t */\n\trender() {\n\t\treturn this.$context.getStoreData();\n\t}\n\n\t/**\n\t * Returns event binding settings for the component.\n\t * This method is optional.\n\t * @returns {Promise\u003cObject\u003e|Object|null|undefined} Binding settings.\n\t */\n\tbind() {\n\t\treturn {\n\t\t\t// CSS selector\n\t\t\t'.clickable': () =\u003e window.alert('Ouch!');\n\t\t}\n\t}\n\n\t/**\n\t * Cleans up everything that has NOT been set by .bind() method.\n\t * This method is optional.\n\t * @returns {Promise|undefined} Promise of nothing.\n\t */\n\tunbind() {\n\t\t// nothing to do here we have used bind properly\n\t}\n}\n\nmodule.exports = Some;\n```\n\nThe component is used as a custom tag:\n\n```html\n\u003ccat-cool id=\"unique-value\" cat-store=\"group/CoolStore\"\u003e\u003c/cat-cool\u003e\n```\n\n### Typical Store example\n\n```javascript\n'use strict';\n\nclass CoolStore {\n\t/**\n\t * Creates a new instance of the \"CoolStore\" store.\n\t * @param {ServiceLocator} locator The service locator for resolving dependencies.\n\t */\n\tconstructor(locator) {\n\n\t\t/**\n\t\t * Current universal HTTP request for environment-independent requests.\n\t\t * @type {UHR}\n\t\t * @private\n\t\t */\n\t\tthis._uhr = locator.resolve('uhr');\n\n\t\t/**\n\t\t * Current lifetime of data (in milliseconds) that is returned by this store.\n\t\t * @type {number} Lifetime in milliseconds.\n\t\t */\n\t\tthis.$lifetime = 60000;\n\t}\n\n\t/**\n\t * Loads data from a remote source.\n\t * @returns {Promise\u003cObject\u003e|Object|null|undefined} Loaded data.\n\t */\n\tload() {\n\t\t// Here you can do any HTTP requests using this._uhr.\n\t\t// Please read details here https://github.com/catberry/catberry-uhr.\n\t}\n\n\t/**\n\t * Handles an action named \"some-action\" from any component or store.\n\t * @returns {Promise\u003cObject\u003e|Object|null|undefined} Response to the component/store.\n\t */\n\thandleSomeAction() {\n\t\t// Here you can call this.$context.changed() if you're sure'\n\t\t// that the remote data on the server has been changed.\n\t\t// You can additionally have many handle methods for other actions.\n\t};\n}\n\nmodule.exports = Some;\n```\n\n## Browser Support\nWhile Catberry is capable of rendering pages for any browser on the server, due to the use of certain HTML5 features, like the [History API](https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history), only partial support of old browsers is possible for the client-side JavaScript application.\n\nThe main goal of the Catberry Framework is to use the full power of new technologies and provide a user with the best possible experience.\n\nIn fact, a user gets an HTML page from the server only once and all the rest of the time the whole page is changing in a browser receiving only pure data from API service(s) used with the application.\n\nThanks to Catberry's progressive rendering engine, user receives a page from the server component by component as fast as each component renders its template not waiting for the whole page is built.\n\nCatberry supports 2 last versions of modern browsers and IE 11. It depends on Babel [babel-preset-env](https://github.com/babel/babel-preset-env) preset which config you can override putting a `.babelrc` file in your project.\n\n## Contributing\n\nThere are a lot of ways to contribute into Catberry:\n\n* Give it a star\n* Join the [Gitter](https://gitter.im/catberry/main) room and leave a feedback or help with answering users' questions\n* [Submit a bug or a feature request](https://github.com/catberry/catberry/issues)\n* [Submit a PR](https://github.com/catberry/catberry/blob/9.0.0/CONTRIBUTING.md)\n* If you like the logo, you might want to buy a Catberry [T-Shirt](http://www.redbubble.com/people/catberryjs/works/14439373-catberry-js-framework-logo?p=t-shirt) or a [sticker](http://www.redbubble.com/people/catberryjs/works/14439373-catberry-js-framework-logo?p=sticker)\n\nDenis Rechkunov \u003cdenis@rdner.de\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcatberry%2Fcatberry","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcatberry%2Fcatberry","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcatberry%2Fcatberry/lists"}