【JsConf 2016】NingJS, 2 days in NanJing —— The first day

9月初来南京参加JsConf，晚上十一点落地，十二点到酒店。

夜深了睡不着，走在南京的马路上。天气不那么闷热，深夜车流渐渐稀疏，路两边的法国梧桐顶着头上茂密的枝叶，静静地随风摇着。偶尔路口驻足低头看手机的姑娘，给静谧的夜增添了一抹淡淡的清香，仿佛是这城市最美的一个注脚，让初到南京的我感受这座城的不一样。

来南京之前的几天，心中颇不宁静。为了工作上的事情，思绪辗转万千。结束了第一天的技术峰会，听了那么多的人分享自己的经历与成长，现在才明白，才悟到，原来树长得直还是弯，永远不是因为树下的土。

在 JSConf大会上，最能感受到的是一群追逐技术的人如何在技术浪潮中努力地撑着自己的舵，或独自、或结伴地引导者后面的跟随者，艰难但从容而坚定。这种信念的感染力是深层次的，或许就隐藏在分享的现场笑笑、闹闹的巧言巧语之下，或许也隐藏在每一个分享者自豪而自信的微笑里。当自己作为一个旁观者坐在那里，单纯地在别人的思维殿堂里畅游，除了心驰神往，更多的是自己的感慨，或许这两年没有做出任何选择，就是最坏的一个选择，或许未来的一两年再不行动，就是最坏的行动。

上面结合自己的情感和思绪，说了很多，下面就是在参加技术峰会时纯粹在技术上的整理记录和相关思考。其中有些内容可能和原分享者的PPT有些出入，所以大家最终要以原作者的PPT为准，并且如果这个记录辗转被分享者看到，并且觉得我的理解和你所讲述的内容有所出入时，欢迎指正，欢迎一起讨论。

下面的总结会以 讲师、主题、关注点、感想四部分组成：

• “讲师”部分会记录当前的讲师以及讲师的一些自我介绍，属于热场的内容；
• “主题”部分，会以小节的形式列出当前的讲师在分享过程中，我认为是一些重要的内容，由于是手动整理和记录，所以难免会有部分错误，这里需要大家辩证看待，以讲师的PPT版本为准，在后续讲师的PPT放出来以后，我也会逐一做一次校对；
• “关注点”这一部分，是我自己根据听讲列出来的，需要大家在后续看PPT或者看现场录像时注意并且进行针对性思考的若干个点。”关注点”中列出的信息，有可能是和讲师的内容有直接关系，有可能是讲师所讲内容的一个延伸的思考点和归纳总结，大家可以针对我列出的关注点，再有意地去结合讲师的分享进行思考。
• “感想”这部分是我自己在听讲时的一些思考和感悟，这部分会结合自己最近的一些经历并且融合了自己个人情感而形成的感受上的总结，大家在看现场视频时，可能不会有相同的感受，这一部分，仁者见仁智者见智，仅供参考。

注意：在下面的听讲记录中，“主题” 小节加了括号的加粗内容是我自己的理解，仅供参考。

9月3日上午

VUE.js

讲师

• 尤雨溪， Vue.js的作者

主题

1. progressive framework （其实是说通过多角色的工具库类逐渐补充核心层的能力）

   • core : decirative rendering
   • component system
   • routing
   • large scale state management
   • build system
   • client-server data persistence

2. vue 2.0

   • virtual dom in vue
   • template => render function，setting up virtual dom.

   • server side rendering

     • server bundle -> stream handle

3. "weex inspired by vue" become "weex powered by vue"

   • vue.js 2.0 acting as the runtime framework for weex
   • writing components which can run both on vue.js and weex, whitch means both web side and native side

关注点

• 从讲师的内容来看未来前端框架（不是前端技术或者web开发的趋势，仅仅是框架的发展趋势）的发展趋势： virtual dom、资源整合与共享（vue与weex的合作）
• 框架演进的思路，渐进式地去完善一个框架，这样可以在各种维度满足各种需求的开发者，因为不同层次的组件都可以使用符合规范的替代品，从而对开发者当前的技术积累和习惯带来尽可能小的影响。

感想

一个框架从诞生到发展为国内最新最热的前端基础设施，vuejs的成功让人看到了一个开发者的坚持与成长。就这一点而言，对我的触动很大。很多时候也许确实不应该想那么多，先动手做，然后路自然就通了。

