前端工程化思考

2022.7.25 星期一 :

这也意味着对我们的要求已经不再是“前端开发”,而是 “前端工程师”,时代要求我们要有工程化的思维和工程化解决问题的能力。

大义:前端的尽头是哪里?

前端(或者工程)的出路在哪里?

技术框架不断更新,vue2->vue3, react 18, taro, 各种小程序,uniapp,rn,flutter,electron等。
版本管理svn->git;项目管理:单工程,多工程,monoresposi; 构建工具:grunt, gulp, webpack,rollup,parcel, snow;
babel, eslint;typescript; next.js;pm2等。
node服务层,serverless;jenkens, k8s;sass,pass;云服务等。
低代码,可视化;webassembly, cocos, 白鹭;webgl, ai,算法/机器学习,区块链/物联网,web3等。

知其然知其所以然。
一通百通。
最后剩下的能力是什么。通用的,跨行业的。

大前端或全栈,架构师都不是最终通路。

前端工程化一定是大趋势,但不建议大家盲目地追求工程化。

前端工程化了解

基础定义/了解

前端工程化的定义

前端工程化就是指遵循一定的标准和规范,通过工具去提高效率,降低成本的一种手段。…以前刀耕火种的方式已经完全不符合当下对开发效率的要求了,前端工程化就是在这样的背景下被提上台面,成为咱们前端工程师必备的手段之一。

前端工程化主要解决的问题

  • 传统语言或语法的弊端(es6、es7等新特性;sass、less预编器等)
  • 无法使用模块化/组件化
  • 重复的机械式工作(如部署上线前需要手动压缩代码及资源文件、部署过程需要手动上传代码到服务器)
  • 代码风格统一、质量保证
  • 依赖后端服务接口支持(部分功能开发时需要等待后端服务接口提前完成)
  • 整体依赖后端项目

前端工程化的表现

一切以提高效率、降低成本、质量保证为目的的手段都属于「工程化」

示例图以最简单的项目开发流程为例,每个步骤都可以通过工程化的方式大大提高开发效率
前端工程化流程

工程化 ≠某个工具

这里强调一下,工程化并不等于某一个具体的工具,为什么这么说呢?因为现阶段有部分工具功能过于强大,比如webpack,这让很多新手误认为工程化就是webpack,只要用了webpack就代表有了工程化。其实不是这样子的,工具并不是工程化的核心,工程化的核心应该是对项目整体的一种规划或架构,而工具在这过程中只是用来帮我们落地去实现的这种规划或架构的一种手段。

进一步阐述

前端工程化是对模块化,组件化,规范化,自动化的高度概括和总结凝练,是一个更高层次的思想,也就是说实现前端工程化应该从模块化,组件化,规范化,自动化四个方面着手

  • 模块化(js 模块化、css 模块化、资源模块化)
  • 组件化(复用现有的 UI 结构、样式、行为)
  • 规范化(目录结构的划分、编码规范化、接口规范化、文档规范化、Git 分支管理)
  • 自动化(自动化构建、自动部署、自动化测试)

工程化课程

1、什么是前端工程化?
简单来说,前端工程化可以提升开发体验、提高开发效率和质量、提升应用的访问性能,一切以提高效率、降低成本、质量保证为目的的手段都属于工程化。前端工程化不等同于Webpack,它主要包含从编码、发布到运维的整个前端研发生命周期,把软件工程相关的方法和思想应用到前端开发。

2、为什么大厂会着重考察前端工程化?
随着前端技术的不断发展和变革,其业务逻辑逐渐变得复杂多样,企业对于前端的应用功能要求也跟着不断提高,例如优化开发流程,提高编码效率和质量,提高项目的可维护性…从一个项目搭建再到部署上线,这里面的每一个过程我们都可以通过前端工程化,提高工作效率。这也是为什么大厂会要求员工会前端工程化的一个重要原因。

其次,前端工程化是大厂前端开发人员的必备技能,从开发,规范,测试,lint,构建,部署,监控,集成,微服务等多个维度,以组合拳的形式,场景化的提升前端工程师的认知。

3、为什么要学习前端工程化?
有人说:我不进大厂是不是就不需要学习【前端工程化】了。

大家都知道,早期的前端开发只是实现页面,在一些场景下被认为只是日常的一项简单工作,或只是某个项目的”附属品”,但随着需求的增加,前端开发的复杂度和规模也越来越庞大,在这种情况下,前端工作已经无法抛开工程化单独开发了。懂工程化是前端开发人员的刚需,不懂工程化,连项目都不会启动。前端工程化是前端工程师的必备技能,不管是创建项目还是开发发布项目,前端工程化已然成为行业公认的项目提效主流解决方案,是高级开发者必会、必用的一环。

从就业升职来看,掌握了前端工程化的同学,你就获得了显著的职业竞争优势,它将成为你晋升前端leader,或者架构师的重要基石,所以,可以说前端工程化是非学不可,所有前端同学都绕不开这个问题,如果你现在还不了解前端工程化,将注定与大厂无缘。

从技术能力来看,遇到项目只会开发,不懂原理,长此以往下去,你就只能做一名普通程序员,只能搬砖,更加无法成为架构师。说的再现实些,现在职场内卷那么严重,不懂前端工程化,未来有可能连工作都找不到。

从薪资来看,同样是前端开发,“前端工程化” 是高薪和底薪岗位的关键分水岭,要求掌握“前端工程化”的岗位,起薪≥30K,不要求掌握“前端工程化”的岗位,起薪≥ 10K。先人一步掌握前端工程化,就等于提前掌握了高薪密码。

4、这样一门复杂的技术,都要学什么?
5、如何系统化学习前端工程化?

# 4 漫谈前端工程化基建和架构设计
另一方面,我很理解求职者,他们也面临困惑。

  • 该如何避免相似的工作做了3年,却没能积累下3年的工作经验?
  • 该如何从繁杂且千篇一律的业务需求中抽身出来,花时间总结经验、提高自己?
  • 该如何为团队带来更高的价值,体现经验和能力?

### 从前端工程化基建和架构设计的价值谈起
这里的“好项目”是指:你能在项目中从0到1打造应用的基础设施、确定应用的工程化方案、实现应用构建和发布的流程、设计应用中的公共方法和底层架构。

只有系统地研究这些内容,开发者才能真正打通自身的“任督二脉”,实现个人和团队价值的最大化。

我将上述内容总结定义为:前端工程化基建和架构设计。
### 我理解的“前端工程化基建和架构设计”

工程化实现

工程化思考

什么是前端工程化?
2020 年的 1024,我司举办了一场内部技术大会,我分享的主题是:《Worktile 前端工程之路》,我也认真的思考了一下题主的问题:什么是前端工程化。前端工程化每个人都有不一样的理解,也没有一个权威和标准的定义,只要我们清楚为什么要工程化和工程化的意义那么具体的定义就变得不那么重要了。

什么是前端工程化?
谢邀。前端工程化一定是大趋势,但不建议大家盲目地追求工程化,对于大部分规模不大的前端团队而言,工程体系的建设和规范并不是当务之急。
本篇内容来自于阿里巴巴淘系技术部高级前端技术专家阿大受 InfoQ 采访邀约的分享。

工程化内容

同 #工程化实现
参考:!前端工程化流程图

knowledge is no pay,reward is kindness
0%