Upgrade to Pro — share decks privately, control downloads, hide ads and more …

fly

 fly

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

842aaadff6e13fbf372c9b17b49b031c?s=128

Pine Mizune

October 28, 2015
Tweet

More Decks by Pine Mizune

Other Decks in Programming

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. 5BCMFPGDPOUFOUT 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