HOW TO BUILD A COMPILER

讲师

James Kyle from Facebook, main contributor of flow and babel

主题

• what is a compiler

• what dose a compiler do

  • parsing

    • 词法分析
    • 语法分析
    • 抽象语法树

  • transformation

    • traverse
    • visitor
  • code generation

• code reivew (通过展示代码的方式讲解编译器要做的几件事情以及对应的函数)

  • tokenizer (关键字识别处理)
  • parser token -> ast (识别输入字符串的关键字，生成抽象语法树)
  • traverser ？？TODO: 待订正

  • transformer

    • old ast => new ast(javascript) (将抽象语法树转换为某种语言的新的抽象语法树，当前代码以JavaScript为例)
  • code generator (生成对应的代码)
  • compiler （将上面的几步编排起来，依次调用，得出最终的结果）

关注点

• 编译器的各个环节的基本业务逻辑，即各个环节“要干什么事情”

• 讲师在开场铺垫时，讲了一些如何学习新技术的经历，可以关注一下

感想

国外讲师的PPT风格总是会让人耳目一新，也正展现了他作为一个极客放荡不羁、特立独行的一面（红蓝配看久了真的很伤眼……）。在整个讲解如何实现一个编译器的过程中，每个环节都讲得比较清晰，并且结合一个非常简单的代码示例来让听众明白编译器从0到1的过程，做到了深入浅出。编译器的整个处理流程在一些复杂的自定义业务逻辑处理场景中有着非常重要的作用，期待未来能有一个通用编译器，可以让开发者自己定义自己的 语言关键字、语法规则、对应的处理逻辑，这件事可以想象的空间还是很大的，需要对 James 的例子再做一次抽象。

阿里node 团队开源项目，企业级框架EGG

讲师

天猪 from Alibaba UC Group，eggjs

主题

• nodejs在阿里内部的应用历史与发展历程的介绍
• EGG定义了若干规范
• 具备强大的插件系统

• 找准了一些企业级web框架应该关注的若干个领域，通过插件机制来针对性地完成支持，从而构建出理想中的企业级应用框架，以下为几个例子：

  • 安全

  • 跨语言RPC

    • node 实现java 的rpc框架，序列号、反序列化、服务治理等等
  • 日志

• 标准的开源社区协作模式

  • workflow
  • ut
  • code style lint
• 开发期辅助
• 痛点的总结和分析，从而推导出合理的做法

关注点

• 企业级应用框架在各个领域需要关注的点，特别是生产环境的安全问题、日常维护与排错过程中需要使用到的日志系统等方面

感想

其实能知道EGG在开发过程中遇到的各种各样的难题，特别是在与已有的中间件系统做对接，服务发现与治理等方面一定有很多技术闪光点在里面，但是可能是由于时间和主题的限制，这样的技术点讲解的有点泛泛，其实可以减少框架介绍性的陈述，使用关键几个技术核心点来让听者感知到EGG的技术深度。

聊聊 JS 测试框架

讲师

严清 from Teambition

主题

• 开始补充了 toa 的相关feature，基于koa

• QUIC 在nodejs上的实现：目前正在研发的“下一代协议”

  • 链接迁移，移动端切换网络的常见具备实际应用的价值

• 测试框架流派

  • mocha 流

    • jasmine
    • mocha
    • jest

  • tape 流

    • tap
    • tape
    • ava

• 测试框架的核心和补充工具

  • 流程控制

• “新轮子”

  • 从外观上看，在原有的mocha基础上，新增对 async/await 、 yield 、observable 三种异步形式的支持。
• tman

关注点

• 完整的测试框架执行流程的讲解部分
• 运行上下文状态机

感想

前端的任何一个技术领域深入以后都会有很多很深入的技术细节令人着迷，在开发过程中所遇到的所有的令人困扰的问题在解决之后都会变成让人情绪亢奋的兴奋点，也正是这种感觉让开发人员能够持续而深入地投入到自己所喜爱的事情中去。一件微小的事情，一个细分的技术方向，解决好了，沉入其中，自然会有广阔的天地，相比自己之前的日常工作，浪费了太多的精力和心血在没有价值的事情上。

9月3日下午

Gridcontrol —— networked process managers

讲师

Alexandre Strzelewicz, pm2的作者，cto of keymitrics.io

主题

