链家网前端总架构师杨永林：个人8年架构师成长之路

杨永林，人称“教主”，八年前端开发经验，原新浪微博前端技术专家，现任链家网前端总架构师。长期研究Web访问性能优化和前端框架搭建。
做为初始团队成员，教主参与了新浪微博全部PC版本的开发，其中4~6版以架构师的身份设计了微博PC版的前端架构。在新浪微博任职期间，教主设计实现了流水线加载技术与模块化代码组织，达到了在提升访问性能的同时极大下降了开发成本的目的。主要研究方向是Web访问性能优化与框架组织。在国内为数很少地实现了BigPipe技术，极大地提高了微博的访问速度。同时，微博的前端代码基础包、前端框架和构建工具均出自教主之手。
2015年年末，教主加入链家网，负责前端的总体架构工做。
在8年的前端开发生涯中，教主是如何一步一步地成为知名前端架构师的呢？为什么选择加入了链家网呢？

您在微博和链家都是前端架构师，能说说前端架构师这个工种具体是作什么的吗？

杨永林：我对架构师所担任的职责的认识是一步步变化，慢慢深刻的。

在刚参加工做的时候，我以为架构师就是代码写得又快又好的人，是工程师的晋级版本。

工做过一些年之后，我发现仅仅提升自身的开发效率是远远不够的，团队须要总体的提高。发现这一点后，我开始制做并完善各类开发工具，编写开发框架。

最近几年，随着迭代开发了一些产品本，我又发现以前可以提高效率的框架工具颇有可能在后来成了产品发展的绊脚石。这时，我开始考虑架构设计的指导原则，开始考虑取舍。一些在短时间内可以提高效率但不符合原则的东西，我就选择不作或者想办法在原则的指导下进行改进。好比我相信可变化的代码才是有生命力的代码，在架构设计上我也会趋向于让项目的代码能够一点一点的变化演进，不是那种一言不合就重构到状态。因此我认为前端架构师就是那种在前端领域提出开发的指导原则，在原则下设计开发框架和开发工具，让更多的开发者能够协同工做的人。

您在新浪微博的时候设计了前端架构，可否介绍一下包括了哪些组成部分，有什么关键技术？

杨永林：主要是代码基础包，页面加载框架和前端构建工具。

早期前端开发面临两个主要问题是浏览器兼容和API不够丰富，基础包通常都是用来解决这两个问题。当时新浪有一个本身的Sina包，可是代码比较零散，模式也不统一，各产品线有本身的扩展，一样的功能可能有多种实现，不太好维护。后来我用业余时间开发了一个带有命名空间管理功能的基础包，特色就是简单清晰，易于使用，被团队采纳做为了微博的基础包使用至今。

页面加载框架是被需倒逼着产生的，2010年微博业务膨胀，页面展现的内容愈来愈多，这使得页面响应速度也变得愈来愈慢。我所在的团队接到的需求是要求在内容变多的状况下将响应速度变得更快。

这个时候Facebook推出了BigPipe技术，咱们以为这个理念正好可以解决咱们应对的问题，因此决定实施，但当时Facebook只是分享了他们的作法，并无提供实现，因此对我来讲也是巨大的挑战。我当时将页面划分红多个独立的子模块，模块是彻底能够自主运行的，模块能够嵌套，因此页面就是一批模块的树形堆叠。服务端用Chunked的方式将模块的信息以JavaScript代码块的方式传输到页面，而前端须要作的很重要的工做是管理每一个模块的生命周期。

我很荣幸那时能有机会和团队成员一块儿开发了这个加载框架，咱们多是国内第一个在大型互联网应用上全面使用这项技术的。以后的一年我一直致力于此项技术的优化工做，好比支持服务端乱序输出，保证服务端可使用并行策略，压缩，减小前置依赖条件等，并在2013年与@Laruence（鸟哥）合做实施了CBigPipe（并行的BigPipe）技术，进一步提升了这项技术的性能。微博的V5版的加载性能也达到了顶峰，页面的加载速度几乎至关于静态网页。

前端构建工具是这几年才开始流行，其实早在2008年的时候，新浪就已经使用前端小文件开发，使用构建工具进行开发，测试和上线。如今想一想应该是比较超前了，不过那时的版本是须要PHP、Python和Java环境，团队维护起来比较困难，并且使用的是字符串替换方案，功能比较有限。2012年我将这个工具进行了改造，使其仅须要Node环境，同时支持开发、测试部署和打包上线。因为使用了UglifyJS，有了语法树，我加了一些之前没有的功能，好比预编译的模版引擎、支持模版嵌套和母模版、代码健康度检测、冗余模块分析等。

前端构建工具先后有Grunt/Gulp、Webpack、npm scripts等，您对这些工具备什么见解，哪一个更好？如何选择适合公司产品的工具？应从哪些方面考虑？

