Catberry is an isomorphic framework for building universal front-end apps using components, Flux architecture and progressive rendering.

Overview

Catberry

Build Status codecov.io Gitter

What the cat is that?

Catberry was developed to help create "isomorphic/Universal" Web applications.

Long 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".

TLDR;

Install Catberry CLI using following command:

npm install -g catberry-cli

Use Catberry CLI to create an empty project with Handlebars support like this:

catberry init empty-handlebars

Or an example application that works using GitHub API:

catberry init example

Also, you can get a list of all templates:

catberry init ?

Useful links

Why should I use that?

Architecture

Rendering

For more details please proceed to Catberry Documentation.

Typical Cat-component example

'use strict';

class CoolComponent {

	/**
	 * Creates a new instance of the "CoolComponent" component.
	 * @param {ServiceLocator} locator The service locator for resolving dependencies.
	 */
	constructor(locator) {
		// you can resolve any dependency from the locator.
	}

	/**
	 * Gets data for the template.
	 * This method is optional.
	 * @returns {Promise<Object>|Object|null|undefined} Data for the template.
	 */
	render() {
		return this.$context.getStoreData();
	}

	/**
	 * Returns event binding settings for the component.
	 * This method is optional.
	 * @returns {Promise<Object>|Object|null|undefined} Binding settings.
	 */
	bind() {
		return {
			// CSS selector
			'.clickable': () => window.alert('Ouch!');
		}
	}

	/**
	 * Cleans up everything that has NOT been set by .bind() method.
	 * This method is optional.
	 * @returns {Promise|undefined} Promise of nothing.
	 */
	unbind() {
		// nothing to do here we have used bind properly
	}
}

module.exports = Some;

The component is used as a custom tag:

<cat-cool id="unique-value" cat-store="group/CoolStore"></cat-cool>

Typical Store example

'use strict';

class CoolStore {
	/**
	 * Creates a new instance of the "CoolStore" store.
	 * @param {ServiceLocator} locator The service locator for resolving dependencies.
	 */
	constructor(locator) {

		/**
		 * Current universal HTTP request for environment-independent requests.
		 * @type {UHR}
		 * @private
		 */
		this._uhr = locator.resolve('uhr');

		/**
		 * Current lifetime of data (in milliseconds) that is returned by this store.
		 * @type {number} Lifetime in milliseconds.
		 */
		this.$lifetime = 60000;
	}

	/**
	 * Loads data from a remote source.
	 * @returns {Promise<Object>|Object|null|undefined} Loaded data.
	 */
	load() {
		// Here you can do any HTTP requests using this._uhr.
		// Please read details here https://github.com/catberry/catberry-uhr.
	}

	/**
	 * Handles an action named "some-action" from any component or store.
	 * @returns {Promise<Object>|Object|null|undefined} Response to the component/store.
	 */
	handleSomeAction() {
		// Here you can call this.$context.changed() if you're sure'
		// that the remote data on the server has been changed.
		// You can additionally have many handle methods for other actions.
	};
}

module.exports = Some;

Browser Support

While Catberry is capable of rendering pages for any browser on the server, due to the use of certain HTML5 features, like the History API, only partial support of old browsers is possible for the client-side JavaScript application.

The main goal of the Catberry Framework is to use the full power of new technologies and provide a user with the best possible experience.

In 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.

Thanks 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.

Catberry supports 2 last versions of modern browsers and IE 11. It depends on Babel babel-preset-env preset which config you can override putting a .babelrc file in your project.

Contributing

There are a lot of ways to contribute into Catberry:

Denis Rechkunov [email protected]

