![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](https://image.slidesharecdn.com/kontainer-js-160418044821/85/kontainer-js-10-320.jpg)
![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)](https://image.slidesharecdn.com/kontainer-js-160418044821/85/kontainer-js-11-320.jpg)
![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](https://image.slidesharecdn.com/kontainer-js-160418044821/85/kontainer-js-15-320.jpg)
kontainer-js
- 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)
- 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