您正在浏览:主页 > 仿盛大热血传奇 >
上海 HTML5 盛大游戏峰会笔记整理与总结
作者：热血传奇网页版 来源：http://www.softpl.com 时间：2016-06-08 08:08
iWeb峰会的消息是在开场前两天才从朋友圈看到，稍微有点匆忙，只花了不到两个小时的时间了解下相关主题。发现涉及的知识还是蛮多的，甚至一些平时也没有接触过。所以一些关注点，理解的层次都很有限，甚至可能有误区，仅供参考及知识面的拓展。 峰会的主题是HTML5，又分为三个大的模块：游戏、工具及营销。我主要关注的工具专场，把这个放前面总结。
由野狗联合创始人肖光宇演讲的，一开始就提出一个问题：为什么需要实时？随后举出一些例子加以说明：我们平时不停的刷微博，就是想得到实时的数据；股票软件也需要实时展示出价格的跌涨；一个团队进行协同开发，如果代码能实时更新，可降低协作的成本。 web前端为什么不能实时，是由基因决定的。web 技术几乎都通过 HTTP 协议，而其特点：无连接，含义是限制每次连接只处理一个请求，服务器处理完客户的请求，并收到客户的应答后，即断开连接；无状态，服务器端在处理相应请求后不会保留任何客户端的信息。 接下来讲到了基于 HTTP 实时化的尝试：
polling
与
long polling
。 后续说到了HTML5 时代的实时技术
WebSocket
。 接着是实时基础即消息订阅模型(pub/sub)，数据同步(Data Sync)。 最后是实时web的未来，两个技术点：
WebPush
和
WebRTC
。
涉及到的知识较多，只是有个模糊的印象。感兴趣根据技术点搜索下，也可以看下 官网及 API ，个人开发者可免费使用。
搜到了相关的文章，应该和分享内容差不多：
他们的博客： 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社区今年应该会更活跃，关注度更高。
相关的资料：
关于Weex你需要知道的一切
深度揭秘阿里移动端高性能动态化方案Weex
对无线电商动态化方案的思考
如何看待阿里无线前端发布的Weex? 如何制定与实施ES6+代码风格和质量标准
贺前辈讲的，找到了演讲用的原版资料：
在现场有印象的几个点：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); } 天猫电商利器-Hilo 引擎&TidaSDK
Hilo 是一款轻量的游戏开发引擎，主要解决渲染问题，用于电商项目的快速开发，比如淘宝的双11中很多小游戏。界面构建仍然可以使用原生的canvas和css。其中分享中讲到一个技术点：将flash动画自动转成css动画，工具名好像叫做 Tahiti ，但网上未找到相关资料。
感兴趣可以看下 官网 ，还有这篇文章： 揭秘天猫双11晚会与狂欢城背后的技术
如何打造靠谱的前端团队
是由去哪网的开发总监杜瑶演讲，简单说下自己有印象的几个点。
从自身出发，对内：思考自己在团队中的扮演的角色，所起到的作用以及自身的影响力；对外:推动能力，资源的协调能力及判断力。
从团队出发：尽自己的能力为团队多争取利益，提高团队的稳定性。
发挥团队成员的最大能力
人员组成与技术栈：招团队目前需要的人才，比如推动react-native可能需要招一个原生开发人员；招到不同性格的成员协调搭配；
每个项目指定负责人，调动主人翁精神
重要性优先策略，如果某段时期团队人员满足不了业务需求，根据重要性选择进行开发工作
<< 上一篇：绿城·悦庄：网页热血传奇10天3栋千万级别墅！ >>
<< 下一篇：《传奇世界》畅热血传奇手机版刷元宝爽三区今日14点火爆开启 >>