前端基建介绍

387 阅读9分钟

1. 前端规范(Standard)

正所谓:前端不规范,后面看着办 ~

前端规范的意义:

  • 降低开发的成本;
  • 保证代码的一致性;
  • 提升团队的整体效率;

前端规范有什么?

1.前端规范.png

2.前端文档(Document)

其实在许许多多的小型公司,文档缺失是一项必不可少的问题;无论是 业务文档,还是 技术文档,还是 其它文档等等;

一个合格的公司文档是必不可少的,无论是 新人自治,还是老带新,业务转岗 等等;

前端文档的意义:

  • 对新人友好,快速上手;
  • 快速融入团队;
  • 快速了解业务;

前端文档有什么?

2.前端文档.png

3. 前端项目模板管理(Templates)

前端项目模板 说直白点就是,公司前端所对应的项目模板,以便快速创建项目;

前端项目模板主要意义:

  • 快速创建项目,提升效率;
  • 项目技术栈统一,方便管理;

前端项目模板有什么?

3.前端项目模板.png

4. 前端脚手架(CLI)

前端脚手架 作为衡量一个成熟前端团队的标准,我相信很多前端er 都对他已经很了解了;

但是目前市面上对脚手架的应用我相信90%以上的团队仅限用于项目的快速创建,也就是使用现成的模板通过命令行快速搭建;

前端脚手架的意义:

  • 快速搭建项目;
  • 技术栈统一;
  • 规范代码风格;
  • 提升研发效率;
  • 自动化;

前端脚手架有什么?

4.前端脚手架(CLI).png

5. 前端组件库(UI Design)

前端 UI 组件库:在开源社区有数不胜数的组件库,例如 Ant Design、Element UI、Vant UI 等等(实在太多啦),如果你觉得某个组件库很适合用在你的项目,那么你将少一半的开发时间,是不是摸鱼的时间又多了一半呢?

而且现成的一些开源组件库中的样式与交互达不到公司设计师的要求,所以这时候 为了统一业务的设计规范与样式,咱们可以马不停蹄地赶紧向领导去提一提搞一个组件库试试看咯!

前端组件库的意义:

  • 组件复用,提升研发效率;

前端组件库有什么?

5.前端组件库.png

6. 前端响应式设计 or 自适应设计

响应式设计(Responseive Design) 指的是一个网站同一页面在不同屏幕尺寸下有不同的布局;一套代码能在所有终端能够正常展示,并不是为每个终端做一个特定版本,响应式是为解决移动互联网浏览器而诞生的。

自适应设计(Adaptive web design) 需要开发多套界面,通过检测视口以及设备,来判断当前访问的设备是pc端与移动端,从而返回不同的页面。

前端响应式设计:

  • 一套代码提升研发效率;
  • 不同分辨率设备灵活性强;
  • 快速适配多端;

前端自适应设计:

  • 设计与体验较好;
  • 性能相对好;

注意:

一个项目到底是用响应式设计,还是自适应设计,这个取决于项目的排版和设计的出入程度;

所以如果公司PC端和H5端的排版设计有较大的出入还是建议使用自适应设计;反之可以考虑响应式设计;

切入盲目选择;

7. 前端工具库(类 Hooks / Utils)

开源社区有数不胜数的 前端工具库,如 Day.js、axios、loadsh 等等,只是其中功能未必是你想要的;

一些中大型企业团队为了复用某些工具方法,提升研发效率,一般都会封装一个工具库,身为一个合格的基建搬砖工,前端工具库怎么能少得了呢?

前端工具库的意义:

  • 工具方法复用,提升研发效率;
  • 减少代码量;
  • 团队技术提升;

前端工具库有什么?

6.前端工具.png

8. 前端工具自动化(Tools)

可能会有同学疑惑,这个前端工具和上面的前端工具不是一样的吗?

  • 前端工具自动化 主要针对的代码上层的格式、规范、测试方面的自动化工具;
  • 前端工具库 主要针对的是代码层面的方法复用工具,所以其本质上有较为明显的区别;

前端工具自动化的意义:

  • 代码质量与风格的统一;
  • 自动化编码流程;
  • 提升效率;

前端工具自动化有什么?

7.前端工具自动化.png

9. 接口数据聚合(BFF)

前端 BFF(Backends For Frontends) 即服务于前端的后端,也称聚合层或者中间层;

主要将后端复杂的微服务,聚合成对各种不同用户端(无线/Web/H5/第三方等)友好和统一的API;

前端 BFF 的意义:

  • 聚合 API,释放后端;
  • 解耦合各个业务;
  • 后端微服务引入;
  • 易维护和修改 API;
  • 更好的安全性;
  • 更好的前端错误处理;

10. 前端 SSR 推进

