百姓网的前端架构是怎样的?

其实我们的前端架构还远未成熟,可以说正在传统前端架构到现代前端架构的转变中,这个转变以引入构建系统为标志(虽然之前mobile版已经引入了stylus),从去年(2014)年初开始,预计可能持续2到3年时间达到一个我心目中理想的较稳定架构。

之所以预期如此长的时间,是因为总体上,对于前端构建、模块化、组件方案等非常基础和牵一发动全身的设施,我采取宁缺毋滥,看不清楚就先不上的保守策略——是不是看上去似乎和我在社区老是讲新技术的形象不太相符?^_^

这种策略有三个原因。

第一是百姓网的性质是以信息流为主、面向所有网民的、平台级的互联网服务。凡此种性质的网站,技术选型的策略总是偏向保守的。相对来说,以体验为主、面向相对小众群体、限定于特定领域的应用,可以更快的采用新技术。像我们的内部系统就会更多采用新技术。

第二,也是更本质的原因是,架构不是光决定用个什么系统就行的,而是牵涉方法论、工具、流程乃至组织结构等诸多层面,是需要整个团队共同理解、实施、维护和不断改进的。团队前进,架构前进。这需要耐心。

第三,百姓网的前端团队在建立之后很长时间里包括我只有3个人,主要精力都在业务上。(当然我们许多后端工程师甚至PM都附带前端开发技能——别以为我在讲段子以下绝壁是真的之我们的CEO三年前就自己玩Meteor并去硅谷见投资人时顺便去参加nodejs的workshop还带着财务总监&我们财务总监当场只完成了helloworld表示不服回来后买了犀牛书问我学JS是不是看这本就好之看你们以后谁敢在我面前自称技术型公司。)期间虽然有尝试改变主站的一些开发方式,但是因为各种原因而无疾而终。去年我们的前端工程师终于超过了10个人,不过和快速增长的业务相比还是远远不够。因此虽然从去年第二季度开始成立了前端架构组,但我并不急于引入各种新设施, 因为我认为对于我们这样规模的团队,资源的冗余度是很低的,走弯路的代价比较高。我要确保每项引入的设施都是正确的。(BAT这样规模的公司就好一些,可以有多个团队同时实施几种不同架构方案。我就指着他们帮我们这些中小型公司探路了,所以我见到他们的人就鼓吹他们快上新技术,呵呵。)

