Basic of Riot.js for Starter

Knowledge of riot.js for starters who want to learn it, such like basic, implementation, features, and examples

Transcript

1. Basic of Riot.js for Starter 2016.05.27
2. Riot.js http://riotjs.com/ja/
3. What is Riot.js ? (1/2) ɾReactͱಉ͘͡ɺԾ૝DOMΛ࢖ͬͨUIϥΠϒϥϦ ɹԾ૝DOM (virtual DOM)ɿ ɹ௨ৗͷDOMʹൺ΂ࠩ෼ͷߋ৽Λߦ͏ͨΊ࠷খͷίετͰมߋΛߦ͑Δ͜ͱ http://www.h2.dion.ne.jp/~defghi/webc/webc.htm
4. What is Riot.js ? (2/2) ɾର৅ϒϥ΢βɿ ɹIE9ʙ ɹSafari, FF, Chrome࠷৽൛ ɹAndroid 4.0ʙ ɹiOS 9ʙ https://github.com/riot/riot
5. ɾهड़ͷҧ͍ɿ TODOλεΫΛReact / RiotͰॻ͍ͨ৔߹ ɹˠHTMLʹ͍ۙهड़ͳͷͰൺֱతಋೖ͠΍͍͢ import React from 'react'; import ReactDOM from 'react-dom'; class Todo extends React.Component { constructor(props) { super(props); this.state = {items: [], text: ''}; } render() { const {items, text} = this.state; return ( <div> <h3>TODO</h3> <ul> <li>{items.map((item, i)=> <li key={i}>{item}</li>)}</li> </ul> <form onSubmit={this._onSubmit}> <input onChange={this._onChange} value={text}/> <button>Add #{items.length + 1}</button> </form> </div> ); } _onChange(e) { this.setState({text: e.target.value}); } _onSubmit(e) { e.preventDefault(); const {items, text} = this.state; this.setState({ items: items.concat(text), text: '' }); } } ReactDOM.render(<Todo/>, mountNode); <todo> <h3>TODO</h3> <ul> <li each={ item, i in items }>{ item }</li> </ul> <form onsubmit={ handleSubmit }> <input> <button>Add #{ items.length + 1 }</button> </form> this.items = [] handleSubmit(e) { var input = e.target[0] this.items.push(input.value) input.value = '' } </todo> Riot HTMLͷதʹCSS/JSΛ ॻ͖ࠐΉΑ͏ͳΠϝʔδ React JSͷதʹHTMLΛ ॻ͖ࠐΉΑ͏ͳΠϝʔδ What is difference with React and other JS FW? (1/3)
6. ɾϑΝΠϧαΠζɿϑϨʔϜϫʔΫܥJSͰ΋ൺֱతܰྔ(ͱᨳ͍ͬͯΔ) ɹˠϥΠϒϥϦಡΈࠐΈͷෛՙܰݮ ɹReact(version 15.0.2) 43KB ɹRiot(version 2.4.1) 9KB What is difference with React and other JS FW? (2/3)
7. ɾAPIͷ਺ɿ ɹඞཁे෼ͳػೳʹͱͲΊ͓ͯΓɺଞUIϥΠϒϥϦͱൺ΂APIͷ਺͕1/10͔1/100 ɹˠAPIʹର͢ΔֶशίετΛ཈͑ΒΕΔ What is difference with React and other JS FW? (3/3)
8. ͬ͘͟Γͱͨ͠ͱ͜Ζɺେ͖͘3ͭͷΞϓϩʔν͕ڍ͛ΒΕΔ ᶃ֎෦εΫϦϓτΛಡΈࠐΉ Development Environment for Riot.js (1/3) [HTML] <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Riot.js script</title> </head> <body> <todo></todo> <script src="./assets/js/riot%2Bcompiler.min.js"></script> <script type="riot/tag" src="./assets/tag/todo.tag"></script> <script type="text/javascript"> riot.mount('*'); </script> </body> </html>
9. ᶄλεΫϥϯφʔ ɹGulpͷ৔߹ɺbrowserify + vinyl-source-stream + ratifyΛ࢖͏ Development Environment for Riot.js (2/3) [HTML] <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Riot.js gulp</title> </head> <body> <todo></todo> <script src="./assets/js/app.bundle.js"></script> </body> </html> [JS] !app.bundle.jsͷίϯύΠϧલ var riot = require('riot'); require('../tag/todo.tag'); riot.mount('*');
10. ᶅWebpack ɹriotjs-loaderͰtagϑΝΠϧΛಡΈࠐΉ Development Environment for Riot.js (3/3) [HTML] <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Riot.js webpack</title> </head> <body> <todo></todo> <script src="./bundle.js"></script> </body> </html> [JS] !bundle.jsͷίϯύΠϧલ var riot = require('riot'); require('../tag/todo.tag'); riot.mount('*');
11. Custom Tag Features of Riot.js ( 1 )
12. ಠࣗλά(ίϯϙʔωϯτʹԠͨ͡λά)ΛઃఆͰ͖Δ Features of Riot.js ( 1 ) [HTML] index.html <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Riot.js script</title> </head> <body> <todo></todo> <script src="./assets/js/riot%2Bcompiler.min.js"></script> <script type="riot/tag" src="./assets/tag/todo.tag"></script> <script type="text/javascript"> riot.mount('*'); </script> </body> </html> [TAG] todo.tag <todo> <!-- layout --> <h3>{ opts.title }</h3> <ul> <li each={ item, i in items }>{ item }</li> </ul> <form onsubmit={ add }> <input> <button>Add #{ items.length + 1 }</button> </form> <!-- logic --> <script> this.items = [] add(e) { var input = e.target[0] this.items.push(input.value) input.value = '' } </script> </todo>
13. ΧελϜλάͷهड़ ɾΧελϜλά(લεϥΠυͷtodoλά)಺ʹHTML, CSS, JSͷهड़͕Ͱ͖Δ ɾ<script>λά͸লུՄɺ ɹͦͷ৔߹ɺ࠷ޙͷHTMLλά௚ޙ͔ΒεΫϦϓτͱΈͳ͞ΕΔ ɾ೾ׅހͰғΜͩ෦෼͸ɺςϯϓϨʔτม਺ΛૠೖͰ͖Δ ɹ˞ςϯϓϨʔτม਺͸ޙड़ Features of Riot.js ( 1 )
14. Features of Riot.js ( 2 ) Style in Custom Tag
15. ΧελϜλά಺ʹstyleλάΛؚΊΔ͜ͱ͕Ͱ͖Δ هड़ͨ͠ελΠϧ͸<head>λάͷ࠷ޙʹૠೖ͞ΕΔ Features of Riot.js ( 2 ) <app-menu> <!-- layout --> <ul> <li each={menu} onClick={changeMenu} class={is-current: is_current}>{name}</li> </ul> <!-- style --> <style scoped> :scope{ display: block; } li{ margin: 0 0 10px; list-style: none; cursor: pointer; opacity: 1; transition: 0.3s all; } li:hover{ opacity: 0.7; transition: 0.3s all; } li.is-current{ text-decoration: underline; } </style> … </app-menu>
16. Features of Riot.js ( 3 ) Scoped CSS
17. <style scoped>…ͱهड़͢Δ͜ͱͰɺScoped CSS͕࢖͑Δ ɹScoped CSSɿ ɹ<style scoped>Λ഑ஔͨ͠DOMͷ಺ଆʹ͚ͩCSS͕ॻ͚Δ Features of Riot.js ( 3 ) <app-menu> … <!-- style --> <style scoped> :scope{ display: block; } li{ margin: 0 0 10px; list-style: none; cursor: pointer; opacity: 1; transition: 0.3s all; } li:hover{ opacity: 0.7; transition: 0.3s all; } li.is-current{ text-decoration: underline; } </style> … </app-menu>
18. Features of Riot.js ( 4 ) Mount
19. ɾλάͷϚ΢ϯτ ɹ࡞੒ͨ͠λά͸ɺҎԼͷΑ͏ʹϚ΢ϯτ͢Δ͜ͱ͕Ͱ͖Δ Features of Riot.js ( 4 ) // ϖʔδ্ͷ͢΂ͯͷΧελϜλάΛϚ΢ϯτ riot.mount(‘*'); // ಛఆIDΛ࣋ͭΧελϜλάΛϚ΢ϯτ riot.mount(‘#todo’); // બ୒ཁૉΛϚ΢ϯτ riot.mount('todo, forum, comments');
20. (උߟ)Ϛ΢ϯτͱ͸ɺ ීஈ࢖͍ͬͯΔωοτϫʔΫ্ͷϑΝΠϧαʔό΍֎෇͚ϋʔυ΢ΣΞͷΑ͏ʹ ֎෦ʹ͋Δ΋ͷΛ಺෦ʹ૊ΈࠐΉΑ͏ͳΠϝʔδ ΞϯϚ΢ϯτ͸ͦͷٯͰɺ֎෦͔Β੾Γ཭͢Πϝʔδ Features of Riot.js ( 4 ) http://www.geocities.jp/lpic949/mount/
21. Features of Riot.js ( 5 ) Life cycle of Custom Tag
22. λάͷϚ΢ϯτɾΞϯϚ΢ϯτɺ ߋ৽λΠϛϯάͰҎԼͷΑ͏ʹɺ ίʔϧόοΫͰ࣮ߦ͢Δ͜ͱ͕Ͱ͖Δ this.on(‘[mount/update/etc…]’, function(){ // ίʔϧόοΫ಺༰ }); ————————————————- [mount / unmount] Ұ౓͔࣮͠ߦ͞Εͳ͍ [updated / update] λά͕ߋ৽͞ΕΔͨͼʹ࣮ߦ Features of Riot.js ( 5 ) <todo> this.on('before-mount', function() { // λά͕Ϛ΢ϯτ͞ΕΔલʹ࣮ߦ }) this.on('mount', function() { // λά͕Ϛ΢ϯτ͞Εͨ࣌ʹ࣮ߦ }) this.on('update', function() { // λά͕ߋ৽͞ΕΔલʹ࣮ߦ }) this.on('updated', function() { // λά͕ߋ৽͞Εͨ࣌ʹ࣮ߦ }) this.on('before-unmount', function() { // λά͕ΞϯϚ΢ϯτ͞ΕΔલʹ࣮ߦ }) this.on('unmount', function() { // λά͕ΞϯϚ΢ϯτ͞ΕΔࡍʹ࣮ߦ }) // curious about all events ? this.on('all', function(eventName) { console.info(eventName) }) <todo>
23. Features of Riot.js ( 6 ) Expressions
24. ɾΧελϜλά಺Ͱ೾ׅހ(“{}”)ͰғΜͩ෦෼͕ ɹςϯϓϨʔτม਺(expressions)ͱͯ͠Έͳ͞ΕΔ Features of Riot.js ( 6 ) Riot Live Editor http://riotjs.com/examples/live-editor/
25. εΫϦϓτଆͰઃఆͨ͠ม਺໊Λ೾ׅހʹೖΕΔͱɺ Ϛ΢ϯτޙͦͷ஋͕ग़ྗ͞ΕΔ Features of Riot.js ( 6 ) <sample> <h3>{ message }</h3> <ul> <li each={ techs }>{ name }</li> </ul> <script> this.message = 'Hello, Riot!' this.techs = [ { name: 'HTML' }, { name: 'JavaScript' }, { name: 'CSS' } ] </script> … </sample>
26. [ਅِ஋ଐੑ] checked΍selectedͳͲͷਅِ஋ଐੑ͸ςϯϓϨʔτม਺͕ falseత(0 / ‘’ / false / null / undefined)Ͱ͋Ε͹ແࢹ͞ΕΔ Features of Riot.js ( 6 ) <sample> <h3>{ message }</h3> <ul> <li each={ techs }>{ name }</li> </ul> <input type="checkbox" checked={null}> // checkedͷ೾ׅހΛtrueʹ͢Δͱબ୒ঢ়ଶʹ … </sample>
27. [Ϋϥεলུه๏] CSSΫϥε໊Λclass={(Ϋϥε໊): ධՁ஋, …}ͷΑ͏ʹهड़͢Δ͜ͱͰɺ ධՁ஋ʹԊͬͯΫϥεΛׂΓ౰ͯΔ͜ͱ͕Ͱ͖Δ Features of Riot.js ( 6 ) <sample> <h3 class={ttl-demo: true, ttl-riot: false}>{ message }</h3> // “ttl-demo"Ϋϥε͕෇༩͞ΕΔ <ul> <li each={ techs }>{ name }</li> </ul> <script> this.message = 'Hello, Riot!' this.techs = [ { name: 'HTML' }, { name: 'JavaScript' }, { name: 'CSS' } ] </script> … </sample>
28. [৚݅ଐੑᶃ] if={…}ͱهड़͢Δ͜ͱͰɺςϯϓϨʔτม਺ͷ஋ʹΑͬͯɺ ཁૉͷදࣔ / ඇද͕ࣔͰ͖Δ Features of Riot.js ( 6 ) <sample> <h3>{ message }</h3> <ul> <li if={is_show} each={ techs }>{ name }</li> </ul> <script> this.is_show = false; // is_show͕trueͷ৔߹͸ཁૉ͕௥Ճɺfalseͷ৔߹͸ཁૉ͕࡟আ … </script> … </sample>
29. [৚݅ଐੑᶄ] show={…}ͱهड़͢ΔͱɺςϯϓϨʔτม਺ͷ஋͕ਅͳΒදࣔɾِͳΒඇදࣔ hide={…}ͷ৔߹͸ɺͦͷٯ(ਅͳΒඇදࣔɾِͳΒදࣔ) Features of Riot.js ( 6 ) <sample> <h3>{ message }</h3> <ul> <li show={is_show} each={ techs }>{ name }</li> </ul> <script> this.is_show = false; // show/hideͱifͷҧ͍͸ɺdisplay: block; or display: none;Ͱ੾Γସ͍͑ͯΔ͔Ͳ͏͔ … </script> … </sample>
30. [ϧʔϓ] each={…}Λ࢖͏͜ͱͰɺ഑ྻཁૉͷ਺͚ͩ܁Γฦ͞ΕΔ Features of Riot.js ( 6 ) <sample> <h3>{ message }</h3> <ul> <li each={ techs }>{ name }</li> </ul> <script> this.message = 'Hello, Riot!' this.techs = [ { name: 'HTML' }, { name: 'JavaScript' }, { name: 'CSS' } ] </script> … </sample>
31. Examples https://github.com/riot/examples
32. Examples https://github.com/crisward/riot-onscroll