IMWebConf 2016总结

约定不等于承诺〃 2022-09-25 15:30 123阅读 0赞

# IMWebConf 2016总结 #

![IMWebConf][]  
9月10号，IMWeb团队在腾讯大厦成功举办了IMWebConf 2016！进行了一次十分精彩的分享沙龙！

## 一、一句话总结 ##

### 【影响力范围】 ###

*  听众来自腾讯、爱奇艺、OPPO、大疆、迅雷、京东、金蝶软件等**超过70家**国内互联网公司，不少听众来自武汉、上海、珠海等地。
 *  **超过200名**同学参加了本次IMWebConf。
 *  而本次IMWebConf在腾讯课堂开设的线上直播课程中，报名人数**达到1181人**。

### 【活动效果】 ###

*  会后反馈中**97.8%**的同学表示自己学到了东西。
 *  会后反馈中**98.9%**的同学对本次IMWebConf的内容的实用性感到满意。
 *  会后反馈中**83.9%**的同学对本次IMWebConf的组织、通知形式感到满意。

## 二、IMWebConf主会场 ##

本次IMWebConf除了在腾大二楼多功能厅设置了**主会场**外，还在腾大24楼设置了**React**、**NodeJS**、**综合**三大分会场。

上午的主会场由IMWeb团队女神bleany主持，bleany首先对IMWeb团队和本次IMWebConf的流程进行了简单介绍，并通过跟观众的线上线下互动进行了会议的破冰行动，然后交由IMWeb团队负责人henryguo进行会议开场。henry首先介绍了团队涉足过的业务体系，以及行业分享输出，然后henry从**网络协议**、**图片格式**、**ES6**、**React.js生态**、**NodeJS**、**音视频能力**等维度阐述过去一年中Web的技术进展。最后henry在简单介绍了今天的分享主题后，本次IMWebConf正式开始！  
![IMWebConf开场][IMWebConf 1]

### HTTPS最佳实践 ###

主会场的第一个分享主题是**《HTTPS最佳实践》**，由腾讯高级工程师**罗成**进行分享。

*  罗成首先从web流量劫持的角度阐述了应用HTTPS的背景。
 *  接着从TCP、SSL、网络应用层以及HTTPS计算性能等层面讲述如何进行HTTPS性能优化，做到**“让大象起舞”**。
 *  最后罗成阐述了HTTPS在部署过程中的问题和解决方案，并对HTTPS的发展进行了展望。
 *  从现场和会后反馈的情况来看，各位前端同学都表示上了**一堂扎实的网络协议教学**。

![IMWebConf HTTPS][]

### React Native在企鹅辅导中的应用 ###

第二位上台的主讲是IMWeb团队成员**jerytang**，分享的主题是**《React Native在企鹅辅导中的应用》**。

*  jery从比较ReactJS和React Native的差异开场，在运行环境、标签、样式、系统组件、扩展能力和开发体验各个角度比较了ReactJS和React Native这两个技术栈的差异，观众通过这一轮比较下来，也对RN开发有了一个初步的认识。
 *  接着jery使用翔实的数据和图表，展示了开发者最关心的问题——**性能**，分别比较了RN、H5和Native的页面加载速度、数据加载速度以及手势响应速度和动画性能。
 *  最后jery出自身的开发经验出发，分享了在企鹅辅导中针对RN进行的性能优化手段，并阐述了RN的未来APP的开发模式将会是RN、H5、Native共存，互补有无。

![IMWebConf React Native][]

在上午两场精彩的分享过后，学员们安排在腾大12楼的餐厅就餐，进行简短和交流和休息，准备参加下午**ReactJS**、**NodeJS**以及**综合**三大分会场的分享。  
![IMWebConf 午餐][IMWebConf 2]

## 三、IMWebConf ReactJS分会场 ##

React分会场有来自腾讯不同业务部门的3场精彩分享，他们分享自己在业务中应用React过程中总结出的宝贵经验，是这次conf里最火爆的分会场。

### React前后端同构之道 ###

来自在线教育部门的**杨春文**首先给大家带来**《React前后端同构之道》**。他总结自己在开发**企鹅辅导**过程中如何应用React同构技术来优化首屏性能。

*  他首先介绍到React同构是指在服务器端Node.js环境下计算出页面的结构返回给浏览器减少浏览器端的计算来优化首屏加载时间，通过对比采用React同构技术和没有采用情况下首屏加载时间的真实数据的比较来引起大家对React同构技术的兴趣。
 *  接着他又详细分析了React同构技术的原理，React的渲染过程和不同环境下渲染流程的差异。同时他给大家提到他在实际开发过程中遇到的坑:重复渲染的问题，它是指在服务器渲染返回给浏览器后浏览器又重新渲染了一遍这样就毫无优化的意义，导致的原因竟然是一个空格。

![IMWebConf React前后端同构之道][IMWebConf React]

### React+Redux组件化那些事 ###