Comments
  • не активные сторы

    не активные сторы

    у меня тут возникла ситуация ... начал писать приложение, сделал несколько компонентов со своими сторами. поначалу все было нормально ... но после того как приложение еще малость выросло, то у активных компонентов перестали активироваться сторы, т.е. активен получается только один, это самый первый который был сгенерирован .... заскринил отладчик cattbery, как оно сейчас там ... https://yadi.sk/i/3UonHeRqiiqiY

    кто подскажет про подводные камни, из-за чего могут отвалиться сторы у компонентов?

    question 
    opened by wormen 24
  • Microsoft Edge fails executing Catberry's client-side JavaScript bundle

    Microsoft Edge fails executing Catberry's client-side JavaScript bundle

    It seems like Microsoft Edge has a bug in its JavaScript parser or virtial machine. It just doesn't open any website where Catberry's bundle.js is included.

    bug 
    opened by rdner 20
  • Asset management for LESS/SCSS...

    Asset management for LESS/SCSS...

    Are there any plans to support some type of asset management for Catberry such as Gulp? Or am I missing something, is there already something in place for this?

    I found this commit that talks of asset but it doesn't seem to support LESS or SCSS

    feature request 
    opened by Torann 14
  • Routing

    Routing

    There is another point that I can not understand how to implement the essence of the problem is quite simple ......

    I need to when you open the root site, opens a certain page template specifically for the home page

    how to do for all other kind of figured out ....

    question routing rendering 
    opened by wormen 13
  • Code splitting

    Code splitting

    Let's say we have some heavy components, which used rather rarely. Sure we want to load/use such components only when they needed. Is there a way to split browser bundle to chunks (modules) which will be loaded later on-demand?

    question feature request modules API 
    opened by anwerso 11
  • Page scrolls to top after using browser bac/forward buttons

    Page scrolls to top after using browser bac/forward buttons

    After pressing browser's back or forward button, the page scrolls to top. That is not what website visitor would expect

    To reproduce: open http://catberry.org/, click "Overview". Scroll Overview page to bottom, press back, scroll Main page to bottom, press forward. Now one would expect to see Overview page scrolled to bottom, but it is at top. Now press back - and the Main is also at top

    In fact, the whole page state is lost. If there would be a text input on Main page, and I enter some text there, then navigate to Overview, and then press back - that input will be cleared (this can be observed on flamp.ru, for example)

    question 
    opened by ademenev 10
  • .changed() во вложенных компонентах

    .changed() во вложенных компонентах

    Приношу извинения за русский язык.

    Например, у нас на странице отображается список, и к каждому элементу прикреплена кнопка "Нравится", при нажатии на которую нужно отправить запрос к API о действии пользователя и заменить кнопку на текст "Вам нравится". Я понимаю, как это сделать, когда мы находимся на странице подробного описания элемента списка, где только одна такая кнопка, и сам компонент связан с нужным нам Store.

    Но что делать, когда элементов много? В этом случае Store будет "хранить" именно список, и при запуске .changed() нам придется перерисовывать весь компонент списка, хотя нужно поменять только один из элементов.

    Если в цикле выводить список в виде вложенных компонентов, то возникает вопрос, к каким Store привязывать эти компоненты.

    question 
    opened by KleinMaximus 10
  • Pass data from parent component to its childrens

    Pass data from parent component to its childrens

    E.g. Is there method to pass data from post-list component, which make API request to it's childrens, post-item components, which displays data.

    cat-post-list

    h2 Posts
    each post in posts
      cat-post-item
    

    cat-post-item

    article
      h3 #{post.title}
      p #{post.content}
      a(href="/posts/#{post.id}") Read more
    
    question 
    opened by imShara 9
  • Add new methods for getting components by class

    Add new methods for getting components by class

    Catberry has methods this.$context.getComponentById and this.$context.getComponentByElement

    May be add new method this.$context.getComponentByClassName

    feature 
    opened by reenko 8
  • Empty this.$context.state when use = and & in value

    Empty this.$context.state when use = and & in value

    Bug when did I use '=' and '&' in value.

    In routes.js

    page?what=:what[store/Name]
    

    When did I load store this.$context.state === {} state.what - is undefined

    URL: page?what=%3Dtes

    question 
    opened by reenko 8
  • Is Catberry really fast?

    Is Catberry really fast?

    Fast and efficient server-side progressive rendering engine based on node.js streams ... Thanks to Catberry's very fast page rendering engine, user receives refreshed page as fast as API server could provide data for it.

    I'm new to JS server-side development and I have never tried to benchmark it before. This time I wanted to try to build my first JS isomorphic app. Thus, I checked different available frameworks and Catberry claimed to be "fast", so I started with it... I took este.js as another isomorphic framework and setup TodoMVC examples for both frameworks. Here are the results that I got with siege -t 1m -c 500 -b http://127.0.0.1:3000 on io.js v2.2.1 on my Core i7 (io.js loaded one core):

    Catberry: 42.42 trans/sec

    Este.js: 165.55 trans/sec

    I have started Catberry-todomvc with npm start and Este.js with gulp -p. Have I done something wrong or Catberry is not that fast?

    Full siege report for Catberry:

    Transactions:                   2520 hits
    Availability:                 100.00 %
    Elapsed time:                  59.40 secs
    Data transferred:               8.14 MB
    Response time:                  9.40 secs
    Transaction rate:              42.42 trans/sec
    Throughput:                     0.14 MB/sec
    Concurrency:                  398.97
    Successful transactions:        2520
    Failed transactions:               0
    Longest transaction:           43.19
    Shortest transaction:           0.04
    

    Full siege report for Este.js:

    Transactions:                   9918 hits
    Availability:                 100.00 %
    Elapsed time:                  59.91 secs
    Data transferred:              10.24 MB
    Response time:                  1.63 secs
    Transaction rate:             165.55 trans/sec
    Throughput:                     0.17 MB/sec
    Concurrency:                  269.79
    Successful transactions:        9918
    Failed transactions:               0
    Longest transaction:           19.16
    Shortest transaction:           0.08
    

    Just pointless results:

    Hello-world on pure io.js (require("http")): 3469.60 trans/sec

    Hello-world on Expressjs: 2324.17 trans/sec

    Edited by @pragmadash. Update: https://github.com/catberry/catberry-benchmarks – the benchmark shows that Catberry has almost the same performance as bare Express with the same template engine.

    question 
    opened by frol 8
  • How can I make it better?

    How can I make it better?

    We have next situation:

    On main page (or subpage) we have a feed with reviews and comments for each review. When I change a comment or a review or set like for comment all components in a feed re-render (no in DOM, there is a view calling component.render).

    How can I make it better?

    Example: https://github.com/chetverikov/catberry-trouble

    question 
    opened by chetverikov 1
  • Redirect for current page adds hash for URL

    Redirect for current page adds hash for URL

    If call this.$context.redirect(this.$context.location.toString()) then Catberry add '#' for URL and scroll to top this page. I think if current location and next location is equals then not necessary to redirect. It's reproduce only for Firefox.

    bug routing 
    opened by reenko 0
  • getActiveRouteName()

    getActiveRouteName()

    
    // in routes.js
    module.exports = [
      {
        name: 'index',
        expression: '/'
      },
      {
        name: 'companies',
        expression: '/companies?page=:page[Companies/Entities]'
      },
      {
        name: 'company',
        expression: '/companies/:id[Companies/Entity]'
      },
      {
        name: 'analytics',
        expression: '/analytics',
      }
    ];
    
    // in Content.js store
    // http://localhost/companies/a2d3f4123123
    // this.$context.getActiveRouteName() === 'company'
    
    render() {
      return PAGES[this.$context.getActiveRouteName()];
    }
    
    
    
    feature request routing modules API help wanted 
    opened by chetverikov 2
  • Create a library for testing components and stores against several data cases

    Create a library for testing components and stores against several data cases

    Need to create a library that supports testing components and stores in an easy way.

    Might be a declarative approach or some kind of API for creating components and stores using specified data.

    question modules API help wanted 
    opened by rdner 1
  • Better configuration system

    Better configuration system

    Now Catberry supports a config object while creating the app object. But it would be nice to have a good configuration system that supports:

    • strict rule where the configuration should be stored (package.json?)
    • several environments support (like debug, production, stage)
    • default config values
    • generation of new environment configuration based on default values
    feature build system core help wanted 
    opened by rdner 0
