Let’s stop worrying about the complicated structure and use Riot.js

Nowadays, the main factor that’s considered by users when we want to develop Web Application is the flow of application. Web Application Developers need to pay attention to the speed in loading and Responsive Design in order to impress users and make them choose the application.

To create an interaction between Web Applications, developers need to use Javascript as their tool. It points out where users click and helps developers to create programs.

As the commands are created to satisfy users’ needs, more than 100 lines of Javascript are written in the system. jQuery from Javascript Library are used to make the script shorter and easier. However, there is also the Event Management problem in regarding response in some parts of the site, for instance, Redundant Response, Event ordering and Event continuity.

Due to the differences between thinking method and basic programming, it is hard and complicated to deal with Event in Javascript. The original programming is Synchronous which is done step-by-step. One must be completed first before starting the next step. Asynchronous is another basic programming where steps in process may occur at the same time and there is no need to wait for the prior step to complete. This is why programmers who are used to the original one might be a little confused.

From the problems above, developers have been finding ways to improve and control the response to make each part more efficient. This started the ‘Javascript Framework’ used by big companies and users, for example, AngularJS by Google, React by Facebook and Riot.js. Each of them has an ability to respond to the creation of Web Application. The framework is hard and users need to learn more about it.

Sample: Basic Function Todo-List in each Framework

1. AngularJS — a toolset created in 2010

Angular Todo

2. React JS — created in March 2013 and typically written in JSX and ES6

3. Riot.js — created in September 2013

Riot is easier to understand comparing to AngularJS and ReactJs which are really quite difficult. There is no need for the Users to search or study new programs, language or script etc. because HTML, CSS and Javascript knowledge are what they already have.

Riot.js has been specifically created to manage User Interface and this is the reason why Riot.js is smaller than other frameworks. It represents itself as ‘Micro-Library’ that can be used to manage all parts of the website. Also, it can be used with complicated Web Application depending on how you plan to develop the structure.

Table above is the Framework Size Comparison wherein you can see that Riot is smaller than others. So, this Micro-Library can be a good choice for you!

HTML, CSS and JavaScript are three basic factors of a website. Each of these will work separately. Riot will combine all three in one file.

Here is how Custom Tags look like:

1. <like></like>: A tag that we created and basically use HTML. Also can be used in the Pre-Compiler HTML, for example, Jade.
2. <script></script> or Javascript: Script Tag can be inserted based on your preference. Syntax of Pre-Compiler (ex. CoffeeScript, Babel, TypeScript) can be used.
3. <style></style>: A CSS. We can put it in the same file.

Example: How to use tag by riot.mount

2 types of Tag format:

1. Custom tags can be placed by using the particular Name tag
2. HTML Elements as tags must add ‘Attribute’ into the HTML

3 types of Mount:

1. Mount all displayed tags
2. Mount only tags in id=my-element
3. Mount only specified Custom tags

See! It is very simple and you are now able to use Riot!

And if you want to stop all actions with the DOM, following the below instructions to do so.

You need to create a function in ‘Script’ and place it in each Event type of the ‘Attribute’, for example, onclick, onmouseover, onmouseout, onchange. If you do this, you will be able to deal with the event from DOM.

The article above is my first blog with intended to create and write blogs like other GEEKS do! Please let me know if you have any comments or suggestions towards my blog.

Stay tuned for more interesting topics:

- Focus on how to use Riot Features
- Create your own components
- Setup Workflow Front-end Theme Riot + Gulp
- Create Web Application by Riot, RiotControl, PostCSS, Webpack
- Use ‘Riot, Mocha and Chai’ in creating TDD