阿里妹导读：很多童鞋在上次的问卷调查里表示，希望多推出一些前端方向的内容。今天为大家分享一篇关于前端工程师职业发展的文章，抛砖引玉，期待与大家一起交流探讨。 我是成曰，目前在蚂蚁金服数据平台部任职前端工程师，从事数据中台产品的研发。目前对前端架构与质量、用户体验、TypeScript比较感兴趣。以下我说的都是个人观点，比较宏观粗浅，主要针对的是前端工程师本身，没有深入技术和业务细节，请谨慎参考。 职能概览前端工程师首先是个程序员，其次也是个软件工程师，他们工作在离用户最近的地方，负责人机交互和用户体验，虽然叫“前端”，但其实他们的工作边界其实已经很宽了。展望未来，我想前端的工作会继续分化，也会继续融合，分工是工业革命以来社会高效协作的主要推动力，以后很长一段时间应该也会维持这种形态，融合的原始推动力也是提高效率。分化和融合是不断的演化和互吸收转化的，不过核心的东西我想还是不会有太大变化。观点1.继续分化（领域、行业、技术栈）2.继续融合（端技术、Web全栈技术、人工智能与端技术）3.核心不变（计算机科学本质、软件工程思想与实践、程序员职业素养）1. 继续分化领域前端领域会继续分化，例如阿里内部的前端就已经有中后台、图形、端技术、泛Node、开发者服务5个大方向了，每个大方向也会细分，举一些例子：1.中后台：有云控制台、信息&资产管理平台、内部研发&项目管理平台、人工智能&机器学习平台、数据研发分析平台，企业内部信息平台等。具体产品如阿里云控制台、ERP、PAI、DeepInsight、阿里内外、Basecamp等。2.图形：有基础图形库、3D图形、数据可视化、流程图等。具体产品如G2、DataV、阿里云城市大脑、滴滴智能交通调度图、双十一大屏等。3.端技术：有移动端（iOS、Android、MobileWeb、PWA、小程序）、PC端（客户端、Web端）、触屏电脑、各种监控大屏、智能手表手环，智能汽车&家居屏幕等。具体产品如淘宝支付宝的App、PC主站、移动H5站，阿里郎、VS Code、双十一大屏、UC浏览器UWP版本、各种智能手表、手环、汽车、家居屏幕等。4.泛Node：有工具链、Web框架、IoT、客户端（Electron、NW）等。具体产品如DEF/Atool/F2E-Test（阿里前端开发者工具）、Egg.js、阿里云的IoT应用、VS Code等。5.开发者服务：有应用开发运维平台、组件市场等。具体产品如阿里云的应用搭建平台Boat、Fusion-Design组件市场，支付宝小程序开发者工具等。行业2B信息管理、财务、建筑、航天、水利、金融、制造等传统行业软件以及阿里提出的五新：新零售，新制造，新金融，新技术和新能源，新技术赋能传统行业SAAS软件及服务：如Teambition、Trello、钉钉企业版、Basecamp、http://Growing.io2C移动App：如微信、微博PC工具应用：如Google Doc产品展示类网站：如阿里云、支付宝官网技术栈React（Native）Angular（NativeScript）Vue（Weex）2. 继续融合端技术前端、客户端技术思想的融合组件化（组件化搭建页面）组件生命周期钩子函数（如iOS ViewController）MV*（如MVVM设计就来源于微软客户端开发框架）大前端的统一虚拟DOM技术：React/ReactNative/ReactCanvas各种移动设备内核和引擎的统一：WebKit/V8Web技术文档的统一：Mozilla Web DocsWeb全栈技术前端、后端技术思想的融合MV*（如前端的第一个MVC框架Backbone.js就来自于Ruby on Rails开发者）AOP、依赖注入（Angular）GraphQL（SQL）IndexedDB（Database）人工智能与端技术人工智能、前端技术的融合端是最终触达用户的节点端数据采集->后端机器学习、数据分析->智能推荐呈现物联网、前端技术的融合智能家居/汽车/工业设备可能是有屏幕的，同时可以基于如JerryScript这样的JS执行引擎使用Node.js开发联网应用3. 核心不变计算机科学本质/软件工程思想与实践/程序员职业素养。计算机科学基础：如基本的操作系统概念和计算机组成原理，算法和数据结构基础等等。软件工程思想与实践：如软件开发模式，设计模式，架构思维，自动化思维，单元测试集成测试，UML等等。程序员职业素养：如对代码整洁和可读性的追求，对软件开发的热情，对编程技艺的自我提升等等。历史回顾回顾过前端的演化，主要参见最底下的相关资源，下图简要回顾一下95年以来软件开发和前端历史：前端的未来那些生存空间越来越小的产业1.小规模移动App：移动App市场被一些巨头把持，小规模App生存空间越来越小2.PC信息导航类网站（网址、购物、论坛、生活）：现在移动优先，而且有智能推荐，并且是强社交无界面交互Web前端能做一些事，主要是大前端的范畴1.会话式界面（视频语音会话、语音搜索：WebRTC，开源语音库：Common Voice）2.感官式界面（视觉：WebAR/WebVR）3.无界面，未来会有大量IoT设备（IoT有自己的通信协议和规范，前端的工作是在用户看不见的后台）富界面交互大量工作需要前端来做：1.日常办公软件（复杂应用，并且慢慢从桌面程序演化为Web）：Office、Email、文档管理、产品设计、项目管理、代码编辑器2.大数据/AI配套软件（复杂应用，并且慢慢从桌面程序演化为Web）：需要大量的后台系统来做数据分析/机器学习3.播放器/游戏：H5代替Flash，如Web Audio、Web Video、Canvas4.容器/DSL/内核/小程序：支付宝/微信/钉钉容器，内核（也就是UC、QQ浏览器内核），及其自定义DSL（如果将来手机的底层能力都可以上浮到小程序，很有想象空间）5.产品信息展示类网站（炫酷应用）：各种智能设备官网、大企业官网未来在哪里？回顾观点1.继续分化（领域细分、行业细分、技术栈细分）2.继续融合（端技术融合、Web全栈、人工智能与端技术的融合）3.核心不变（计算机科学本质、软件工程思想与实践、程序员职业素养）一些建议1.关心人工智能的发展，思考TA在前端领域可能产生的应用场景视觉稿自动生成代码根据用户使用习惯自动排出最符合该用户习惯的界面收集用户数据在前端实时做学习和分析，如deeplearn.js2.相信前端的未来，Web的力量WebKitV8Flexbox：Yoga3.结合公司业务特点有重点的关注前端的某些方面，毕竟技术服务于业务后记：前端的发展超出了所有人的想象力，未来肯定是难以预测的，也没有做预测的必要，我们要做的还是踏实做好眼前的事情，“过往不恋、当下不杂、未来不迎”，与君共勉！ 如对我们团队有兴趣，可以发送简历至tao.qit@alibaba-inc.com，期待你的加入~在你眼里，前端工程师应如何打磨手艺？欢迎在留言区一起交流讨论～相关资源Web开发这十年：http://www.infoq.com/cn/articles/web-development-ten-yearsGUI应用架构十年变迁：https://segmentfault.com/a/1190000006016817大话前端时代一：https://halfrost.com/vue_ios_modularization/写给初学前端工程师的一封信：https://zhuanlan.zhihu.com/p/28536429母鸡与前端工程师：http://www.ruanyifeng.com/blog/2016/07/hen-and-front-end-engineer.html李开复人工智能预言：http://tech.sina.com.cn/it/2017-05-20/doc-ifyfkqks4361454.shtml《无界面交互》：https://book.douban.com/subject/26947799/}

