2015 shen JSconf总结(第二天) 

第二天干货非常多,全是实战经验,基本没有什么技术介绍。

##Part Two 2015-07-12

###1. 七牛前端测试实践 - 马逸清
angularjs dom隔离,测试不需mock;依赖注入可以mock (service, controller) 可以使用stub

stub适合返回值依赖,mock行为验证

官方jasmine
View状态测试

phantom,sinon(stub),fixture(karma)

###2. Node Profiler - 朴灵@阿里云alinode
hack了部分v8代码,跟CPU Profile相关

  • 常用工具: benchmark.js,node-webkit-agent,ab/wrk(压力测试),–prof & mac-tick-processor(v8)
  • v8以JIT方式执行js(产出机器码),以函数为单位处理
    Crankshaft架构(可以运行时优化 fulCompiler -> optimizeCompiler) P:bailout, deoptimize
  • Profiler: 更多函数状态,优化建议(v8能否优化) http://alinode.aliyun.com
  • (program) 系统空转

? 第一次访问测试

###3. P2P pipes - mafintosh(dat)

demo: multiplayer game(socket)
websockets, webrtc

**ndjson, nc, crypto, dupsh(two app in-out pipe), airpaste(udp multicast with pipe), blecat(blutooth with pipe), webcat(webrtc with pipe)

###4. 微服务架构下的服务通信 - 老雷leizongmin @ucdok.com/ superid.me一登
后台Node逻辑
SDK - 多进程?- API服务器(人脸识别模块)

=》 SDK - API服务器 -人脸识别进程(多线程)

=》 - 更多应用(后台微服务架构)

–> 服务注册(消息队列总线式 / P2P)+远程调用

实现原理

总线可以用redis实现,通信也用redis订阅机制(服务提供者可以动态加入)
vs amqp-rpc, eureca.io

未来:备份切换,数据量太大

服务发现 + 服务通信

ppt地址 github.com/leizongmin/clouds

etcd + k8s + docker

###5. 前端服务化之路 - Herman@阿里CXDC 客服中心

前后端分离-》前端给后端提供接口(服务化)-》web component
**flipper.js 支持IE8以上 – webcomponents.js 更好的隔离性

###6. JS lang - hax贺诗俊@百姓网
NodeJS + CommonJS -> ES6 module( class, arrow function[this bind], map/set, for..of..[for in] )

WebAssembly

babel(es6 compiler)

