Present and Next Riot.js

3135a28c51dfa27396bb525e9972db95?s=47 kkeeth
February 22, 2018

Present and Next Riot.js

3135a28c51dfa27396bb525e9972db95?s=128

kkeeth

February 22, 2018
Tweet

Transcript

  1. 3.

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

    Twitter: ‘@kuwahara_jsri’, ɹ GitHub: ‘k-kuwahara’, ɹ Qiita: ‘clown0082’, ɹ Workplace: ‘Yumemi, Inc.’ }
  2. 8.
  3. 10.

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

    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
  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’) </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’) </script> </body> </html>
  7. 24.

    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
  8. 26.

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

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