前端与HTML5专题论坛：百花齐放的前端.docVIP

前端与HTML5专题论坛：百花齐放的前端 摘要：SDCC 2013前端与HTML5专题论坛上，360高级技术经理、奇舞团负责人月影、百姓网前端技术专家贺师俊、云适配创始人陈本峰、腾讯用户研究与体验设计部Web前端组组长范俊豪、网易有道资深研发工程师陆远作了精彩分享。 在“前端与HTML5专题论坛”，我们邀请到了阿里无线事业部前端技术专家程劭非担任该论坛主持人，360高级技术经理、奇舞团负责人月影、百姓网前端技术专家贺师俊、云适配创始人陈本峰、腾讯用户研究与体验设计部Web前端组组长范俊豪、网易有道资深研发工程师陆远给大家带来了一场前端开发盛宴。 360高级技术经理、奇舞团负责人月影：JavaScript跨平台游戏开发实践 在大会上，月影跟大家分享了一款使用纯JavaScript开发的跨平台的多人棋牌类游戏，并且讲解了该款游戏所用到的技术以及开发注意事项。 360高级技术经理、奇舞团负责人月影 技术方案： 前端： Cocos2dx、JavaScript Bindings 服务器端： Node 0.10.13 数据库： Couchdb、MySQL 在服务器端选择使用Node主要是因为它的成本非常低，另外用到了两个数据库，一个是Couchdb，它虽然是免费的，但是它在服务端是非常消耗的，它最少的机器配置要求都很高，对小团队或者个人做这种手游来说，成本是非常高的，所以我们用了之前一个版本。另外一个是MySQL，用来存储用户数据。 此外，该款游戏在开发中还用到了JavaScript调用HTML5 API、JavaScript Promise规范、 JSON-RPC协议等。 最后，月影还跟大家分享了此次开发游戏的心得体会，以及在开发中需注意的问题： 1.网络延迟 服务端超时时间比客户端延长一些 对每一条消息发送服务器的时间戳 为每一局游戏生成一个唯一ID，不派发ID过期的事件 2.内存问题 EventEmitter的handler释放 使用memcached和couchdb存储临时数据 3.合理使用磁盘空间 Couchdb的历史问题版本 Log的管理 4.设备适配 按照1067*640设计 背景裁剪sprites的相对定位 百姓网前端技术专家贺师俊：Web模板技术的总结与探索 百姓网前端技术专家贺师俊 百姓网前端技术专家贺师俊分享的是多年来对Web模板技术的总结与探索。“致我们终将会用的模板”，一个颇富诗意的开头让大家会心而笑。 什么是模板？是Hello $user！？是字符串替换？是字符串替换+支持简单逻辑？是文本内插+编程语言混合+特别的优化？是匹配规则+查询语言和表达式+输出指令？是特定编程语言的库？是DSL？千人也许会有千种理解。 有人认为，模板要解决的问题是：批量生成页面，或动态生成页面。但并不全面。在历史上，存在各类情况： 同样，也存在各种问题： 更改一些展现内容，花了很长时间才找到修改的地方； 要改进一些结构和样式，不敢动手，因为视图的可测试性不足； 重复或相似的代码相当多，由于缺乏称手的工具而难以重构； 稍复杂的需求变化，工程师荡漾在一堆标签和PHP/jsp/js逻辑交织的代码里； 由于一些小的非本质性的变动，要修改许多原有的代码； 这几乎困扰着所有的前端开发人员。但其背后的原因是什么？贺师俊分析的很全面。 在Web设计中，前端口头禅是内容、样式、行为的分离。大家遵守的都是一般设计原则：SoC-Seperation of Concerns 所以，模板要解决的问题是：批量生成页面，或动态生成页面；分离前后端关注点；执行表现层逻辑，更精确的说，执行presentation spec。 这时候，找到前后端通吃的模板是个方向。而要选择模板引擎时，语法友好、页面结构的组织、常用单元的复用、最佳实践的约束、安全性、与整体架构的匹配。 那么，选择模板引擎时，从模板引擎来看，可以有前端、后端以及前后端通吃三种。在他看来，未来趋势，有六个维度很重要：前后端一致，Full stack，UI绑定，声明式，HTML5，更强的最佳实践约束和工具集成。 云适配创始人陈本峰：多屏时代的网页开发技术 云适配创始人陈本峰 在云适配创始人陈本锋看来，现在很多创新企业往往要针对不同设备分别开发不同版本。一般都会采用独立编写前端/后端代码的方式，内容完全可定制，页面流量可最优化，可兼容非HTML5浏览器等优势很明显。但挑战也很明显：开发成本很高，数据同步困难，跨屏扩展困难，多个网址，推广成本高。所以，多屏时代的网页开发技术很重要，比如响应式网页设计，Media Queries，云适配。 多屏时代的网页开发技术中响应式网页设计很重要。 作为云适配创始人，W