Human Talks Riot.js
•
1 j'aime•749 vues
Présentation de Riot.js au Human Talk de Grenoble. Riot.js est une micro-librairie Javascript UI aux atouts prometteurs : des custom-tag au routing en passant par l'eventing.
Recommandé
Contenu connexe
Tendances
Tendances (20)
Similaire à Human Talks Riot.js
Similaire à Human Talks Riot.js (20)
Plus de streamdata.io
Plus de streamdata.io (6)
Dernier
Dernier (20)
Human Talks Riot.js
- 2. Riot.js, c’est quoi ? Une micro librairie UI « à la React » « à la Polymer » custom tags / webcomponents ( )
- 3. Custom tags <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Hello World</title> </head> <body> <hello-world></hello-world> <!-- include riot.js --> <script src="../node_modules/riot/riot.min.js"></script> <script src="../dist/hello-world.js"></script> <script> riot.mount('*', { title: 'Say hello!'}); </script> </body> </html>
- 4. Custom tags <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>
- 5. Custom tags
- 6. Events var myObs = riot.observable(); function Duck() { // Make Duck instances observable riot.observable(this); }
- 7. Events Envoyer un event : myObs.trigger('myEvent', data); Recevoir un event : myObs.on('myEvent', function(data) { // your code here });
- 8. Events super facile de communiquer entre custom-tags ou entre services vs AngularJS (parent / child, pub / sub, states via routes, passing states via services)
- 10. Routes // executed when the url is accessed programmatically riot.route(function(part1, ..., partn) { // add your logic here }); // executed when the url is accessed directly riot.route.exec(function(part1, ..., partn) { // add your logic here }); http://myapp/#users/123/profile
- 11. Goodies ● compilateur à la volée / precompilation du virtual dom ● ES6, Coffee, Transcript, Jade, Livescript, etc. ● CLI (avec watch) ● plug avec les outils à la « c.. », à la « mode » comme Grunt, Gulp, Webpack, etc. ou sinon npm ● rendu server-side => architectures iso-morphiques / universal js ● doc simple, courte et bien écrite (courbe d’ apprentissage => fingers in the nose !)
- 12. In summary Riot.js = custom tags + events + router custom tags = modularité + ré-utilisation events = loose-coupling + modularity router = easy navigation ... Simplicité !!!
- 13. In summary