Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

kontainer-js

558 Aufrufe

Veröffentlicht am

In my presentation at Megro.es #3, I talked about:
* introduction to kontainer-js, MP4 library written in ES2015
* advantage of publish-time transpilation

Veröffentlicht in: Technologie
  • Als Erste(r) kommentieren

kontainer-js

  1. 1. kontainer-js Megro.es #3 Apr. 19th, 2016 at Drecom Kuu Miyazaki GitHub: @kuu Twitter: @miyazaqui
  2. 2. kontainer-js > MP4 parser ● A parser/editor library written in ES2015 ● Runs both on Node.js and in the browser ● Provides its API as JSX
  3. 3. MP4 > nested boxes
  4. 4. MP4 > nested boxes ftyp moov mdat mvhd trak tkhd mdia ... length type property
  5. 5. Nested boxes > DOM
  6. 6. DOM > React > JSX Nested boxes
  7. 7. How about writing MP4 in JSX?
  8. 8. How about writing MP4 in JSX? render() { return ( <file> <ftyp majorBrand="isom" /> <moov> <mvhd creationTime={new Date()} timeScale={1} nextTrackId={4} /> <trak> <tkhd {...{trackId: 1, width: this.width, height: this.height}} /> <mdia> ...innerElements </mdia> </trak> </moov> <mdat data={buffer} /> </file> ); }
  9. 9. That’s what I built!
  10. 10. How kontainer-js works { type: ‘ftype’, props : { majorBrand: ‘isom’, }, }, { type: ‘moov’, children: [ { type: ‘mvhd’, props: { timeScale: 1, … }, ] } parse serialize Byte stream JS object transpile JSX
  11. 11. Development workflow Lint ● eslint Test ● [Browser] karma-jasmine + browserify(baberify) ● [Node] jasmine-es6 Build/Deploy ● [Browser] browserify(baberify) + uglify-js ● [Node] dist-es6 JSX Transpile ● Self-built Babel plugin (transform-kontainer-js)
  12. 12. Transpilation is slow
  13. 13. So, defer it as long as possible Dev Machine GitHub npm ES5 ES6 push publish Dev Machine GitHub npm ES6 push transpile & publishslow! Publish-time transpilation Dev-time transpilation ES6 ES6 ES5 ES5 transpile
  14. 14. Publish-time transpilation ● Testing with babel-runtime ● No “dist” directory ● Transpile in a “prepublish” command
  15. 15. dist-es6 // package.json { "name": "kontainer-js", "main": "src/index.js", "bin": { "kontainer": "src/cli.js" }, "files": [ "README.md", "logo.png", "lib" ], "scripts": { "prepublish": "dist-es6" }, npm install (local) npm publish 1) creates node_modules/.bin/kontainer #!/usr/bin/env node require('dist-es6/lib/run').module('../src/cli.js'); 2) copies src to node_modules/kontainer-js You can require('kontainer-js') in spec files. README.md etc. ./dist (temp dir) ./src package.json npm copy convert publish
  16. 16. Huge win ● Speed (no transpilation in dev-time) ● Less complexity (no “dist” dir) ● Easy to debug (directly with ES6 code)
  17. 17. Some caveats ● Dependencies bomb (+294) ● Some publishing issue
  18. 18. Thanks! kontainer-js dist-es6

×