创心-第14届D2参会总结

又是一年前端盛会D2，度过了很是充实的一天。感谢各位分享嘉宾和组织者辛勤的准备~还收了不少好看的贴纸hhh，晒下参会证和电脑背面~

接下来就是会议的具体内容啦，内容比较多，若有疏漏请各位看官批评指正~

大会的所有PPT官方已经放到GitHub上了，能够自行取用~ github.com/d2forum/14t…

圆心致辞

前端这些年来，充满着变革和重塑，从应用上层逐渐深刻到语言框架底层，对前端的要求也在不断变化，始终有着巨大的挑战和机遇。

五个挑战（去年也讲了五个挑战，不过内容有所不一样~）

1. 端侧渲染体系的重塑， 从PC时代到无线时代，再到将来的IOT时代，在渲染方面诞生了不少优秀的技术，RN, Weex, Flutter，小程序体系等。基于底层的渲染思路，Native的渲染，2D、3D性能体系，包括WASM集成到无线端来渲染， 都带来了不少可能性。
2. 2B中后台场景垂直领域的深度沉淀。 从2C场景到2B场景，之前由大量外包全栈支撑的中后台体系也在变为专业前端的主战场。中后台领域有框架、布局、组件、数据交换，庞大致系的运做（跨团队协做）等各类挑战，在技术上也有可视化，Web Excel, 编辑器，搭建，智能化等各类方向值得深刻。不一样域的体系下如何和后端体系打通，领域模型的贯穿等，都是须要探索与沉淀的。
3. 从传统开发模式到云+端开发模式，云使业务体系平台化，接口化，在端侧效率化，业务化。前端关注到从页面到业务。Serverless必定是将来趋势，前端能力必须匹配将来技术要求。
   
4. 前端智能化， 页面的构成，结构，标准化。这一块淘系的 imgcook 已经作得很不错了，在今年的双十一也有智能代码生成的大规模落地，能够了解一下~
5. 语言底层的深刻。 国内的语言与国际接轨，须要从底层作起，参与标准化的制定，促进JS语言的发展。最近贺老也加入了TC39（去年一直吐槽的class field能够当面跟TC39成员吐槽了😂），但愿之后在标准化的制定上，能看到愈来愈多国人的声影。

上午- 语言框架专场

Let's work together on the future of JavaScript through TC39

讲师：Daniel Ehrenberg

终于见到了一直以来感受很神秘的TC39成员。Daniel 仍是很可爱的，分享精彩而流畅，常常引用《论语》来总结，看来仍是对中国文化有一些了解的~

Daniel 给你们讲解了TC39的工做机制，一个新特性从提出到成为标准须要经历如下阶段，整体来看仍是很是严谨的

• Stage 0: strawman - 脑暴阶段，有什么想法均可以提出~
• Stage 1: proposal - 讨论阶段，由TC39的成员发起一个正式的新特性提案，并与其余成员和社区进行讨论
• Stage 2: draft - 草案阶段，须要包含两个实验性的具体实现
• Stage 3: candidate - 候选阶段，基本已经准备实施，须要包含两个符合规范的具体实现
• Stage 4: finished - 经过test262（新特性的测试仓库）的验收，发布到年度规范

而后介绍了目前几个推动到各个阶段的的特性，其中Stage4的应该立刻就会出如今ECMAScript 2020的规范中，好比BigInt, Dynamic import, 还有呼吁已久的Optional Chaining（TS 3.7已经支持了~），其余的就不细讲，能够在这里看到TC39的工做进展，也能够提issue发表观点并与他们交流~

github.com/tc39/ecma26…

JS语言在引擎级别的执行过程

讲师：周爱民

周爱民老师功力深厚，对JS的底层执行过程很是熟悉，并且已经有段时间没听过这种不夹杂产品介绍，纯粹探讨技术的分享了~回归语言自己，感受很亲切。（虽然产品介绍的分享也颇有收获，可是这类分享很难有时间详细讲解具体实现，只能是发个架构图，后面本身研究，这种纯技术的分享，能够着重于某块细节讲的很深刻，听完就会当即学到一些之前可能不知道的内容，在技术上仍是颇有收获的~）

总体内容很偏底层，包括做用域，环境，执行上下文等一些基础概念，以及词法环境规范，属性描述规范，属性标识符规范等标准中的细节，平时工做场景中很难有机会深刻了解这些内容，因此仍是很是有收获的，PPT应该很快就会放出来，就不所有展开来说了~讲个印象最深入的地方吧

这段代码是老师PPT中的，当面试题应该能考倒绝大多数人~

const obj = {
  foo() {
  	return this;
	}
}

(obj.foo)() === obj // true
eval('obj.foo')() === obj // false
复制代码