来自互动视频的**梁伟盛**总结自己在开发**NOW直播**的过程中如何应用React+Redux组件化的思想来应对快速迭代的产品。首先把React和Angular对比突出React完善的组件化支持和Redux清晰的单向数据流，接着再结合在开发NOW直播过程中遇到的实际问题来引入如何应用组件化思想来实现清晰的架构和快速迭代。他采用了一下这些思想：

*  一切皆组件，展示组件、数据组件、高阶组件
 *  任意组件之间任意搭配形成新的组件从而做到代码复用
 *  组件间尽量分散，高阶组件由低级组件组成，业务组件由高阶组件和数据组件组成
 *  任何组件都通过npm管理，使用简单

采用以上思想有以下**优势**：

*  快速搭建项目与快速切换不同的场景
 *  展示组件与数据组件之间实现的低耦合，而连接两者的高阶组件实现了高内聚

![IMWebConf React+Redux组件化那些事][IMWebConf React_Redux]

### React+Reflux实践及性能调优 ###

来自通讯充值与彩票业务部的**黄志鹏**给大家介绍了Reflux和如何优化React性能。黄志鹏先向大家介绍了Reflux的概念以及和Redux的差异，突出Reflux与Redux不同在于对事件的处理方式不一样Reflux采用事件广播的机制以及Reflux的多state特点。接着讲到通过最少知识原则来降低模块之间的耦合。在讲完Reflux后又给大家分享在写React过程中注意以下几点可以**优化性能**：

*  利用`shouldComponentUpdate`方法来减少不必要的diff
 *  利用`Immutable.is`优化新老数据做比较
 *  利用key属性来触发insertBefore移动节点
 *  使用 React.addons.Perf 来做性能分析

![IMWebConf React+Reflux实践及性能调优][IMWebConf React_Reflux]

## 四、IMWebConf NodeJS分会场 ##

NodeJS分会场输出了来自腾讯内外三款不同产品在应用NodeJS过程中的经验沉淀，三场分享分别从NodeJS框架应用、NodeJS异构通信以及搭建高质稳定的NodeJS服务三个角度向观众展示了NodeJS开发中的宝贵经验。

### express内核解析与服务端开发实践 ###

首先分享的是来自云汉金融科技的前端技术负责人**陈映平**，他由浅入深，剖析express的核心架构与设计。同时，对node服务端开发实践相关的技术链条进行了概要介绍。

*  陈映平首先用讲解源码的方式向观众展示了express搭建服务端应用的**简易性**、**可扩展性**和**高性能**。
 *  然后他详细讲解了express中核心的**路由**、**中间件**和**模版**的应用。
 *  接着陈映平使用源码和架构图交叉讲解的方式阐述了express处理请求和业务流程和核心模块，着重讲解了express最重要的路由模块。
 *  最后陈映平基于云汉金融科技对express的实践，向大家介绍了服务端开发实践中的**性能优化**、**进程管理**、**异常处理**以及利用node-inspector等工具进行服务端**远程调试**。

![IMWebConf express][]

### Node在直播中的应用 ###

第二位上台分享的讲师是，IMWeb团队成员**linkzhu**，本次分享的主题是**《Node在直播中的应用》**。

*  link首先从业务场景和技术场景分析了NodeJS在技术选型中的必要性。
 *  接着结合NOW直播的场景，重点阐述了NodeJS如何在异构系统中跟现有的其他服务进行协作，并介绍了相关技术。
 *  着重介绍了数据序列化协议protobuf、缓存服务CKV、分布式协作工具zookeeper的适用场景和优劣势。

![IMWebConf Node在直播中的应用][IMWebConf Node]

### 如何搭建高质量的Node服务 ###

来自腾讯增值产品部的资深前端工程师岑东益为大家带来了**企鹅电竞**在搭建高效稳定的Node服务中的宝贵经验。  
\- 首先介绍了利用NodeJS进行直出服务，加快页面的首屏渲染速度。并且通过测速上报和监控用户反馈来持续优化、快速迭代。  
\- 接着介绍了利用**[BadJS][]**进行现网错误监控，保障服务质量。  
\- **极致优化**，为解决直出首屏不可交互的问题，实现了提前加载组件，提高用户体验。  
\- 循序渐进的介绍了如何通过实时日志和历史日志来快速定位现网问题。

## 五、IMWebConf 综合分会场、 ##

综合分会场同样精彩纷呈，来自腾讯和阿里的三位前端工程师，向大家分享了自己在前端开发中的探索和突破。

### 《JavaScript的设计失误》 ###

首先是来自阿里的高级工程师蒋豪群，带领我们从一个不一样的角度走进JavaScript的世界，“吐槽”JavaScript从诞生走向发展的道路上，由于种种历史原因出现的各种“坑”。究其因，得其果，引起大家的共鸣，围观群众纷纷抚手称赞尔。

*  JavaScript历史遗留问题；
 *  JavaScript类型系统的“坑”；
 *  作用域、命名等问题；
 *  API 设计失败之处；

![IMWebConf JavaScript的设计失误][IMWebConf JavaScript]

