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.
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.
Testing
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:
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 :
- Client-side Routing
- Client-side Middleware systems
- Web components
- Font Icons
- Data-binding
- Javascript prototypes
- Tangular template engine
- Etc
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.
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!
Other posts from Total.js Platform
- 2024-11-01NEWOctober report 2024
- 2024-10-22Performance Testing: Total.js vs. NestJS
- 2024-10-01September report 2024
- 2024-09-27Total.js UI Builder: #2 designing your first interface
- 2024-09-26Total.js V5: Middlewares
- 2024-09-23Beginner Guide to Total.js UI: # 05 Client-side routing
- 2024-09-23Total.js UI #4: Data Binding (Part 2 – Practical Example)
- 2024-09-20Introduction to Total.js UI Builder: A Beginner’s Guide
- 2024-09-13Total.js v5: #06 Understanding File Routing
- 2024-09-09Total.js v5: Defining Routes for Internal Errors