Introduction to Riot.js: a powerful minimalistic UI DOM library with clean and concise syntax. It has live examples in plunker so you can play and understand as you read the presentation.
http://riotjs.com/ • Tiny size: Riot.js(9.32kb) vs React.js(44.32kb) vs Angular2 (125.29kb) • Virtual DOM: the smallest possible amount of DOM updates • Choose your own language: plain Js, CoffeeScript, Typescript, ES6 • Integrate with NPM (node package manager) • Concise syntax • The goal is to build reusable components (called tags)
place the custom tag anywhere inside the body --> <sample></sample> <!-- include riot.js --> <script src="riot.min.js"></script> <!-- include the tag --> <script src="sample.tag" type="riot/tag"></script> <!-- mount the tag --> <script>riot.mount("sample")</script> </body>
mounting the tag riot.mount('comment', {author:'Charles', text:'Hi this is a comment'}) Or when inserting the tag in the html page <comment author='Charles' text='Hi this is a comment'/> Then use opts to get the parameters from the tag <comment> <h2> {opts.author}</h2> <span>{opts.text} </span> </comment>
automatically linked to the context under this.refs so you’ll have an easy access (read/write) to them with JavaScript. <input onkeyup={handleChange} ref="username"> <script> handleChange() { console.log('username:'+this.refs.username.value) this.refs.username.value = this.refs.username.value.toUpperCase() } </script> ref: https://embed.plnkr.co/iuXxgYzH4n84Gxqi60Iy/
Uppercase </button> <button onclick={lowerCase}> Lowercase </button> <script> this.message = 'hello there' //es6 like syntax upperCase() { this.message = this.message.toUpperCase() } // js function syntax this.lowerCase = function() { this.message = this.message.toLowerCase() } </script> </sample> reference: http://embed.plnkr.co/BZmX5EdvQUKqowkGmw9N/ You can use “es6 like” syntax provided by Riot. Have in mind that is not a real es6, You will need a transpiler like babel for that. Also you can use the simple js function.
on a condition. <div if={ is_premium }> <p>This is for premium users only</p> </div> • if: add (true value) or remove (false value) the element from the document • show: show the element using style="display: ''" when the value is true • hide: hide the element using style="display: none" when the value is true • Shorthand syntax for class names: class={ completed: done } renders to class="completed" when the value of done is a true value.
hi="Hi child"></luke> </vader> luke.tag <luke> <span>{opts.hi}</span> </luke> Child to parent: access the parent tag <vader> <luke></luke> <script> this.hi = "Hi, I am your father" </script> </vader> luke.tag <luke> <span>{this.parent.hi}</span> </luke> Not recommended because tags get coupled. ref http://plnkr.co/edit/OrNn06LMNH9sGp72DOv6
<luke></luke> </vader> <luke> <span>{this.parent.tags.leia.hi}</span> </luke> <leia> <script>this.hi = "Hi, bro"</script> </leia> Be careful because tags can get coupled. ref http://plnkr.co/edit/RIoZqI9dGDlcRv7B9WEN?p=preview Child to parent: callback functions <vader> <luke handle_hi={say_hi}></luke> <span>{this.hi} </span> <script> this.hi = "I am your father" say_hi() { this.hi = "I am your son" this.update() } </script> </vader> <luke> <span onclick={opts.handle_hi}>LUKE</span> </luke> ref http://plnkr.co/edit/Rz1mOJNwzpiFTFIZcI3M
Observable. It uses the observer pattern to send and receive messages. It´s goal is to isolate components without coupling them. • Riot tags automatically are observables, but you can add Observer support to any js object. • Two methods : ◦ “on” that will listen to events ◦ “trigger” that will send a message. // trigger and send parameter el.trigger('hello-event', 'Hello!') // listen to hello-event el.on('hello-event', function(greeting) { self.hi = greeting }) Example using global store: http://plnkr.co/edit/fOgZa0AKdz2phJCIQxP0?p=preview
you to use a specific pattern for component communication. You could use Flux, Redux, etc. • There are some popular implementation like RiotControl (flux-like event controller). Here is an example: RiotControl.addStore(new TodoStore()) // Create and register the store in central dispatch. RiotControl.trigger('todo_add', { title: self.text }) // Send message from any tag RiotControl.on('todos_changed', function(items) { // Receive the message in the Store self.items = items self.update() })
small api, simple syntax, small size ◦ Modular: Easy to create reusable components ◦ Active development: Currently version 2.6, soon 3.0 with a lot of new features ◦ Server side rendering with Node ◦ Bundled with a Router and Observable tool for tag communication. • Cons ◦ Not big names using Riot yet http://riotjs.com/made-with-riot/ ◦ Some performance issues but they are working on that https://github.com/riot/riot/issues/1887 , https://github.com/riot/riot/issues/484 ◦ Fewer out-of-the-box features (is not his goal)
Recommended as your first contact to js frameworks because is easy to learn and powerful • Open source, active and really good code, so you can collaborate with the Riot.js project
quiver
seike460
onomax
mizdra
ikumatadokoro
sullis
lovee
pospome
1wedge_one
stewemetal
.png){kind=avatar}
elith
hironytic
marcduiker
cassininazir
brianwarren
jmmastey
cherdarchuk
chrislema
mojombo
robhawkes
keavy
stephaniewalter
rasmusluckow
ufuk