无论如何,今年会有几项重要的前端架构的实施,比如我预期今年要上ES6!大家可以注意到我去年12月的C4(http://weibo.com/1960954893/BBKpY8uq3)和今年1月的FEDAY上讲的内容(hax/es6-in-action · GitHub)就是ES6。这回是要玩真的哦。总之,希望能稳健的前进,到明年这个时候再来看吧。

针对具体问题回答如下:

Q: 百姓网是否使用了 sass / stylus / less 这类预处理工具 ?

A: 百姓网mobile版用了stylus。最新一版重构是基于 @CSS魔法 开发和维护的CMUI/CMUI · GitHub。桌面版因为开发历史比较悠久,一直没有引入预处理工具,短期也不会改。但长期来说最终应该会引入的。

Q: 百姓网 js 模块化开发是如何组织的,是否使用了什么模块化工具、框架?

A: 与大家预期可能不一样,这块我们仍然停留在刀耕火种阶段。百姓网历史上,页面中脚本一直用得不多,虽然很早以前 @sofish 就考虑过引入如seajs的可能性,但是实践上,粗放的脚本合并和一个简陋的按需加载(http://s.baixing.net/js/global/defer.js)也就够用了。不过随着开发规模的增长,当然早晚是要走向更成熟的模块化方案。所以去年年初就开始评估和试验各种方案,比如新开发的某些独立性较高的功能组件是基于commonjs+browserify的。总体上,因为我预期所有模块化方案最终要统一到ES6的module/loader上去,所以基本上想直接上基于遵循ES6语义和API的loader的方案。但是ES6的module部分定案和实现比预期的慢,loader规范也被postpone到独立spec中。估计今年第二季度之后会引入模块化方案。需要注意的是,模块化主要是为提升代码的可维护性,侧重开发阶段。而侧重部署的模块加载或一般化的资源加载相关领域其实还有大量的可能性要探索,仅制定中的标准草案就有HTML Imports、ServiceWorker、Packaging on the Web、HTTP2等,我们需要在架构上厘清这些不同的组件是如何协作并构成整个体系的,这对于未来Web网站和应用的整体性能提升会有极大价值,也是个长期任务。

Q: 具有完整的 html css js 代码片段的 component,是如何 include 到各个页面里的,include 时对 html css js 分别进行了哪些处理?如果这其中的 js 又依赖于某更基础的 js 模块,这个依赖是如何处理的?

A: 和上一个问题类似,由于历史上百姓网的结构比较简单,所以一直没有引入任何一种确定的组件方案。除了需求不是特别大之外,相比模块系统已经明确会统一到ES6,组件系统目前仍是完全不明朗的情况。从维护角度说,模块系统其实转换成本并不太高,组件系统就复杂多了,要从某种 组件系统切换到另一个组件系统听上去就很恐怖。此外,目前业界流行的MV*组件框架绝大多数是纯浏览器端方案,在百姓网主站这样以信息流为主、SEO必需、有较高浏览器兼容性要求的网站来说,无法直接使用。目前业界缺乏能很好的统一浏览器端和服务器端的方案,这是类似百姓网这样的中大型互联网网站少有直接引入类似MV*组件框架的原因。尽管目前没有确定的计划,但在内部系统和不涉及主站的新项目中会鼓励团队成员尝试新技术和方案,目前有少数内部项目已经尝试了Angular。大型Web应用中,组件化的需求是不可避免的(如 block 和 include 协作问题 · Issue #38 · baixing/jedi · GitHub),只是最终的答案可能要再过一段时间才会浮现出来。

Q: 开发环境的代码在发布上线过程中做了哪些处理?

A: 我们有一套PHP写的deploy系统,前端资源的编译、压缩、版本化、替换路径等步骤都是该系统执行的。从去年年初开始我们引入了gulp来进行mobile版的前端构建,会逐步将前述步骤移回到gulp工具链中,并增加更多的处理,比如图片优化和模块打包。desktop版今年应该也会引入。

Q: nodejs 在百姓网技术栈中承担了哪些任务?

A: 前端构建阶段的整条工具链是完全基于nodejs平台,这个自不用说。在线上服务中,部分日志系统是基于nodejs,并且计划会进一步将更多涉及前端的日志系统迁移至nodejs。另外我们使用的第三方服务如LeanCloud的消息服务估计是基于nodejs平台的(虽然与我们无关,但是因为这个服务我们是首先吃螃蟹的用户,它本还没有js sdk,我只好亲自搞了一个hax/avos-chat · GitHub,所以顺便说说)。我们的后端是基于PHP的,但我们并不排斥其他平台,如我们的新业务线也有采用基于python的系统。内部系统也有许多基于nodejs平台,并可能采用新的app框架如Koa。主站系统部分(特别是表现层)迁移到nodejs平台从架构层面来说也一直是可选项。目前的障碍更多的是在较缺乏有nodejs运维经验的工程师,有兴趣的同学欢迎投递简历。

以上。

时间: 2024-11-08 21:46:24

百姓网的前端架构是怎样的?的相关文章

nodejs-有用过去哪儿网的前端框架fekit的吗

问题描述 有用过去哪儿网的前端框架fekit的吗 我使用fekit,执行min给文件压缩后,执行server发现每个静态文件都会有两个请求,一个是加了md5戳的和一个没加md5戳的,这个问题怎么解啊?居然请求数增多了. 还有一个问题,使用自带的server服务器可以成功运行,但是放到我的tomcat中运行后,就找不到文件404了,怎么办啊?忘各位帮帮忙了. 解决方案 去哪儿网前端架构师司徒正美:如何挑选适合的前端框架?去哪儿网前端架构师司徒正美:如何挑选适合的前端框架?

大型网站我该怎么选择前端架构

问题描述 大型网站我该怎么选择前端架构 最近自己在做电商方面的东西觉得前段框架架构选择不好导致前端页面加载时间长,这个时候我该怎么选择前端框架架构? 该从几个方面考虑选择合适的框架架构? 解决方案 大型网站得有很多服务器吧.你能买得起很多服务器,你也能雇一个架构师吧. 解决方案二: 建议你去了解下nodejs啊 解决方案三: 大型网站的架构大型网站服务器架构

百姓网的“赶驴网”的seo策略

春节期间在央视看到代言赶集网的姚晨,拉着一头毛驴,说道:"赶集网,要啥都有!" 也许就是这个场景和广告让百姓网抓住一个先机,注册了"赶驴网" 在备案没有通过的状况下就上线了. 赶驴网logo 赶集网logo 由logo可以看出百姓网是想在赶集网上揩油了. 赶驴网的布局.样式及数据全部来百姓网(准确的来说应该是数据同步),这里就有不少朋友会想到:"同一内容,被复制到不同域名下,那岂不是有作弊之嫌"! 百姓网之所以揩油,目的绝非想通过seo来做流量和

我理解的“前端架构”(来自2014年)

写在前面的话: 怀着一个酝酿了蛮长时间的念头,打开电脑,想对一些思考做一点记录.关于标题,关于"前端",关于"架构" . 其实是有蛮多话想说的,但是前面这几个字却打上去了又删掉.想为下面的内容找一个合适的开始.但是似乎总是不那么如意. 回到这个话题,或许应该从以前的认知慢慢说起. 过往的认知 不可否认的说,曾经很长的一段时间,当我大部分时间还集中在业务上的时候,对"架构"这个词有点嗤之以鼻.尤其是"前端架构".觉得说"

京东资深前端架构师分享前端工程化在电商首页中的实践

大家好,我是京东用户体验设计部前端架构团队的刘威,网上ID是putaoshu,非常高兴 "ITA1024团队"的邀请,有这样的一个机会与大家分享下我们团队关于2015年京东PC新首页的一些前端开发实践,希望通过今天的讲解能为大家以后在大型前端项目开发和改版时提供一个思路和参考.   今天我的讲解主要分为两部分,具体如下: 京东首页前端架构设计与实现 面临挑战 前端页面静态化 前端页面整体架构 前端页面加载策略 前端基础架构 前端工具和系统 前端灾备策略 前端性能优化 前端工程化在电商首

【深喉解读】豆瓣网的基础架构

[深喉解读]豆瓣网的基础架构 时间:2014-10-31 00:13 来源:InfoQ 作者:佚名 本文根据InfoQ中文站对豆瓣洪强宁(@hongqn)的沟通交流整理而成.洪强宁介绍了豆瓣的架构和组件,并分享了豆瓣基础平台部的一些团队经验.文中截图来自洪强宁在2013年CTO俱乐部中的分享. 嘉宾介绍 洪强宁,豆瓣首席架构师.豆瓣第一位全职员工.清华毕业后,洪强宁一直做嵌入式系统.在2002年开始接触Python语言,从硬件工程师变为软件工程师,对一种语言在计算机底层如何工作有 深入的理解.

阿里9年,我总结的前端架构演进3大阶段及团队管理心法

技术人生就是在不断地修行,每个人都有每个人的功课,每个人也有每个人的精彩.你也许刚上路,又或许踽踽独行了很久,听听别人的故事没准也能帮助自己的成长.在阿里修行的9年,他学会了这些. 少年励志,初入技术圈 我生在一个文化气息浓厚的家庭,这让我从小就对艺术有了一种懵懂的向往.第一次接触到计算机时,我就明白自己会在这个领域玩下去:第一次接触到互联网时,我就坚定了将其作为事业,把自己的黄金年龄投入其中的信念.文化气息的熏陶和坚定的信念,使得我踏上了寻找将美好的设计感和互联网技术相结合的长路上. 2004

百姓网将加入新成员

据网易报道,原FacebookCTO Matt Cohler已在本月,加入国内的分类信息网站百姓网董事会.将会在技术.运营等方面为百姓网提供相关建议. 百姓网的CEO王建硕未透露Matt Cohler有没有持有百姓网的股份,仅仅表示Matt经过多次考查和多次考虑之后,才选择加盟的百姓网. Matt曾于2005年到2008年任职Facebook,目前仍担任Facebook网站顾问.除此之外,他还是基点投资公司(Benchmark Capital)的合伙人,基点投资曾投资过诸多全球知名的互联网公司,

百姓网再次冒充赶集网提示用户登录

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 百姓网再次冒充赶集网提示用户登录? 百姓网真是一个不地道的分类信息网站,抢"赶驴网"域名,误导用户进入百姓网,搞的互联网满城风雨,4月14日上午58同城CEO姚劲波再次在新浪微博公开谴责百姓网,称其冒充58同城向网友推送邮件.本以为百姓网在受到语论压力下会知道什么是廉耻,没想到百姓网不但没有停止这种卑劣的行径反而越演越烈,