为何 obj.foo 和 eval('obj.foo') 都返回了一个函数，可是执行结果不同呢？

这就JS引擎搞的事情了~在执行时分为语句执行和表达式执行两种状况，参照下面这张图

• 语句执行，即 eval('obj.foo') 这样的，对于这种类型，返回结果中若是包含引用，会用GetValue把引用取出来而后去除，因此返回值中看不到引用
• 表达式执行，即 obj.foo这样的，返回结果中能够正常包含引用

因此 eval('obj.foo') 返回的结果中丢失了对obj的引用，this就只能指向全局做用域了~在浏览器中跑了一下果真如此

嵌套多级也是同样的，只要有引用，都会去除~下面的代码也印证了这个结论

这种细节仍是颇有意思的，虽然不是专门搞这个方向的话，对平时工做可能没有什么帮助，可是做为一个前端，若是可以掌握JS在引擎层执行细节，仍是很锻炼内功的~

fibjs 模块重构 - 从回调到协程

讲师：陈垒

fibjs 与node同样，也是一套JavaSscript运行时，底层都用的V8引擎，区别是其内部用逻辑锁来替代回调来控制异步，这个思路仍是很新颖的~

根据讲师贴出的性能对照，将FIBJS ORM模块用此方法重构后，性能上仍是有很大提高的

不过其设计上不能与现有的node生态兼容，感受对于外部用户来讲仍是缺少些落地的动力
在知乎上看到了响马老师的回答，不少内容本次分享也都有提到，想对fibjs有更多了解的能够参考一下~

www.zhihu.com/question/26…

下午-工程化专场

前端工程下一站：IDE

讲师：上坡，吭头

IDE是今年阿里前端委员会定下的重要方向之一，通过大半年的建设，也取得了很多进展。整个IDE内核的技术实现是极其复杂的，看下下面这张架构图就明白了，每一块拎出来都是能够作好久的。

因此一小时的分享，在技术实现上就是点到为止了，若是对总体IDE的技术细节比较感兴趣的话，能够等会后讲师的PPT，下面也有几篇不错的文章能够参考~

• 从VSCode看大型IDE技术架构
• 带你开发和调整VSCode源码
• 解密VSCode断点调试原理

下面主要想谈下我我的对Web IDE的见解，最开始发起IDE共建的时候，我觉得是直接搞个在线IDE来替代现有的开发环境，之后开发全部项目就都用这个了，我的观点仍是不太支持这种作法的，缘由主要有如下两点

• 实现技术难度极高，底层都是基于一些开源项目（monaco editor, xterm.js等）作一些二次封装，可是将其整合起来，中间要踩的坑仍是很是多，须要耗费大量时间精力
• 不能有效解决痛点，甚至增长痛点：Cloud IDE最主要的就是远程编码，构建，部署，省去了配置环境的复杂。可是在综合开发体验上，目前没有人会以为开发大项目时使用Cloud IDE会比本地开发体验好，不只重度依赖网络，并且性能也是个很大的问题。

后面发现其实共建的是IDE的内核，也就是 KAITIAN Framework（名字起的真的炫酷~)，而后各业务基于这套内核来封装本身的编辑器甚至整套IDE，好比支付宝小程序的IDE，淘宝开发者工具，imgcook的在线编辑器，阿里云的函数计算编辑器等，把底层编辑预览调试能力等抽出来统一维护，业务在上面定制专有逻辑，对于特定的业务场景来讲仍是颇有价值的。

总之，做为一个技术人，可以参与这样复杂有挑战的项目，并最终实现出来，确定是颇有成就感的，但愿往后本身也有机会参与这样的建设中~

Babel: Under the Hood

讲师： Nicolò Ribaudo

这位小哥仍是个学生，年轻有为，讲的也很是棒~

Babel转化的核心链路：原始代码-原始AST -转化后的AST-转化后的代码

主要功能由如下几个包来实现：
@babel/parser 将源码解析生成 AST，会经历如下三个步骤

• 词法分析（Lexical analysis）：code to token，并进行token合法性校验，好比注释若是没有用// 或 /**/来写就会报错
• 语法分析（Syntax analysis)：token to AST，并进行基本的语法校验，好比分号问题等
• 语义分析（Semantic analysis)：会进行上下文相关的分析，若是有

@babel/traverse 以深度优先的形式遍历AST，并进行修改和转化
@babel/generator 根据AST生成新的代码
@babel/core Babel核心库，被不少babel配套设施依赖，用于加载 preset 和 plugin

@babel/template 采用 template 的形式，简化修改 AST 的过程
@babel/types 包含全部 AST 中使用的类型

而后还简单的讲解了一个babel-plugin的实现，内容是进行以下转化

