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

1. kontainer-js
Megro.es #3
Apr. 19th, 2016 at Drecom
Kuu Miyazaki
GitHub: @kuu
Twitter: @miyazaqui

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. MP4 > nested boxes

4. MP4 > nested boxes
ftyp moov mdat
mvhd trak
tkhd mdia
...
length type property

5. Nested boxes > DOM

6. DOM > React > JSX
Nested boxes

7. How about writing MP4 in JSX?

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. That’s what I built!

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. 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. Transpilation is slow

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. Publish-time transpilation
● Testing with babel-runtime
● No “dist” directory
● Transpile in a “prepublish” command

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. Huge win
● Speed (no transpilation in dev-time)
● Less complexity (no “dist” dir)
● Easy to debug (directly with ES6 code)

17. Some caveats
● Dependencies bomb (+294)
● Some publishing issue

18. Thanks!
kontainer-js
dist-es6