###7. JS on Fiber - 庄恒飞@孢子社区fibjs-> 那么社区named.cn
fibjs vs nodejs, Fiber-Driven,No Callback

  • Module lib: CommonJS,async require
  • coroutine.parallel 【改变nodejs单线程】多CPU利用率
    js,用
    brew install fibjs [http://fibjs.org]
    fibjs底层多种线程(fiber) -> js线程-》work线程池【实际改动了v8下一层,解决了nodejs的callback与计算密集】

##Lighting Talk

  1. tangrui.net (js in JVM: 1.6 ringo 1.8 nashorm(vert.x/avatar.js)) cde.io
  2. wangyan @oneapm.com (npm2dot) 转换dot格式
  3. dafeng @strikling.com “GraphQL & Relay”: restful api问题:依赖多次发送->custom endpoint-》 GraphQL帮忙管理
  4. homlinju @fontmin js方案的字体最小化
  5. 一狂 @阿里cxdc www.zouyesheng.com angular问题:不单单使用,模块化加载,自己的渲染机制,怎么合作?模块内定义dir最后手动触发bootstrap
  6. EvanYou @vue webpack vue-element.js
  7. xeodou crazyapp.net/#/explore

###8. Persistent data structure in JS-NiYue@splunk
persistent data structure [like COW] -> concurrency
real good:

  1. performance(判断状态是否变化)
  2. features on copy(undo/redo,recording/reply,time traveling)

实现策略:COW -> structual sharing
问题:内存消耗,内存回收

mori, Immutable

一页千级dom元素?
LightTable演示

###9. WebIDE with React - hulufei @coding.net
React - Flux - karma

Components: <WebIDE/>

1
2
3
4
5
var App = React.createClass({
render: function() {
<div><Menu/><Tree/></div>
}
})

Flux: Dispatchor -> store -> view -> action
<Editor/><SettingModel/> 通信:
SettingStore -> SettingAction

Addons: store或action引用API层

roit, ace rather than codemirror
QA:store划分标准:组件需要,共享; 数据放store里面方便做数据缓存,返回promise;Flux写太多模板代码;

###10. WebGL & WebVR - Martin @Zurich - archilogic.com @g33konaut

faces + vertices -> GL buffers -> shader code -> print

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
var renderer = THREE.WebGLRenderer();
var box = new THREE.Mesh(
new THREE.BoxGeometry(100, 100, 100),
new Three.MeshBasicMaterial()
);


scene.add(box);

var light = new THREE.PointLight()
light.position.set();
renderer.render(function(){
box.rotation.y += Math.PI / 200;
});
//OBJMITLoader()

//VR
var vrEffect = new THREE.VREffect(render),
vrControls = new THREE.VRControls()

###11. maintainable nodejs - 死马 不四@天猫前端,dead-horse@github koa
提供固定的输出

异步try-catch -> promise 可以传递error
默认的错误监听函数,可以利用事件方式让外层感知

bluebird, co

2015 shen JSconf大会总结(第一天)

两个星期前7月11~12日在深圳前海举行了第四届中国jsconf会议,第一次参加纪录一下学习内容与个人思考。本次会议由李学斌(hk)推广,wiredcraft公司承办

##Part One 2015-07-11

###1. Database everywhere - EvanYou@Meteor

  • UI - Client data - Server data (sync)
    Solution: UI - Client data (react, angular, vue)
  • How about Client & Server data?
    REST (Backbone Model, ngResource, Restangular, Flux Stores)
    pull-centric imperative/ trouble with non-conventional APIs/ difficult managing optimistic updates
  • IDEA: UI - Server data (GraphSQL, JSON Graph, Om Next) not ready

METEOR: DDP, Tracker, minimongo(both cli& ser)
UI - minimongo - Server data

publish & subscribe? component-level template

$meteor.collection(new Mongo.Collection("Task"))
Tasks.find().fetch() ???

QA: actions record -> rollback

ppt地址 Slide.com [http://slides.com/evanyou/shenjs]

###2. ES6 generators - BIHOLT@Netflix
node 0.12
as ES2015

  • generators: async pro -> sync
    (Meteor, Babel use Regenerator)

a function return a generator obj which is iterable

1
2
3
4
5
6
7
8
9
const colorGenerator = function*() {
for (let color of colors) {
yield color;
}

}
let generator = colorGenerator();
//use generator.next();
//let values = Array.from(generator);

simulate ES7 asyc/await

1
2
3
4
5
6
7
8
co(function* (){ 
let user = yield promiseAjax.get("url");
handleUserData(user);
});

async function() {
let user = await promiseAjax.get("url"); handleUserData(user);
}

solution: gen store state between calls!

//for WebSockets or polling
function *poll() {
    while(true) {
        let id = yield;
        req.get(id).accept('json').end(function(err, data){
        logger.next(data);
        })
    }
}
let poller = poll();
//use poller.next(); poller.next(id++)

also call .return() or .throw()[inject into]

ppt地址 speakerdeck.com/btholt

##Lucky Draw
raffle.js漏洞百出

###3. Koa&Toa - Yan
vs express req, res, next P:异步流程控制

  • koa this, yield next generator 函数 每个中间件可以分为前后两部分,都可以终止 P:流程复杂,第三方暴露
  • toa vs koa this, yield 回到body this.body

异步原语:

  • promise 标准接口,链式返回promise,任意多promise组合(多异步)
  • thunk 新callback形式,返回thunk函数(thunk(function(callback){ return Promise //thunk}))
  • generator (function *() { yield promise })

###4. AngularJS real-time app - loddit(BohanLi)@BearyChat
demo: 二维码刷新 meteor

api server – RPC – keep-alive ser

Protocol: XMPP / IRC , DDP(Meteor)[quick demo], CRDT(Swarm.js)

Ping/pong to check, use object as singleton, push for everything

Q:分组,消息等信息:普通Obj, Array;事件类型太多(命名,gonn);

Q:交互性能:减少watch(改用ng-switch);消息丢失处理:长连接保证,update时序更需要保证;

###5. PM2 - alexandre@Keymetrics
a process manager dedicated to Node.js [distributed!]

##NodeBot Session - ajfisher
NodeBots stack [<3] IO Plugin – NodeJS (Johnny Five) – HTTP – clients

  • Adurino.cc IDE
  • npm install jornny-five -g
  • nodebotsday.com
  • github.com/jsconfcn/nodebots-session

##light talk

  1. undoZen (require('co'); co.wrap(fun);)
  2. zhangwenli.com/Polyvia vs Naive Random Method
    selected vectile (webgl sobel edge) -> dynamic -> center of mass 视频淘汰率
  3. pmq20 body.toString()
  4. socket 1000连接问题? ulimit 设置!默认1024
  5. 输入法 js
  6. Zearlin/重鱼

###6. NodeJS 分布式应用 - WenTianle@UCloud

C++ -> 分布式RPC架构(配置管理,服务自动发现,自动扩容,脚本)
umaster/zookeeper cluster 名称服务 -> rabbitmq/zookeeper 服务异构(扩容)/配置管理

node-amqp 3.4.1

遇到的问题

  1. nodejs [protobuf extension]
  2. 异步编程效率[Fibers]
  3. nodejs 内存泄漏(网络框架中回调函数导致)
  4. 异步超时处理(定时清理?)
  5. 异步中日志记录(Fibers包装为task queue,带上其id)
  6. rabbitmq ha(ser HA-》cli HA ip选择来解决100s定时断问题,heart beat时间约定机制)
  7. rabbitmq ha 网络闪断导致节点分区
  8. zookeeper session expired 网络断导致,client重连成功后由于session key不同导致server要求再次重连,同时产生一次session expired回调 容易导致内存泄漏

###7. JS Frameworks - Eyalarubas.com@EF
全是吹水,外国人包装能力真强!

###8. 前端可视化技术 - pissang @Echarts.baidu
Canvas vs SVG

  1. 性能考虑,特效绘制,像素操作
  2. demo:尾迹特效(保存上一帧,另一个canvas alpha值调整),热力图(像素操作)

问题: 没有图像对象(层级,样式,变换),事件

解决:图像对象管理(借鉴SVG方法),事件绑定(容器绑定代理,反向循环判断鼠标是否在某图像上,这时要将鼠标进行坐标变换-> 包围盒判断 / 路径的精确判断,js实现isPointPathisPointInStroke 不需要重新构建路径)

latest: Path2d

WebGL

  1. 加速二维图像绘制
  2. 问题:Shader计算动画小点位置

demo: lambertShading

2D图形处理:Meth -> canvas surface -> canvas -> 2D objects

9. NERD Disco - TimPietrusky@

  • web audio
var audio_context = new AudioContext();
var audio_anay = audio_context.analyser();

try ndAudio -> ndVisualization -> NeoMatrix Adafruit (nodejs server)

try web mini api

AnyNote数据库与API设计

参考Typecho设计数据库

note:

  • nid 自增
  • title
  • name
  • content
  • created
  • modified
  • date
  • order ?
  • uid
  • type 类型
  • template 使用的模版 ?
  • status
  • pwd
  • parent 多种用法
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
CREATE TABLE `test`.`an_notes` (
`note_ID` BIGINT(20) NOT NULL AUTO_INCREMENT COMMENT 'note id',
`user_ID` BIGINT(20) NULL COMMENT '',
`note_title` TEXT NULL COMMENT '',
`note_name` VARCHAR(200) NULL COMMENT '',
`note_content` TEXT NULL COMMENT '',
`note_status` ENUM('publish', 'draft', 'private', 'static', 'object', 'attachment', 'inherit', 'future', 'pending') NOT NULL DEFAULT 'draft' COMMENT '',
`note_date` DATETIME NULL COMMENT 'publish time',
`note_modified` DATETIME NULL COMMENT '',
`note_created` DATETIME NULL COMMENT '',
`note_parent` BIGINT(20) NULL COMMENT 'can be used in many ways',
`note_type` VARCHAR(20) NOT NULL DEFAULT 'post' COMMENT 'revision, comment, chat, …',
`note_template` VARCHAR(45) NULL COMMENT '',
`note_mine_type` VARCHAR(100) NULL COMMENT 'image, doc…',
`note_comment_status` ENUM('open', 'closed', 'registerd') NOT NULL DEFAULT 'open' COMMENT '',
`note_inherit_status` ENUM('open', 'close') NOT NULL DEFAULT 'open' COMMENT '',
`note_pwd` VARCHAR(20) NULL COMMENT '',
PRIMARY KEY (`note_ID`) COMMENT '');

[wp怎么实现的post多版本?个人思路:type=”revision”]

Revisions are stored in the posts table.
Revisions are stored as children of their associated post (the same thing we do for attachments). They are given a post_status of ‘inherit’, a post_type of ‘revision’, and a post_name of {parent ID}- revision(-#) for regular revisions and {parent ID}-autosave for autosaves.
By default, WP keeps track of the changes to title, author, content, excerpt.

revisions:

  • rid
  • nid-revision-# / nid-autosave-#
  • uid
  • content
  • diff

post: [post与note的一对多 github?]

  • pid 自增
  • title
  • content 由cid生成,包括style信息
  • nid[] ? 这块比较复杂,是否允许临时修改(redis缓存)
  • status

meta:

  • mid 自增
  • name
  • type tag, category, board, …
  • desc
  • parent

notemeta: [] tags/books

  • mcid 自增 仅优化用?
  • mid
  • nid
  • order ?
  • count
  • status

postmeta:

  • pcid
  • pid
  • mid
  • order ?
  • count
  • status

options:

  • oid 自增
  • uid 对应uid
  • key
  • value

user:

  • uid 自增
  • name
  • pwd
  • url
  • mail
  • screenName
  • created
  • logged
  • group
  • authCode
  • privilige 权限系统
1
2
3
4
5
6
7
8
9
10
11
12
13
CREATE TABLE IF NOT EXISTS `an_users` (
`id` INTEGER NOT NULL auto_increment ,
`user_ID` BIGINT(20) NOT NULL,
`user_name` VARCHAR(60) NOT NULL,
`user_pwd` VARCHAR(20) NOT NULL,
`user_url` VARCHAR(100) NOT NULL,
`user_email` VARCHAR(100) NOT NULL,
`user_nickname` VARCHAR(50) NOT NULL,
`user_created` DATETIME NOT NULL,
`user_status` INTEGER NOT NULL,
`user_authcode` VARCHAR(80),
`user_privilige` INTEGER NOT NULL,
PRIMARY KEY (`id`)) ENGINE=InnoDB;

API设计

url(/user)

  • POST /user/signin
  • POST /user/signout
  • POST /user/logout

url(/notes/:id)

  • POST /notes 创建
  • GET /notes 列表,分页问题
  • GET /notes/:id 获得
  • PUT/POST /notes/:id 更新
  • DELETE /notes/:id 删除

创建你的hexo博客

目前由于hexo的升级。在github上搭建hexo博客的过程与网络上的文章指导内容会有少许变化。

第一步当然还是安装hexo,接着在本地创建自己的hexo博客目录

1
2
$ npm install hexo -g
$ hexo init <YOU_BLOG_DIR_NAME>

然后切换到那个目录下面,安装必备的node插件

1
2
3
$ cd <YOU_BLOG_DIR_NAME>
$ npm install
$ npm install hexo-deployer-git --save

这时你的博客已经准备就绪啦,接着按照自己的需求修改配置文件,需要注意的是deploy部分

1
2
3
deploy:
type: git
repo: <YOUR_GITHUB_REPO_URL>

万事大吉,可以使用hexo new <POST_NAME>来创建新文章,写完后使用

1
2
3
$ hexo server #本地查看博客效果
$ hexo generate #生成静态文件用于部署
$ hexo deploy #部署同步到Github的项目上

有些遗憾的是这个git的deploy插件有点傻,仅把博客的静态文件提交到了远程仓库的master分支,而没有提交原始配置文件。没办法,只能自己动手进行分支同步。

1
2
3
4
5
$ cd <YOU_BLOG_DIR_NAME>
$ git init
$ git add remote origin <YOUR_GITHUB_REPO_URL>
$ git commit -a
$ git push origin master:<YOUR_REMOTE_BRANCHNAME>

好啦,以后任何位置都可以利用Github同步文章写博客啦

本站总访问量