两个星期前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!]

• https://keymetrics.io/ code:SHENJS2015
• https://github.com/Unitech/pm2

##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实现isPointPath，isPointInStroke 不需要重新构建路径)

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

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

##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