D2 前端技术论坛总结(上)

  得幸获得D2前端技术论坛门票一张,今天就去了,公司还给批假了(有可能不会算做请假,哈哈)。

  早上8点50出门,骑个小毛驴,大概9点30分左右,到了阿里巴巴西溪园区,很多人,进去的门口有专人接待,看D2门票,然后给贴一张阿里巴巴的logo贴纸在身上,然后我进去找了地方停小毛驴,突然发现贴纸不见了。。。估计给秋风给顺走了,于是立马赶回门口又给拿了一张 O(∩_∩)O哈哈~

今天我一直呆在主会场,主会场的几场分享我给列列

10:30 张可竞《指尖上的数据》

13:30 林楠《nodejs一小步 前端开发一大步》

14:30 周杰《第三方开发前端实践》

15:50 贝勒《面向多端的蘑菇街前端技术架构》

16:50 刘威《京东前端工业化实践之路》

当然以上是我参加了的分享会,这次D2有主、分两个会场,而且还有晚上的,由于没拿到晚上的酒会邀请函,so晚上的我就不评论了。

就我听过的几场,做个总结:

  1. 百度张可竞的《指尖上的数据》:论数据展现形式(给用户的感知)对用户认知以及理解的重要性,h5端如何适配问题。
  2. 来自腾讯云的林楠的《nodejs一小步:前端开发一大步》,论node如何参与后台开发以及参与后台开发所产生的影响。
  3. 周杰的 《第三方开发前端实践》:同一个产品在PC端和移动端同时适配所碰到的问题,以及解决方案,还有后来讲到了他们公司前端的开发方式,搭建的底层架构。
  4. 贝勒《面向多端的蘑菇街前端技术架构》:这个和周杰的有点类似,说的是同一个产品在要在不同的终端上展示,前端如何开发,以及搭建一个合适的底层架构。
  5. 刘威《京东前端工业化实践之路》:说的是如何把前端中相同的工作做到工程化,就像工业中的产品线一样的,很多东西通过一条命令来完成就足够了。

先说第一场吧《指尖上的数据》

  • 数据的不同展现形式对用户 感知-认知-理解 的影响
  • 智能机在手机市场的占有率非常高,对数据可视化的需求也非常旺盛
  • 利用h5动画来做数据的可视化,这么做会产生哪些问题,如何解决

首先,演讲嘉宾(张可竞)拿出了一份 百度移动趋势报告2014Q2 ,里面有写到Android和iPhone加一起在市场的占有率已经达到了92%(其中iPhone是13%、Android79%),但是这不是重点,这只是为了引出下面要说的东西:数据可视化在移动端的需求很旺盛,那么我们该如何展示这些数据呢,也就是所谓的”数据可视化“。

谈这个之前,先说一个现象,人对视觉元素的理解能力远大于面对一堆数据,所以在PC端经常会看到有雷达图,气泡图,柱状图,饼图等,那么当这些东西搬到移动端的时候,会碰到哪些问题。

  1. 手机不支持pdf,gif也不佳。
  2. 手机的屏幕远比电脑屏幕小,所以显示图表的时候,手机上能让用户看到的东西更少,这个如何解决。
  3. 手机的尺寸有很多,如何匹配不同的手机,甚至还有pad上。
  4. 手机的性能问题如何解决,动画用css3还是js。

在电脑上,我们可以通过pdf,网页,以及gif动画的方式把东西传达给用户,那么在移动端,我们可以通过h5来展现数据。

h5展现图表数据,有几个方面是可以做文章的:第一个,手机上是有手势交互的;第二个,手机上浏览器或者自带的webview,基本都是基于webkit内核的,所以我么可以做动画效果。但是动画,在某些手机,以及低版本安卓上,性能不佳,所以提出了通过loading效果先检测当前浏览器的跑祯速度,然后响应的做降级处理,转成图片啊、不用动画啊、减少dom节点啊等等。

最后介绍了一个百度开发的移动可视化组件“数说 · GEAR”,据说后续会开源。

  待续........

时间: 2024-08-24 21:59:26

D2 前端技术论坛总结(上)的相关文章

从2014年D2前端技术论坛看前端发展趋势

上周六有幸参加了在杭州阿里巴巴西溪园区举办的2014年D2前端技术论坛和晚上的酒会,实地感受了一下阿里巴巴前端开发的技术氛围和影响力,总体上看这次D2规模还是挺大的,国内前端的知名大牛基本上都到了. D2今年的主题是绽放,确实挺符合现在前端发展的阶段,随着对用户体验的不断追求,移动Web的迅猛发展,HTML5的普及,NodeJS的投入商用,AngularJS等新框架的出现,前端的重要性和工程化程度不断提高,上午会上有个妹子说2015年D2的主题是逆袭,我个人觉得挺合适的.从参会人数看,目测有接近

