0

0

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

php中文网

php中文网

发布时间:2016-06-21 08:46:33

|

1344人浏览过

|

来源于php中文网

原创

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

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

ChatX翻译
ChatX翻译

最实用、可靠的社交类实时翻译工具。 支持全球主流的20+款社交软件的聊天应用,全球200+语言随意切换。 让您彻底告别复制粘贴的翻译模式,与世界各地高效连接!

下载
如何看待阿里无线前端发布的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这个单词。总感觉很诡异,是吃饭的时候提醒:如果不好好写代码就没饭吃的意思?

HTML速学教程(入门课程)
HTML速学教程(入门课程)

HTML怎么学习?HTML怎么入门?HTML在哪学?HTML怎么学才快?不用担心,这里为大家提供了HTML速学教程(入门课程),有需要的小伙伴保存下载就能学习啦!

下载

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
php源码安装教程大全
php源码安装教程大全

本专题整合了php源码安装教程,阅读专题下面的文章了解更多详细内容。

7

2025.12.31

php网站源码教程大全
php网站源码教程大全

本专题整合了php网站源码相关教程,阅读专题下面的文章了解更多详细内容。

4

2025.12.31

视频文件格式
视频文件格式

本专题整合了视频文件格式相关内容,阅读专题下面的文章了解更多详细内容。

7

2025.12.31

不受国内限制的浏览器大全
不受国内限制的浏览器大全

想找真正自由、无限制的上网体验?本合集精选2025年最开放、隐私强、访问无阻的浏览器App,涵盖Tor、Brave、Via、X浏览器、Mullvad等高自由度工具。支持自定义搜索引擎、广告拦截、隐身模式及全球网站无障碍访问,部分更具备防追踪、去谷歌化、双内核切换等高级功能。无论日常浏览、隐私保护还是突破地域限制,总有一款适合你!

7

2025.12.31

出现404解决方法大全
出现404解决方法大全

本专题整合了404错误解决方法大全,阅读专题下面的文章了解更多详细内容。

42

2025.12.31

html5怎么播放视频
html5怎么播放视频

想让网页流畅播放视频?本合集详解HTML5视频播放核心方法!涵盖<video>标签基础用法、多格式兼容(MP4/WebM/OGV)、自定义播放控件、响应式适配及常见浏览器兼容问题解决方案。无需插件,纯前端实现高清视频嵌入,助你快速打造现代化网页视频体验。

4

2025.12.31

关闭win10系统自动更新教程大全
关闭win10系统自动更新教程大全

本专题整合了关闭win10系统自动更新教程大全,阅读专题下面的文章了解更多详细内容。

3

2025.12.31

阻止电脑自动安装软件教程
阻止电脑自动安装软件教程

本专题整合了阻止电脑自动安装软件教程,阅读专题下面的文章了解更多详细教程。

3

2025.12.31

html5怎么使用
html5怎么使用

想快速上手HTML5开发?本合集为你整理最实用的HTML5使用指南!涵盖HTML5基础语法、主流框架(如Bootstrap、Vue、React)集成方法,以及无需安装、直接在线编辑运行的平台推荐(如CodePen、JSFiddle)。无论你是新手还是进阶开发者,都能轻松掌握HTML5网页制作、响应式布局与交互功能开发,零配置开启高效前端编程之旅!

2

2025.12.31

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号