Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Re-revolution to front-end with Riot.js

kkeeth
November 17, 2018

Re-revolution to front-end with Riot.js

kkeeth

November 17, 2018
Tweet

More Decks by kkeeth

Other Decks in Programming

Transcript

  1. Basic Information const my_info = { Name: ‘܂ݪ੟ਔ’, Workplace: ‘Yumemi

    Inc’, twitter: ‘kuwahara_jsri’, GitHub: ‘k-kuwahara’, Npm: ‘k-kuwahara’, }
  2. 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>
  3. 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
  4. 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> like ”props” in Vue.js or React.js
  5. 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. 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. 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”
  8. Stats of Riot.js ‣ version: 3.13.1 ‣ github star: 13329

    ‣ open issues: 30 ‣ size: 10.85 kb(gzip)
  9. There are some other changes, so please see the official

    website. URL: https://riot.js.org/guide/migration-from-riot2/
  10. 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
  11. Persona of riot ‣ Beginners of JavaScript ‣ Beginners of

    frameworks of JavaScript ‣ Designers ‣ Small-scale products developer
  12. Pick up some of the roadmap @4 ‣ “this.tags” ‣

    “riot-observable” ‣ “shouldUpdate” method ‣ “:scope” → “:root” ‣ parser/compiler ‣ “export default” ← new!!
  13. Progress Two modules released!! ‣ dom-bindings → v0.4.0 ‣ parser

    → v0.7.0 Demo: https://codesandbox.io/s/rr3k4pmzrq
  14. 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