北关尔士

前端基础设施建设

“技术基建”，就是研发团队的技术基础设施建设，是一个团队通用技术能力的沉淀。

基建的意义

基础建设的发起从业务问题中来，到解决实际问题中去，更具有以下几点意义：

  • 解决问题：帮助解决业务问题。
  • 团队练兵：承担建设的虚拟团队，在建设过程中能为同学提供不同维度的锻炼场景，在业务问题与场景的识别、方案设计、新技术实践、项目管理和产品化思维方面都能提供实践成长的空间，起到练兵的作用。
  • 梯队建设：一个虚拟建设小组本质上也是一个团队，过程中能对不同角色进行锻炼和考察，这有助于团队梯队的完善。
  • 影响力建设：建设结果对于业务的促进，更容易获得内部合作方的认可；沉淀下来的好的经验，可以对外输出分享，也是对影响力的有力帮助。

为什么搞基建？

  • 对于一个研发团队，不能一味在使用蛮力的情况下进行业务的支撑。
  • 如果一味的出蛮力，业务是无法实现跨越式增长的
  • 有时候大家都在各个项目重复的造轮子，很多情况下都在浪费大量的时间，基础建设可以极大地提高效率
  • 如果未来业务大量的正价，后期的支持能力，当前的状况下无法满足，每个团队都有自己的规范无法得到同意
  • 基建最核心的价值，就是帮助业务可以满足未来的发展所需

基建怎么搞？

  • 基础建设的内容和业务需要的内容是分不开的。
  • 目前我们所需要的例如有私有化服务存储、脚手架、组件库、打包部署工具等等。

基建研发流程

https://cdn.nlark.com/yuque/0/2022/png/233974/1657258619576-af1c0735-843d-4029-8f23-3dbc393493f2.png

一个基本的研发流程闭环:

需求导入=> 技术方案制定=>需求拆解=>本地编码=>联调=>自测优化=>提测修复bug=>打包&部署=>数据收集&分析复盘=>优化迭代=>新的需求导入，完成闭环

流程

基建怎么搞

规范&文档（Docs）

  • 对于文档，为了写而写的文档是垃圾，不如不写。
  • 文档的重点在说人话，在于有效性，在于直观、省事、不绕。
  • 想想一个 UI 组件库的文档，先给你看可交互的 Demo 再提供 API 信息，和直接开头就罗列一大堆的 API 文字介绍
  • 组件库文档
  • 具备代码与UI能力
  • 采用类似dumi风格文档，实时预览能力

搭建CNPM私有仓库

68747470733a2f2f7261772e6769746875622e636f6d2f636e706d2f636e706d6a732e6f72672f6d61737465722f6c6f676f2e706e67

  1. 为什么？
  2. 可以将我们的代码都开源统一用 NPM 进行管理的
  3. 总有一些是我们不希望的完全开放的代码，作为企业是核心秘密保留在公司内部
  4. 确保npm服务快速、稳定：对于我们来说，上线生产系统的时候，需要花半小时甚至更久等待npm模块依赖安装完毕，是不可接受的。部署镜像后，可以确保高速、稳定的npm服务。
  5. 发布私有模块：官方的npm上的模块全部是开源的。一些与我们业务逻辑相关的模块可能不适合开源。这部分私有的模块放在私有NPM仓库中，使用起来各种方便。
  6. 控制npm模块质量和安全：npm上的模块质量参差不齐，搭建私有仓库，可以更严格地控制模块的质量和安全，只有经过审核的模块才允许被加入私有仓库。
  7. 怎么搭建
  8. 采用开源的cnpm，https://github.com/cnpm/cnpmjs.org
  9. cnpm的特点
  • 压缩包等文件从数据库中分离，放在CDN上，减轻了数据库的压力，提高了访问速度。
  • 使用MySQL替换了CouchDB，更容易部署。同时由于大部分开发者更熟悉MySQL，因此架设起来更方便。
  • CDN和MySQL都可以方便地扩展。

本地工程化环境（CLI）

CLI的意义

  1. 本地开发环境，省事的可能直接拥抱框架选型对应的全家桶，如 Vue 全家桶，或者用 Webpack 撸一个脚手架。能力多一些的会再为脚手架提供一些插件服务，如 Lint 或者 Mock。从简单的一个本地脚手架，到复杂的一个工程化套件系统，
  2. 目的都是为了本地开发流程的去人肉化、自动化。
  3. 新建工程不必在进行新的项目，ui库，utils库等的手动浪费时间的引入

怎么做CLI?

cli

本地开发环境基建，是一个工程化套件环境，核心理念就是尽量 “一步搞定所有事”，把本地环境的配置和使用尽量变的傻瓜化无脑化

组件开发与管理

模板开发与管理

  1. 沉淀了一套类似的模板化能力
  2. 沉淀一套我么我们自己风格的支持业务场景UI能力
  3. 覆盖场景包含但不限于
  4. web
  5. h5
  6. Flutter
  7. 微信小程序
  8. Electron
  9. Node.js
  10. Webpack

前端基础资产

我们现在对前面一些实物进行总结，前端团队的规范（标准化）、工具链（CLI）、基于工具链之上的可视化辅助客户端（GUI），提到了组件（模块）、模板、应用。对工具的抽象和业务的可复用抽象，是一个团队的基础资产。。基础资产这部分，建设分层如下：

总结前端基础建设

在特定项目特定场景下的技术选型

前端框架

  • react
  • vue2/vue3

小程序(不局限于微信小程序，支付宝小程序，字节跳动小程序，百度小程序...)

  • Taro(react)

APP

  • Flutter
  • uniapp

微前端

  • qiankun

服务器端渲染(取决于技术栈)

  • next.js
  • nuxt.js

Nodejs

  • egg.js
  • next.js
  • koa.js
上次更新:
贡献者: 郑壮