My accountGet started
Mar 202023
Total.js Platform
3 min read

Total.js tutorial: Simple Todo application (part 2)

Start your journey with the Total.js Framework with a simple Todo application

Part 1 of this tutorial has been a success! It was said to be simple, instructive and awesome. Part 1 has shown how easy it was to make a todo application REST API. if you haven’t read it yet, just click here to read and play with it before you come to Part 2! Part 2 is about the UI interface for interacting with the API that we created in Part 1. You will appreciate how easy and lightweight it is to make UI using the Total.js client-side libraries. We will follow these steps:

  • Add the UI page route.
    • UI preview.
    • Defining UI endpoint.
  • Add the UI page.
    • Layout HTML file.
    • Index HTML file.
  • Testing.
  • Understanding the key concepts of the Total.js Client-side library.

Let us jump in and give a UI to our to-do application.

Add the UI page route

Adding a UI page will require route definition. In our case the / (root) endpoint is available, so we are using it for returning the user interface to application users.

UI preview

Before you move to the next step, let the following gif describes the result of this application.

Image description

Before you even ask it, let me tell you that this is neither React nor Angular, this is a SPA (Single Page Application) implementation using Total.js client side and everything is dynamic, fast and reactive. Total.js is amazing! Let us move to discover how to do that.

Defining UI endpoint

Create a new file in controllers, /controllers/default.js and add the following code:

Add the UI page

The controller will be looking for index.html in the views folder, so we need to prepare that file and try to organize things to meet good practices.

Add layout HTML file.

Working with big HTML files is not easy. To avoid scrolling up and down in one file we will create a layout.html page in the views folder. This file will contain the HTML footer and most important the HTML head part which will hold CDN links and CSS style. Just create /views/layout.html file and insert the content below:

Good to know: Notice the @{ body } expression in the body tag. This tag is important in including the other parts of the HTML. You should keep it there always.

Add index.html HTML file.

Now we can add the index.html file in the views and the framework will include it within the layout file thanks to @{body} expression.


To test it out, we simply have to run $ node index.js in the root of the project and then open http://localhost:5000/ in the browser. You should see a simple page as follows:

Image description

You can download the source code of this tutorial here. I will also publish a video tutorial to explain every aspect of the components and scripts used in this UI. So consider subscribing to my Youtube channel so that I will notify you whenever I publish new videos. Click here to subscribe.

Key concepts of the Total.js Client-side library

The client-side library of Total.js is Jcomponent. it is a complete alternative to Angular, React and Vue.js. Its installation is very simple, you just need to import the library via a CDN in the head of your HTML document:

Once you have that CDN loaded into your HTML page, you have a bunch of amazing tools such as :

You can build some nice and modern UI with this library. Last year I tested some UI interfaces with JComponent. I am not sure it is impressive because I am not a very good front-end developer but look at the potential in the following WhatsApp web clone using JComponnent.

Image description

Image description

I hope that this tutorial has been useful. Don’t forget to like share and subscribe.

I know that I did not explain very much and that is why a video version of this tutorial is coming soon. Just subscribe to my channel by clicking here. If you have some questions you can leave some comments here and/or check the Total.js Telegram community link below. Thank you!