Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Riot.js Tokyo #2
Search
h2so5
February 02, 2017
Programming
0
720
Riot.js Tokyo #2
h2so5
February 02, 2017
Tweet
Share
More Decks by h2so5
See All by h2so5
Dripcap03
h2so5
2
350
Goによる P2Pチャットシステムの開発
h2so5
11
6.9k
Other Decks in Programming
See All in Programming
kiroとCodexで最高のSpec駆動開発を!!数時間で web3ネイティブなミニゲームを作ってみたよ!
mashharuki
0
900
実践Claude Code:20の失敗から学ぶAIペアプログラミング
takedatakashi
18
8.4k
Building, Deploying, and Monitoring Ruby Web Applications with Falcon (Kaigi on Rails 2025)
ioquatix
4
2.5k
SODA - FACT BOOK(JP)
sodainc
1
8.7k
コードとあなたと私の距離 / The Distance Between Code, You, and I
hiro_y
0
190
タスクの特性や不確実性に応じた最適な作業スタイルの選択(ペアプロ・モブプロ・ソロプロ)と実践 / Optimal Work Style Selection: Pair, Mob, or Solo Programming.
honyanya
3
190
Developer Joy - The New Paradigm
hollycummins
1
360
bootcamp2025_バックエンド研修_WebAPIサーバ作成.pdf
geniee_inc
0
120
チームの境界をブチ抜いていけ
tokai235
0
220
テーブル定義書の構造化抽出して、生成AIでDWH分析を試してみた / devio2025tokyo
kasacchiful
0
280
「ちょっと古いから」って避けてた技術書、今だからこそ読もう
mottyzzz
12
7.1k
What Spring Developers Should Know About Jakarta EE
ivargrimstad
0
450
Featured
See All Featured
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.6k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
34
2.5k
Building Applications with DynamoDB
mza
96
6.7k
Visualization
eitanlees
149
16k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
30
2.9k
Six Lessons from altMBA
skipperchong
29
4k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
34
2.3k
A Modern Web Designer's Workflow
chriscoyier
697
190k
Embracing the Ebb and Flow
colly
88
4.9k
The Cost Of JavaScript in 2023
addyosmani
55
9.1k
Typedesign – Prime Four
hannesfritz
42
2.8k
Rebuilding a faster, lazier Slack
samanthasiow
84
9.2k
Transcript
Ron Hashimoto Developing a plug-in system with github.com/h2so5
github.com/dripcap/dripcap
+ Electron Background:
Simple and elegant component-based UI library
a.tag b.tag c.tag d.tag Component-based plug-in system
Run-time compiling let tag = riot.require(“view.tag”); 1 Server-side API
Loading styles riot.util.styleManager.inject(); 2
Dynamic mounting <virtual data-is={ tag }> </virtual> 3
Layout? Problem:
None
layout-bottom layout-top layout-list layout-session
<grid-container> opts.center.tag opts.top.tag opts.bottom.tag opts.right.tag opts.left.tag
<tab-container> <grid-container each ={ item, i in opts.items }> tab1
tab2
let container = Layout.container(‘layout-bottom’); container.append({ center: { tag: 'binary-view' },
name: 'Binary' }); Tab name Mounting tagName <tab-container/> Position
Problem 1: Conflicting tag names
<packet-view> <packet-view-layer> <packet-view-item> <packet-view-boolean-value> <packet-view-integer-value> <packet-view-string-value> <packet-view-buffer-value> <packet-view-stream-value> <packet-view-custom-value> <log-view>
<log-view-filter> <log-view-item> <packet-list-view> <packet-filter-view>
Problem 2: Server-side API pollution
document.createElementNS = document.createElement lib/server/sdom.js Conflicting with D3.js
Object.defineProperty(document, 'createElementNS', { value: document.createElementNS } );
None