### 《真的需要后端吗？》 ###

第二个分享主题由IMWEB团队的黎清龙主持，清龙借由一个常见的业务场景出现的开发效率以及重复劳动的问题引出我们的议题——真的需要后端吗？并介绍了行业的nobackend解决方案以及IMWeb团队的解决方案 IMWeb SAS。对于nobackend所能达到的开发效率上的提升，参会者纷纷表示我和我的小伙伴都惊呆了！

*  对于常规业务需求需要涉及前端、CGI、后台等开发人力资源，类似的需求都需要话费相同的人力，存在重复劳动的问题；
 *  解决问题的关键在于UI组件化以及优化管理后台实现简单cgi配置化；
 *  行业的解决方案是在前端趋势2013大会上提出的nobackend报告，编写应用无需关注后端；
 *  介绍IMWeb团队实现的解决方案IMWeb SAS（Schema as Service）相关工作原理、持久化存储以及拓展服务，通过SAS可以节省一半以上的开发人力；
 *  提出对未来的展望，包括更多通用API、支持dreamcode的SDK以及开放源码；

![IMWebConf 真的需要后端吗][IMWebConf 3]

### 《在线教育中的音视频优化》 ###

作为综合场的压轴好戏，来自于IMWeb团队的黄龙lonny为我们带来了第三个分享主题。lonny在在线教育项目中主要负责Web课程直播相关的工作，他为我们带来了腾讯课堂整体音视频实现方案，并对其中的优化内容进行了详细的讲解。

*  常见的直播实现方案RTMP架构；
 *  腾讯课堂整体音视频实现方案，包括腾讯课堂直播架构以及上线以后遇到的问题；
 *  针对首帧时长、流畅度、实时性等优化内容的详细讲解；
 *  更多分场景优化内容，包括多路音视频、音频上行、补静音包等；  
    　　  
    ![IMWebConf 在线教育中的音视频优化][IMWebConf 4]

下面分享一些会场现场的照片，看得出来台上讲师的分享内容果然是干货满满，牢牢抓住台下程序猿/媛们的注意力哇！在Q&A环节中，同学们也十分踊跃，虽然每位讲师已经预留了足够的答疑时间，但是会后还是有同学吐槽：“本来准备了很多问题，然而却没有机会提问，遗憾”。不过没关系，后期大家依然可以在IMWeb团队公众群(点击链接加入群**[IMWeb前端公众群①][IMWeb]**)中与讲师们保持沟通。：）  
![IMWebConf现场][IMWebConf 5]

## 三、听众反馈 ##

在主会场和三大分会场的分享结束后，均出现了观众**没有主动离场**，并且拖着讲师不断询问问题的情况，而且大家纷纷在微信群和问卷反馈中询问下一场分享是什么时候，并支持这样的分享应该坚持定期举办。从会后各个渠道的反馈来看，大家对这次分享沙龙可以说是**好评如潮**！  
![IMWebConf 听众反馈][IMWebConf 6]

**最后**，本次反馈问卷一共设置了13道调查问题，有效回收分数为61份，以下是本次反馈的总结输出。从线上线下报名签到信息和课后反馈上来看，本次分享沙龙在**影响力范围**、**内容质量**和**组委会流程安排**方面都十分成功！

[IMWebConf]: /images/20220717/6d0d3227b5f7493b9650878c7999951d.png
[IMWebConf 1]: /images/20220717/aaa9432df92644d4a6cec292f3ac84c3.png
[IMWebConf HTTPS]: /images/20220717/38ba433664f74708a8b35911e438a720.png
[IMWebConf React Native]: /images/20220717/29413f3bbb7e48e9a605141d61a64267.png
[IMWebConf 2]: /images/20220717/073fc721e2314a52b0ea28cf8233d94e.png
[IMWebConf React]: /images/20220717/989c46c5adb349bcaef5502799d0f22b.png
[IMWebConf React_Redux]: /images/20220717/5ce73d04f6d245dea16608e9b2643518.png
[IMWebConf React_Reflux]: /images/20220717/cafdffc87cb449e589016467396a4bb0.png
[IMWebConf express]: /images/20220717/17dc399838cb44f99e26da4a953776a3.png
[IMWebConf Node]: /images/20220717/7714d8386ff24299b521a2477591d23d.png
[BadJS]: https://github.com/BetterJS
[IMWebConf JavaScript]: /images/20220717/f259518c265741d6a435a0947bd617eb.png
[IMWebConf 3]: /images/20220717/f8a235402d5e4cfca4fab334d2efb701.png
[IMWebConf 4]: /images/20220717/d33a604ce4f041b0b6afa93ee9b3f88b.png
[IMWeb]: http://jq.qq.com/?_wv=1027&k=YKM7j5
[IMWebConf 5]: /images/20220717/2baeed812db64d07b71f6d4e096bda09.png
[IMWebConf 6]: /images/20220717/4c476c5e75c343239b09f2ebe7bda161.png