ele.me 是如何运行的

ele.me 是如何运行的

写这篇文章的时候,整个 APP 已经发生了不少变化,甚至已移除 Grunt 转用 Webpack。然而初衷未变,架构方式未变,半夜下笔。虽如此,本篇也不打算详述每个技术细节,更想做的是说清楚下面几点。

前端即业务

前后端分离:不要停留在「中途岛」

把每个页面都变成组件

当手工作坊进入工业自动化年代

难道你还没用 ES6 和 CSS Next?

编译加发布到所有机器只需 200 秒是一种什么样的体验?

机器与流量:APP 最大可承受多少并发?

题外:团队工作流

一、前端即业务

没毕业那会,鬼哥写了一篇文章说到「当有一份不错的工作只需要写 CSS」,就在腾讯。当年在《重构》的影响下,这个叫「重构」的职位应运而生,这是一个切图仔工作。直至今天,前端在携程仍是「重构」而 JS 工程师被称为「开发」。在很长一段时间内,甚至时至今日这个职位仍可能只负责把 PSD 转成 HTML,而数据输出是由后端工程师做的,市场上很多写「至少精通一门后端语言」也是从这点产生的。那时大家都在喊,前端是最接近用户的,最了解设计的,没错,可前端却不可能在一个公司中充当 CTO 的。

当 Ajax 成为日常,SPA 成为标配,甚至数据已都双向绑定,而 BaaS(Backend As A Service)慢慢被接受,后端 MVC 只保留了 M。iOS、Android、浏览器开发已经统称前端,Client-side MV* 驱动,前端即业务 —— 负责路由、响应用户操作和做数据通讯。如果今天你还在还原 PSD,我只能跟你说,辞职来我这。

二、前后端分离:不要停留在「中途岛」

大概 13 个月前,我加入饿了么,第一个项目是彻底改版 m.ele.me,说到前端后端要分离。有天 CTO 问「中途岛」研究过么?我当时说,那不叫前后端分离,不知道他心里有没有在问「你究竟懂不懂前端?」。要是我也写了一个 Node 层来负责与 PHP / Python 层对接,这样前端负责 Node + 浏览器端开发,可能会被升职加薪,因为最终变忙,把事情变复杂,而且有好多 bug 要修,像是劳苦而功高。可是我选择了 MV* 的 Angular.js 把用户业务接管到浏览器端,而后端作为 API 提供商,时间很快,熟悉业务加开发一个月把整个移动网站都开放出来给大家用,机智地避过了升职加薪的机会。

因为当时整个网站都运行在一个 PHP 框架上,Template 层使用了 Twig,既然已经想让浏览器接管一切,那么让 PHP 只需要处理 M 层就可以了。

无论是 Twig 还是 HTML,我们遇到一个问题:HTTP 请求太多了。解决这个问题其实可以使用script作为 Template,当然也可以直接把模板编译成 ng 的 Template Cache。前者写在 html 里太丑了,而且不能重用(你丫也可以写成单独一个文件啊),变成 js 文件吧,然后一起扔到 CDN 上去。情况就是这样:

Twig -> HTML -> Template Cache(js) -> (CDN)

结果整个网站变成了 Nginx + index.html + BaaS,呃,Node 给了很多机会,可是这会还有人想停留在「中途岛」吗?考虑一下下面的问题:

把 View 的渲染交给服务器,还是切分交给每个用户的浏览器?

是否需要重启 Nginx 、重启 PHP、重启 Node?

Cache API 后并发可以提高多少?

不需要复杂的 HTML 缓存机制/机器,CDN + 静态 html 可以搞多少并发?

我只想说一句,你选吧。

三、把每个页面都变成组件

把业务接管到浏览器同样会遇到一个问题:MV*。把目录分成lib/、model/、controller/、view/,太多这种做法了。比如 angular-seed 之前的分法就类似,把所有 controller、directive、filter、service 都放在不同文件。这样做是不是最佳实践呢?

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 159,219评论 4 362
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,363评论 1 293
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,933评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 44,020评论 0 206
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,400评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,640评论 1 219
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,896评论 2 313
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,597评论 0 199
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,327评论 1 244
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,581评论 2 246
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,072评论 1 261
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,399评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,054评论 3 236
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,083评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,849评论 0 195
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,672评论 2 274
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,585评论 2 270

推荐阅读更多精彩内容

  • 7月19日星期三(多云)亲子日记第43天 今天老公答应晚上陪儿子玩象棋,可是临时有事没时间玩了。所以晚上换成我陪...
    四年级五班张家豪妈妈阅读 82评论 0 3
  • 准备工作 添加一块新硬盘/dev/sdb 查看当前更分区大小 格式化新硬盘 创建物理卷 查看当前卷组vgdispl...
    carey_ff72阅读 1,512评论 0 0