核心还是围绕着，效率，质量，性能(体验)三个部分

梳理

如何梳理？从什么角度梳理比较清晰？研发的过程(研发，调试，发布，发后后)，研发的目标，要解决的问题(效率，质量，用户体验，重新定义研发方式，架构)

思考，被后是各种策略的融入，标准化，自动化，集成化，复用化，

研发的声明周期

规范化 & 标准化 & 工程管理

标准化也是提效，提质量，

研发效率的思考 (从初始到上线)

  • 重新定义研发方式 (serveless 低代码 全流程的重新定义)
    • 产品产出原型，设计产出设计，前端到代码，后端到接口，测试做测试，发布和部署
    • serveless的云函数
    • 低代码
  • 一般研发过程 (数据mock graphql bff 数据拼装)
    • bff 数据拼装 微服务 (什么场景)
  • 物料市场(组件，区块，页面，pro方案)
    • 从创建项目和仓库，到初始代码，添加页面，区块，
  • 贯穿全流程的工具
    • CLI
    • 定制的编辑器
  • 适应复杂前端的新框架
  • CI/CD 发布系统 (自动化)
  • 提炼沉淀最佳实践 (也算是标准化一种)
    • 数据请求，数据处理，
  • 减少重复建设(统一鉴权，统一)
  • 集成化研发工具
  • 基础设施建设

因为运行环境的特殊性，如何提效的？

  • 小程序多端运行
  • React Native，Flutter，Weex

