More Related Content Similar to kontainer-js (20) kontainer-js2. 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
4. MP4 > nested boxes
ftyp moov mdat
mvhd trak
tkhd mdia
...
length type property
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>
);
}
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
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)