Riot.js Tokyo #2

Transcript

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