Introducing Riot.js and about @4

3135a28c51dfa27396bb525e9972db95?s=47 kkeeth
June 23, 2018

Introducing Riot.js and about @4

3135a28c51dfa27396bb525e9972db95?s=128

kkeeth

June 23, 2018
Tweet

Transcript

  1. 3.

    Basic Information const my_info = { ɹ : ‘܂ݪ੟ਔ’, ɹ

    : ‘Yumemi, Inc.’, : ‘@kuwahara_jsri’, : ‘k-kuwahara’, : ‘clown0082’ }
  2. 8.
  3. 10.

    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>
  4. 11.

    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> HTML JS CSS
  5. 12.

    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>
  6. 13.

    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>
  7. 15.

    Stats of Riot.js ‣ version: 3.10.3 ‣ github star: 13065

    ‣ open issues: 27 ‣ size: 10.78 kb(gzip)
  8. 22.

    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
  9. 23.
  10. 24.

    Pick up some of the roadmap @4 ‣ “this.tags” ‣

    “riot-observable” ‣ “shouldUpdate” method ‣ “:scope” → “:root” ‣ parser/compiler
  11. 26.