服务器端渲染(Server-Side Rendering) 是指由服务端完成页面的 HTML 结构拼接的页面处理技术,发送到浏览器,然后为其绑定状态与事件,成为完全可交互页面的过程。

简单理解就是html是由服务端写出,可以动态改变页面内容,即所谓的动态页面。早年的 phpaspjsp 这些 Server Page 都是 SSR 的。

由于公司主要是C端用户,而且 SEO 要求极高,所以在前后端分离的情况下,SSR 就必不可少了 ~

前端 SSR 的目的:

  • 前后端分离;
  • 首屏加载速度快;
  • 利于 SEO;

11. 前端自动化构建部署(CI/CD)

前端 CI/CD 一般是指持续集成、部署、发布的一个过程;

用白话文讲,就是你每次 git commit 代码后,都会自动的为你部署项目至 测试环境、预生产环境、生产环境,不用你每次手动的去打包后 cv 到多个服务器和环境;

前端 CI/CD 的意义:

  • 提高开发人员生产力;
  • 自动化发布;
  • 提高代码质量;
  • 更快地提供更新;

前端 CI/CD 有什么?

9.前端自动化部署.png

12. 全链路前端监控/数据埋点系统

在大部分 To C 的项目中,我相信产品和运营都需要 统计线上产品在用户中的行为和使用情况,因为这样可以更快的去了解用户群里的使用情况,从而升级和迭代产品,使其更加贴近用户。

前端监控/数据埋点的目的是:

  • 实现精准的点对点营销;
  • 可以做相关的分类统计;
  • 为用户画像的构建提供数据支持;
  • 指导产品研发以及优化用户体验;

前端监控/数据埋点有哪些数据?

  • 行为数据:时间、地点、人物、交互、交互的内容;
  • 质量数据:浏览器加载情况、错误异常等;
  • 环境数据:浏览器相关的元数据以及地理、运营商等;
  • 运营数据:PV、UV、转化率、留存率(很直观的数据);

13. 前端可视化平台

前端可视化 字面意义理解就是用肉眼可见的就称呼为前端可视化;即所见即所得;

这里的理解 前端可视化 包括了 数据可视化、图形可视化、VR 全景可视化、中后台视觉可视化 等等;

前端工程可视化平台的目的:

  • 方便项目管理;
  • 高效提升工作效率;
  • 一键搞定CI/CD流;

前端工程可视化平台有什么?

11.前端可视化平台.png

14. 前端性能优化

性能优化这个词,我相信只要是程序员,多多少少都听过,而且都经历过;

如果你的项目是 ToB 项目,可能性能优化不会做到极致;

但是你的项目是 ToC 项目呢,那性能优化是不是就是一个你必须要考量的点呢?

好家伙,用户直接崩溃,这是什么破网站,这么 🌶 🐔 ;

前端性能优化的意义:

  • 页面加载的更快;
  • 更好的用户体验;
  • 降低服务器负荷;
  • 提升编码的能力;

前端性能优化都有什么?

10.前端性能优化.png

15. 前端低代码平台搭建

低代码开发平台(LCDP) 本身也是一种软件,它为开发者提供了一个创建应用软件的开发环境;与传统编写代码的 IDE 不同,低代码开发平台提供更易用的可视化 IDE。

简单来讲,低代码(Low Code)就是一种可视化搭建系统,从字面意思来讲,一是可视化;二是少写代码。

无代码(No Code) 同样从字面上来理解,一是可视化,二是不写代码。

前端低代码平台的意义:

  • 降低开发成本;
  • 所见即所得;
  • 一站式研发;
  • 技术收敛;
  • 专业门槛低;
  • 对新人友好,上手快;

注意:

低代码平台一般较针对于一些业务使用率较大且多是 ToB 的平台,所以判断当前系统是否需要使用低代码平台,建议在有大量业务的支撑前提下,否则得不偿失;

用新技术,更多的不是因为先进,而是适合。

16. 微前端(Micro App)

微前端(Micro-Frontends) 并没有定义框架或 API,它其实是一个类似 微服务架构 的概念;将 微服务 的概念扩展到了前端世界;

说微服务可能有些前端同学会感觉陌生,以咱们前端的角度一句话概括就是: 将您的大型前端应用拆分为多个小型前端应用,这样每个小型前端应用都有自己的仓库,可以专注于单一的某个功能;

需要强调的是,尽管我们将前端应用拆分为多个项目,但它们最终还是会被集成到一个单页前端应用程序中;因此,通过使用微前端架构,您不会在用户体验上有任何损失,只会有过之而无不及;

为什么要用微前端:

  • 技术上的灵活选择;
  • 更快的且独立的部署;
  • 团队代码的相互隔离;
  • 并行开发和团队的自治;
  • 项目的增量升级;