杨永林：我以为这些工具备效地解决了前端开发效率的问题，它们的出现都是对技术的推进，若是在我作工具的时候有这些项目的出现，会减小我不少的工做量。至于哪一个更好，我以为，你能掌握哪一个，哪一个就是最好的。由于说到底，工具是为你的业务服务的，你可能须要对它作些改造或者是写一些扩展，在这个时候你发现你对他的熟悉变的很重要。构建工具的迁移成本仍是挺高的，我不太推荐频繁地变动它，因此最好不要追着流行走，仍是要根据本身团队的特色，因地制宜地选择一款合适的。若是不是超大型的应用，其实build的结果的影响并无太大的差别，与其想着哪一个更好哪一个更牛逼，不如将其中一个玩熟玩透。

如何保证团队成员不会踩到一样的坑？在设计框架和构建工具时有无这方面的考虑？请举例说明。

杨永林：首先，制定规范、分享经验是免不了的，但纸上得来终觉浅吧，不少时候，亲身踩一次坑，获得的经验才会深入。而我所要作的是在团队成员踩到坑的时候下降这件事形成的后果。好比我提供的开发环境是能够彻底模拟线上环境的，测试代码和线上保持一致，不少意外状况均可以在开发、测试期被发现。同时，制定的开发规范要由工具检测来保证，不符合规范的代码不可以打包上线。对于规范代码可使用工具计算出业务影响范围，能有效保证测试覆盖面。总的来讲，踩坑没关系，架构来帮你兜底，爬出坑的过程就成为了团队成员所获得的财富。

您认为对Web访问性能的优化须要关注哪些方面？其中，最值得关注的点是什么？为何？

杨永林：我以为性能优化须要方方面面都要兼顾，包括网络时间、服务器计算时间、页面请求数、下载量、页面载入模型等。而这里面任何一项的性能提高可能都须要你修改大量代码或者调整架构来实现，可是获得的效果可能就是一点点。所以不多见到银弹，通常都是一点一点地作出来的。我这里谈两个我以为比较值得关注但很容易被忽视的点吧。

一是你所服务产品的形态，用户关心什么，这是一些工程师比较容易忽略的。有些产品须要用户打开时很快，有些须要用户使用时流畅；有些产品用户能够容忍看旧数据，而有些则必须是新内容；有些产品用户一天打开不少次，而有些看一次就关掉了。这些产品需求的差别都会影响你的决策。

二是评测标准，用什么来测量性能的好坏。一些人认为请求数或者请求量减小了，访问就快了，其实这是不必定的，有可能你花了很大精力作的事情在用户看来并无什么太大变化。因此，找一个评测标准让每个优化在数据上有所体现是很重要的。

度量前端性能的指标有哪些？如何对Web访问性能进行监控？

杨永林：我所服务的产品通常都关注访问性能，也就是用户看到内容的快慢，因此咱们通常用首屏时间来评估，通常的性能检测服务商都能提供这个指标。

选这个指标有两点考虑：一是由于它并非一个技术指标，而是一个感知指标，因此更接近人类的感觉。二是旁路检测，它并不在系统内，不是系统汇报上来的数据，这样就有效的规避了幸存者误差的问题。固然它也有些不足：一是数据采样小，二是能够被欺骗。因此可能须要一点儿统计学功底和性能监控的正确认识。

在监控的过程当中，一是要关注长期趋势的变化，若是不是突发情况，单点的数据的绝对值是没有意义的，要收集长期的数据，分析其中的变化，当有变动的时候尤为要关注数据的变化。二是关注最差25%的情况，有些人，会在公司内网刷本身的产品，感受挺快，其实不论你用什么手段，只要网快，用户的体验都不会太差，体验的差别在于最差那部分用户。三是从不一样维度分析数据，如地区、网络、时段、运行环境等。

前端工程师如何成为前端架构师，除了编程能力和架构知识，还须要培养哪些能力？

杨永林：我想，大部分领域的架构师工做都是差很少的，就是搭建一个解决问题的框架，让团队成员能在框架下良好的配合工做，完成产品的开发需求。

咱们知道，解决一个问题的手段有不少，在这个过程当中取舍就很重要了，咱们也知道，没有银弹，不多能碰见那种全面优点的解决方案，大部分方案都是牺牲掉一部分东西来换取一部分东西。所以，做为架构师，不只要对各个技术方案的特色、成本要熟知（也就是编程能力和架构知识），还要学会如何选择。显然，架构师须要根据产品的特色和发展方向作出决定，在前端领域的架构要能让配合的团队对接的顺畅。那么在这个过程当中，良好的沟通能力、同理心、利他的思惟方式，就显得很重要了。由于咱们不只要完成开发任务，也要思考在本身的领域内如何帮助项目解决问题。

听说有些同事在对技术的讨论中以“击败”您为荣，您是如何看待的？这对团队及其我的的发展带来了哪些影响？

