欢迎访问 生活随笔!

生活随笔

当前位置: 首页 > 前端技术 > HTML >内容正文

HTML

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

发布时间:2025/3/21 HTML 28 豆豆
生活随笔 收集整理的这篇文章主要介绍了 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(黄士旗)分享的内容更侧重于知识普及,从几个核心技术要点讲解了一些内容。

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

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

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

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

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

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

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

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


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

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

  • 前后端分离这个不需要解释。Rest API,Nginx 托管静态资源。
  • 开发与发布构建了一套成熟的开发/发布体系,而且封装成了简单的命令,甚至还做了一个界面化的 nginx 配置,不过手写 nginx 配置应该算是前端的必备技能了吧?
  • 优化使用了  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、百度、腾讯、美团、饿了么等互联网公司的前端实战的全部内容,希望文章能够帮你解决所遇到的问题。

    如果觉得生活随笔网站内容还不错,欢迎将生活随笔推荐给好友。