SDCC 2015前端专场札记:Facebook、百度、腾讯、美团、饿了么等互联网公司的前端实战

本文主要是介绍SDCC 2015前端专场札记:Facebook、百度、腾讯、美团、饿了么等互联网公司的前端实战,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

SDCC 2015前端专场札记:Facebook、百度、腾讯、美团、饿了么等互联网公司的前端实战

发表于 2015-11-27 14:14| 682次阅读| 来源 AdMaster| 1 条评论| 作者 刘越凡
SDCC 札记 前端
width="22" height="16" src="http://hits.sinajs.cn/A1/weiboshare.html?url=http%3A%2F%2Fwww.csdn.net%2Farticle%2F2015-11-27%2F2826342-SDCC&type=3&count=&appkey=&title=SDCC2015%E4%B8%AD%E5%9B%BD%E8%BD%AF%E4%BB%B6%E5%BC%80%E5%8F%91%E8%80%85%E5%A4%A7%E4%BC%9A%E5%B7%B2%E6%88%90%E5%8A%9F%E9%97%AD%E5%B9%95%EF%BC%8C%E4%B8%BB%E5%8A%9E%E6%96%B9%E6%80%BB%E8%AE%A1%E9%82%80%E8%AF%B7%E4%BA%8695%E4%BD%99%E4%BD%8D%E6%BC%94%E8%AE%B2%E5%98%89%E5%AE%BE%EF%BC%8C%E4%B8%BA%E5%8F%82%E4%BC%9A%E8%80%85%E5%A5%89%E7%8C%AE%E4%BA%8610%E4%B8%AA%E4%B8%BB%E9%A2%98%E6%BC%94%E8%AE%B2%EF%BC%8C9%E5%A4%A7%E6%8A%80%E6%9C%AF%E4%B8%93%E5%9C%BA%E8%AE%BA%E5%9D%9B%E5%8F%8A5%E5%9C%BA%E7%89%B9%E8%89%B2%E6%B4%BB%E5%8A%A8%E3%80%82%E6%9C%AC%E6%96%87%E6%98%AFAdMaster%E5%89%8D%E7%AB%AF%E9%AB%98%E7%BA%A7%E5%B7%A5%E7%A8%8B%E5%B8%88%E5%88%98%E8%B6%8A%E5%87%A1%E5%8F%82%E5%8A%A0%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E4%B8%93%E5%9C%BA%E7%9A%84%E5%90%AC%E8%AF%BE%E6%9C%AD%E8%AE%B0%EF%BC%8C%E4%BB%A5%E9%A3%A8%E8%AF%BB%E8%80%85%E3%80%82&pic=&ralateUid=&language=zh_cn&rnd=1448710407183" frameborder="0" scrolling="no" allowtransparency="true"> 摘要:SDCC2015中国软件开发者大会已成功闭幕,主办方总计邀请了95余位演讲嘉宾,为参会者奉献了10个主题演讲,9大技术专场论坛及5场特色活动。本文是AdMaster前端高级工程师刘越凡参加前端开发专场的听课札记,以飨读者。

【编者按】11月21日,为期三天的 SDCC2015中国软件开发者大会成功闭幕,主办方总计邀请了95余位演讲嘉宾,为参会者奉献了10个主题演讲,9大技术专场论坛(80余场技术演讲),另外还有5场特色活动。另外,据官方统计参会人数高达1067名(不含工作人员)。

其中20日的前端开发专场,现场听讲人数一度爆满,而没有机会亲临现场的童鞋们,我们特邀请了业内专家、与会者分享他们的听课感受及他们眼中的前端专场。以下是来自AdMaster前端高级工程师刘越凡参加前端开发专场的听课札记,以飨读者。

以下是刘越凡的听课札记:

Facebook前端工程师ShihChi Huang(黄士旗):Why React matters/scale

