Present and Next Riot.js

PRESENT AND NEXT RIOT.JS We are JavaScripters! @16thʲॳ৺ऀ׻ܴLTେձʳ

Who I am

Basic Information const my_info = { ɹ Name: ‘܂ݪ੟ਔ’, ɹ
Twitter: ‘@kuwahara_jsri’, ɹ GitHub: ‘k-kuwahara’, ɹ Qiita: ‘clown0082’, ɹ Workplace: ‘Yumemi, Inc.’ }

Communities translator staff staff

Communities github.com/k-kuwahara

⚠Caution⚠ will appear frequently in this slide.

What is ?

Characteristics 1. Custom tags 2. Simple and minimalistic

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

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

Mount <!doctype html> <html> <body> <app></app> <script src=“riot.js”></script> <script src=“app.tag”
type=“riot/tag”></script> <script> riot.mount(‘app’) </script> </body> </html>

Current status of riotjs

Current status of Riot.js ‣ version: 3.9.0 ‣ github star:
12782 ‣ size: 10.74 kb

Comparison on numbers “Github Star” URL: https://k-kuwahara.github.io/pages/gh-stars/

Comparison on numbers “Framework Size” URL: https://github.com/riot/riot

Made with riot

Made with riot URL: http://riotjs.com/made-with-riot/

Improved performance of riotjs

Rendering time 10,000 rows of DOM elements

Ecosystem for

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 ɾriot-bootstrap ɾriot-animate ɾriot-flipcard ɾbabel-preset-es2015-riot ɾriot-placeholder ɾkarma-riot ɾriot-hot-reload ɾeslint-config-riot Others

Next (version 4)

Pick up some of the roadmap v4 ‣ “this.tags” ‣
“riot-observable” ‣ “shouldUpdate” method ‣ “:scope” → “:root” ‣ parser/compiler

“Riot 4 will be released during this year (Summer?) but
not anytime soon”

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

Present and Next Riot.js

Present and Next Riot.js

kkeeth

More Decks by kkeeth

Other Decks in Technology

Featured

Transcript