淘宝前端工程师：国内前端行业10日谈

　　规范之立应当有动因，动因来源于项目需求，项目需求则来自对产品的理解和把握，这是Web前端初级工程师走向中级甚至高级的一次重要蜕变，软件工程领域早就有"架构师"角色，而架构师往往存在于项目需求分析和概设、详设阶段。我看到的情况是，Web前端工程师的思维过多的限制在"界面"之内，向前和产品需求离的太远(认为这是视觉设计师的事)、向后和数据逻辑又隔离开来(认为这是后台工程师该干的事)，因此前端规范也大都泛泛，无关项目痛痒，成了玩具。

　　雅虎技术规范的优秀之初在于它们解决问题。所以，学习使用规范应当多问一句，"他们为什么这样做?"其实，想清楚这些问题时，脑海中自然形成了一种"遇山开山"的创造性思维。

　　规范的破与立 2

　　如果说新技术的尝鲜缺少针对性，但至少满足程序员的某种洁癖和快感，那么"负担"从何而来呢?对于初学者来说，有价值学习资料可能只有这些规范，如果说规范价值不大，那又当从何入手呢?

　　刚才我说的不是依赖于规范，而是对规范的反思，摆脱规范灌输给我们所思维定势。新人们大概是看了Wiki中的很多指标、结论、实践，在做项目之初就附加了不少"八股式"的负担，甚至影响我们对项目关键需求和关键问题的洞察力和判断力，负担过重就无法轻装上阵，Wiki中提到的这些指标和规范是结论性的，是大量的实践之后得出的，也只有经历过大量实践才会真正理解这些结论，比如DomReady时间和http请求数是否有因果关系，http请求数增加是否真的会导致页面性能下降，什么条件下会导致性能下降?我们从那些条文和结论中无法找到答案。

　　举个具体的例子，Kissy刚刚出了DPL，也是一大堆结论，比如他的布局就采用了经典的双飞翼，使用容器浮动来实现，那么，这种做法就是不可撼动的"标准"吗?看看淘宝车险首页，布局容器齐刷刷的inline-block，只要顶层容器去掉宽度，布局容器自身就能根据浏览器宽度调整自然水平/垂直排列，轻易的适应终端宽度了。

　　再比如，淘宝旅行计划项目中的部署方式，也没有完全使用Loader管理依赖，而是将依赖层级做的很少，业务逻辑使用脚本来合并，这样就可以更容易在build环节加入语法检查和代码风格检查。

　　类似这种摆脱原有编程思维，有针对性的用新思路新方法解决问题的做法显然让人感觉更加清爽，编程的乐趣也正体现在打破常规的快感之中，小马曾经说过："制造规范是为了打破规范"，万不要因为这些规范标准加重负担，导致开始作一个简单页面时也显得缩手缩脚，无法放开身手。大胆的动手实践，才能真正得出属于自己的"结论 "和"标准"，才会真正深刻理解那些"结论"的意义所在。代码写的多了，自然熟能生巧，也容易形成成熟的技术观点。

　　在这个过程中，我们唯一的对手是懒惰，惰于思考，就无法真正发现问题，自然形不成自己的观点。还是那句话，任何规范、方法、结论、实践都是为了解决项目中的问题的，所以，我们所接触到那些看似"八股文"式的规范标准也是为了解决某些问题而提出的，想清楚这些问题，理解方法论背后的"因"，内心自然有"果"。

　　因此，"着眼当下、对症下药"的品质就显得弥足珍贵了，比如，双飞翼布局方法是为了解决一套(html)代码适应多种布局设计，这里的布局相对于固定的产品来说也是固定的，而无针对终端的自适应(适用于移动端的榻榻米布局似乎还没有最佳实践)。这是双飞翼产生的背景，如今终端环境较之5年前已经翻天覆地，问题早已不在"多种布局"上，而在"终端适应"上，这才是我们面临的问题，需要我们给出新的技术方案。

　　所以，勤于思考，轻装上阵，大胆实践，勇于创新，发掘问题所在，实打实的解决(潜在)问题，这才是我们真正需要的能力。放下思维定势枷锁，也会有一种豁然开朗的感觉。

　　第二日：科班秀才

　　秀才仕途

　　Web前端工程师是一个特别的岗位，只存在于互联网领域。最近几年随着互联网产业的火爆，对前端工程师的需求量暴增，兵源几近枯竭。各大公司技术掌门一定都有过类似的苦恼："招一个靠谱的前端工程师、难于上青天"。

