Riot.js Tokyo #2

E1ffbd9268176619ea9f67eed861c484?s=47 h2so5
February 02, 2017

Riot.js Tokyo #2

E1ffbd9268176619ea9f67eed861c484?s=128

h2so5

February 02, 2017
Tweet

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