Web 前端的困局与突破每个Web前端都会不时思考自身对于团队的价值和在团队中的话语权困局困局必然是负能量,耐下心来了解困局后再看突破.价值在团队中前端的职责是实现原型和设计工作中的客户端部分,是实现者.很少参与功能/程序设计.极少数业务场景下是重前端的.需要前端实现可视化编辑组件(可视化创建页面/Web编辑器).这样的团队少之又少.大部分情况下前端的职责就只是实现产品设计.前端巧妙的程序设计,优秀的页面大部分情况下与商业逻辑是无关的.技术是依附于商业生存的.在客观的管理者视角看,前端是有价值的,但在技术团队中前端的价值不重要.只要把活干好了,别出错就可以了.也不需要维护管理公司命脉数据库.价值的意义:收入,市场竞争力都是基于价值的话语权从项目管理的角度看:产品同事对项目有绝对的话语权,设计同事是产品同事的下游,是基于产品同事的要求完成界面设计工作.后端同事看似也是实现者,实则是后端是程序设计者当前端遇到上下游意见相左时,因为前端的分工是实现者,所以往往前端是没有话语权的.有些人常说的用户体验,实际上这个活是UI设计干的活,前端只需要做到快速的基于设计完成客户端开发.并保证客户端的加载性能.高流量多信息聚合的页面需要基于前端的专业意见去协作开发,不过这种情况太少了话语权的意义: 决定项目中与前端相关的问题能用你的专业想法解决,而不是由"外行"解决.恶劣的的工作环境没有产品原型没有设计稿没有后端接口文档联调阶段扯皮以上问题在很多小团队出现的特别频繁,严重影响了工作进度.前端是实现者,要基于设计去实现,基于实现去"消费"接口.3 4 问题是出现的最频繁的,扯皮无止境,不停的内耗.天花板随着三大剑客(react vue ng)的流行,基于成熟的组件库能极大的提高前端开发效率.大部分团队不需要再造适合公司业务场景的组件轮子.从业两三年就可以达到日常90%的页面开发工作是"机械化"的.大量的时间反而是解决上节说到的恶劣的工作环境前端工程管理,前端开发流程的制定,前端架构设计这些都是由前端话事人去设计和执行的.在技能水平+经验+对团队的了解程度+话语权上都应该由前端话事人去解决.大部分前端只需要遵循团队流程规范即可.JavaScript与NodeJavaScript 是困局这一点是很多人没有意识到,也不认同的.JavaScript 过于灵活宽松让代码不易于维护.动态语言在大型项目会降低可维护性. TypeScript 的类型系统需要对JavaScript 妥协.始终让前端在语言层面无法使用类型系统方便的写出分层明确和易于维护的代码.这点不深入讨论,了解过其他强类型系统语言再来使用 TypeScript 写非常严谨容错率低的代码自然就能明白.很多团队希望使用 Node 去提升自己的话语权,殊不知必须 Node 与公司所遇到的场景和问题契合才能解决问题.大部分情况下不是要去使用Node完成项目View渲层染工作来更好的解决问题,而是在与抢现有后端同事饭碗.这自然会面临多方面的质疑和攻击.不要把自己限死在 JavaScript ,前端掌握当前团队的后端语言不是啥坏事.不是每个项目都需要要SSR.都需要使用Node进行前后端分离.突破困局有:价值话语权恶劣的工作环境天花板JavaScript一句话就能说明白如何突破:不要把自己限制在客户端的实现者,让自己参与产品程序设计,精前端,懂业务,懂后端.恶劣的工作环境当没有产品原型和设计的情况下,正确更多的时间,去了解产品需求,使用前端界面作为"原型".完成部分产品没时间或者认为不重要的产品设计工作.没有设计的情况下基于成熟的UI组件,antd element 完成表单类的开发,一些交互设计自己做主设计交互细节并实现.没有设计的情况下大概率你能做主.当后端给不到接口时,在前端角度维护接口文档,通过接口更深入的理解程序设计.有理有据的要求后端同时配合你给到接口让你使用,因为客户端是接口消费方.如果后端给不到接口就自行模拟接口,再联调的时候再修改也无妨,这样单前端定义接口的过程就是在进行程序设计.基于客观接口进行联调,避免主观争论.善于使用错误追踪系统记录错误,例如 Sentry . 有理有据的去排查问题,定位问题,给出问题修复报告.防止莫名其妙背锅.愿你不遇到恶劣的工作环境,遇到相互配合的好同事天花板与JavaScript在前端角度不要局限于 Web 前端,在吃透当前工作环境时去了解其他客户端技术,比如各类小程序, IOS Android.Swift Kotlin Java 都是不错的语言,了解他们后再回头写 TypeScript 会对编程有新的认识和理解.不要局限于前端,在项目中了解目前团队的后端语言和后端知识.参与后端提供的接口中数据类型的定义,(类似 TypeScript 中的 interface).了解后端语言(PHP就算了),对项目后端的程序设计有足够了解.必要时尝试参与后端开发,先完成一些简单不重要的后端工作.大部分情况下足够努力的前端做个三五年很容易在小团队做到天花板.不考虑换工作的情况下,去向全栈发展是个很好的选择.只有掌握了程序设计才能掌握话语权.现在很多人错误的理解了全栈,认为会 node 写个编译工具就是全栈,不要局限于掌握的后端语言是 Node . 使用 Node 能免去学习一门新语言的好处没有那么重要,反而会将你局限在 JavaScript.了解一门强类型语言,了解各种后端技术.了解其他前端领域.价值与话语权吃透目前工作环境所需要使用的前端技术后,由实现者变为程序设计者不要将自己局限于"页面仔".去理解了解业务才能提升自身价值.总结始于前端,不局限于前端.不要把自己限制在客户端的实现者,让自己参与产品程序设计,精前端,懂业务,懂后端.原文地址 https://github.com/nimoc/blog/issues/35 (原文保持持续更新和更多的评论)}

前端后几年的整体发展大方向应该可以用这几个关键词进行概括，可以多围绕这些方向进行学习：学会利用Web技术由Runtime解析执行Embedded（嵌入式）Multiplatform （多平台）如果从90年代开始梳理可以发现前端在这30多年的一个整体的变化趋势：从上图可以非常清楚的看到经过多个年代的发展，各种框架应用层出不穷，从最早支持的浏览器到现如今的移动端、桌面端甚至 iot设备上。但可以发现一个规律从微信推出小程序开始，小程序成为了这几年迅速发展的方向之一。在这里就说下上表中提到的最新的 FinClip Mini-Apps ，其实就是一种小程序容器技术，具备以下特点：1、轻量：小程序形态2、高产：提供runtime，采用动态语言（JS）和声明式View构建（XML） ；兼容互联网主流小程序技术；可采用vue、react基础上的DSL框架；易学，低门槛3、通用：runtime基于浏览器内核-完全基于互联网标准，无封闭技术存在4、普及：三个维度的支持5、优化：有无限的互联网技术框架可借力，向兼容web标准和未来技术成果（秉承web的开放）时间有限就不多讲了，感兴趣的也可以直接到 FinClip 体验。}