　　我想，一部分原因是，当前不少入道的前端工程师大都是转行而来，毕竟，正儿八经的学校里也不会教这玩意，觉得"切页面"有啥好教的，甚至不觉得 html/css是一门语言。转行这事自不必详说，大家也各自瞄准当前市场需求，造成的现象是，初级前端工程师堆成山，中高级人才却一将难求，计算机系的科班出身就更加凤毛麟角了。一方面反映了教育部门的后知后觉，另一方面也体现了大部分人急功近利的跟风。当然最重要的原因是，所谓中国"第一代前端工程师"并未做好布道的工作。导致大家对于基础和潜力的态度从之前的忽视演变为如今的蔑视。所谓基础，就是在大学上的那些计算机基础课。所谓潜力，就是戒骄戒躁的务实作风。这些会在后文中多次提到。

　　对于科班出身的莘莘学苗来说，根正苗红本身就是一种优势，事实证明，这些人在前端技术上的成长轨迹有一定的套路，而且大都能如期的突破技能瓶颈。从一个人大学毕业到他最满意的工作状态，中间会经过几个阶段。

　　前2年是学习技能的阶段，这个阶段主要精力放在专业技能的提升上，2年内起码要赶上平均水平，即所谓"中级"，在这个阶段的人通常对软技能不怎么关注，沟通能力达不到平均水平，基本上是来啥活干啥活，干不完就加班的这种，对需求的合理性不甚理解，对项目也没什么把控，尽管在技能上有提高的空间，也不是公司最需要的人，但有不少成长空间。

　　工作2-3年的人在前端技能上趋于稳定，也就是技能上的第一次瓶颈，这种人干活熟练，切页面可能也很快，代码看上去也比较规范，属于熟练工，开始注重沟通技巧和一些职业技能的积累，比如带人带项目，至少有这方面的意识，并有过推动项目、和业务方pk需求的经历，这就达到了中级应当具备的职业技能，但应当注意的是，这时最容易出现偏科的情况，特别是对于那些"专门切页面的"和"专门写脚本的"人，毕竟html/css/js三者不分彼此，三者是一个合格前端工程师都必须要掌握的。如果你觉察到自身有偏废的嫌疑，则要小心了，要清楚的了解自身的差距，并意识到瓶颈的存在，为过渡到"中级"的打下基础。

　　过了这道坎之后，工作3年以上的人大部分技能也趋稳，有些人对前端新技术有钻研，能够熟练应对日常工作，软技能也ok，具备有针对性的"拿来主义"，代码也具有一定的架构性，开始突破"代码民工"的这一层瓶颈，对团队气氛、培训、工作环境有个性化的要求，一般来讲，这种人是典型的具有潜力的"中级"工程师，但很快会遇到职业发展中的第二个技术瓶颈。

　　有少数工作3年或4年以上，在不断寻求新的技能上的突破，最明显的一点体现是，开始关注"底层协议"，即HTTP、第三方应用、系统对接、制造工具、工作流程等，这时思考的重点已经脱离了"切页面"，变为"出方案"，比如要架设一个站点，能够搭建站点框架，预见站点后续(前端)开发中的所有风险，并一一给出解决方案。项目后续开发遇到问题只要翻阅你提供的"手册"即能找到答案。这种人是标准的"高级"Web前端工程师。

　　出方案是一件挺难的事情，它要求一个工程师同时具备经验、技术、气场等诸多硬技能。尤其是对技术底子的要求非常高。

　　半路出家

　　那么，转行作前端的人又当如何呢?其实发展轨迹和科班秀才们非常类似，只是时间跨度可能会长一些，你要花更多的精力、作更多的项目、更多的反思和总结才能理解某个知识点的本质(比如HTTP协议)。当然这只是一般情况。

　　此外，这些人还需要摆脱很多思维定势的禁锢。这里我推荐大家阅读阿当的《Web前端开发修炼之道》。当然，如果你有一个靠谱的师兄带你入道，自然幸运万倍。

　　但不管怎样，我始终认为应当秉承兴趣第一的原则，不管你是误打误撞、还是意欲为之，不管你是科班秀才、还是半路出家，兴趣始终应当是第一原则，然后才是你"想做好"。我对自己的要求无法强加于人，所以很多业界大牛在回顾自己成功之路时，提到最多的是："热爱你的工作、拥抱它给你带来的挑战"。 N.C.Zakas曾经这样勉励大家：