来自Facebook的 ShihChi Huang(黄士旗)分享的内容更侧重于知识普及,从几个核心技术要点讲解了一些内容。

  1. UI = f(state)React 的 render() 函数便是其中的 f,将state渲染成Virtual DOM,Virtual DOM被React渲染成真正的DOM。我们不需要再关心DOM是如何变更的,我们只需要将我们想渲染的东西告诉 React,然后重新渲染Virtual DOM,它会自动帮你把UI的改变渲染到真正的DOM上。
  2. Predictable同样的input应该返回同样的output。UI在相同state的条件下,应该渲染出相同的界面。
  3. ImmutableVirtual DOM会小限度的修改DOM,但是有时候还是不够,通过在 shouldComponentUpdate 阶段比较 state,我们可以更精细的控制component 是否渲染,但是这样就遇到一个问题,javascript 中对比两个对象有先天性不足,React 社区得到 clojure 的启发,引入了 immutable 数据,即函数式编程中的不可变数据,我们就放心的对对象进行任意操作,进行简单对比就可以判断出 state 有没有发生变化,是否需要渲染。React 吸收了很多函数式编程的思想,组件的形式也是函数式的用法。
  4. Flux最后还提到了flux ,单向数据流,官方的flux还比较简陋,只提供了思想,有很多不错的第三方实现,其中 Redux 目前比较受欢迎。


Strikingly CTO、联合创始人郭达峰 : React.js in Strikingly

Strikingly的CTO 郭达峰,之前在论坛上有过一些交流,这次终于见到真人了。

