转载

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

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

工具应用类

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

web前端的实时化

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

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

接下来讲到了基于 HTTP 实时化的尝试: pollinglong polling

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

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

最后是实时web的未来,两个技术点: WebPushWebRTC

涉及到的知识较多,只是有个模糊的印象。感兴趣根据技术点搜索下,也可以看下 官网及 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社区今年应该会更活跃,关注度更高。

相关的资料:

关于Weex你需要知道的一切

深度揭秘阿里移动端高性能动态化方案Weex

对无线电商动态化方案的思考

如何看待阿里无线前端发布的Weex?

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

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

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

接着讨论了 spacetab 问题,并分享贺老写的一个 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可能需要招一个原生开发人员;招到不同性格的成员协调搭配;

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

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

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

关于HTML5游戏

游戏我平时不太关注,但上午场是混在一起的,所以也稍微听了下。

首先是 蝴蝶互动 的CEO凌海讲解了"HTML5游戏的质量与服务"。蝴蝶互动好像是国内HTML5游戏的老大哥,旗下的"传奇世界"网页版月流水2000万。我感觉整个演讲都给整个 HTML5游戏行业带来了一些希望与憧憬。

其他:

写的很纠结,演讲中很多点可能没get到,但与毕业第一次参加D2相比还是多了一些收获,记录下来年再进行对比。

还有几点经验和大家分享下:

当初觉得去上海麻烦想看现场直播的,去了之后感觉现场氛围非常好,看直播不一定能坚持下来;

参加分享会包括自己公司的内部分享,事先一定要做一些准备。因为演讲者肯定想将自己学到的最核心的东西分享给听众,也花费了很多精力,而听众没有基础可能很难理解;有了一些基础,听分享时多思考,才能提出一些比较有价值的问题,不浪费机会。

如果听不懂也没关系,整体把握下前端技术发展的趋势,或者就涨涨见识。说不定某个技术框架或解决方案就比较适合自己的团队。

峰会中奖品挺多的,可惜与我擦肩而过。不过也有一个小礼品是 coding 发的勺和叉,上面印了coding这个单词。总感觉很诡异,是吃饭的时候提醒:如果不好好写代码就没饭吃的意思?

原文  https://segmentfault.com/a/1190000005659941
正文到此结束
Loading...