• PM2

  • originised application
  • ecosystem.json
  • PM2 V2 will be released in September.

• grid-control

  • serverless framework

    • microservice is hot but hard
  • AWS Lambda

  • process manager + network layer

    • multi DNS + DHT
    • wide area discovery (accorss subnet)
  • networked file system
  • distributed messaging

• setup a Grid

  • gridfile
  • provisioning
  • grid dash
• demo time
• open source on site

关注点

• 解决微服务存在的若干问题的思路: pm2(cpu、线程管理能力) + grid control

感想

国外的讲师总能给人以惊喜，Alexandre 在分享现场把 GridControl 开源给我的鼓舞非常巨大，让我感受到了这些开发者在开源之路上体现出的文化以及他们无私分享的精神。

3D on the web

讲师

罗诗亚, developer advocate at Autodesk

主题

• graphics pipeline

  • vertex shader (code interactive)
  • primitive assembly
  • rasterization
  • fragment shader（code interactive）
  • freame buffer

• an easy way for 3D on the web —— three.js

  • getting started

    • scene 、 camera、renderer、controls
    • put a stuff in the scene
    • animate
  • codereview
• demo show

关注点

• setTimeout 和 requestAnimationFrame 在浏览器动画渲染中的差别
• demo演示 和 演示示例背后的技术细节
• 基于three.js的开发所形成的生产力

感想

图形化的demo非常有感染力，在诗亚展示的若干个示例中，让在场的所有人感受到了web开发在3D图形领域可以做到多么精细酷炫。其实在理想的世界里，抛开商业上的各种考量和顾虑，诗亚以及她所在的团队基于three.js开发的一些功能和效果，如果经过抽象优化后能够开源，相信会给技术社区带来新的活力，特别是结合 web VR，充分利用二者在各自领域的技术优势，前景更让人充满期待。

Lighting Talk

• 豆瓣阅读

  • 富文本编辑器

  • contentEditable & 针对性的改进

    • 接管dom创建
    • selection API 接管 curser
    • Model 定义、管理富文本内容
  • draft.js & slate

• weex

  • 前端技术写出三端一致的app

  • demo

    • weex playground
  • 情怀？（看团队的风格和文化）

• bamei nodejs框架

  • 核心应该是配置化开发，完成简单的项目初始化与配置操作
  • 辅助工具，glue

• 饿了么前端团队分享

  • 主要介绍一些已经开源的组件库，部分基于 vue.js
  • ElementUI，思路和集团内的fusion基本一致，但是不太了解相关的工具链是否一样完善

• 开源爱好者 Cnodejs 管理者

  • moa

  • 现代web发展

    • 预编译
    • 前端技术发展
    • 平台工具
    • 构建系统

感想

lighting talk 是非常非常令人期待的一个环节，能感受到那些争先恐后利用短短5分钟时间展示自己的人，他们每个人身上的创造力、他所相信的、他所坚持的。如果每天的日常工作都沉浸在这种自我认同、自我驱动中，即便是再累，也是快乐的。技术让人单纯，坚持自己所相信的。

A-Frame, Building Virtual Reality on the Web

讲师

• Kevin Ngo from Mozilla | mozvr.com | aframe.io

主题

• Virtual Reality
• 传统 VR 和 WEB VR的对比
• https://w3c.github.io/webvr
• metaverse: 虚拟世界
• magicVoxel
• entity-component-system (有对应的扩展机制自定义自己的组件)
• 使用VR技术的一些案例

关注点

• 创建webvr的若干步骤
• a-frame 框架

感想

听了 的分享，感触最深的是两点，一是听过之前 3D on the web分享之后，再听 web VR 的分享，感觉web开发在目前最新的技术潮流中并没有缺席，反而利用其自身的优势在促进新兴技术的发展；二是在讲解使用WEB VR技术做的一些实际案例中，作品 afraid of sky （部分名称），利用VR技术向世人展示战争的残酷和血腥，呼吁和平。技术也许不能拯救世界，但是可以通过一点点的努力改变世界

Building a Unified Frontend and Mobile Team

讲师

• 郭达峰 @上线了: sxl.cn

主题

• 关于 react , react native

  • 前端UI层的虚拟机，用来屏蔽各端差异

