fly

Gotanda.js #1 in Mobile Factory で発表した資料
http://gotandajs.connpass.com/event/20838/

Transcript

1. fly Pine Mizune 28 Oct, 2015 / Gotanda.js #1
2. Profile o ID / HN: @pine613 o Like: JavaScript / Crystal o npm o vimlint o camo-url o some Grunt / gulp plugins ... o Mobile Factory, Inc
3. 5BCMF
   PG
   DPOUFOUT o Whatʼs ʻflyʼ ? o Why we use ʻflyʼ ? o Example of ʻflyfile.jsʼ o How to create fly plugins o Conclution
4. What’s ‘fly’ ? • ʻflyʼ is a next generation JS build system • ʻflyʼ is based on ES6 features – Co-routines, Generators and Promises
5. Why we use ‘fly’ ? o Many many dependencies! – gulp-mocha: 6 dependencies (with through) – fly-mocha: 15 < LOC and 1 dependency o Many many plugins! – gulp-plumber, gulp-concat, gulp-util, etc ... – grunt-contrib-*, grunt-shell, etc ... Existing build systems is too Complexity!
6. Example of ’flyfile.js’ (1/2) export function* build() { yield this.clear('dist') yield this.source('src/**/*.js') .babel() .concat('bundle.js') .target('dist') } $ npm i fly fly-babel -D // Install fly to current project // Write flyfile.js // Babel -> ES5 task
7. Example of ’flyfile.js’ (2/2) "scripts" : { "build": "fly build" }, $ npm run build [03:36:14] Flying with /home/pine/tmp/fly-test/flyfile.js... [03:36:14] Starting "build" [03:36:14] Finished "build" in 78 ms // Add npm run script // You can fly!! // Edit package.json
8. How to create fly plugins (1/3) o You SHOULD use pure ES6 or Babel o You SHOULD know how to use Promises o You SHOULD use functional coding style – let, const / var – map, filter / for, while
9. const ejs = require('ejs') module.exports = function () { this.filter('ejs', (data, opts) => ({ css: ejs.render(data.toString(), opts), ext: '.html' })) } How to create fly plugins (2/3) // pine613 / fly-ejs Itʼs very easy to write filter plugin! // `this` is bonds to fly instance
10. How to create fly plugins (3/3) module.exports = function () { this.vimlint = function (opts) { return this.unwrap(files => { return Promise.all(files.map(f => lint(f))) .then(results => { const errors = results.filter(r => r) if (errors.length > 0) { const msg = errors.length + '/' + files.length + ' files lint failed' return Promise.reject(msg) } console.log(files.length + ' files lint free') }) }) } } // pine613 / fly-vimlint // `this` is bonds to fly instance // Promise based task
11. Conclution o ʻflyʼ is a very simple JS build system o ʻflyʼ is based on ES 6 features o But ... – very few plugins -> You can do that – canʼt use CoffeeScript or other altJS langs