Releases(9.0.0)
  • 9.0.0(Mar 27, 2017)

    • New optimized build system that splits code into externals.js and app.js (issue #209)
    • Multiple template provider support in a project (issue #245)
    • Drop IE < 11 support (issue #319)
    • Drop Node.js < 6.10 support (issue #325)
    • Remove sendBroadcastAction method from the context (issue #318)
    • Use https://github.com/babel/babel-preset-env for specifying target browsers in .babelrc file (issue #319)
    • Use https://github.com/babel/babili instead of Uglify for minifying ES2015 (issue #321)
    • Fix #334: server-side rendering throws unexpected error if there is no document component
    • Replace Jade with Pug (issue #329)

    Please have a look at the migration guide All code changes you can find here https://github.com/catberry/catberry/compare/8.6.1...9.0.0

    Source code(tar.gz)
    Source code(zip)
  • 8.6.1(Mar 2, 2017)

  • 8.6.0(Oct 7, 2016)

    • Add API for redirection using HTTP status code 301 (Permanent redirect). (PR #309 by @reenko). Read more here https://github.com/catberry/catberry/blob/develop/docs/index.md#shared-context
    Source code(tar.gz)
    Source code(zip)
  • 8.5.1(Aug 22, 2016)

    Fixed bug with the component attribute mutation (used a wrong morphdom hook) (issue #305) Fixed tests for watchers in the debug mode on OS X (issue #304)

    Source code(tar.gz)
    Source code(zip)
  • 8.5.0(Aug 21, 2016)

    • Updated dependencies
    • Migrated to morphdom 2.0
    • Improved test coverage for "debug mode"
    • Add CI build for Node.js 6.0
    • Fixed the exception when click on SVG elements having a click event handler on a parent element (issue #292)
    Source code(tar.gz)
    Source code(zip)
  • 8.4.2(Jul 7, 2016)

    Since 8.3.0 version the regular expression routing backward compatibility was accidentally broken (pr #296). This release fixes the problem.

    Source code(tar.gz)
    Source code(zip)
  • 8.4.1(May 30, 2016)

  • 8.4.0(May 17, 2016)

    • Now all unbind calls are strictly ordered by components hierarchy
    • Refactored the renderer code to use one method for components traversal
    • Fixed issue when unbind method was called several times for a descendant component during collectGarbage after its parent was created using createComponent method
    • Improved test coverage for rendering
    Source code(tar.gz)
    Source code(zip)
  • 8.3.1(May 16, 2016)

    Fixed #281: Remove error when attributes are not specified in createComponent method (thanks to @reenko). Fixed #284: Fatal error occurs while watching components/stores in debug mode and removing them (thanks to @chetverikov).

    Source code(tar.gz)
    Source code(zip)
  • 8.3.0(May 10, 2016)

    • Wrote a real parser for Catberry's route language (get rid of magic RegExps and show parsing errors)
    • Now the routes are compiled in server-side environment and the browser bundle contains compiled descriptors (parser's code is not included in the bundle)
    • Now warnings are shown when a store on the route list does not exist (#272)
    • Added support for generating URIs for an existing route using specified parameters (can be used for templates to generate links inside the app).

    All details can be found in the docs.

    Source code(tar.gz)
    Source code(zip)
  • 8.2.0(Apr 16, 2016)

    Add new methods to $context for searching components in the DOM (issue #261):

    • this.$context.getComponentsByTagName('tag-name', parentComponent) – gets a component object list by the tag name.

    • this.$context.getComponentsByClassName('class-name', parentComponent) – gets a component object list by the class name.

    • this.$context.queryComponentSelector('selector', parentComponent) – gets a component object by the selector.

    • this.$context.queryComponentSelectorAll('selector', parentComponent) – gets a component object list by the selector.

      parentComponent – a parent component object for looking among nested components only (optional).

    Source code(tar.gz)
    Source code(zip)
  • 8.1.3(Apr 15, 2016)

    Fixed #262: Catberry pushed history state after the whole page is rendered, which is incorrect behavior and causes errors when you use this.$context.notFound() and reload the page.

    Source code(tar.gz)
    Source code(zip)
  • 8.1.2(Apr 11, 2016)

  • 8.1.1(Apr 10, 2016)

  • 8.1.0(Apr 9, 2016)

    Fix #253: fix query parameter parsing in a routing rule when the value is not a string. Solve #246: now component IDs are optional, you don't have to set them.

    Since this release, there is no infinite loop prevention while rendering components (previously if Catberry rendered a component with the same ID it would keep it empty to prevent infinite recursion).

    Source code(tar.gz)
    Source code(zip)
  • 8.0.4(Apr 9, 2016)

    Fix #251 Babel 6 does not support IE <= 10.

    It turned out that Babel 6.0 dropped IE <= 10 support. So, this fix uses two additional transforms in Babel preset which make the support possible. Otherwise, it's impossible to support IE <= 10 using new Babel.

    But please be aware of these transforms:

    • https://babeljs.algolia.com/docs/advanced/transformers/spec/proto-to-assign/
    • https://babeljs.algolia.com/docs/advanced/loose/
    Source code(tar.gz)
    Source code(zip)
  • 8.0.3(Mar 19, 2016)

  • 8.0.2(Mar 14, 2016)

    Fix #236 Breakpoints don't work on source maps in debug mode Fix #237 Wrong user-agent in error message on the server and no message at all in a browser.

    Source code(tar.gz)
    Source code(zip)
  • 8.0.0(Mar 13, 2016)

    Release includes the milestone. The whole list of commits can be found here.

    Notable changes:

    • Fixed #230: wrong HEAD merging when has <link> tags but not rel="stylesheet".
    • The entire infrastructure of plugins and modules migrated to ES2015/ES6, but still supports ES5 cat-components and stores.
    • ES2015/ES6 source code runs natively on Node and is compiled using Babel for a browser.
    • Huge update of the documentation and readme.

    Following plugins are updated:

    Following plugins are excluded to separate plugins:

    There are several changes that break backward compatibility, please read the 7.x => 8.x migration guide.

    Thank you so much @chetverikov @reenko @jonathanpollack and @JuliaRechkunova for great work on the release – you've made this release possible!

    Source code(tar.gz)
    Source code(zip)
  • 7.1.2(Feb 13, 2016)

  • 7.1.0(Feb 2, 2016)

  • 7.0.3(Dec 12, 2015)

  • 7.0.2(Dec 12, 2015)

  • 7.0.0(Nov 11, 2015)

    From this point, Catberry officially supports only Node.js >= 4. Because of jsdom in its unit tests.

    Browserify is updated to version 12. Possibly breaks backward compatibility of Plugin API. Updated all other dependencies with minor changes. Updated JSCS config, now it's much stricter.

    Source code(tar.gz)
    Source code(zip)
  • 6.2.2(Oct 12, 2015)

  • 6.2.1(Sep 29, 2015)

Owner
Catberry.js
Catberry is an isomorphic framework for building universal front-end apps using components, Flux architecture and progressive rendering (no longer maintained).
Catberry.js
🍔 A Node.js Serverless Framework for front-end/full-stack developers. Build the application for next decade. Works on AWS, Alibaba Cloud, Tencent Cloud and traditional VM/Container. Super easy integrate with React and Vue. 🌈

Midway - 一个面向未来的云端一体 Node.js 框架 English | 简体中文 ?? 欢迎观看 Midway Serverless 2.0 发布会回放: https://www.bilibili.com/video/BV17A411T7Md 《Midway Serverless 发布

Midway.js 6.3k Jan 8, 2023
:seedling: Next-Gen AI-Assisted Isomorphic Application Engine for Embedded, Console, Mobile, Server and Desktop

lychee.js Mono Repository Important Notes to follow through Installation Quirks: The lycheejs-engine Repository needs to be installed to the path /opt

Cookie Engineer 791 Dec 31, 2022
:rocket: Progressive microservices framework for Node.js

Moleculer Moleculer is a fast, modern and powerful microservices framework for Node.js. It helps you to build efficient, reliable & scalable services.

MoleculerJS 5.5k Jan 4, 2023
Marble.js - functional reactive Node.js framework for building server-side applications, based on TypeScript and RxJS.

Functional reactive Node.js framework for building server-side applications, based on TypeScript and RxJS. Ecosystem Name Description @marblejs/core F

Marble.js 2.1k Dec 16, 2022
Realtime.js - a fast frontend framework based on Web-Components.

Realtime.js is a fast frontend framework based on Web-Components and Proxies. It has a lot of features to simplify your way of live as a vanillajs developer. The framework is programmed in such a way, that you can edit it yourself if you need additional features.

Kilian Hertel 7 Nov 1, 2022
Cross-platform project template using Electron and Angular with the Phaser game engine. Project has Flexbox integrated for easy and responsive organization of components around the Phaser canvas.

Coher3nTS Project This is an Angular project template with Phaser nested inside, set up to run with Electron. Cross-Platform & Responsive The template

Tim B 18 Dec 17, 2022
A template project for building high-performance, portable, and safe serverless functions in Vercel.

Tutorial | Demo for image processing | Demo for tensorflow This is a Next.js project bootstrapped with create-next-app. This project is aimed to demon

Second State 63 Dec 8, 2022
🥚 Born to build better enterprise frameworks and apps with Node.js & Koa

Features Built-in Process Management Plugin System Framework Customization Lots of plugins Quickstart Follow the commands listed below. $ mkdir showca

egg 18.3k Dec 29, 2022
A well documented set of tools for building node web applications.

Perk Framework Perk is a well documented set of tools for building node web applications. The goal of Perk is first and foremost to provide a well doc

Aaron Larner 179 Oct 26, 2022
Zeronode - minimal building block for NodeJS microservices

Zeronode - minimal building block for NodeJS microservices Why Zeronode? Installation Basics Benchmark API Examples Basic Examples Basic Examples [Adv

Steadfast 120 Oct 21, 2022
A framework for real-time applications and REST APIs with JavaScript and TypeScript

A framework for real-time applications and REST APIs with JavaScript and TypeScript Feathers is a lightweight web-framework for creating real-time app

Feathers 14.3k Jan 1, 2023
Fast and low overhead web framework, for Node.js

An efficient server implies a lower cost of the infrastructure, a better responsiveness under load and happy users. How can you efficiently handle the

Fastify 26k Jan 2, 2023
🚀 The Node.js Framework highly focused on developer ergonomics, stability and confidence

Sponsored by FOSS United is a non-profit foundation that aims at promoting and strengthening the Free and Open Source Software (FOSS) ecosystem in Ind

AdonisJS Framework 13.4k Dec 31, 2022
MVC framework making it easy to write realtime, collaborative applications that run in both Node.js and browsers

Derby The Derby MVC framework makes it easy to write realtime, collaborative applications that run in both Node.js and browsers. Derby includes a powe

DerbyJS 4.7k Dec 23, 2022
The React Framework

Next.js Getting Started Visit https://nextjs.org/learn to get started with Next.js. Documentation Visit https://nextjs.org/docs to view the full docum

Vercel 98.6k Jan 5, 2023
Fast, unopinionated, minimalist web framework for node.

Fast, unopinionated, minimalist web framework for node. const express = require('express') const app = express() app.get('/', function (req, res) {

null 59.5k Jan 5, 2023
The Intuitive Vue Framework

Build your next Vue.js application with confidence using Nuxt: a framework making web development simple and powerful. Links ?? Documentation: https:/

Nuxt 41.8k Jan 9, 2023
Realtime MVC Framework for Node.js

Website Get Started Docs News Submit Issue Sails.js is a web framework that makes it easy to build custom, enterprise-grade Node.js apps. It is design

Balderdash 22.4k Dec 31, 2022
The Simple, Secure Framework Developers Trust

@hapi/hapi The Simple, Secure Framework Developers Trust Build powerful, scalable applications, with minimal overhead and full out-of-the-box function

hapi.js 14.1k Dec 31, 2022