与阿里前端工程中台负责人聊聊前端工程化

简介: 前端工程化,是解决前端业务及技术架构日趋复杂问题的必行之道,然而工程化并不是普适的技术或理论,业务类型、场景、技术架构、甚至团队组织架构,均是决定工程化具体形态的必要因素。

1574211895211-2fb272bc-f5a1-48b7-b585-ef4a33267033.png

前端工程化,是解决前端业务及技术架构日趋复杂问题的必行之道,然而工程化并不是普适的技术或理论,业务类型、场景、技术架构、甚至团队组织架构,均是决定工程化具体形态的必要因素。换句话讲,工程化和具体的实践密不可分!为此,本次 D2 特设了前端工程化专场,邀请阿里前端工程之父——阿大作为专场顾问,为大家带来业内优秀的前端工程建设实践、以及实践背后的宝贵经验与思考,希望帮助大家从这些成功案例中获得灵感并发掘到新方向。

关于前端工程化领域,大家心里可能还有一些疑惑,那么今天,就请跟随小编一起,来找阿大聊一聊吧~ ;-)

首先,让我们来认识下阿大——他在 2009 年加入淘宝,负责过淘宝交易、商品等基础业务及机票彩票、一淘等创新业务。到了 2013 年,他开始专注于前端工程化领域,着手推动工具、流程和规范的统一,完成了淘系前端团队整体研发模式的升级,目前负责阿里经济体前端工程化中台的建设。

为了让大家更进一步地了解前端工程化,小编精心挑选了 6 个大家比较关注的问题,下面就让我们跟随阿大的视角和思维一起看看吧。

1. D2 小编:阿大,您在阿里负责工程化的方向建设,您认为在整个前端领域中,前端工程化扮演了什么样的角色呢?

阿大:前端要有危机感。前端工程化这个方向火了几年了,并且已经开始跟 AI、大数据等新兴领域有一些结合。完善的前端工程能力未来一定会替代大部分低端的、入门的前端劳动力。对于公司和业务团队而言,完善的前端工程能力建设又能极大的降低前端技术入门门槛,让更多非前端领域技术人员甚至是非技术人员来完成前端的工作。

2. D2 小编:每个前端同学都应该了解的工程化具体有哪些方面呢?

阿大:我想大部分人最初了解前端工程化都是从代码组织、模块化和打包构建相关工具开始的。特别是 Node.js 的兴起,应该说是前端工程能力建设的助推剂。
我一直有一个观点:越深入的工程体系的建设,对个体的创造力约束也就越大。工程体系的建设是用来解决系统性问题,解决大规模人员协同效率、质量和成本问题的。就个体前端而言,适当考虑使用工具提升自我效率即可。

3. D2 小编:您觉得工程化方向在未来会朝着什么样的方向走呢?

阿大:一个技术发展得是否成熟,很大程度体现在工程化程度上。
前端近几年的快速发展大家有目共睹,大部分公司的前端开发人员已然不再是单纯的前端了!目前,大家会有种前端工程相关领域的讨论和建设比较火热的错觉,但其实它还是比较初期的。随着大前端周边技术的不断完善和充实,未来前端工程能力会更加趋向于一种服务能力,会更好地与机器学习等智能化方向结合。这会极大地降低复杂的、优秀的前端技术的应用门槛,同时也有可能通过完善的工程能力建设,淘汰一大批入门级的、劳动力型的前端职业人员。

4. D2 小编:对于「从 0 到 1 自建团队/业务」的前端团队,您有什么建议吗?

阿大:中小型公司前端团队的规模都不会特别大,一般团队规模在 10 人以内的,我建议不用系统化地考虑工程相关建设。前端同学都很爱捣鼓,充分发挥个体的能动性即可,整体的研发效率和质量不会因为你做了规范或者统一了工具有明显提升,大部分的情况反而是下降的。当团队规模在 20 人以上的时候,协同的瓶颈就开始显现,如果没有有效的规范、流程和工具的约束,20 人的整体产出很大可能是远远小于个体之和,这个时候一定要制定相关的研发规范、统一技术架构,如果规模在 50 人以上的话,就要配以一定的工具和流程来对研发过程进行有效约束,同时需要有研发数据的积累沉淀方式,通过数据指导技术体系优化。

5. D2 小编:阿里前端工程化比较有代表性的产品有哪些呢?

阿大:我在阿里巴巴负责集团前端工程中台的建设,通过工程中台来标准化前端研发过程,从框架规范、构建调试、检查发布和监控运维,全方位支撑集团内几千名前端的日常研发工作。同时,阿里各前端团队也能基于中台的开放能力,结合自身业务特点,构建符合自己团队的前端工程平台。不过这些平台都是服务于内部的,暂未对外开放。外部大家比较熟悉的有一个淘系前端推出的产品:imgcook,它通过智能化的方式将设计稿一键转换成代码,有兴趣的同学可以访问官网了解:https://www.imgcook.com/。另外,近期我们在 IDE 能力建设上做了大量的投入和布局,期望通过 IDE 打通线上线下、内部外部的前端开发生态,本届 D2 前端工程化专场也会有相关主题的分享,大家可以关注下。

