Meet Riot.js @ SnowCamp.io

Entrez dans Entrez dans l'émeute avec l'émeute avec Riot.js Riot.js
@ctranxuan @StreamdataIO SnowCamp2016 #

Qui suis-je ? Qui suis-je ? Backend dev Backend dev
Frontend dev Frontend dev

What is Riot.js? What is Riot.js? A micro UI library
A micro UI library « à la React » « à la React » « à la Polymer » « à la Polymer » ( ( ) )

« À la Polymer » « À la Polymer »
custom tags custom tags <my-tag></my-tag> <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> </head> <body> <my-tag></my-tag> </body> </html>

Custom tag Custom tag « web component » « web
component » html code (layout) js code (behavior) = = + + css code (style)

Custom tag Custom tag <!doctype html> <html lang="en"> <head> <meta
charset="utf-8"> <title>Hello World</title> </head> <body> <hello-world></hello-world>  <script src="./riot.min.js"></script> <script src="./hello-world.js"></script> <script> riot.mount('hello-world', { title: 'Say hello!'}); </script> </body> </html>

<hello-world> <h3>{opts.title}</h3> <input name="helloInput" placeholder="Enter your name"> <button class="myButton" onclick="{
sayHello }">Say Hello</button> <h4>{message}</h4> </hello-world> <hello-world> <h3>{opts.title}</h3> <input name="helloInput" placeholder="Enter your name"> <button class="myButton" onclick="{ sayHello }">Say Hello</button> <h4>{message}</h4> <script type='text/es6'> this.message = '' this.sayHello = (e) => { this.message = 'Hello ' + this.helloInput.value + '!' }; </script> </hello-world> Custom tag Custom tag hello-world.tag <hello-world> <h3>{opts.title}</h3> <input name="helloInput" placeholder="Enter your name"> <button class="myButton" onclick="{ sayHello }">Say Hello</button> <h4>{message}</h4> this.message = '' this.sayHello = (e) => { this.message = 'Hello ' + this.helloInput.value + '!' }; </hello-world> <hello-world> <h3>{opts.title}</h3> <input name="helloInput" placeholder="Enter your name"> <button class="myButton" onclick="{ sayHello }">Say Hello</button> <h4>{message}</h4> <script type='text/es6'> this.message = '' this.sayHello = (e) => { this.message = 'Hello ' + this.helloInput.value + '!' }; </script> <style> … </style> </hello-world>

Demo Demo

Custom tag Custom tag

Observables Observables

Eventing Eventing var myObs = riot.observable(); function Duck() { //
Make Duck instances observable riot.observable(this); }

Eventing Eventing // Send an event: myObs.trigger('myEvent', data); // Receive
an event: myObs.on('myEvent', function(data) { // your code here });

Eventing Eventing Communication Communication between tags or between tags or
services services

Demo Demo

Routes Routes http:/ /myapp/#users/123/profile http:/ /myapp/#users/123/profile

Routes Routes http:/ /myapp/#users/123/profile http:/ /myapp/#users/123/profile // register a callback
route handler riot.route(function(part1, ..., partn) { // add your logic here });

Routes Routes http:/ /myapp/#users/123/profile http:/ /myapp/#users/123/profile var routeCxt = riot.route.create();
routeCxt('/users', function(part1, ..., partn) { // add your logic here }); Subroutes Subroutes

Routes Routes http:/ /myapp/#users/123/profile http:/ /myapp/#users/123/profile riot.route('my-route-name'); Route programmatically Route
programmatically

Demo Demo

What is Riot.js? What is Riot.js? View (custom tags) View
(custom tags) Events Events Router Router

Goodies Goodies

Goodies: Mixins Goodies: Mixins // Somewhere... var LogMixin = {
log: function(msg) { console.log(msg); } } // In the tag definition <my-tag> <h1>{ opts.title }</h1> this.mixin(LogMixin) ... this.log("Hello World!") </my-tag>

Goodies: Mixins Goodies: Mixins // Somewhere in the space... var
EventBusMixin = { observable: riot.observable() }; // Into the tag <my-tag> <h1>{ opts.title }</h1> this.mixin(EventBusMixin) ... this.observable.trigger('my event'); this.observable.on('my other event', doSomeStuff()); </my-tag>

Goodies: Compiler Goodies: Compiler In-browser In-browser compilation compilation <script src="./[email protected](riot.min.js+compiler.min.js)">
</script> Pre-compilation: CLI Pre-compilation: CLI Watch mode Watch mode

Goodies: JS Tools Goodies: JS Tools ou... ou...

Goodies: Pre-processors Goodies: Pre-processors or or whatever... whatever...

Goodies: Server-side Goodies: Server-side rendering rendering

Goodies: « Extensions » Goodies: « Extensions » Gears Gears
RiotControl RiotControl

Goodies: RTFM Goodies: RTFM Simple, Simple, tiny,... tiny,... Read it!
Read it!

Summary Summary Riot.js = custom tags Riot.js = custom tags
+ events + events + router + router modularity + re-use modularity + re-use loose-coupling loose-coupling + modularity + modularity easy navigation easy navigation + goodies... + goodies...

Summary Summary Small, simple... Small, simple... 㱺㱺 Smooth learning
Smooth learning curve curve

Summary Summary Simplicity!!! Simplicity!!! Code demos with Code demos with
Riot.js!!! Riot.js!!!

Summary Summary

Thank you! Thank you! @StreamdataIO @StreamdataIO

References References http://k33g.github.io/2015/01/25/RIOT.html http://k33g.github.io/2015/02/02/RIOT.html http://k33g.github.io/2015/02/06/RIOT.html http://streamdata.io/blog/exploring-riot-js-part1/ http://streamdata.io/blog/exploring-riot-js-part2/ http://streamdata.io/blog/exploring-riot-js-part-3-1/ http://streamdata.io/blog/exploring-riot-js-part-3-2/ http://streamdata.io/blog/exploring-riot-js-part-3-3/
http://streamdata.io/blog/exploring-riot-js-part-4/ http://streamdata.io/blog/exploring-riot-js-part-5/ http://riotjs.com/

References References CheatSheet: http://martinmuzatko.github.io/riot-cheatsheet/

Meet Riot.js @ SnowCamp.io

Meet Riot.js @ SnowCamp.io

More Decks by ctranxuan

Other Decks in Programming

Featured

Transcript