// 转化前
const x = throw new Error("Err!") 
// 转化后
const x = (() => {throw new Error("Err!");})();
复制代码

插件的写法也很简单，就直接贴代码了~

export default function Plugin() {
  return {
    // 插件名称
    name: 'throw-expressions',
    // 插件选项
    manipulateOptions(opts) {
      opts.parserOpts.plugins.push('throwExpressions')
    },
    // 遍历 AST 并进行操做的方法
    visitor: {
      UnaryExpression(path) {
        const {node} = path;
        // 不是抛异常的表达式就不处理
        if(node.operator !== 'throw') return;
        // 基于模板生成新的 AST 结构
        const iife = template.expression.ast(`(() => {throw ${node.argument}})()`);
        // 替换原有 AST
        path.replaceWith(iife);
      }
    }
  }
}
复制代码

最后推荐一个在线代码生成AST的网站，学习AST时颇有用：astexplorer.net/

基于浏览器的实时构建探索之路

讲师：玄寂（玄字辈，一听就是大师的名号~）

玄寂老师读完这两篇文章，受到了些触动，开始了浏览器构建的探索之路~

• formidable.com/blog/2019/n…
• dev.to/pika/a-futu…

如今某些项目的依赖包实在太大，尤为是一些中后台项目，项目刚搭起来，还没写页面呢，就先下个几百MB依赖，想起来这张广为流传的图

因此浏览器端的构建，概念上很是新颖，但确实是有场景和诉求的，玄寂老师将浏览器的实时构建实现的核心概括如下几点并分别进行讲解~

• 设计资源⽂件的加载器
• 设计资源⽂件的编译体系
• 设计浏览器端的⽂件系统 - 借助了 BrowserFS
• 设计浏览器端的包管理：即浏览器端npm，实现了动态下发，依赖缓存，数据结构与浏览器文件系统桥接等

目前的探索产物是 Gravity，一套实现浏览器实时构建的事件流集合，能够跑通浏览器端构建 React 项目的 Demo，仍是很牛逼的，若是可以在生产环境稳定使用，应该可以节省很多服务器资源。

不过我的以为与现有的webpack工具链不兼容是个比较大的问题，好比css-loader, ts-loader这些很经常使用的，得从新建设一遍本身的工具链生态。在现场也进行了提问，玄寂老师的回答是，因为事件流机制的设计都是同样的，这些loader迁移起来也会很方便。

玄寂老师的blog上也有不少其余的优质内容，能够关注一波
github.com/pigcan/blog

Distributed Front-End Architecture

讲师 Ahmad  Amireh

这场质量比较通常，讲师讲的时候有些紧张，可能准备不是特别充分，场面气氛有点尴尬~并且内容上其实就是在讲微前端，可能放在微前端专场会更合适一些。整个过程当中没作太多记录，就不细讲了。

不过讲师自己仍是颇有才华的，写了个 happyPack的项目，用于优化webpack的构建速度的，star数也很多，有兴趣的能够参考一波~
github.com/amireh/happ…

---

夜场部分

和去年同样，今年D2也有着夜场环节，很是精彩~先来波圆桌会四巨头的照片

从左至右依次为

• Hax贺老
• 西祠胡同创始人，fibjs做者响马老师
• 蚂蚁体验技术部大老板玉伯大佬
• TC39核心成员 Daniel Ehrenberg
• 以及可爱的翻译小姐姐

在圆桌会以前还有三个很精彩的lightning talk, 依次为

• 海量节点树的高性能渲染，使用各类骚操做将海量数据下节点树的渲染性能提高了18倍，这套方案预计明年2月开源，能够期待一波~
• 阿里巴巴营销研究和体验中心的凌征大佬分享前端工程对营销业务的赋能。包括创意生成，图片实时渲染，字体渲染，视频创意生成及编辑等。最近也在参与营销相关工做，深知这其中每一个模块对前端技术都很是有挑战，可以实现并在业务中顺利落地，为业务带来效果，是很是不容易的~
• 阿里南京研发中心的亨睿大佬分享黑科技录屏技术XReplay，能够7*24不间断录屏，清晰度极高，且大小只有MP4文件的1/200，节省了大量服务器存储资源。具体的技术实现涉及到各类算法专利，在内网上看到了一些相关文档，在这里不便于公开，后面会放在内网的语雀上供阿里的小伙伴们参考。

接下来说讲圆桌会的内容~以QA的形式总结一下各位大佬在前端路上的各类思考及见解

Q：优秀前端都有什么特质？
A：像素思惟（追求极致的还原度），充满好奇心，能与他人良好合做。善于读书，善于思考，实现本身的认知升级。关注基础知识及API的底层实现，不要作单纯的API Caller~

