kissyteam infrastructure

kissyteam infrastructure 工具化的前端类库开发 [email protected] 承玉

About me • F2E @ Taobao: 承玉 • Code @
github: http://github.com/yiminghe • Blog @ http://yiminghe.me • Mail: [email protected] • 2010 年加入淘宝 • KISSY 核心开发者 @ http://kissyui.com

• A Powerful Javascript Framework From Alibaba 自主开发跨终端使用简单
(KISS) 模块化接口一致组件齐全高扩展性

劳动是人类社会区别于猿群的根本标志，劳动是从制造工具开始的。 - 恩格斯

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

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

Importance of tools • Automate repetitive tasks • Avoid tedious
errors DRY

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>

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>

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

KISSY KISSY infrastructure

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

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

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

Before kissy5

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

Before kissy5

tools • 开放 • 一致性 • 自动化 • 跨终端 •
高效 • 轻量

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.

• docs • scaffold • Dev server • Gulp •
Lint / concat / less / template precompile • Test • Coverage • Phantomjs & travis-ci • Git precommit hooks

docs • http://docs.kissyui.com • node-markdown • theme • ace editor
• Api • node-yuidoc

scaffold • yo modulex-core –port=8888

• 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; }; });

Dev server • middleware • Serve static files • modularize
on the fly (modulex) • instrument on the fly (node-jscover)

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; }; });

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; }; });

build • gulp • The streaming build system gulp.task('main', ['dep'],
function(){ gulp.src(src) .pipe(process1(config)) .pipe(process2(config)) .pipe(gulp.dest(build)); });

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());

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/')); });

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/')); });

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; });

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; });

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'; };

Auto test • Mocha-phantomjs • mocha-phantomjs http://localhost:8030/tests/browser/runner.html • Phantomjs/ coveralls

Precommit hook • Git hooks • precommit-hook @ npm //
package.json { "precommit": [ "lint" ], "scripts": { "lint": "gulp lint" } }

Package manager • npm / bower • native support npm:
npm install xtemplate • through github: Bower install xtemplate

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" } }

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", ... } }

remained problems of tools • Integrated test • Cross bowser
test

kissyteam infrastructure

kissyteam infrastructure

More Decks by yiminghe

Other Decks in Technology

Featured

Transcript