Isomorphic web-apps with Catberry.js
I want to tell you a story how I came to the conclusion that we need one more framework for node.js world and what things this framework can do much better than all others.
Main purpose of the framework is to create fast and modular isomorphic web-applications with perfect architecture using one code on a server and in a browser. If term “isomorphic” is unfamiliar for you, please read this short article that explains a lot. So, you write one code using server-side JavaScript syntax and then this code is used in a browser to render page parts which modules are responsible for. And the main feature is that you will get Single Page Application automatically and it works using History API.
Why?
Very often, when you tell somebody that you have developed new framework you probably see this:
I do not know why, but almost all people are angry about new frameworks, they begin to hate you if you do not use a framework they like. It is awful. If everybody think like those people, then technology progress will just stop. In my opinion, if you are sure that you can create something better you should do it, the motivation to create best things ever moves progress forward.
A framework I am talking about is called Catberry.js and it is open-sourced on GitHub.
To learn more about the framework you can just read overview section on its website, but the following part of the post is to prove a concept of the framework and describe why it is different.
What is wrong with web?
In my own opinion many things in web-development are wrong now and it should be fixed, therefore I started new framework, because I should prove, first of all for myself, that there are ways to improve web-development.
But what is wrong with web-development now?
Here is a short list:
- Full buffering of output (in-memory template rendering)
- Repeating of a rendering logic for browser in different way
- Different state of the page if you share a link with others after some actions on the page, or it restores the state after the page has been loaded (no SEO)
- Separated browser-code building system
Let’s talk about every point more detailed.
Full buffering of output (in-memory template rendering)
Other frameworks
When you use, to say, express framework, which is the most popular and minimalistic framework in node.js world, you use in-memory template rendering. It means browser is receiving nothing while your server is gathering required data from database or web-services to render all templates. It is sad, is not it? Why browser should be idle and do nothing while your server works on every request?
I think it is wrong.
What are drawbacks?
- A user sees a white empty page until all data for rendering whole page is not received at the server
- Browser does nothing and stays idle
- If data receiving process is slow, user does not see anything for a long long time and becomes mad
- Memory usage is big, server needs to buffer all rendering templates in memory for every user
Catberry framework
The most awesome thing I know in node.js is Stream API. Yes, you can implement your own streams and almost each operation could be implemented using streams. Catberry uses a stream-based rendering engine. When Catberry receives a request it renders the root template very fast (probably, it is just a static template with header and footer) and starts sending it to the browser immediately. Root template has HEAD element with CSS, scripts and maybe other stuff that browser starts to get and to receive concurrently. While Catberry sends root template to the browser, it can find references to other templates and then pause the main stream and invoke rendering of module which should provide data for template found in the main stream, when data is received it is used for streaming of rendered template to the browser and this process repeats recursively.
Well, what advantages will you receive using Catberry stream-powered engine?
- After a minimal delay, browser starts receiving page from the server
- Browser gets images, CSS and JavaScript files concurrently without waiting for the whole page
- Memory usage is much smaller when you use streaming
- Dramatically improvement of performance
This example below shows how browser does requests for additional resources while receiving “slow” page from Catberry. Because of Catberry uses streaming, all resources are received at the beginning of page loading.
Repeat of the rendering logic at the browser in a different way
Other frameworks
When you develop web-applications using most server-side frameworks you have nothing in the browser from it (except new isomorphic frameworks). I mean if you have already written rendering logic at server-side why you have to re-implement it in a browser code using other frameworks, languages and etc? Why we need to use different code to render same page parts in browser?
I think it is wrong.
Catberry framework
Catberry says to developers “Hey, you need to write only server-side JavaScript code and I convert it to browser JavaScript when it is needed”. When catberry application starts it builds itself using browserify, so you just need to include a browser bundle JavaScript file (/bundle.js) inside your root template (usually in HEAD tag). And it just works! A lot of catberry-core modules have different implementations for using at a server and a browser but the same interface. When application builds browser script bundle, it uses implementation of modules for a browser and includes modules developed by you. And for your own modules catberry-core modules provide the same interface and that means the isomorphic application.
Different state of the page if you share a link with others after some actions on the page
Other frameworks
This problem is simple. You have loaded page and click some links or do other actions that change a view of this page and then you want to share a link with your friend. But when your friend opens your link, she or he sees another view of the page. Why? Because front-end developers very often change state of the page and save it only in the browser, server knows nothing about that and can not reproduce the state for another user. Yes, now modern frameworks have cool routing systems that restore state, but it happens after page has been loaded and search crawlers can not see the content and it breaks SEO.
I think it is wrong.
Catberry framework
Catberry gets the whole page state from URL because URL was created exactly for it. When you click something on the page it changes URL and does a signal to the module that “your state has been changed” and module renders new state of all templates which are depend on a change. What about huge and ugly URLs, you may ask? Catberry has an awesome routing system that looks similar to other frameworks. And the main feature is that Catberry restores state from URL at the server too. It means search crawler sees the same content you can get in a browser using Single Page Application. SEO is in safe!
All details are described in documentation.
Separated browser code build system
Other frameworks
I saw projects that have documentation how to build it bigger than the whole source code of the project. It scares me and I lose any wish to be involved in the project. Why projects do not build itself on startup? Why we need to provide a user with tons of instructions how to get our project work?
I think it is wrong.
Catberry framework
Catberry application builds browser bundle on startup or you can invoke catberry.build() method wherever you want at use it separately. You just need to put your modules into the special directories and add script tag for /bundle.js and catberry does everything needed to get Single Page Application in browser.
But what exactly do Catberry during build?
- Compiles templates for browser usage
- Converts server JavaScript code into browser JavaScript and builds one browser bundle script
- Copies all stuff into a bundle.js to the public directory
- Watches and rebuilds all changed stuff when it is used in debug mode
All details are described in documentation.
In conclusion
So after all stuff you have read, do you think it is just yet another useless framework?
If so, it is ok, it means Catberry is just not for you, but if you want to see how Catberry works you can visit konfettin.ru — web-site of Russian startup that already uses this framework. Just feel how fast is it.
Please visit the web-site catberry.org and read everything about the framework. Also, there is a ToDoMVC app.
Want to start with Catberry? Just follow these instructions.
If you find this project interesting, please generously support it with a “star” on GitHub and npm. Contributing is welcome.
Follow @catberryjs on Twitter
And contribute on GitHub