　　"我对Web开发人员最大的建议就是：热爱你的工作。热爱跨浏览器开发带来的挑战、热爱互联网技术的种种异端，热爱业内的同行，热爱你的工 具。互联网发展太快了，如果你不热爱它的话，不可能跟上它的步伐。这意味着你必须多阅读，多动手，保证自己的才能与日俱增。下了班也不能闲着，要做一些对自己有用的 事儿。可以参与一些开源软件的开发，读读好书，看看牛人的博客。经常参加一些会议，看看别人都在干什么。要想让自己快速成长，有很多事儿可以去做，而且付出一定会有回报。"

　　第三日，幸福感

　　先精通十行?!

　　兴趣第一，听上去很美，但现实却不总是这么酷。练就了一身本领，那也要找到对口的怪物来打一打才过瘾。

　　自然，每个人都想做出好东西，每个工程师也都渴求这样的机遇，用层次分明的设计、漂亮优雅的代码、精妙的细节雕琢，做出美观、安全、实用耐用的产品，不过现实是如此残酷，以至于工程师们一直都缺乏对产品的归属感。作为前端工程师，如何才能在江湖中把握住前进方向、步步走高?毕竟，在职位繁杂的大公司，缺乏人性化的工作流程影响着工程师的工作幸福感。产品从设计之初、到技术方案评审、再到实现，处处充满了妥协，大部分产品都是杂交的产物，人与人相互掣肘，每个人都对产品不满意……，大跃进式的敏捷开发早就被证明百害无一利。但，或许这就是成长的代价。年轻的工程师需要更多的了解需求和设计、产品经理更要懂得软件迭代规律。对于前端工程师来讲更是如此，多学习交互设计和UI，多了解网络协议和软件迭代模型，更能帮助前端工程师和需求方沟通、和后台的衔接、以及控制版本的迭代。

　　说来奇怪，前端工程师不是写html/css/js的吗，搞懂那些边缘知识有什么用?《Web前端开发修炼之道》中也提到，精通一行需要先精通十行。这里我来解释一下原因。

　　作为交互设计师的下游，前端工程师学需要习设计知识是很容易理解的，因为它能帮助你更准确的理解设计师的意图，在原型不完整的时候也能正确的反馈设计缺陷，将问题阻挡在设计的环节，会大大减少UI bug数量，比如说，设计师会给出理想状态下的容器样式，却往往忽略了文字溢出折行、长连续字符、容器宽高是否适应内容尺寸变化而变化，溢出部分是作截字还是隐藏等诸多细节，因为设计师不懂"边界值测试"的道理，而这些问题往往在测试阶段才被发现，所以，如果能在拿到UI设计稿时就提醒设计师补充完整这些场景，自然减少测试回归次数。

　　另外，前端工程师必须要了解网络协议，原因很简单，我们作的产品运行在Web上。很多依赖域Ajax的实现，只有前端工程师才会提出实现方案，产品经理不了解技术瓶颈，后台工程师更不会在意客户端的用户体验，举个简单的例子：通过JS实现一个Ajax，如果Ajax抓取的数据源是一个302跳转，则需要在JS程序中多做一些事情，这就需要前端工程师了解一些HTTP协议。应当说，这是很常见的一个场景。

　　那么，为什么说前端工程师也要关注代码版本控制呢?因为web开发和软件开发本质无异，同样具有迭代周期，需求不是一揽子提完、一口气开发完的，是有步骤的开发，因此，每次上线开发哪些功能、为后续扩展功能留足哪些接口、代码在可扩展和可维护性上应当作哪些考虑……，这些应当是每个工程师关注的事情，所谓迭代就是指这种需求的叠加，这是软件开发的常态，也是web开发的常态，刚开始，前端工程师总会不断抱怨没完没了的需求，代码起初还算干净，但很快就越来越乱，代码的版本管理对于Web前端工程师来说有些困难，这也使得大部分前端工程师很难上档次，从这个角度讲，前端工程师是需要向后台工程师学习的，他们的开发量不比前端少，维护代码的能力要超过前端工程师。另外，对于刚入行的前端工程师，心态要放对，提需求是产品经理的职责所在，整理出有价值的需求是交互设计师的职责所在，将需求作版本控制分步实现是前端工程师的职责所在，前端工程师没必要去抱怨产品经理提一大堆没规律的需求，而更应当去理解需求缘由，将需求提炼成UC(用例)，让需求在自己手中可控制。只是多数前端工程师缺乏提炼、整理需求的能力，一味的在接需求，才会搞的手忙脚乱，带着情绪堆代码。

