Introducing Riot.js and about @4 ʲୈ2ճʳReactʢJSϑϨʔϜϫʔΫଞʣx ϏΞόογϡ ॳ৺ऀษڧձ inळ༿ݪ

Who am I

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

Communities translator staff staff

Communities github.com/k-kuwahara

⚠Caution⚠ will appear frequently in this slide.

What is ?

No content

Characteristics ‣ Custom tags(Component based) ‣ Simple syntax and minimalistic

Custom tag

{ opts.title }

• { name }

this.techs = [ { name: 'HTML' }, { name: 'JavaScript' }, { name: 'CSS' } ] :scope { font-size: 2rem } ul { color: #999 }

Custom tag

{ opts.title }

• { name }

this.techs = [ { name: 'HTML' }, { name: 'JavaScript' }, { name: 'CSS' } ] :scope { font-size: 2rem } ul { color: #999 } HTML JS CSS

Mount riot.mount(‘app’, {title: ‘Hello Riot.js!!’})

Mount riot.mount(‘app’, {title: ‘Hello Riot.js!!’})

Stats of riotjs

Stats of Riot.js ‣ version: 3.10.3 ‣ github star: 13065 ‣ open issues: 27 ‣ size: 10.78 kb(gzip)

Made with riot

Made with riot

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

Performance of riot.js

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

Next @4

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

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

No content