kissyteam infrastructure

D226fdd4b353d92a66a1ef71539357f8?s=47 yiminghe
October 26, 2014

kissyteam infrastructure

develop front-end library using node tools

D226fdd4b353d92a66a1ef71539357f8?s=128

yiminghe

October 26, 2014
Tweet

Transcript

  1. kissyteam infrastructure 工具化的前端类库开发 yiminghe@gmail.com 承玉

  2. About me • F2E @ Taobao: 承玉 • Code @

    github: http://github.com/yiminghe • Blog @ http://yiminghe.me • Mail: yiminghe@gmail.com • 2010 年加入 淘宝 • KISSY 核心开发者 @ http://kissyui.com
  3. • A Powerful Javascript Framework From Alibaba 自主开发 跨终端 使用简单

    (KISS) 模块化 接口一致 组件齐全 高扩展性
  4. 劳动是人类社会区别于猿群的根本标志, 劳动是从制造工具开始的 。 - 恩格斯

  5. None
  6. Programming tool A programming tool or software development tool is

    a computer program that software developers use to create, debug, maintain, or otherwise support other programs and applications. The term usually refers to relatively simple programs, that can be combined together to accomplish a task, much as one might use multiple hand tools to fix a physical object. The ability to use a variety of tools productively is one hallmark of a skilled software engineer. - wiki
  7. Common tools • Source code editor: vim vs emacs, intellij

    IDEA … • Compiler/interpreter: gcc g++ javac python … • Build tools: make ant rake … • version control, scaffold, debugger, profiler, code coverage, code analysis, unit testing, documentation generators
  8. Importance of tools • Automate repetitive tasks • Avoid tedious

    errors DRY
  9. Front end tools • 2003 none <html> <head> <style> p

    { color: red; } </style> </head> <body> <p>taobao.com</p> <script src='base.js'></script> <script> alert('taobao'); </script> </body> </html>
  10. Front end tools • 2014 <html> <head> <script src='http://g.tbcdn.cn/??seed.js,app.js'></script> <link

    rel="stylesheet" href="http://g.tbcdn.cn/??global.css,app.css"> <script>KISSY.use("fp/index-e");</script> </head> <body> <p>taobao.com</p> </body> </html>
  11. Powered by nodejs • Version control: git (gitlab/github) • Scaffold:

    yeoman • Javascript: coffee, uglify, jscover(coverage), jshint, concat(module) • Template: precompile • Css: less, cssmin • Build: grunt/gulp, livereload • Package manage: bower, npm • Test: phantomjs, travis-ci • Dev server: koa/express
  12. KISSY KISSY infrastructure

  13. Before kissy5 • http://docs.kissyui.com/1.4/api

  14. Before kissy5 • http://docs.kissyui.com/index-1.4.html

  15. Before kissy5 • https://github.com/kissyteam/kissy/tree/1.4.x

  16. Before kissy5

  17. Before kissy5

  18. infrastructure • Javascript: jscover(jar) closure-compiler(jar) • Css: less(nodejs), yui compressor(jar)

    • Docs: sphinx(python), jsduck(ruby) • Build: ant(xml, java) • Dev server: express(nodejs) • Test: phantomjs travis-ci
  19. Before kissy5

  20. tools • 开放 • 一致性 • 自动化 • 跨终端 •

    高效 • 轻量
  21. Node.js uses an event-driven, non-blocking I/O model that makes it

    lightweight and efficient, perfect for data-intensive real-time applications that run across distributed devices.
  22. • docs • scaffold • Dev server • Gulp •

    Lint / concat / less / template precompile • Test • Coverage • Phantomjs & travis-ci • Git precommit hooks
  23. docs • http://docs.kissyui.com • node-markdown • theme • ace editor

    • Api • node-yuidoc
  24. scaffold • yo modulex-core –port=8888

  25. • commonjs source format • Support nodejs natively • Build

    for browser • Build to native javascript • Build to module loaded by browser loader // 源码 var dep = require('./mod'); module.exports = function(){ return dep + 1; }; // build for browser define('main', ['./mod'], function(require, exports, module){ var dep = require('./mod'); module.exports = function(){ return dep + 1; }; });
  26. Dev server • middleware • Serve static files • modularize

    on the fly (modulex) • instrument on the fly (node-jscover)
  27. Dev server • Modularize on the fly • http://localhost:8888/lib/main.js //

    源码 var dep = require('./mod'); module.exports = function(){ return dep + 1; }; // Modularize on the fly define(function(require, exports, module){ var dep = require('./mod'); module.exports = function(){ return dep + 1; }; });
  28. Dev server • instrument on the fly(coverage) • http://localhost:8888/lib/main-coverage.js //

    源码 var dep = require('./mod'); module.exports = function(){ return dep + 1; }; // instrumented _$jscoverage['lib/main.js'].lineData[1]++; define(function(require, exports, module) { _$jscoverage['lib/main.js'].lineData[3]++; var dep = require('./mod'); _$jscoverage['lib/main.js'].lineData[4]++; module.exports = function() { _$jscoverage['lib/main.js'].lineData[5]++; return dep + 1; }; });
  29. build • gulp • The streaming build system gulp.task('main', ['dep'],

    function(){ gulp.src(src) .pipe(process1(config)) .pipe(process2(config)) .pipe(gulp.dest(build)); });
  30. build • Lint/style • A Static Code Analysis Tool for

    JavaScript • Jshint • jscs gulp.src(['./lib/**/*.js']) .pipe(jshint()) .pipe(jshint.reporter(stylish)) .pipe(jshint.reporter('fail')) .pipe(jscs());
  31. build • css • Processor • less The dynamic stylesheet

    language • Minify • gulp-minify-css gulp.task('less', function () { var less = require('gulp-less'); return gulp.src('lib/date-picker/assets/dpl.less') .pipe(less({ paths: [path.join(__dirname, 'bower_components')] })) .pipe(rename('dpl-debug.css')) .pipe(gulp.dest('build/date-picker/assets/')) .pipe(rename('dpl.css')) .pipe(minifyCSS({keepBreaks: true})) .pipe(gulp.dest('build/date-picker/assets/')); });
  32. build • Javascript • gulp-modulex (concat) • kclean (demodularize) •

    Uglify (compress) • Template • precompile gulp.task('build-js', function() { return gulp.src('./lib/main.js') .pipe(modulex({ packages: {} })) .pipe(gulp.dest('build/')) .pipe(kclean()) .pipe(gulp.dest('build/')); });
  33. build • gulp-modulex // dep.js module.exports = 1; // main.js

    var depValue = require('./dep'); module.exports = depValue + 1; // main.js (concated) define('dep',[],function(require,exports,module){ module.exports = 1; }); define('main',['./dep'],function(require,exports,module){ var depValue = require('./dep'); module.exports = depValue + 1; });
  34. build • kclean // main.js (concated) define('dep',[],function(require,exports,module){ module.exports = 1;

    }); define('main',['./dep'],function(require,exports,module){ var depValue = require('./dep'); module.exports = depValue + 1; }); // main.js (cleaned) define('main',[],function(require,exports,module){ var dep = (function(){ return 1; })(); var depValue = dep; module.exports = depValue + 1; });
  35. build • Precompile template • gulp-xtemplate gulp.task('xtpl', function () {

    var gulpXTemplate = require('gulp-xtemplate'); var XTemplate = require('xtemplate'); return gulp.src('lib/**/*.xtpl') .pipe(gulpXTemplate({ wrap: false, runtime: 'xtemplate/runtime', suffix: ' .xtpl', XTemplate: XTemplate })) .pipe(gulp.dest('lib')); }); // tpl.xtpl {{count}} items // compiled from tpl.xtpl module.exports = function(data){ return data.count + ' items'; };
  36. Auto test • Mocha-phantomjs • mocha-phantomjs http://localhost:8030/tests/browser/runner.html • Phantomjs/ coveralls

  37. Precommit hook • Git hooks • precommit-hook @ npm //

    package.json { "precommit": [ "lint" ], "scripts": { "lint": "gulp lint" } }
  38. Package manager • npm / bower • native support npm:

    npm install xtemplate • through github: Bower install xtemplate
  39. Package manager • Semantic version // bower.json of kissyteam/node {

    "dependencies": { "modulex": "*", "modulex-dom": "modulex-dom#1.x", "modulex-anim": "modulex-anim#1.x", "modulex-util": "modulex-util#1.x", "modulex-event-dom": "modulex-event-dom#1.x" } }
  40. Package manager • Published kissy • Fixed version of modules

    // bower.json of kissyteam/kissy { "dependencies": { ... "modulex-color":"1.0.2", "modulex-combobox":"1.0.1", "modulex-component":"1.0.3", "modulex-css":"1.0.1", "modulex-date-picker":"1.0.1", "modulex-dd":"1.0.1", "modulex-dom":"1.0.2", "modulex-editor":"1.0.1", ... } }
  41. remained problems of tools • Integrated test • Cross bowser

    test
  42. None