　　所以，只有练就了一身本领，才会更有目标的去寻找对产品的责任感和对团队的归属感，不要误以为能切出漂亮的页面就是能力的提高，纯粹的写代码每个人都差不多的，要成为合格的工程师，眼界要进一步放开，前端工程师能做的，不仅仅是切页面而已，作一个精品项目，一定不乏专业的过程把控，这也是大多数人最易忽略的地方。

　　励志之本

　　其实，除了个人需要明确努力的方向，每个人都更渴望身处一个好团队，谁都不希望有猪一样的队友。我们都很羡慕处身这样的团队，可以放心的将精力放在纯粹的技术上，身边每个人都自觉的补充文档注释，代码也层次清晰解偶充分重用率高，精妙的设计实现可以更快的传播，bug得到的改进建议也是务实专业的，技术在这种良性互动中价值倍增。我想这也算是好团队的一种境界了，这有赖于团队成员水平水涨船高。不过，反观Yahoo的成长之路，他们的技术积淀也是靠点滴的积累，其实他们当初的状况不比现在的我们好哪去，10年的进化，才造就了Yahoo技术团队的专业性和Hack精神，我们每个人才刚刚起步而已。为了积攒工作中的幸福感，多付出一些是值得的。

　　但我猜，你现在的处境一定不会太过乐观，产品乱提需求、一句话的PRD、不被重视，被生硬的当作"资源"……反正，情况就是这么个情况，要么你选择抱怨下去，要么想办法去改变。"积极主动"是源自内心的一种坚韧品质，也是励志之本，有些人在现实中被磨平了理想，有些人却在黑暗森林中找到了方向，这就是犬儒主义和英雄气概之间的差别。这自不必详说，因为这让我想起了"大长今"，这简直就是前端工程师的励志典范："这是一个可怕的环境,足以消磨任何人的斗志和信念，所有来这里的人都变得麻木和无所作为，'多栽轩'恶劣的环境没有改变长今，但长今却改变了'多栽轩'所有的人"。

　　如果你想做到"资深"，就一定要想清楚这一点，因为你是团队的顶梁柱(业务)，也是幸福感的源头(士气)。

　　第四日，架构和伪架构

　　代码设计的本质

　　读到这里，你不禁会问，前端领域存在"架构师"吗?这个问题会在后面的"码农的宿命"中展开解释。这里先说下代码架构的一些琐事吧。

　　什么是架构?架构是由"架"和"构"组成，架，即元件，构，即连接件。因此，架构即是将总体分解为单元，然后定义单元之间的连接方式。架构的含义源自禅宗，而禅宗的基本信条则之一就是真理是无法用语言来描述的。这个基本信条有其背景，即语言具有某种抽象性。而人们对这种抽象性的悟道则直接影响对事物的看法，进而决定了对客观世界的分解方法。

　　而在编程语言中，同样存在这种禅宗所隐喻的悖论。在面向对象的教科书中，通常举一些显而易见的例子，比如"水果"是一个类，包含有苹果、桔子、香蕉等实例，"蔬菜"也是一个类，包含白菜、冬瓜、茄子等实例。这两个类之间并无交集，因此很容易理解。但实际项目中情况要复杂的多，比如两个图书类目"文学"和"历史"，那么"明朝那些事"应当是"文学"类的实例还是"历史"类的实例呢?即一旦用语言说出了某一事物，即人为的割裂了世界，于是就会陷入迷途。这在程序设计领域情况更甚，也是造成混乱的主要根源，也就是说，如果你的程序可扩展性不好，一定是程序作者对"单元"的定义不够准确，即单元的概念之间不够"正交"。而这种架构终是徒有其形，根基不稳。

　　因此，变量和类的命名才是真正考验架构功力的关键(命名是否准确清晰、单元之间是否有概念重叠或盲区)，而和所谓"组合"、"继承"、"桥接"等模式化的"外表"无本质联系。

　　伪架构

　　实际情况是，程序员早早的就想让自己和"架构"扯上关系，并自封xx架构师。在项目中应用各种模式分层、解耦方法，每个项目都可以产出一套看上去很复杂的"架构图"，感觉很牛逼的样子，没错，实践这些方法论总不是坏事，但世界观才是方法论的基础，只有在概念上对产品模块有科学的定义，方法论便自然形成了，《编程珠玑》中一再提及数据结构就是静态的算法，在Web前端领域亦是如此，在页面的建模过程中，定义分解维度要比分解方法更加基础和重要。我想阿当可以在《Web前端开发修炼之道》的第二版里加上这部分内容。