前端架构师听起来是个高大上的职位。在大部分程序员眼里，架构师一般都是从事后端开发的，Java或者C++出身。他们通常具有这十八个特征。武术可以解决商业中出现的各种问题。架构师好像从来没有和前端沾过边，真的是这样吗？看完这篇文章，你会豁然开朗。前端的意义首先说一下我们的工作，前端的意义。前端来源于用户界面，是最先接触用户的地方，也是衡量一个项目产品好坏的第一关。什么是前端？从最早的DOS系统开始，那时候还没有前端的概念。大部分的软件界面都是用黑白字符显示console命令，这样慢慢的，不仅是用户，就连广大的程序员也不满足于现状，纷纷开发了一套图形化的用户界面，让一些功能变得更简单操作。当时前端被称为GUI（图形用户界面）。多终端的概念目前还没有区分，大多是基于操作系统开发的原生界面。上图来自DOSNavigator，一款经典的DOS系统软件。随着互联网的发展，第一代浏览器网景浏览器（NetscapeBrowser）的诞生以及随后IE系列浏览器的问世，“上网冲浪”这个词逐渐走进了大多数网民。用户的生活。直到现在，流行的浏览器Chrome，以及国内的各种浏览器都百花齐放。主要服务于浏览器，实现各种特效的JavaScript语言迎来了第一波春天。上图来自Netscape浏览器。到现在，前端逐渐拆分为：Web前端（HTML+CSS+JavaScript）、客户端前端（Android和iOS）。或者web重构工程师、JS工程师、UI/UX、兔兔等等。所以归根结底，这些都是为前端服务的。说了这么多，前端的价值是什么？前端的价值在哪里？实现界面交互。改善用户体验。第一点是前端岗位，这是职能和后端的主要区别，也是前端岗位存在的原因。第二点不用多说，好的前端有利于用户体验。如果后端的目标和价值体现在服务的高性能、高可用性、可扩展性和安全性上。那么前端的价值体现就是“用户”二字。因此，作为一个合格的前端开发，其目标是让用户感觉舒服（酷），所以为了充分体现你的价值，你需要一步步完成以下步骤：product，完成业务对应的前端页面UI展示，并与用户进行交互。编写可维护性高的代码，减少BUG的产生，保证良好的用户体验。在完成功能的同时，能够熟悉现有业务，提出可持续的改进方案，并付诸实践进行优化。看完以上文章，是不是有种似曾相识的感觉，是不是招聘信息里的京东呢？其实是的，作为一个公司，招聘前端开发人员一定要能够给公司带来价值，这本身也是你价值的一种体现。然而，我想说的是，看似简单的3项你真的了解吗？第一项和第二项是你技术能力的体现。这部分完全取决于你的技术积累。那么第三项就是你主要主动性的体现。这部分有很多地方可以发挥。一个新人和一个工作有经验的人之间的差距可能会体现在这里，我们以后再说。但是，我想说的是，仅仅完成以上三个步骤，只能说明你是一个合格的前端开发人员，这离架构师还有一定的距离。前端价值体现真的重要吗？好了，上面我们明白了前端的价值，前端开发者还在努力的去体现自己的价值，但是却让人纠结，前端是有价值的，但是这个价值真的重要吗？相对于非前端技术，对于一个成熟的产品业务来说，前端往往是很薄的一层。这一层给你的功能主要是页面的UI展示和用户交互。前端虽然是产品和用户之间的第一道关卡，但也只是第一道关卡，后面可能还有十几道关卡。比如从事后端逻辑，底层数据库，网络安全，运维，大数据分析，或者现在流行的机器学习的相关人员。每个相关模块都有自己独立的技术体系，可以说是缺一不可。因此，相对于这些前端以外的技术，前端并没有那么“必须”。也就是说，前端确实有价值，但是从全局来看，前端产生的价值并不是核心价值。产品业务的重要性现在再举一个比较实际的例子，对于前端开发，在一些一线的互联网公司，比如BAT等，这些公司还是非常重视前端开发的，并且有自己的产品业务线。整个前端技术氛围很好，可以利用前端技术不断提升产品的用户体验。但是对于另外一些中小型公司或者企业来说（相信你们不都是BAT的），很多前端开发的技术含量并不是很高，尤其是一些toB业务，核心功能都来自于后台-end，来自数据库优化。或者一些突出的AI功能产品，这些产品的核心竞争力甚至可能来自于硬件和算法。前端扮演的大部分角色是UI展示、数据可视化等。而且很多工作都是重复性的工作，有的甚至可能由后端开发人员兼职。因此，对于一个业务的重要性，前端能够体现其价值的还是很有限的。当然，这里说的并不是要传达给大家：前端不行，赶紧转行吧。这种想法，当然还是要吃饭的。在这里我想说的是，让大家时刻保持危机感。这种危机感是我们不断研究和推进技术，不断发展和前进的动力。前端技术的进阶在成为架构师之前，需要有足够的技术储备，这可能不仅仅局限于前端技术。当然，这里我先介绍一下前端的一些技术需要如何进阶。性能优化在大厂工作过的同事应该都知道，性能优化是敲门砖，因为如果要衡量一个前端开发是否真的有经验，性能优化是一个分水岭，其相关流程主要包括：第一，如何发现问题。发现问题后，如何分析原因。找到原因后，采用最佳解决方案。解决之后，是否真的提升了用户体验。从这些问题中可以衍生出各种值得深入研究的问题，可以找出一些方法上的问题，所以性能优化是很重要的一点。当然，这里不谈具体的优化。推荐阅读这篇文章《移动web性能优化从入门到进阶》。对框架的理解要想成为架构师，不能只停留在框架的API使用层面。对于最流行的三种前端框架Vue、React、Angular，掌握它们的基本用法是很有必要的，但也是最简单的。现在网上有各种各样的课程，可以让刚毕业的实习生轻松上手，培养做项目的能力。那么，为什么一个需求可以由实习生来完成，为什么选择你呢？因此，掌握框架的原理，理解其中的思想，举一反三是拉开与大多数前端程序员差距的关键。下面我就用Vue给大家举几个例子，看看你们是不是真的掌握了。Vue中的双向绑定只是一个简单的Object.defineProperty()吗？Vue的数据依赖是如何实现的？Vue的computed和watch有什么本质区别？keep-alive的实现原理？你不妨试着去理解这些问题的基本要点，并尝试从源代码中寻找答案。在理解源码的同时，有利于对框架本身的理解，有助于提高解决问题的能力，减少出现bug的几率。深入Node.js领域Node.js是前端工程师接触后端逻辑的利器，也给了我们抢后端工作的正当理由，但这里的Node.js确实不是单指后端逻辑的开发。比如在现在的前端工程体系中，起着重要作用的webpack、parcel、vue-cli等，或者让JavaScript开发PC桌面程序的Electron，都离不开Node.js。这里举几个例子，大家可以尝试从这几点出发：与浏览器端的JavaScript不同，Node.js后端直接面向服务端，如何定位分析内存泄漏。尝试编写一些webpack插件。Canvas和WebGLWebGL是一种基于OpenGL的Web3D图形规范和一组JavaScriptAPI。简单来说，它可以看作是3D版的Canvas。当然，说到这个方向，可能有人会觉得有点偏。的确，对于大多数前端开发来说，使用WebGL相关的3D处理技术和算法并不需要掌握复杂的算法或数学知识，只需要学习three.js即可。但是基于Canvas或者WebGL可以为我们提供一些特定问题的解决方案。这里也给你举几个例子：实现刮刮卡或涂鸦墙的业务需求。图片在上传时被压缩和裁剪。在实现帧动画方面，使用CSS3和Canvas选项。上面的场景就像你拿到这些需求的时候，如果你完全不了解Canvas或者WebGL，你可能永远不会想到这些解决这些问题的技术方案，所以并不是说你对Canvas或者WebGL了解的很透彻.但是作为架构师，你需要有一定的技术广度来拓宽你的技术栈，提高你解决问题的能力。架构师之路说到这里，好像才进入正题。基础进阶知识是你晋升为高级前端的必要条件，但不是你成为架构师的核心。俗话说，一专多熟，首先要精通一门。前端知识的进阶是架构师的突破口，所以你首先要明白一件事：在掌握前端技术的同时，还需要学习前端技术以外的技能。只有跳出前端思维，才能看到更多。所以如果你想从前端资深人员晋升为架构师，不妨看看下面的内容。如果你只会写前端页面，那么你的技术再熟练，也只能称为HTML高手。真正的架构师需要具备跨界能力。随着技术的不断进步，这种通过跳槽来升级技术架构的案例会越来越少。结构层面的新变化，将来自于岗位自发地重新定义自己的工作内容和职责，也就是这里所说的边界。所以并不是说作为前端开发岗位，不能做前端以外的事情。你必须尝试超越界限去思考和解决问题。页面的二次打开是衡量一个前端优化的重要指标。我们用这个优化点来总结一下各方面的进步：提高速度，从服务端渲染开始，用Node.js跨到后端。改善移动端H5页面的启动时间，从webview入手，利用iOS和Android的技巧，跨到客户端。用户交互操作体验也是衡量前端优化的重要指标。我们用这个优化点来总结一下要跨越哪些方面：提升用户交互体验，尝试客户端网页，基于ReactNative或者Weex，也可以到客户端跨越。提升页面动画效果，编写高性能的前端动画，也向UI动画设计迈进。合理的跨界可以让架构师对业务整体有深刻的理解，可以针对各种问题提出非前端的解决方案。早期采用者技术在不断发展。作为架构师，不断学习新技术非常重要。这里所说的尝鲜，是指对技术保持一定的热情，而不是满足于现状。说白了就是要继续学习。如果你习惯了jQuery开发页面，试试Vue和React。长期写ES5代码，学ES6也不错。沉迷于HTML、CSS、JavaScript开发页面，还不如学学Flutter。要创建高性能Web应用程序，请尝试ServiceWorker。从HTTP协议触发，升级spdy和HTTP2，试试HTTP3。尝试一种新的编程语言：WebAssembly。知道服务，但你知道微前端吗？上面列举的尝鲜技能，可以从前端的角度触发，继续深化。保持对每项新技术的好奇心对架构师来说至关重要。工具和平台建设只会写代码的程序员只能称为码农。当技术达到一定高度后，进一步提升业务的能力会逐渐降低，所以我们不妨跳出技术本身，围绕业务完善工具平台，同时也为业务服务。作为架构师，必须要有这个能力。说到工具平台，每个人很快就能在自己的团队中使用一些工具。在这里我们主要和大家讨论一下，我们应该用什么样的思维去规划和审视我们的工具体系，同时也看看我们还有哪些可以进一步完善的地方。为了更普及，这里举几个工具平台的例子：对于开发和调试，需要一些提高开发效率的工具，比如移动web常用的Fiddler，或者小程序模拟器。对于性能测试，需要有一些工具可以在发布后进行压力测试和在线回归测试，比如腾讯wetest。对于统计分析，每个业务都需要可以提供给产品人员观察数据的工具。当然，由于数据的敏感性，这里的每个团队一般都有内部工具和外部类似的工具，比如谷歌分析。可以看出，工具平台主要是围绕我们研发过程中的各个关键节点搭建的。结合起来，我们可以称之为工程。工程化是近几年非常流行的一个概念，对于前端来说也是一个非常明确的前端发展方向。实际上，工具平台的完善过程就是架构工程推进的过程。作为架构师，需要有敏锐的嗅觉才能洞察这些节点。并且在合适的时候，可以做出可以提升业务的工具平台。当遇到重复性问题时，想想是否开发一个自动化的工具平台来处理。这是代码解决方案之外的业务提升。流程和规范化身为架构师，流程的制定和规范是非常重要的。不要小看规范的力量，它可以大大提高开发效率。真正优秀的规范不会让用户感到拘束，反而能帮助用户快速定位问题，提高效率。这里的规范可以概括为：结构规范：对于项目的代码结构，无论前后端，合理的分层和组件化都是非常必要的。编码规范：这个主要是codereview。最好在定期执行代码审查时使用一些自动化工具。流程规范：项目审核、研发、测试、发布等阶段都需要流程约束，需要结合自己团队的实际情况制定。规范的实施：规范最重要的是实施的实施。规范制定后，需要不时检讨是否真正执行。这应该是每个团队成员都坚持的基本原则。方法论所谓的方法论，光说起来可能还是比较抽象的。这里的方法论主要是指完成一个小需求或者承担一个大项目。在具体的实施过程中，要有一定的方法和技巧，相信大家都看过视频《穹顶之下》，这是一个很强的方法论体现。其实说白了，做事要有套路。下面是一个性能优化的例子。在优化性能的时候，我们如何证明优化是有效的呢？我们可以用“三明治法则”（自己取的名字）：首先，在优化之前，我们要弄清问题的现状，有数据支撑优化前的状态。所以要学会收集数据。有了数据之后，我们需要在分析数据的同时找到问题的原因并付诸实践。这个阶段需要记录下具体的优化原则。优化之后，需要想方设法去验证，而在验证的过程中，也需要收集数据。至此，我们有了优化前的数据，优化的原理，优化后的数据。通过数据对比，我们很容易证明我们的优化是有效的，我们可以做一个非常漂亮的总结。作为一个建筑师，这是树立威信的一个很好的场景体现。我们可以发散，上面三个步骤可以再次迭代，也就是说第一次优化，我们已经达到了效果，但是进一步研究之后，我们可以再次优化，每次优化都有数据证据，这就是性能的Methodology优化。安全意识这里为什么单独提到安全，因为对于一个企业来说，安全是第一要素，就像一个国家一样，安全稳定是一切发展的前提，一旦业务出现安全问题，可能是lostinstantly失去一切的代价是非常高的。所以，作为架构师，一定要保证业务的稳定性。可以总结出以下几点：对低级代码安全问题要坚决说不，比如前端的xss、csrf问题。对于大型运营活动的需要，必须要有容灾意识和备份，比如在准备一套计划的同时，要有一个可选的备份计划。尝试使用工具来解决和预防安全问题。比如BAT这样的大企业，在运维和代码层面都有一层保护机制，比如腾讯的门神系统。团队合作没有完美的个人，只有完美的团队。即使他是建筑师，我相信他也不是一直在孤军奋战。一个优秀的产品业务总是诞生于一个团队，所以时刻保持与团队成员的沟通是必不可少的。这些交流不局限于日常的文字，或者会议，甚至是私人的团建活动，都可以互相理解。因此，团队合作的目的是让团队中的每个人都能明确自己的职责，实现自身价值的最大化。建筑师有义务维持这种合作关系。而对你的认可，也是团队成员对你的认可。只有保持良好的氛围，才能让团队成员信服。最后总结一下，对前端架构师的一些误解：架构师不等于全栈工程师。架构师不应该完全脱离代码，但也不要一直写代码。架构师应该跳出技术本身，站在全局的角度看业务，发现问题，解决问题。任何项目的架构都不是一开始就固定下来的，应该是不断迭代演化的，架构师有义务保证架构的创新性。最后，希望各位前端同仁能够在架构师的道路上披荆斩棘，一帆风顺！
