欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

上海 HTML5 峰会笔记整理与总结_html/css_WEB-ITnose

程序员文章站 2022-04-26 09:38:03
...
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社区今年应该会更活跃,关注度更高。

相关的资料:

关于Weex你需要知道的一切

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

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

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

如何制定与实施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);}

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

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

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

如何打造靠谱的前端团队

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

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

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

发挥团队成员的最大能力

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

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

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

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

关于HTML5游戏

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

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

其他:

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

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

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

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

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

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