6. D2 小编:本次  D2 的工程化专场话题,会倾向于哪些重点方向,会邀请哪些专业讲师来分享呢?

阿大:上面讲到了 IDE,其实本届 D2 前端工程专题的主旋律是围绕 IDE 展开的。除了阿里内部的 IDE 话题,我们还会邀请国内在 IDE 领域有建设积累的前端团队,来讲讲他们在 IDE 能力建设过程中的思考和选择。另外我们还邀请了海外嘉宾,这个暂时留作彩蛋。


想必跟随阿大的思路,大家对前端工程化一定有了更深刻的理解。如果你心中仍有疑惑,欢迎给我们留言,也欢迎大家带着问题来 D2 现场,和讲师大大们进行面对面交流哦。

此外,如果你想了解 D2 话题的最新进展,可以访问 「第十四届 D2 前端技术论坛」进行了解哦~

期待与你在 D2 见面~

目录
相关文章
|
9月前
|
JSON 前端开发 JavaScript
惊艳!阿里开源 15.2k Star 企业级低代码引擎揭秘,如何变革前端开发方式?
阿里巴巴开源的 LowCodeEngine 是一款企业级低代码引擎,具备可视化编排、UI 渲染、代码生成等全链路能力。支持 React、Vue、Rax 等框架,提供高扩展性与类型安全,助力高效开发,降低维护成本,适用于后台系统、多端同步等场景。
1434 1
|
监控 前端开发 JavaScript
前端工程化和传统前端开发的区别是什么?
前端工程化相比传统前端开发,在开发模式、代码组织与管理、构建与部署流程、团队协作、性能优化以及技术选型等方面都有了显著的改进和提升,能够更好地应对现代前端应用开发的复杂性和高要求。
|
前端开发 JavaScript 持续交付
揭秘!前端大牛们如何巧妙利用前端工程化,提升团队协作效率!
【10月更文挑战第30天】前端工程化是将前端开发视为工程项目,通过工具、方法和流程优化开发过程,提升代码可维护性、可扩展性和可测试性,降低团队协作成本。核心工具如Webpack、Git和CI,帮助实现自动化构建、版本控制和持续集成,显著提高开发效率和项目稳定性。
305 6
|
缓存 前端开发 JavaScript
前端的全栈之路Meteor篇(二):容器化开发环境下的meteor工程架构解析
本文详细介绍了使用Docker创建Meteor项目的准备工作与步骤,解析了容器化Meteor项目的目录结构,包括工程准备、环境配置、容器启动及项目架构分析。提供了最佳实践建议,适合初学者参考学习。项目代码已托管至GitCode,方便读者实践与交流。
310 7
|
JSON 前端开发 JavaScript
前端工程化:Webpack配置全攻略
【7月更文挑战第14天】
270 6
|
JSON 缓存 前端开发
前端工程化:Webpack配置全攻略
【7月更文挑战第18天】
276 1
|
缓存 前端开发 JavaScript
前端性能优化实践与工程化
前端性能优化实践与工程化
|
资源调度 JavaScript 前端开发
【前端开发---Vue2】史上最详细的Vue入门教程(六) --- 工程化开发和脚手架、组件注册
【前端开发---Vue2】史上最详细的Vue入门教程(六) --- 工程化开发和脚手架、组件注册
【前端开发---Vue2】史上最详细的Vue入门教程(六) --- 工程化开发和脚手架、组件注册
|
前端开发 安全 JavaScript
前端工程化实战 - 日程管理
前端工程化实战 - 日程管理
170 0
|
存储 JavaScript 前端开发
前端工程化
前端工程化
282 0

热门文章

最新文章

  • 1
    前端如何存储数据:Cookie、LocalStorage 与 SessionStorage 全面解析
    1025
  • 2
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(九):强势分析Animation动画各类参数;从播放时间、播放方式、播放次数、播放方向、播放状态等多个方面,完全了解CSS3 Animation
    435
  • 3
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(八):学习transition过渡属性;本文学习property模拟、duration过渡时间指定、delay时间延迟 等多个参数
    342
  • 4
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(七):学习ransform属性;本文学习 rotate旋转、scale缩放、skew扭曲、tanslate移动、matrix矩阵 多个参数
    327
  • 5
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(六):全方面分析css的Flex布局,从纵、横两个坐标开始进行居中、两端等元素分布模式;刨析元素间隔、排序模式等
    438
  • 6
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(五):背景属性;float浮动和position定位;详细分析相对、绝对、固定三种定位方式;使用浮动并清除浮动副作用
    618
  • 7
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(四):元素盒子模型;详细分析边框属性、盒子外边距
    869
  • 8
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(三):元素继承关系、层叠样式规则、字体属性、文本属性;针对字体和文本作样式修改
    230
  • 9
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(二):CSS伪类:UI伪类、结构化伪类;通过伪类获得子元素的第n个元素;创建一个伪元素展示在页面中;获得最后一个元素;处理聚焦元素的样式
    715
  • 10
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(一):CSS发展史;CSS样式表的引入;CSS选择器使用,附带案例介绍
    405
  • 下一篇
    开通oss服务