Home > Developer > Web Develop
Riotjs Introduction
Riotjs is a simple, elegant, modular UI front-end development framework;
He supports custom tags, has delightful syntax, elegant APIs and very small volumes;
Why a new interface library is needed
The front-end development framework is really a lot, but there is not enough satisfaction, Reactjs seems to be to solve the problem, but the people who used to know that it has many unpleasant weaknesses, we believe that Riotjs found a solution to the problem of the delicate balance of the point, Enough to make the developer happy to use him to solve the interface problem;
Customize tags (custom tags)
Riotjs brings custom labels to all browsers
<todo> <!--layout-- <ul> <li each={Item, I in Items}>{item}</li> </ul> <form onsubmit={Add}> <input ref= "Input" > <button>add #{items.length + 1}</button> </form> <!--style-- <style> h3 { font-size:14px; } </style> <!--logic--- <script> This.items = [] Add (e) { E.preventdefault () var input = This.refs.input This.items.push (Input.value) Input.value = ' ' } </script> </todo> |
Custom tags combine html and js to make it a reusable UI component;
As you can see, Riotjs has delightful grammar and a gentle learning curve, which Reactjs and polymer cannot compare;
Readability
You can use custom tags to create a complex user interface
Take a look at the following interface (what would you write if you used the traditional notation?). ）
<body> <H1>ACME community <forum-header/> <div class= "Content" > <forum-threads/> <forum-sidebar/> </div> <forum-footer/> <script>riot.mount (' * ', {API:FORUM_API}) </script> </body> |
HTML syntax is used to create the user interface;
He has tags and tag attributes that can be nested;
This provides the base support for custom labels;
Riotjs first to the RIOTJS tag parsing into pure JS, and then in the browser execution;
Dom Binding
Minimal DOM update
One-way data flow: Whether it is an update or an uninstallation, it is passed from the parent component to the child component
For higher performance, RIOTJS will precompile expressions and cache expression results;
For better controllability, Riotjs provides many of the life cycle events of custom tags;
Support for service-side rendering
Proximity standard
No proprietary event System
No additional additional libraries required
Compiled rendered Dom can be manipulated freely by other libraries;
No special HTML root tags required
Data-property is not required on DOM tags
Can be very compatible with jquery.
Tool Chain Friendly
You can use tools such as es6,typescript,coffeescript,jade,livescript to create labels;
You can use tools such as npm,commonjs,amd,bower,component to integrate projects;
Can be developed using tools such as Gulp,browserify,grunt;
Minimalist principles
The minimalist principle makes Riotjs different from other class libraries
Easy-to-use syntax
Riotjs's main design goal is to create a minimalist set of label writing syntax;
Convenient shorthand form: class={enabled:is_enabled, Hidden:haserrors ()}
Don't care about render, state, constructor
Inline expression: Add #{Items.length + 1} or class= "item {Selected:flag}"
It doesn't have to be. Logic code is placed in the <script> tag
ES6 Syntax Support
A gentle learning curve
Riotjs API number is 1/10 or 1/100 of the same class JS library
It doesn't take much effort to learn.
Less proprietary stuff, more standard stuff;
Very small size
POLYMER.HTML–49.38KB (gzip)
REACT.MIN.JS–34.89KB (gzip)
RIOT.MIN.JS–10.38KB (gzip)
Fewer bugs
Less pressure on download, faster resolution
Can be embedded, the volume of the library should be smaller than the size of the application
Low maintenance costs, riot does not require a very large team to maintain his
Very perfectly formed.
Riotjs has all the necessary modules:
The modules necessary for the programming of the Responsive interface;
The event library required to write APIs for standalone modules;
The routing module required to control the URL forward and backward function
Summarize
Riot is a universal Web UI component solution that is like a combination of react and polymer, and it does not cause code to explode; You can use it with your intuition; he is small, almost nothing, it is not a reinventing wheel, he is the length of the family, and it is very simple, excellent;
We should focus on components, not on templates;
Put together the logic and presentation of the associated, make a component, so that our entire system will become clearer;
Riot.js Tutorial "One" Introduction
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