质量生产
**

  • 新研发语言
    • typescript
  • 贯穿声明周期的质量生产控制 (变更范围，测试环境错误，灰度报告)
  • 自动化测试 (单元测试，集成测试
  • 安全

侵入到服务端Nodejs

用户体验
**

  • 性能
    • 测试和
  • 稳定性

企业需要，用户需要

  • 热更新，热部署

解决特定问题的方案

研发中

研发规范
研发工具体系
发布系统

运行时

研发后 用户体验

  • 性能优化
  • 监控系统

我们的2020

DevOps，发布系统，监控系统

发布环节做的比以前更深了，本身就是解决效率不一致产生的质量问题。但又同时因为抓住了流程和项目代码，融入了更多质量和性能的功能。

1 先说发布系统

围绕着基础功能

  • 工程管理 团队 应用 应用信息填写
  • 云端 自动构建 自动部署 检测
  • 支持多种类型发布 webapp h5 小程序 nodejs
  • 发布支持 灰度，abtest，
  • 发布 权限，测试，审批
  • 发布流程环境(dev fat pro) 自定义环境(可自定义域名，避免多人开发冲突)
  • 自定义action 类似github actions的自定义action

围绕着质量生产

  • 监控系统结合，尽早发现问题 UAT环境JS报错通知，灰度报告
  • 依赖NPM检测
  • 依赖NPM记录(未来NPM包升级，风险通知)
  • 变更范围来确定测试范围
  • 自动化测试 安全测试 规范检测
  • 架构分
  • …等等更多的质量检测

围绕着性能

  • 包大小
  • lighthouse检测
  • 等等性能检测

2 监控系统

围绕着监控，告警，定位

  • 内容，性能监控，js错误监控，

围绕着分析**

整体的整理

研发链路，物料库，研发规范
**
物料不再只是简单的组件，可以是模板，场景页面，pro组件

跨端，小程序，

性能优化**

低代码，

基础设施

  • 基础设施

  • 规范化

  • 研发方式 (Serveless全栈，LowCode，)

  • Serveless 全栈开发

  • 基础物料，仓库。(这么多H5应用，是否有可复用的) 设计规范 设计资源 组件(小程序，移动web，PC) 模板，代码快。
  • DevOps
  • CLI 项目模板 统一规范

  • 性能更深入，webpack的打包，资源分析

  • 移动端Hybrid容器

  • 移动端规范，错误定位，
  • Graphql
  • Mock API
  • 关于监控 无痕埋点

研发规范，Git规范(dev，uat，测试)

技术基建

我们应用的特征？多玩一玩，多看看代码？

借鉴

凹凸实验室的过去与未来

2020年大前端技术趋势解读 serveless和全栈趋势，ToB的低代码平台，DevOps趋势
2020 前端技术规划该包含什么？ - 知乎
2020年前端最火的技术是什么？ - 知乎

2020 国内公司前端团队都在搞些什么? - 知乎

2020 国内公司前端团队都在搞些什么? - 知乎 IMWeb的云函数

前阿里技术大佬陈思淼：9个“主抓”，教你如何组建技术团队 - 知乎

2020 国内公司前端团队都在搞些什么? - 知乎 得物前端团队的规划

2020 国内公司前端团队都在搞些什么? - 知乎 转转团队规划

2020 国内公司前端团队都在搞些什么? - 知乎 蚂蚁保险团队

2020 国内公司前端团队都在搞些什么? - 知乎 专有钉钉如何满足企业定制化需求

2020 国内公司前端团队都在搞些什么? - 知乎 shopee的微前端和微服务

DXY-F2E/api-mocker: Api Mocker is more of an api management system than a mocker

新研发方式

Serverless 掀起新的前端技术变革 - 知乎 前端研发模式演变，从ajax到serveless

我想说的是，Serverless 不等于 FaaS，重点还是让前端不感知服务器，FaaS 很难处理复杂业务。

微服务架构中的BFF到底是啥？ - EdisonZhou - 博客园

前端工作台
**
ideagay/pandora: 前端研发工作台

iceworks: 从 GUI 开发工具到集成研发工作台
前端物料市场建设
从生产到消费，基于物料的前端开发链路-阿里云开发者社区

umi ui
vue ui

一些思考

create-react-app 是什么？其实是最佳的实践 & webpack模板

想想开发一个flink的job挺麻烦的，需要本地自己跑一个java的项目，但至少有一个任务管理平台了，job的管理(启动，重启，)，监控，日志等都都非常一体化了。

过去创建一个页面 -> 1 添加路由 2 从其它地方复制一个基础template 3 再复制的基本的table，pagination，等其它组件进行拼装，再编写代码请求数据，渲染，还有loading等状态 4
3 编码过程中，组件的参数，特殊的渲染，

现在创建一个页面 ->

我们要建设什么样的内容

  • 物料的链路，物料的生产，物料的消费，系统模板(h5，weapp)，场景模板 (数据可视化，后台表单，)

  • Cli工具，主要是用来消费物料，整个研发过程的涉及的
    • 研发的生命周期(init，dev，add，test，build，publish)
  • 可视化操作的界面，集成更多信息 (工作台)
    • 监控的数据，组件升级提示，风险提示
  • 集成工具
    • mock，
    • 依赖管理
  • 其它
    • 性能，质量
  • 一些最佳实践
    • webpack最佳实践 (一些场景，性能优化)
    • eslint

vue-cli有哪些插件？
**

配套工具有哪些种类型

UI工具有很大必要性吗？如Vue-UI，如UMI-UI，在工具足够强，需要强展示型或可视化操作性时才需要UI，因此建立工具是基础。
上面研发生命周期的动作考虑用CLI还是直接UI操作方式。

  • CLI
  • CLI + UI
  • VSCode插件
  • Electron客户端

插件的用途？

插件的好处，将过去各种大配置拆解为原子的能力，在不同项目中可按需的安装和使用，达到极大的复用和灵活性。项目层的可以基于此封装成一个Preset。
**
插件的定义，服务于什么的插件？可做哪些事情？

一个项目包括了什么？

一些基础的能力，typescript语言能力，eslint检测能力，jest自动化测试能力，

围绕webpack插件，分析插件，

一些其他服务，项目router，项目数据管理服务，项目的schema工具，