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:

10. None

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 } );

20. None