Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

kontainer-js

536 views

Published on

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

Published in: Technology
  • Be the first to comment

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

×