Originally created as a templating tool for Content Management Systems, Rino has evolved into a powerful web development framework. In this post, we'll explore Rino and its unique features.
Rino vs. Vue and React
Is Rino better than Vue and React? Well, it's not about being better; it's about being different. While Vue and React are primarily used for building a web application, Rino focuses on building web pages and support Server-Side Rendering (SSR) and Static Site Generation (SSG) like Next (React) and Nuxt (Vue).
Installation
Getting started with Rino is easy. You can set up your project manually, but we've also prepared a project starter to streamline the process:
npm create rino@latest
Once your project is set up, you can start development with the following command:
npm run dev
Understanding the Rino System
Rino divides the entire development process into two key parts: preprocessing and client-side rendering. Preprocessing involves the Rino core building a web page from preprocessing syntax. You can also incorporate Rinokit or any other front-end libraries for client-side rendering. In a Rino page, anything that's preprocessed begins with the @ symbol, such as {{ @component, ./src/components/component-name.tot }}.
One unique aspect of Rino is its reliance on the .tot file format. Originally designed as an attempt to create a JavaScript database, it evolved into a data management file format. Rino leverages the .tot format because of its simplicity, linearity, and readability. Additionally, you can use .tot files for data storage, and even internationalization (i18n) can be achieved with them.
<d:html>
</d:html>
<d:js>
</d:js>
<d:css>
</d:css>
<d:somd-data>
</d:somd-data>
Generating a component with Javascript
First, introducing a new feature that has been added recently. This is a feature to create components with Javascript. And the recently created document tool Rino Docs uses this to create sidebar elements. You can create various things using ‘result’, ‘data’ and ‘props’.
{{(
result = `<ul class="menu-list">`
let list = data.pageList;
for(let i = 0; i < list.length; i++)
{
if(i == 0)
{
result = result + `
<li><a href="/">${ list[i] }</a></li>
`;
}
else
{
result = result + `
<li><a href="/${ list[i] }.html">${ list[i] }</a></li>
`;
}
}
result = result + `</ul>`
)}}
Editing a page
Editing a Rino page is straightforward. For example, here's how you can structure an index.tot page.
./src/pages/index.tot:
<d:html>
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="main.js"></script>
<link rel="stylesheet" href="style.css">
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{ @data.title }}</title>
</head>
<body>
Some content..
</body>
</html>
</d:html>
<d:js>
</d:js>
<d:css>
</d:css>
If you're familiar with Vue, you'll find it relatively easy to understand Rino's structure. HTML goes inside <d:html></d:html>, JavaScript inside <d:js></d:js>, and CSS inside <d:css></d:css>. These components will be built into respective HTML, JS, and CSS files.
Markdown and Tot Support
Rino offers native support for Markdown and .tot files. You can include them in your pages as follows:
<d:html>
some html content...
{{ @md, ./src/mds/somecontent.md }}
some html content...
</d:html>
<d:html>
some html content...
{{ @tot.tagname, ./src/tots/somedata.tot }}
some html content...
</d:html>
Component support
Rino simplifies component integration. To include a component, follow these steps:
- Use the @component
- Specify the file path to the component
- Add props (We are not going to use props in the example.)
./src/components/sometest.tot:
<d:html>
some html...
{{ @component, ./src/components/some-component.tot }}
some html...
</d:html>
./src/components/some-component.tot:
<d:html>
<div>
some component
</div>
</d:html>
Result:
some html...
<div>
some component
</div>
some html...
Adding a New Page
Adding a new page in Rino is straightforward. You can modify index.js and pass a list of pages, or in the default setting, you can add another page from pages.js. Here's how you can do it.
./src/pages.js:
const path = require('path');
async function pages()
{
return [
{
data: {
title: "Rino.js",
desc: "Fast learning, preprocessing, intuitive web framework. Rino.js",
url: ""
},
pageFilename: path.resolve(__dirname, "./pages/index.tot"),
distDirname: path.resolve(__dirname, "../dist/"),
filenames: {
css: "style.css",
js: "main.js"
}
},
{
Another page information
}
]
}
// Make sure filenames are diffrent between pages.
// Because exported HTML, Javascript and CSS are should be totally different. For making files more light.
module.exports = { pages }
For the last
Rino offers an interesting approach to web development. Its simplicity and support for .tot files make it a unique addition to the web development toolkit. Give it a try and see how it fits into your next project!
Top comments (0)