达峰分享的侧重点在于实践,分享了很多 Strikingly 使用 React 过程中积累的经验。

  1. React 与 第三方库的融合使用 React 的时候会遇到一个问题,有现成的 jQuery 的插件,但是不确定是否能使用在 React 中,用 React 重新实现的话可能又要花费大量的精力。达峰用一个 jQuery 插件 Sortable 举例,将其封装成了一个 React component,使用时不仅能修改 DOM 也会更新 state 。感觉他对于 React 的态度比较理性,不是原旨主义,不追求所有的东西一律 React 化,而是去融合,这一点我很赞同。
  2. Lazy load component利用 webpack 的特性实现 js 文件的按需加载,达到的最终效果是需要渲染某个 component 时,才去请求对应的 js 文件这一点对于被 SPA js 文件过大困扰的人很有诱惑力。grunt 和 gulp 现在的问题是需要自己组装大量的插件,插件的质量也是参差不齐,插件不好用的时候,自己就要去折腾,去砍树之前,需要自己做把刀。webpack 配合  React Hot Loader 还能实现代码热插拔,开发效率上也能提高很多,有时候等 browserify 编译其实也挺痛苦的。
  3. Container component划分特定用途的 component,之前有类似的使用,但是没有接触过这样明确的概念behaviour Container => Sortable component 动作UI Layout Container => SplitPane component 布局Data Container => 为 pure component 提供 state
  4. Global state object这是我最感兴趣的一个,可以用 Global state object 将页面完全还原,前端开发中 debug 是个很纠结的问题,有些 bug 很难重现出来,但是如果能复制出一摸一样的页面,这个问题就简单多了,当测试人员/用户遇到问题时,自动将当时的 state 发送给开发人员,开发人员利用 state 还原现场,非常有助于定位 bug。


    美团技术终端组高级工程师吕伟  :前端分布式编译系统的设计

    吕伟分享的内容是前端分布式编译系统,有种鸟枪换大炮的感觉。

    大型系统的分布式编译挺常见,但前端代码倒真是第一次听说,目前开发的产品用的是grunt + browserify, 虽然代码并不是很多,但也会有个不长不短的编译时间, 也是有点难受。同时我非常好奇美团的前端代码究竟是有多少,都到了分布式编译的地步。 核心思想还是共享运算资源,具体原理没有细听,目的是取代webpack 和 browserify, 正式投产后会完全开源,github见。


    饿了么资深前端架构师兼大前端团队负责人林建锋  :ELE.ME是如何运行的

    来自饿了么的林建锋也就是sofish鱼哥分享的内容是饿了么在前段工程化上的一些实践。

    1. 前后端分离这个不需要解释。Rest API,Nginx 托管静态资源。
    2. 开发与发布构建了一套成熟的开发/发布体系,而且封装成了简单的命令,甚至还做了一个界面化的 nginx 配置,不过手写 nginx 配置应该算是前端的必备技能了吧?
    3. 优化使用了  Rest api batch 的做法,将一批请求包括多个API调用合并成一个HTTP请求,减少 HTTP 连接数,有人质疑到合并后会不会影响到页面的分步渲染速度,但据说并不会,因为浏览器对同一域下并发连接数是有限的,一次太多的 http 请求过去也是4个4个的走,所以影响并不大。


    百度EFE团队资深工程师,百度ECharts产品工程师乔刚:前端数据可视化实践

    Echarts团队的乔刚分享的内容是数据可视化的一些案例和 echarts v3.0 的一些新特性。

    目前的产品中正在使用 echarts,可以说真的是非常熟悉, 算是一个挺不错的图表库,简单易用,图表种类繁多, 虽然不是 svg 但也支持很多交互事件,之前文档组织的不够清晰, 但自从有了那个配置参考之后方便了很多,当然也存在一些不足, 我比较看重的是移动端展现的问题,几乎挤成一团,移动端的产品只好换成 chartjs 展现,希望能在接下来的 v3.0 中有所改善。


    百姓网资深前端工程师贺师俊:如何制定和实施ES6+代码风格和质量标准

    百姓网的贺师俊,也就是前端圈内的老司机hax,他提到了coding style 的制定和实施,确保实施的关键点在于工具,这一点很有体会, 如果团队里的开发工具都是千奇百怪的,coding style 的统一就更难保证了。我们的团队在开发工具的统一上做的比较好,统一使用 Vim,连接到远端机器编写代码, 只要手里有一台有键盘、能联网的机器,就能进行开发。

    贺老一直在力推ES2015,这次还分享了一些使用中的一些疑难问题,

    • arrow VS function,
    • async VS generator,
    • const VS let,
    • template VS 安全,

    已经开始使用 ES2015 的同学应该都有一些自己的体会。快结束的时候还不忘引发圣战,SPACE VS TAB。


    腾讯互联网增值业务前端团队负责人钟鹏飞  :Hybrid模式的深度融合

    腾讯的钟鹏飞分享的内容是腾讯手机QQ H5优化与监控自动化建设。这部分由于临时有事,只听了一部分,有些遗憾。hybrid 也是最近很火的一个话题, 具有native app 的系统福利,又有 web app 的开发效率。 由于之前这方面接触的不多,学习到了一个新的知识,hybrid app 启动中 Webview 的耗时占比很大。


    总结

    说实话,这次参会主要还是奔着React 来的,然后还看到了很多前端工程化方面的实践, 收获颇丰,解决了之前的一些疑惑, 也看到了一些方向。

    React 打开了前端开发的新的思路, Virtual DOM,组件化,State 数据流,函数式编程;webpack 使代码编译变得更加简单; 美团的分布式编译让人觉得前端开发正在向客户端开发靠拢;其实前端开发的演化也是在不断借鉴客户端开发的经验, 毕竟我们在开发的已经不是一个单调的 page,而是一个功能丰富的 application。

    也许有一天,当前端把客户端走过的路再走一遍的时候,前端工程体系会变得成熟完善, 我们能把更多的时间集中在真正的开发中。

    这篇关于SDCC 2015前端专场札记:Facebook、百度、腾讯、美团、饿了么等互联网公司的前端实战的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



    http://www.chinasem.cn/article/671109

    相关文章

    HTML5中的Microdata与历史记录管理详解

    《HTML5中的Microdata与历史记录管理详解》Microdata作为HTML5新增的一个特性,它允许开发者在HTML文档中添加更多的语义信息,以便于搜索引擎和浏览器更好地理解页面内容,本文将探... 目录html5中的Mijscrodata与历史记录管理背景简介html5中的Microdata使用M

    html5的响应式布局的方法示例详解

    《html5的响应式布局的方法示例详解》:本文主要介绍了HTML5中使用媒体查询和Flexbox进行响应式布局的方法,简要介绍了CSSGrid布局的基础知识和如何实现自动换行的网格布局,详细内容请阅读本文,希望能对你有所帮助... 一 使用媒体查询响应式布局        使用的参数@media这是常用的

    HTML5表格语法格式详解

    《HTML5表格语法格式详解》在HTML语法中,表格主要通过table、tr和td3个标签构成,本文通过实例代码讲解HTML5表格语法格式,感兴趣的朋友一起看看吧... 目录一、表格1.表格语法格式2.表格属性 3.例子二、不规则表格1.跨行2.跨列3.例子一、表格在html语法中,表格主要通过< tab

    Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案

    《Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案》:本文主要介绍Vue3组件中getCurrentInstance()获取App实例,但是返回nu... 目录vue3组件中getCurrentInstajavascriptnce()获取App实例,但是返回n

    Python列表去重的4种核心方法与实战指南详解

    《Python列表去重的4种核心方法与实战指南详解》在Python开发中,处理列表数据时经常需要去除重复元素,本文将详细介绍4种最实用的列表去重方法,有需要的小伙伴可以根据自己的需要进行选择... 目录方法1:集合(set)去重法(最快速)方法2:顺序遍历法(保持顺序)方法3:副本删除法(原地修改)方法4:

    在Spring Boot中浅尝内存泄漏的实战记录

    《在SpringBoot中浅尝内存泄漏的实战记录》本文给大家分享在SpringBoot中浅尝内存泄漏的实战记录,结合实例代码给大家介绍的非常详细,感兴趣的朋友一起看看吧... 目录使用静态集合持有对象引用,阻止GC回收关键点:可执行代码:验证:1,运行程序(启动时添加JVM参数限制堆大小):2,访问 htt

    JS+HTML实现在线图片水印添加工具

    《JS+HTML实现在线图片水印添加工具》在社交媒体和内容创作日益频繁的今天,如何保护原创内容、展示品牌身份成了一个不得不面对的问题,本文将实现一个完全基于HTML+CSS构建的现代化图片水印在线工具... 目录概述功能亮点使用方法技术解析延伸思考运行效果项目源码下载总结概述在社交媒体和内容创作日益频繁的

    前端CSS Grid 布局示例详解

    《前端CSSGrid布局示例详解》CSSGrid是一种二维布局系统,可以同时控制行和列,相比Flex(一维布局),更适合用在整体页面布局或复杂模块结构中,:本文主要介绍前端CSSGri... 目录css Grid 布局详解(通俗易懂版)一、概述二、基础概念三、创建 Grid 容器四、定义网格行和列五、设置行

    前端下载文件时如何后端返回的文件流一些常见方法

    《前端下载文件时如何后端返回的文件流一些常见方法》:本文主要介绍前端下载文件时如何后端返回的文件流一些常见方法,包括使用Blob和URL.createObjectURL创建下载链接,以及处理带有C... 目录1. 使用 Blob 和 URL.createObjectURL 创建下载链接例子:使用 Blob

    Vuex Actions多参数传递的解决方案

    《VuexActions多参数传递的解决方案》在Vuex中,actions的设计默认只支持单个参数传递,这有时会限制我们的使用场景,下面我将详细介绍几种处理多参数传递的解决方案,从基础到高级,... 目录一、对象封装法(推荐)二、参数解构法三、柯里化函数法四、Payload 工厂函数五、TypeScript