Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

Re-revolution to front-end with Riot.js

Avatar for kkeeth kkeeth
November 17, 2018
Programming
310
3

Re-revolution to front-end with Riot.js

Avatar for kkeeth

kkeeth

November 17, 2018

More Decks by kkeeth

See All by kkeeth
Programming to play with p5.js
Avatar for kkeeth clown0082
0
110
とある EM の初めての育休からの学び
Avatar for kkeeth clown0082
1
5.9k
The history of Javascript frameworks: changes in front-end design philosophy
Avatar for kkeeth clown0082
2
250
Visually experience the beauty of mathematics with p5.js
Avatar for kkeeth clown0082
1
3.4k
Rediscover the joy of coding with Creative Coding
Avatar for kkeeth clown0082
0
2k
全員が意思決定する会社で開発者体験や生産性を見る大変さについて
Avatar for kkeeth clown0082
0
670
JavaScript × Mathematics go to Digital Art
Avatar for kkeeth clown0082
1
470
In-house study group at YUMEMI
Avatar for kkeeth clown0082
0
240
Playing Ionic Logo by p5.js
Avatar for kkeeth clown0082
0
360

Other Decks in Programming

See All in Programming
AWS Step Functions 大規模並列の壁を越える / jaws-sonic-2026-niigata-step-functions
Avatar for kasacchiful kasacchiful
PRO
1
440
思考垂れ流し開発　～音声入力 × AIエージェント × 開発ハーネスによる試行錯誤～
Avatar for NPOS npostring
0
1.1k
自分的「カンファレンスの楽しみ方」
Avatar for syumai syumai
0
200
一参加者から『中の人』へ 〜全通PHPerがブースに立って学んだ、カンファレンスを100倍楽しむコツ〜
Avatar for 藤掛大介 wp_daisuke
0
140
市販E-Readerを乗っ取れ 〜Embedded Swiftで電子ペーパーガジェットを制御する〜
Avatar for Trickart trickart
0
170
Foundry Localでエージェント開発
Avatar for 瀬尾佳隆 seosoft
0
180
Streamlitで実現する自然言語データアプリ開発
Avatar for Ayumu Yamaguchi ayumu_yamaguchi
0
200
Can LLMs Replicate 4 Years of Compose Migration? Exploring the boundaries of automation with 279 XML files from a real product
Avatar for makun makun
0
130
Intent as Code
Avatar for Shoppingjaws shoppingjaws
6
960
[GoCon2026] When Goroutines Are Not Enough: Runtime Locality in High-Throughput Go
Avatar for Takeru Hayasaka takehaya
6
2k
Swift愛好会と私（ウホーイ） / Swift Fan Club and Uhooi
Avatar for uhooi uhooi
0
150
20260914 AIエージェント時代のPlatform Engineering　LLM基盤とプロダクトの責務境界線
Avatar for Taiki Kanzaki kanfab1
6
1.6k

Featured

See All Featured
Testing 201, or: Great Expectations
Avatar for Joseph Mastey jmmastey
46
8.3k
Reality Check: Gamification 10 Years Later
Avatar for Sebastian Deterding codingconduct
0
2.3k
State of Search Keynote: SEO is Dead Long Live SEO
Avatar for Ryan Jones ryanjones
0
270
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
Avatar for Addy Osmani addyosmani
10
1.3k
[RailsConf 2023 Opening Keynote] The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
31
10k
Redefining SEO in the New Era of Traffic Generation
Avatar for Szymon Słowik szymonslowik
1
410
世界の人気アプリ100個を分析して見えたペイウォール設計の心得
Avatar for Akihiro Kokubo akihiro_kokubo
PRO
74
42k
AI: The stuff that nobody shows you
Avatar for John Nunemaker jnunemaker
PRO
9
990
WENDY [Excerpt]
Avatar for Tessa Abrams tessaabrams
13
39k
First, design no harm
Avatar for Per Axbom axbom
PRO
2
1.3k
4 Signs Your Business is Dying
Avatar for Josh Pigford shpigford
187
23k
30 Presentation Tips
Avatar for Ian Lurie portentint
PRO
1
390

Transcript

  1. Re-revolution to front-end with Riot.js ळͷJavaScriptࡇ in ෋࢜௨Ϋϥ΢υςΫϊϩδʔζ

  2. About me

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

    Inc’, twitter: ‘kuwahara_jsri’, GitHub: ‘k-kuwahara’, Npm: ‘k-kuwahara’, }

  4. Communities translator staff staff

  5. Communities github.com/riot

  6. Sorry... " Plz feedback for me called “Masakari” about my

    English.

  7. Modern Frameworks and libraries are “Component oriented”

  8. None

  9. Today, I will introduce a more simple and elegant library

  10. None

  11. The charm of riotjs

  12. What is ?

  13. image by: https://riot.js.org/

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

    ‣ Human-readable ‣ Small leaning curve

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

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

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

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

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

  20. 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”

  21. More example

  22. Stats of riotjs

  23. Stats of Riot.js ‣ version: 3.13.1 ‣ github star: 13329

    ‣ open issues: 30 ‣ size: 10.85 kb(gzip)

  24. BTW,

  25. Stats of Riot.js

  26. Stats of Riot.js about 1/3 size of Vue.js !!

  27. Made with riot (so-called showcase)

  28. Made with riot

  29. Made with riot URL: http://riot.js.org/made-with-riot/

  30. Comparison between riot and react

  31. None

  32. Why React is a rival ?

  33. Reason 1

  34. Reason 2

  35. Why is named ?

  36. Frameworks and libraries

  37. Frameworks and libraries TOO MANY THINGS TO REMEMBER, AND TOO

    COMPLICATED !!

  38. the mean of “riot” is a “riot” against its complexity

    of JavaScript frameworks.

  39. Changes about riot from @2 to @3

  40. Performance of riot.js

  41. Rendering time 10,000 rows of DOM elements URL: https://k-kuwahara.github.io/demo/riot/pitfalls/loop-benchmark/v3.html

  42. Rendering time 10,000 rows of DOM elements

  43. riot.route removed from riot core

  44. riot-route 10,000 rows of DOM elements

  45. There are some other changes, so please see the official

    website. URL: https://riot.js.org/guide/migration-from-riot2/

  46. Ecosystem for riot

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

  48. Ecosystem

  49. The persona of riot

  50. Persona of riot ‣ Beginners of JavaScript ‣ Beginners of

    frameworks of JavaScript ‣ Designers ‣ Small-scale products developer

  51. The roadmap about leaning of JavaScript frameworks.

  52. Roadmap of JS frameworks

  53. Next @4

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

    “riot-observable” ‣ “shouldUpdate” method ‣ “:scope” → “:root” ‣ parser/compiler ‣ “export default” ← new!!

  55. Progress Two modules released!! ‣ dom-bindings → v0.4.0 ‣ parser

    → v0.7.0 Demo: https://codesandbox.io/s/rr3k4pmzrq

  56. Conclusion

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

  58. Let’s Create Web Application with Riot.js !!

  59. Publicity

  60. We’re looking for Engineers!!

  61. None
  62. None