杨永林：这是我一个毛病，喜欢给别人的方案着茬。我以为这是一个思辨的过程，经过从不一样角度分析问题，去挑战解决方案的合理性，才能让问题解决的更稳妥。在知识的获取中也是这样，一次一次地去问为何，去追根溯源，才能让知识体系更牢固。

我很喜欢在团队内扮演一种“反派”的角色，从反面的角度分析问题，去挑战别人的方案。其实，我不是真的去否认他，而是但愿他的方案是通过反复推敲、深思熟虑产生的，这样的方案会更健壮。时间长了，他们会以为我是一个爱抬杠的人，就会作足准备来“挑战”我。能把我说得接不上话来，他们会以为很开心。这个结果是我想看到的，由于这说明团队成员在解决问题时进行了充分的思考。

您为何放弃了在以前新浪微博的元老级身份，而选择加入链家网？

杨永林：这可能源自我对工做的见解吧，我以为人生活在社会上，工做是在为社会创造价值和财富，这和他具体从事哪一种职业没有直接关系。如今行业里有一种风气，就是以为程序员写好代码就行了，不用关心本身作的事情是什么。甚至社会上也给程序员打一些什么“木讷”、“情商低”之类的标签。我以为不该该是这样的，程序员也是社会人，也有他的社会责任，也有家庭责任，也须要陪伴他的伴侣，照顾他的小孩，不是天天只是面对代码而无论其余的事。人不要由于群体印象就把本身限制住，人的生活就应该是多种多样、丰富多采的，人生应该是有意义的。

就我我的而言，在过去的几年，我所服务的产品不只加深了人们之间的沟通和理解，也使得国家的信息变得更透明。而我所作的工做对这样的一个产品作出了贡献，能够说个人工做让世界变得美好了那么一点点。这让我以为个人人生增添了那么一点意义。而当我搭建起前端框架后，我我的能起的做用变得愈来愈小，我能继续创造的价值也愈来愈少，因此须要另外一个平台来继续发挥个人能量。

这时我有机会接触到链家网，这家公司致力于解决人们的居住问题，它让中国最大的市场变得透明、有序。我以为链家网作的是颇有意义的事，同时，它仅仅用了不到两年的时间，就集结了一批各领域的牛人，维护了国内规模最大的房地产交易系统，用技术手段让房屋的买卖变的更轻松、透明、快捷。在与链家网的接触中，我感觉到了那种积极解决问题的活力和务实作事的态度。再加上链家网中大部分技术人，在以前也都是各个大型互联网公司的中坚力量，我想没有什么比与志同道合的人来一块儿改变世界更使人激动的了。此时，鸟哥专门来邀请我加入链家网，我就绝不犹豫地赞成了。

教主答群友问：Q：您对初级前端人员有什么好的建议吗？A：多尝试一些解决方案，多想一想这些方案的特色，对别人的方案深究原理。Q：前端学习方面有什么书籍能够介绍吗？A：如今前端书籍都挺多挺好多呀，我通常推荐高级程序设计，图解CSS3。Q：您在担任架构师这个角色中遇到的最严重的线上事故是什么？当时是怎么解决的？A：工做这么多年，在前端应该就只有一次B级故障，作非前端的时候却是经过大篓子，由于上线速度比较快，并且大问题也都是很明显的解决方案，因此就是快速上线了。这个要感谢测试同窗，很给力，避免了不少线上故障。Q：学前端是否去参加商业培训更见效？亦或是这种商业培训反而更会僵化思惟？这样流水线培训出来的学员在企业承认度如何。A：我没参见过商业培训，也不太好评价，我是以为被灌输的知识可能不如本身躺坑得来的扎实吧。企业承认这方面，我基本只看能力。Q：对于您来讲技术比较重要仍是产品比较重要？由于刚才您说是由于以为链家的“产品”比较有意义才考虑去的，那能理解为你以为产品比技术更重要吗？A：我所说的产品不是“产品人员”，是公司的产出的服务。显然对于一家公司来讲，产品是最重要的，技术是如何实现产品的手段啊。Q：您以为什么样的代码才算是可变化的代码？这方面又作出了哪些实践？有哪些系统化的产出？A：我说变化的代码其实代码是可控的，能够方便的去调整项目，能够一步一步的改造项目而不是重构，我作开发一致遵循这个理念。Q：前面提到搭建团队可用的框架，但我感受这个工做量很是巨大并且须要不少改进和测试，教主当时有同感吗？怎么解决这么大的工做量问题？A：我可能比较幸运，曾经有一段时间来调整结构，我是这样想的，每当我向前迈一步的时候，我就是在进步，因此我没有急于让架构搭建一次到位，我会想好调整的步骤，每一步都会让架构进步，把大问题拆解成小问题一步一步作。Q：小公司开发前端，因为缺乏项目管理经验，致使许多冗余性的工做，请问教主在管理方面有何建议？A：这个不一样公司的状况都不同吧，不太好建议。Q：多尝试一些解决方案和“一步一步逐步改进产品”是否矛盾？A：不矛盾啊，多尝试不表明多实施啊。