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

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

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

参考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的升级。在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同步文章写博客啦