Slide 1
Slide 1 text
Ron Hashimoto
Developing
a plug-in system
with
github.com/h2so5
Slide 2
Slide 2 text
github.com/dripcap/dripcap
Slide 3
Slide 3 text
+ Electron
Background:
Slide 4
Slide 4 text
Simple and elegant
component-based UI library
Slide 5
Slide 5 text
a.tag b.tag
c.tag
d.tag
Component-based plug-in system
Slide 6
Slide 6 text
Run-time compiling
let tag = riot.require(“view.tag”);
1
Server-side API
Slide 7
Slide 7 text
Loading styles
riot.util.styleManager.inject();
2
Slide 8
Slide 8 text
Dynamic mounting
3
Slide 9
Slide 9 text
Layout?
Problem:
Slide 10
Slide 10 text
No content
Slide 11
Slide 11 text
layout-bottom
layout-top
layout-list
layout-session
Slide 12
Slide 12 text
opts.center.tag
opts.top.tag
opts.bottom.tag
opts.right.tag
opts.left.tag
Slide 13
Slide 13 text
tab1 tab2
Slide 14
Slide 14 text
let container = Layout.container(‘layout-bottom’);
container.append({
center: {
tag: 'binary-view'
},
name: 'Binary'
});
Tab name
Mounting tagName
Position
Slide 15
Slide 15 text
Problem 1:
Conflicting tag names
Slide 16
Slide 16 text
Slide 17
Slide 17 text
Problem 2:
Server-side API pollution
Slide 18
Slide 18 text
document.createElementNS =
document.createElement
lib/server/sdom.js
Conflicting with D3.js
Slide 19
Slide 19 text
Object.defineProperty(document,
'createElementNS', {
value: document.createElementNS
}
);
Slide 20
Slide 20 text
No content