QCon2016 上海会议汇总(1) - 前端技术实践

日程传送门：http://2016.qconshanghai.com/schedule

我这里重点总结下前端、移动端、团队管理、研发支撑相关的议题，谈谈我的感受。

《Vue 2.0: 渐进式前端解决方案》 - Vue Technology LLC 创始人， Vue.js 作者 尤雨溪

通过内在复杂度和工具复杂度两个维度介绍前端如果选择技术框架，然后强调工具本身复杂度的可伸缩性。重点比较了Vue和React两个当前最红的框架，采用的模式都是视图层的核心+可选的附加库/工具链，来扩展工具本身的复杂度。

渐进式框架：

1. 声明式渲染：关于命令式vs声明式渲染可以参考这篇文章，声明式渲染对于UI开发更为友好。和ReactJS一样，同样采用了state、virtual dom、render的理念。提供Watcher可以监听数据变化触发render，实现UI和data的绑定。

2. 组件系统：通过UI组件搭建页面，子父节点通过Pass Props和Emit Events来实现数据交互。

3. 客户端路由：router.vuejs.org

4. 状态管理：通过state触发render，这个模式和reactjs似乎理念一样

5. 构建工具：npm, webpack，预处理器（Babel，LESS，Sass，PostCSS等），提供了Chrome开发工具，尤其印象深刻是的Time-Travel Debugging，可以导入导出state。

Vue2.0

2.0版本会更轻、更快1.37x(Vue.js) vs 1.82x(React.js），提供服务端的渲染，同时和阿里合作提供Weex框架实现原生的渲染，这个模式和React Native异曲同工。

《蘑菇街前后端分离实践》- 蘑菇街商品团队开发工程师 陈辉（沉辉）

前后端耦合程度越高，意味着前后端团队独立性越低，这个在大型技术团队来说会带来非常大的沟通、联调的成本，因此如何能够实现前后端分离成为各个公司的目标。陈辉从蘑菇街的亲身经历讲述了下如何实现前后端的分离和碰到的困难。

淘宝提供Midway方案，通过ngix、nodejs实现数据生成。

蘑菇街的前后端分离框架：COSTA

- 本地调试：简单、快速

- 模型清晰：MVC层次清晰

- 开发效率：mock，proxy

- 运维发布：稳定，便捷

这次分享提供了两个前后端分离的方案：淘宝Midway、蘑菇街COSTA，对于大型研发团队，为了前后端开发解耦，提供一套前后端分离的方案是很有价值的。

《Progressive Web App：反击序章》- 前微票儿前端基础工程团队负责人 黄玄

黄玄从web的现状讲起，web在PC端取得了巨大胜利，成为一个统一的应用平台。

web取得成功的几点优势：

1. URL：方便寻找

2. Open：跨平台

3. Capable：高性能、高兼容

4. On-Demand: 无缝连接、及时发版

在移动世界，web的Capable收到极大的挑战，性能缺失、硬件集成能力弱。

2008年，phonegap出现希望能够解决web和native之间的间隙。2012年，phonegap提出这个框架仅仅是一个polyfill，终极目标是消除这个框架的使用。

Progressive Web APP: 下一代的web开发模式，提供了高的可用性，通过APP Cache、Service Worker提供了缓存的功能。

Web开发经历三个阶段：

Ajax - XHR - “Async First”

RWD - Media Query - “Mobile First”

PWD - Service Worker - “Offline First”

"In anytime, somebody trys to reimplement native widgets with HTML, CSS and JavaScript, It always feels like shit.“

”It's Not Just About Software. The Belief In Web“

《浏览器端 JavaScript 异常监控 For Dummies》- 百姓网前端工程师 刘小杰

线上问题的收集和现场还原越来越重要，可以帮助开发人员更快定位解决问题，刘小杰提供了一套可行的JS Error监控的方案，可以给前端的同学们借鉴。

首先目前JavaScript的一些收集异常的方式：

1. window.onerror: 当HTML与script不同域时,浏览器为了防止泄漏敏感信息,对异常内容和位置信息做了mute处理。导致error信息基本不可用。

2. try catch： error堆栈不标准

源码：https://github.com/jacksky007/report-error，该方案解决几件事情：

1. 可以定位问题出现的源代码位置

2. 上报会通过normalize处理

3. 统计和检索功能