Q：入行时和如今对前端的认知和思考，有没有发生什么变化？
A：前端始终跟人机交互息息相关，随着终端运算能力的提高，终端设备使用场景愈来愈复杂，前端对即时性，好玩性以及用户体验要求愈来愈高。

Q：带团队以来对我的有什么改变？
玉伯：带团队以来我的的改变其实不是不少，主要是从开源社区中汲取到不少经验。开源自然不是一我的在干活，经过社区运营的大型开源项目，自己就涉及到多人之间的协同。因此就以开源项目的方式运做实体团队，团队成员有问题能够经过相似提issue的方式来沟通解决，同时也像管理大型开源项目同样，很是注重内部交流及高效协同。

Q：如何始终保持对技术的热爱？
玉伯：技术的力量，是整个社会创新最大的动力之一。始终以为行业颇有意思，每隔一阵又会有不少想不到的惊喜
响马：以为跟人打交道比较费劲。写程序自己就是放松的~
Danel：学习新事物，给出问题的解决方案，对事情保持好奇心。

Q：成长的关键点？
Hax：多年前发现Firefox中有个JS行为与标准不一致，就给Firefox提了个issue，居然获得Javascript之父回复，很是惊讶。加入TC39也是很重要的事情（顺带又吐槽了class field😂)
玉伯：从上学谈起，到加入淘宝及支付宝，在all in 无线时代的坚守，到最终实现破局，中间有很是多的心路历程，强烈推荐看下这篇文章~详细讲述了玉伯的成长之路，我的以为值得每一位前端同窗阅读学习。
个人前端成长之路-玉伯

关于夜场的内容有位网友总结了一份只字不差版的，内容更加详细，也很是推荐阅读~
www.yuque.com/zhaishenkin…

最后来一波夜场大合照，欢声笑语中圆满结束本次D2~

总结

D2从创办至今，已经走过14个年头了，虽然只参加过去年今年两届，以及在网上零散地看过前几年的部份内容，但也从中真实感觉到前端这几年来的高速发展，不断突破自我，拓宽边界，挑战未知的可能性。D2也办的愈来愈好，基本能够说是国内质量最高的前端会议了（固然咱们蚂蚁的SEE Conf也很不错，不过有不少设计师的内容，不算是纯前端的大会），虽然票价比较贵（今年还比去年又涨了…），但就质量而言，仍是轻松值回票价的~（这么硬的广告，还不快送我明年门票！）

从去年到今年，我的的最大变化就是结束了学生时代，正式成为一名阿里的前端工程师。”优秀的前端不是在阿里，就是在去阿里的路上“，这句话虽有调侃之意，但目前阿里在前端技术上的引领和突破确实明显优于其余公司。每一年D2都能拿出各类新鲜的东西，而且并非空造轮子，不少产品已经通过了千万乃至亿级UV的考验，是真正可以赋能业务，为其带来显著价值的。

我的而言，看到这些新鲜玩意，从去年的高呼卧槽，到今年的比较淡定，抽出更多时间精力去听听外部的分享，主要是部份内容都在内部宣传已久，已经有过相关输入了😂好比今天的微前端 ，IDE内核KAITIAN，XReplay等议题，在内部，这些项目的开发者们已经撰写了不少文档资料供你们参考了，甚至还能够直接看源码，一窥内部细节。只要肯付出时间研究，收获确定是远远多于今天会上这一小时的~

说了这么多，核心观点就是：想提早了解，甚至亲身参与和打造这么多牛逼的产品，还不快加入咱们！

下面是招聘时间~

关于咱们：
咱们是蚂蚁保险体验技术团队，来自蚂蚁金服保险事业群。咱们是一个年轻的团队（没有历史技术栈包袱），目前平均年龄92年（去除一个最高分8x年-团队leader，去除一个最低分97年🙈）。咱们支持了阿里集团几乎全部的保险业务。去年咱们产出的相互宝轰动保险界，成为蚂蚁乃至整个阿里集团的明星产品，今年随着相互宝的用户总数破亿，蚂蚁保险的全线业务都在继续蓬勃发展。团队人才辈出，清华、浙大、哈工大，博士硕士都有。还有社区活跃份子相学长，easymock做者chuangker。基本每周都有技术分享，技术氛围极好，技术交流多，业余生活也很丰富，来波团队各位帅哥美女的照片~

伴随着事业群的高速发展，团队也在迅速扩张，欢迎各位前端高手加入咱们~咱们但愿你是：技术上基础扎实、某领域深刻（Node/互动营销/数据可视化等）；学习上善于沉淀、持续学习；性格上乐观开朗、活泼外向。
若有兴趣加入咱们，欢迎私信勾搭，或发送简历至邮箱：xingyan.hyx@antfin.com