上海 HTML5 峰会笔记整理与总结_html/css

iWeb峰会的消息是在开场前两天才从朋友圈看到，稍微有点匆忙，只花了不到两个小时的时间了解下相关主题。发现涉及的知识还是蛮多的，甚至一些平时也没有接触过。所以一些关注点，理解的层次都很有限，甚至可能有误区，仅供参考及知识面的拓展。

工具应用类

峰会的主题是HTML5，又分为三个大的模块：游戏、工具及营销。我主要关注的工具专场，把这个放前面总结。

web前端的实时化

由野狗联合创始人肖光宇演讲的，一开始就提出一个问题：为什么需要实时？随后举出一些例子加以说明：我们平时不停的刷微博，就是想得到实时的数据；股票软件也需要实时展示出价格的跌涨；一个团队进行协同开发，如果代码能实时更新，可降低协作的成本。

web前端为什么不能实时，是由基因决定的。web 技术几乎都通过 HTTP 协议，而其特点：无连接，含义是限制每次连接只处理一个请求，服务器处理完客户的请求，并收到客户的应答后，即断开连接；无状态，服务器端在处理相应请求后不会保留任何客户端的信息。

接下来讲到了基于 HTTP 实时化的尝试： polling与 long polling。

后续说到了HTML5 时代的实时技术 WebSocket。

接着是实时基础即消息订阅模型(pub/sub)，数据同步(Data Sync)。

最后是实时web的未来，两个技术点： WebPush和 WebRTC。

涉及到的知识较多，只是有个模糊的印象。感兴趣根据技术点搜索下，也可以看下官网及 API，个人开发者可免费使用。

搜到了相关的文章，应该和分享内容差不多： Web 前端的实时化

他们的博客： https://blog.wilddog.com/

他们的公众号：野狗

英特尔专场：HTML5技术与硬件的结合

英特尔有两场演讲，主推了他们的开源项目 Crosswalk。Crosswalk 可以简单理解为增强版的 webkit，用于 Hybird 项目中，可替代原生的浏览器。

优势描述了很多，比如多平台支持，对 WEBGL支持，对 VR，RealSense支持，知名应用比如有道云接入，谷歌的Mobile Chrome App团队接入，对兼容性，对性能的处理等等。

有三种接入模式：嵌入模式，和native打包到一起，作为 HTML5页面的 webview 使用；共享模式：不用打包到单个App中，系统只需要一个 crosswalk供所有应用去调用；还有一种下载模式：好像是应用需要依赖 crosswalk，然后自动会去 app store下载？这个没听很明白，我猜想是不是和PC上有些应用需要依赖 .net framework那种模式？

最后我觉得想在团队中推广使用的硬伤还是体积问题，完整包还想是20M，轻

量版也有10M，为了引入 crosswalk 安装包多10M，产品不一定能接受。

展位现场体验了webVR小游戏，效果很炫，感受很真实，不由得想到了”刀剑神域”这部动漫。演讲中还讲到一项技术 web for RealSense，用手隔空操作小车的移动。技术发展真的改变自身很多的认识，以前的梦想未来或许就可以实现。

Weex

主要做了大概的介绍，Demo展示，如何调试，还有一些技术实现细节。 Weex目前还是私有项目也只有Android部分，可以在官网通过申请获取权限，计划在6月份完全开源。

和react-native 是同类型的框架，但 weex 主打的是轻量，语法简单，上手容易。weex借鉴了 vue，而 vue 和 react 相比学习成本还是比较低的。

weex框架也再次肯定了用js开发原生的这种模式，作为前端开发人员还是需要去多关注下。此外，vue社区今年应该会更活跃，关注度更高。

如何制定与实施ES6+代码风格和质量标准

贺前辈讲的，找到了演讲用的原版资料： http://johnhax.net/2015/es6-code-style/#0

在现场有印象的几个点：Eslint具有高度可配置、预置大量规则、可共享复用(git搜索 eslint-config)等等优势，可以在团队中推广使用起来。规则分为：可能是错误，最佳实践，变量声明等等，贺前辈的建议是能用的规则都用上。ES6+的总体原则：尽量用Es6的语法，比如： ajax => promise, Class工厂 => 原生 Class 语法， arguments => ...args， || => 函数默认参数，回调函数 => 剪头函数等等。

接着讨论了 space和 tab问题，并分享贺老写的一个 Atom插件: elastic-tabstops。已经亲自尝试，灰常好用。同时推荐下Atom编辑器，听说 PC 上比较卡，自己Mac上使用很流畅，插件很丰富，容易定制，颜值高。使用中碰到一个问题：插件不生效，解决方法：在设置中将 Tab type这一项选择为 hard,然后重启。插件生效后发现如果制表符太明显，不美观，可自行定制样式（入口文件：Atom -> Stylesheet）。方法是 commond+option+i调出调试工具，找到相应的class，然后在样式文件中重写。比如我是用的是 Seti，代码如下：

atom-text-editor::shadow {    span.hard-tab {         box-shadow : inset -1px 0;         display    : inline-block;         &:not(.indent-guide) {            color: rgba(255, 255, 255, .1);         }        &.indent-guide:first-child {             box-shadow : inset 1px 0, inset -1px 0;        }    }}atom-text-editor::shadow span.hard-tab{    color: rgba(255, 255, 255, .1);}

Nach dem Login kopieren

天猫电商利器-Hilo 引擎&TidaSDK

Hilo是一款轻量的游戏开发引擎，主要解决渲染问题，用于电商项目的快速开发，比如淘宝的双11中很多小游戏。界面构建仍然可以使用原生的canvas和css。其中分享中讲到一个技术点：将flash动画自动转成css动画，工具名好像叫做 Tahiti，但网上未找到相关资料。

感兴趣可以看下官网，还有这篇文章：揭秘天猫双11晚会与狂欢城背后的技术

如何打造靠谱的前端团队

是由去哪网的开发总监杜瑶演讲，简单说下自己有印象的几个点。

从自身出发，对内：思考自己在团队中的扮演的角色，所起到的作用以及自身的影响力；对外:推动能力，资源的协调能力及判断力。

从团队出发：尽自己的能力为团队多争取利益，提高团队的稳定性。

发挥团队成员的最大能力

人员组成与技术栈：招团队目前需要的人才，比如推动react-native可能需要招一个原生开发人员；招到不同性格的成员协调搭配；

每个项目指定负责人，调动主人翁精神

重要性优先策略，如果某段时期团队人员满足不了业务需求，根据重要性选择进行开发工作

有一位嘉宾问到一个很普篇的问题，我觉得很有参考意义。大概是这样：团队中新入职的员工能力欠缺，手头任务比较多又紧急。如果自己一人承担，不利于团队成员的成长；而如果任务分给新员工做，可能用在指导方面的时间更多，而且怕影响项目进度？回复是这样的：将项目的架子搭好，让新同事做些业务方面的工作，慢慢熟悉，而自己也要在初期多加引导。其实也体现上面说到的调动主人翁精神，调动团队成员的积极性，提高他们的成就感，也更有利于其自身的成长。