天猫的前端工程师和团队在行业内处于什么水平？
发一篇昨天写完的文章。
利益相关：天猫前端团队成员。
原文：
在天猫，前端做什么？===== 分隔线 =====
写在前面 - 这篇文章来自于一次面试中应聘者提到的问题：“在天猫，前端的主要工作是什么？”
以下内容，一部份整理自那次回答，一部份来自这段时间的思考。
我12年加入天猫，亲身经历了前端从一个资源部门转变为技术倡导角色的经历。
天猫前端 vs 淘宝前端
强势插入本节：有同学私信问我：天猫和淘宝前端是什么关系？
这个问题不仅赞且值得一谈：
作为业务上的后进，天猫的技术团队初始从淘宝划出，所以无论前、后端的架构、用户系统都有分不开的渊源，前端也如是：
框架类库、发布机制、前后端协作方式都有相似又带有基于业务定制的不同。
也正因同源，也带来了竞争：“不能让丫独个儿臭牛逼！”。
在大多数场景设定下，竞争的意味着残酷，但在天猫和淘宝前端却是你意料之外的良性 - 来个栗子：
天猫和淘宝的首页一直在追求外人无法理解的极速！
让我们通过一个前端旺旺群的聊天截图来举证吧(截图已经过本人同意)：
(注：@小马 是淘宝前端的主要Leader之一)
如果你脑子里面浮现起一个记忆中的词汇：“你追我赶”，那我想，就不需要再多作回答了吧。
好了，下面继续回答楼主的问题吧：
组织结构
前端部门之前属于UED，也就是当年的经典划分：UED：前端+视觉+交互+用研
事实上，这个构架的不合理之处在于：随着人才剧增和专业细化，前端和设计这两个技术领域的差异会越来越大，生硬的合并很容易带来各自发展上的瓶颈。
至少我在阿里这几年的经历，没有发现任何一位UED的Leader同时在纯工程类技术和体验类艺术有足够深刻的造诣，敢称作当之无愧的领路人！
你木有听错 - 一位都没有！
很幸运，这个情况没有持续很久：
- 新的架构：前端 || UED || 后端 || 测试 || DBA || 等等
- 来了一位设计出身、有深厚工程类背景的前端Leader；
成员
- 天猫前端团队很年轻，成员更年轻，85前就算年纪最老的一批人了 -
因为一群智商和努力程度都远超同龄人的90后加入，让我们的平均年龄维持在26岁左右； - 从学历背景来看，TOP名校和普通三本兼有、硕士和大专同在、工/理/文俱全。
- 从专业来看，最多的是科班出身的计算机专业、也有应用背景的数学专业、半路出家的设计专业，当然少不了工程相关的电子/通信专业，甚至，他喵的还有法律专业。
- 从性别分布，呃，这个我就不说了。
工作
这一部份是重点
以Web为核心
从某种意义来说：我们一直围绕着Web在工作。 没错！就是你们所知道的前端工程师： HTML/CSS/Javascript。
众所周知，注重调性与品牌的网站总是无法避免有大量高保真图片、特效细节、体验创新，天猫当然不例外。
前端工程师们总是得开发各种页面、这样那样的效果。比如这个、这个、这个，还有这个
按照这个节奏往下讲，我们很快就可以讲到Javascript、HTML5、框架、渲染优化等等，因为地球人都知道：
这是浏览器端开发绕不过的话题。
换个思路聊前端
因此，我想换一个角度聊聊，从我主要的工作开始吧 - 跨终端。 我在天猫除了带一个产品线的前端Team，还负责一个虚拟的技术方向：跨终端的Web - 我们暂且简单地理解为Mobile Web吧。
先说一个工程中的小需求：移动设备访问 http://1111.tmall.com 自动跳转到它的移动版本。
嗯，尽管这个需求很小，但是我们还是分解一下：
- (判断)移动设备
- (脚本)跳转
- 移动版。
我们从如何判断移动设备开始。
手快脚快的程序员分分钟写一个正则表达出来，宣告完成！
$ua_phone = (bool)preg_match('#\b(ip(hone|od)|android|opera m(ob|in)i|windows (phone|ce)|blackberry'.'|s(ymbian|eries60|amsung)|p(laybook|alm|rofile/midp|laystation portable)|nokia|fennec|htc[-_]'.'|mobile|up.browser|[1-4][0-9]{2}x[1-4][0-9]{2})\b#i', $ua );
事实上我想说：同学，你错了。
如果你斩钉截铁的表示：“这个正则可管用了，咱平时连私活都用它。” 我会微笑地说：“同学，移动设备可不止手机喔”。 手快脚快的程序员马上献上另一表达式：
$ua_tablet = (bool)preg_match('#\b(ipad|tablet|(Nexus 7)|up.browser|[1-4][0-9]{2}x[1-4][0-9]{2})\b#i', $ua );
“这可是连 Nexus 7这种变态UA都考虑到了”，你高兴地说。
然后我会抛出一系列的问题：
- 天猫内外网上有基于各种语言和应用场景：Java、PHP、Ruby，如何保持一份逻辑可以通用呢？
- HTML只是网页中的一小部份，我们怎么做到图片、CSS/JS针对不同的设备进行自动优化呢？
- 如果我怎样获取设备的更多信息比如屏幕、网络状况、是否支持摄像头？
- 如果用户使用手机淘宝在商家门店扫二维码打开，我要怎么判断呢？
很可惜的是，囿于篇幅，以上几个问题三两句还真的很难说清楚方案，让咱们把钻研技术细节的心收回来。 我想说的是：刚才那长长的一段仅仅是一个小需求分解出来的一个技术分支。
当然，实际的开发总是不会这么纠结，但是对于天猫来说，它就是一个基础的建设，是需要仔细想通、想透的。
事实上，作为追求极致的前端，问题还是要解决的 -
我先写了PHP的终端判断简单的满足了业务需求、然后为了满足Hybrid的需求定制了Webview的UA规范并完成对应的Coding、接着推进了Java和纯JS版本，再后来发现一些非标准UA如(Nexus 7)的存在，又要到各个语言版本中更新逻辑，然后发现直接在前端服务器上统一逻辑貌似更快，然后又花两个礼拜的时间，使用C语言实现通过WebServer的模块进行终端判断，然后又生出想法 - 是否可以判断更多的终端相关信息(如2G/3G/WIFI)呢？ ...
写到这儿打住!
我想表达的是：在天猫，像类似的深入思考、研究探索是被鼓励和倡导的。 在内部，各式样的项目通过不同的语言提起：
- 使用Node开发打包/编译工具、集成过程构建；
- 使用Ruby来完成内部任务平台；
- JSTracker来追踪页面上发生的每一个错误；
- 构建本地开发环境实现前/后端分离、一致的开发环境；
- 使用C/PHP在不同的场景下进行终端探测；
同样，一旦你这么做了，你会慢慢感觉自己貌似不是一个纯纯的前端了，没错！ -
因为这个时候，你本质上是一个“Problem Solver”，语言只是一把武器，你要觉得Javascript这把刀不顺手，挑一把合适的剑操在手上直奔问题，哪管它是PHP还是Java？
工作环境
很多人问起天猫的工作环境，我统一回答一下：
- 位置：和整个淘系一样，都在阿里巴巴西溪园区，文一西路969号, 余杭区, 杭州, 浙江 。
它属于高新技术园区，3年前，本质是农村。坏处：找乐子很不High、好处：不少同事一个礼拜花不了100块钱。 - 生活设施：小邮局、图书馆、室内/外篮球场、羽毛球场、壁球场、跑步机、健身房、台球室、3大/3小餐厅、园区自行车、2个大超市、母婴室、工/建/招ATM机、星巴克、甜点、洗车房、美容美发；
- 工作设备： 号称5K/把的工作椅(目测没有)、L型工作台、Retina Macbook Pro/iMac、外接显示器
- 加班：反正我是挺多的。
- 前端地位：比你想像中高，从薪资力度来看，属于一线地位；
照片
其他的
等我想到了再来回答。
强势插入广告： 看到这儿，如果你对天猫前端有兴趣，请访问下面的链接：
；）