第12届D2前端技术论坛

第12届D2前端技术论坛 最近参加了阿里的D2前端技术论坛,听了一天的报告,收获良多,下面对几场报告做一个记录. 自己选择听的主线也是从: 实践应用 -> 管理 -> 性能 -> 新技术 -> node服务 第一场 APP开发解决方案-轻舟 这场听下来有总结下轻舟有以下特点: 基于weex做的开发平台 包括云服务和端服务,必须要联网 整个开发流程支持:包括本地开发,调试,云构建,云发布,云热更新 总体评价:阿里的工程实践做的不错,但是对别人来说,可借鉴的地方来说少了. 为什么呢?

D2 前端技术论坛总结(下)

此篇文章不接上篇了,下午4场我就不一一介绍了,主要总结下 D2 整场下来都讲了些什么. 整场下来,就3个关键词:nodejs,多终端,工程化 nodejs 从杭js到d2,大会上提到最多的词汇之一了,近两年最热的话题,它的出现,让前端不在局限于浏览器.前端可以在服务器端存取数据.渲染模板,而且可以做到前后端使用同一套模板,前端上手nodejs也很快.不止于此,因为它的单线程以及无阻塞的特性,使得它在服务端也大放异彩.<node一小步 前端一大步>里面从多个角度比较了PHP和nodejs,说明了

前端技术-调试工具(上)

页面制作之调试工具 常用的调试工具有Chrome浏览器的调试工具,火狐浏览器的Firebug插件调试工具,IE的开发人员工具等.它们的功能与使用方法大致相似.Chrome浏览器简洁快速,功能强大这里主要介绍Chrome浏览器的调试工具. 打开 Google Chrome 浏览器,通过下面任何一种方式进入开发人员工具: -点击位于浏览器用户界面右上角的"页面"下拉菜单,"更多工具"→"开发人员工具". -右键点击网页上的任一元素,在弹出菜单中选择&

前端技术-调试工具(下)

页面制作之调试工具 五.Profiles 这个主要是做性能优化的,包括查看CPU执行时间与内存占用等. 例述如下:原文地址:http://www.smashingmagazine.com/2012/06/12/javascript-profiling-chrome-developer-tools/. 你的网站正常运转.现在我们来让它运转的更快.网站的性能由页面载入速度和代码执行效率决定.一些服务可以让你的网站载入更快,比如压缩JS和CDN,但是让代码执行的更快你要做的事情.代码中很小的改动都可能

《前端圈技术论坛-腾讯互娱专场》观后感

11月22日,周六,天气晴朗,原计划今天和阿武去参加前端圈技术论坛深圳专场,可是我要加班,吃完午饭阿武发来一张现场图片,用的还是周四羽毛球赛的冠军奖品——一个手机鱼眼镜头拍摄的,同事阿王问我这是什么活动,得知我已报名后,当即让我放下工作赶过去参加,好在活动现场就在隔壁大楼C1-18F,于是才有了这篇观后感. 整体来说这次专场比上次的iweb峰会质量高一些,干货比较多.本次论坛主要内容有: 1.TGideas副总监PANTHER致辞 由于去的晚了点,没有赶上. 2.TGideas重构四组(重构工程

公司某项目前端技术积累

最佳实践 BootStrap + jquery + jquery插件 + sea.js/require.js + Grunt 前期技术选型 BootStrap + Backbone.js + require.js + jquery插件 ExtJS Angular.js BootStrap + jquery + jquery插件 前端技术选型总结: 之所以选择 BootStrap + jquery + jquery插件 的原因是因为ExtJS或Angular.js这种大而全的MVC框架,学习成本较

前端技术之CSS实现图片垂直居中

前端技术之CSS实现图片垂直居中技术 maybe yes 发表于2015-03-14 18:52 原文链接 : http://blog.lmlphp.com/archives/86/The_front-end_technology_pure_CSS_to_achieve_image_vertically  来自 : LMLPHP后院 让 图片实现水平居中比较简单,只需要在父级容器中添加属性 text-align 为 center 即可.使用纯 CSS 实现图片的垂直居中,可以将图片包裹容器的 d

百度前端技术学院task1.9

任务九:使用HTML/CSS实现一个复杂页面 面向人群: 有一定HTML/CSS基础的同学 难度: 中等 重要说明 百度前端技术学院的课程任务是由百度前端工程师专为对前端不同掌握程度的同学设计.我们尽力保证课程内容的质量以及学习难度的合理性,但即使如此,真正决定课程效果的,还是你的每一次思考和实践. 课程多数题目的解决方案都不是唯一的,这和我们在实际工作中的情况也是一致的.因此,我们的要求不仅仅是实现设计稿的效果,更是要多去思考不同的解决方案,评估不同方案的优劣,然后使用在该场景下最优雅的方式去