Re-revolution to front-end with Riot.js

Re-revolution to front-end with Riot.js ळͷJavaScriptࡇ in ෋࢜௨Ϋϥ΢υςΫϊϩδʔζ

About me

Basic Information const my_info = { Name: ‘܂ݪ੟ਔ’, Workplace: ‘Yumemi
Inc’, twitter: ‘kuwahara_jsri’, GitHub: ‘k-kuwahara’, Npm: ‘k-kuwahara’, }

Communities translator staff staff

Communities github.com/riot

Sorry... " Plz feedback for me called “Masakari” about my
English.

Modern Frameworks and libraries are “Component oriented”

Today, I will introduce a more simple and elegant library

The charm of riotjs

What is ?

image by: https://riot.js.org/

Characteristics ‣ Custom tags(Component based) ‣ Simple syntax and minimalistic
‣ Human-readable ‣ Small leaning curve

Custom tag <app> <h3>{ opts.title }</h3> <ul> <li each={ techs
}>{ name }</li> </ul> <script> this.techs = [ { name: 'HTML' }, { name: 'JavaScript' }, { name: 'CSS' } ] </script> <style> :scope { font-size: 2rem } ul { color: #999 } </style> </app>

}>{ name }</li> </ul> <script> this.techs = [ { name: 'HTML' }, { name: 'JavaScript' }, { name: 'CSS' } ] </script> <style> :scope { font-size: 2rem } ul { color: #999 } </style> </app> HTML JS CSS

}>{ name }</li> </ul> <script> this.techs = [ { name: 'HTML' }, { name: 'JavaScript' }, { name: 'CSS' } ] </script> <style> :scope { font-size: 2rem } ul { color: #999 } </style> </app> like ”props” in Vue.js or React.js

Mount <!doctype html> <html> <body> <app></app> <script src=“riot.js”></script> <script src=“app.tag”
type=“riot/tag”></script> <script> riot.mount(‘app’, {title: ‘Hello Riot.js!!’}) </script> </body> </html>

Mount <!doctype html> <html> <body> <app></app> <script src=“riot.js”></script> <script src=“app.tag”
type=“riot/tag”></script> <script> riot.mount(‘app’, {title: ‘Hello Riot.js!!’}) </script> </body> </html> pass to “opts”

More example

Stats of riotjs

Stats of Riot.js ‣ version: 3.13.1 ‣ github star: 13329
‣ open issues: 30 ‣ size: 10.85 kb(gzip)

Stats of Riot.js

Stats of Riot.js about 1/3 size of Vue.js !!

Made with riot (so-called showcase)

Made with riot

Made with riot URL: http://riot.js.org/made-with-riot/

Comparison between riot and react

Why React is a rival ?

Reason 1

Reason 2

Why is named ?

Frameworks and libraries

Frameworks and libraries TOO MANY THINGS TO REMEMBER, AND TOO
COMPLICATED !!

the mean of “riot” is a “riot” against its complexity
of JavaScript frameworks.

Changes about riot from @2 to @3

Performance of riot.js

Rendering time 10,000 rows of DOM elements URL: https://k-kuwahara.github.io/demo/riot/pitfalls/loop-benchmark/v3.html

Rendering time 10,000 rows of DOM elements

riot.route removed from riot core

riot-route 10,000 rows of DOM elements

There are some other changes, so please see the official
website. URL: https://riot.js.org/guide/migration-from-riot2/

Ecosystem for riot

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

Ecosystem

The persona of riot

Persona of riot ‣ Beginners of JavaScript ‣ Beginners of
frameworks of JavaScript ‣ Designers ‣ Small-scale products developer

The roadmap about leaning of JavaScript frameworks.

Roadmap of JS frameworks

Next @4

Pick up some of the roadmap @4 ‣ “this.tags” ‣
“riot-observable” ‣ “shouldUpdate” method ‣ “:scope” → “:root” ‣ parser/compiler ‣ “export default” ← new!!

Progress Two modules released!! ‣ dom-bindings → v0.4.0 ‣ parser
→ v0.7.0 Demo: https://codesandbox.io/s/rr3k4pmzrq

Conclusion

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

Let’s Create Web Application with Riot.js !!

Publicity

We’re looking for Engineers!!

Re-revolution to front-end with Riot.js

Re-revolution to front-end with Riot.js

Transcript

More Decks by kkeeth

Other Decks in Programming

Featured