Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
Slide 1
Slide 1 text
Re-revolution to front-end with Riot.js ळͷJavaScriptࡇ in ࢜௨ΫϥυςΫϊϩδʔζ
Slide 2
Slide 2 text
About me
Slide 3
Slide 3 text
Basic Information const my_info = { Name: ‘܂ݪਔ’, Workplace: ‘Yumemi Inc’, twitter: ‘kuwahara_jsri’, GitHub: ‘k-kuwahara’, Npm: ‘k-kuwahara’, }
Slide 4
Slide 4 text
Communities translator staff staff
Slide 5
Slide 5 text
Communities github.com/riot
Slide 6
Slide 6 text
Sorry... " Plz feedback for me called “Masakari” about my English.
Slide 7
Slide 7 text
Modern Frameworks and libraries are “Component oriented”
Slide 8
Slide 8 text
No content
Slide 9
Slide 9 text
Today, I will introduce a more simple and elegant library
Slide 10
Slide 10 text
No content
Slide 11
Slide 11 text
The charm of riotjs
Slide 12
Slide 12 text
What is ?
Slide 13
Slide 13 text
image by: https://riot.js.org/
Slide 14
Slide 14 text
Characteristics ‣ Custom tags(Component based) ‣ Simple syntax and minimalistic ‣ Human-readable ‣ Small leaning curve
Slide 15
Slide 15 text
Custom tag
{ opts.title }
{ name }
this.techs = [ { name: 'HTML' }, { name: 'JavaScript' }, { name: 'CSS' } ] :scope { font-size: 2rem } ul { color: #999 }
Slide 16
Slide 16 text
Custom tag
{ opts.title }
{ name }
this.techs = [ { name: 'HTML' }, { name: 'JavaScript' }, { name: 'CSS' } ] :scope { font-size: 2rem } ul { color: #999 } HTML JS CSS
Slide 17
Slide 17 text
Custom tag
{ opts.title }
{ name }
this.techs = [ { name: 'HTML' }, { name: 'JavaScript' }, { name: 'CSS' } ] :scope { font-size: 2rem } ul { color: #999 } like ”props” in Vue.js or React.js
Slide 18
Slide 18 text
Mount riot.mount(‘app’, {title: ‘Hello Riot.js!!’})
Slide 19
Slide 19 text
Mount riot.mount(‘app’, {title: ‘Hello Riot.js!!’})
Slide 20
Slide 20 text
Mount riot.mount(‘app’, {title: ‘Hello Riot.js!!’}) pass to “opts”
Slide 21
Slide 21 text
More example
Slide 22
Slide 22 text
Stats of riotjs
Slide 23
Slide 23 text
Stats of Riot.js ‣ version: 3.13.1 ‣ github star: 13329 ‣ open issues: 30 ‣ size: 10.85 kb(gzip)
Slide 24
Slide 24 text
BTW,
Slide 25
Slide 25 text
Stats of Riot.js
Slide 26
Slide 26 text
Stats of Riot.js about 1/3 size of Vue.js !!
Slide 27
Slide 27 text
Made with riot (so-called showcase)
Slide 28
Slide 28 text
Made with riot
Slide 29
Slide 29 text
Made with riot URL: http://riot.js.org/made-with-riot/
Slide 30
Slide 30 text
Comparison between riot and react
Slide 31
Slide 31 text
No content
Slide 32
Slide 32 text
Why React is a rival ?
Slide 33
Slide 33 text
Reason 1
Slide 34
Slide 34 text
Reason 2
Slide 35
Slide 35 text
Why is named ?
Slide 36
Slide 36 text
Frameworks and libraries
Slide 37
Slide 37 text
Frameworks and libraries TOO MANY THINGS TO REMEMBER, AND TOO COMPLICATED !!
Slide 38
Slide 38 text
the mean of “riot” is a “riot” against its complexity of JavaScript frameworks.
Slide 39
Slide 39 text
Changes about riot from @2 to @3
Slide 40
Slide 40 text
Performance of riot.js
Slide 41
Slide 41 text
Rendering time 10,000 rows of DOM elements URL: https://k-kuwahara.github.io/demo/riot/pitfalls/loop-benchmark/v3.html
Slide 42
Slide 42 text
Rendering time 10,000 rows of DOM elements
Slide 43
Slide 43 text
riot.route removed from riot core
Slide 44
Slide 44 text
riot-route 10,000 rows of DOM elements
Slide 45
Slide 45 text
There are some other changes, so please see the official website. URL: https://riot.js.org/guide/migration-from-riot2/
Slide 46
Slide 46 text
Ecosystem for riot
Slide 47
Slide 47 text
Ecosystem ɾriot ɾriot-clI ɾriot-compiler ɾriot-observable ɾriot-tmpl Basics SPA (routing) ɾriot-route ɾriot-view-router ɾriot-routehandler ɾriotgear-router ɾredux-riot-router State management ɾRiotControl ɾriotify ɾriotx ɾobseriot Compile ɾgulp-riot ɾriot-tag-loader ɾriotjs-loader ɾriotify ɾrollup-plugin-riot Designs, Animations ɾriot-mui ɾnest-ui ɾriot-bootstrap ɾriot-fontawesome ɾsemantic-ui-riot ɾriot-animate ɾriot-flipcard ɾbabel-preset-es2015-riot ɾriot-placeholder ɾkarma-riot ɾriot-hot-reload ɾeslint-config-riot Others
Slide 48
Slide 48 text
Ecosystem
Slide 49
Slide 49 text
The persona of riot
Slide 50
Slide 50 text
Persona of riot ‣ Beginners of JavaScript ‣ Beginners of frameworks of JavaScript ‣ Designers ‣ Small-scale products developer
Slide 51
Slide 51 text
The roadmap about leaning of JavaScript frameworks.
Slide 52
Slide 52 text
Roadmap of JS frameworks
Slide 53
Slide 53 text
Next @4
Slide 54
Slide 54 text
Pick up some of the roadmap @4 ‣ “this.tags” ‣ “riot-observable” ‣ “shouldUpdate” method ‣ “:scope” → “:root” ‣ parser/compiler ‣ “export default” ← new!!
Slide 55
Slide 55 text
Progress Two modules released!! ‣ dom-bindings → v0.4.0 ‣ parser → v0.7.0 Demo: https://codesandbox.io/s/rr3k4pmzrq
Slide 56
Slide 56 text
Conclusion
Slide 57
Slide 57 text
Closing ‣ Riot.js is hard to become the main framework of application development ‣ Using as a stepping stone ‣ Riot.js is a library that supports step-upof JavaScript engineer
Slide 58
Slide 58 text
Let’s Create Web Application with Riot.js !!
Slide 59
Slide 59 text
Publicity
Slide 60
Slide 60 text
We’re looking for Engineers!!
Slide 61
Slide 61 text
No content
Slide 62
Slide 62 text
No content