• react native带来的变革

  • 由技术变革引发的团队架构变革（很多情况下，反之也成立）
  • react native 能给以往的组织结构、分工方式带来新的可能性

  • 跨端的工程化，代码复用率

    • 跨端组件差异
    • 原生模块的补充 （使用 typescript 定义组件接口，在react中使用）
  • 前端开发发展的另外一个趋势，在适合的业务场景下，融合其他“端”，促进其他 “端”

• react native 年轻的生态系统

  • 第三方库受到react的影响
  • 第三方库的不完善

• 打造全端团队需要的成员

  • 具备native开发经验
  • 好奇心强，愿意深入细节深入源码

• 对未来的一个展望

  • 可以预料到的趋势
  • 会遇到阻力，来源于现有的组织结构与人员分配 —— 用实践突破困境

关注点

• 围绕移动web产生的一些工具、系统，方便开发者进行移动开发，与原来的前端开发生态相比，更多的人和精力投入到对web开发的支持中。
• 团队建设

感想

听到这个时候，基本上可以从今年的这些分享中看到未来前端开发技术发展的几个趋势，

• 多端开发融合在历史包袱不重的团队中会逐渐成为技术选型的主流
• 开发框架的相互促进、借鉴、合作和相互弥补从而共建技术生态社区也是一个可能的趋势
• web开发在可预料的时间范围内会继续利用自身优势涉足热门技术领域，并且丰富相应的技术应用场景

Building asynchronous microservices that get along

讲师

• Makara Wang from Wiredcraft

主题

• 微服务

• 微服务的交互

  • restful接口提供服务
  • 消息中间件
  • 任务系统

• 微服务面临的问题

  • 请求变重

    • API解耦 —— GraphQl

  • API 数量暴增

    • Gateway，单一接入点

• 重点介绍

  • 以订单&支付为例子，讲解遇到的问题如何解决

    • 原来：（在分布式系统中，原来的方式有限制）

      • 事物使用DB保证
      • 使用DB锁防止数据冲突

    • 现在：

      • 使用消息中间件服务
      • CQRS (used with Event Sourcing) Command Query Responsibility Segregation, 命令查询职责分离模式
      • Event Sourcing (事件数据库)，保证最终一致性

关注点

• 听众需要自己去判断分享者说的内容是不是对的。
• 要注意分享者说的内容，是不是真的是微服务的关键，或者说，分享者 “拼接”一个微服务的架构出来以后，是不是真的就是微服务了？（需要思考有没有必要，是不是切合业务需求，是不是能解决现有或者未来会出现的问题？）

感想

讲师后面的技术方案其实在业内是属于比较常见、通用的编程模型，其实没有必要非要往微服务上面靠
。分享后半部分虽然能从问题产生的根源上面来逐步引入解决方案，但是缺失一个总体上的陈述，所以导致听者比较难以跟上节奏。另外限于时间上的限制，很多关键技术点并没有展开讲解，所以听众可以再拿着PPT，针对讲师没有细说的各个技术点自己做下功课，然后去辩证的理解和学习。

Q&A 环节

整体来说，Q&A环节质量略低，一是国外的几个讲师没有被问到特别有价值的问题，二是提问题的一些同学提问中涉及到若干个技术细节耗费了较多的时间，这些内容应该在小范围内交流即可。当然有人会说，为什么你没有站起来提问，其实我自己也记录了很多问题，但是由于QA环节难以抢到机会，而且抢到以后也只能问一个，所以只好作罢。所以我在上面的总结中，写了每个分享主题对应的关注点，这些关注点基本上都是围绕讲师所讲内容展开的思考点，可以问出很多问题，也很遗憾由于个人原因没有参与after paty来面对面和讲师沟通交流，后续如果有机会，希望能听到讲师们自己的理解和看法。

总结

第一天的JSConf分享感触最深的就是讲师们对技术的追求和坚持。值得提出的是，vuejs2.0与 weex的结合让人看到了合作双方都在下一盘很大的棋：通过分享与合作来构建更大更完善的技术社区，从而引领未来前端技术的发展趋势，至少是多端统一的道路上，具备了和reactjs + react native 相抗衡的能力。另外一点就是纵观第一天所有课程，可以大概地看到未来前端技术、web开发的一些趋势，上面已经提到过，所以这里不再重复了。总体来说，主办方的课题选择、现场讲师的发挥、现场种种技术与激情的碰撞，都让第一天的 JsConf 精彩而充实 ，从而也更加让人期待第二天的分享内容。

JsConf, 明天见。