2021 Qcon 前端专场精彩回顾

前言

前两天去参加 Qcon (全球软件开发大会) , 了解了很多前沿的技术和优秀方案，也认识了很多优秀的朋友，同时也感谢 InfoQ 平台。后续会持续输出更多高质量的内容。

以下主要是针对我看的 前端专场 做个 复盘 , 有对中台服务化有兴趣的朋友，欢迎一起讨论交流。

下一代构建工具 Vite 实践与探索

讲师： 张毅，

华为技术有限公司 / 开源能力中心

Vue 社区 Member

Vite 社区 Collaborator

Vue Shenzhen Meetup 发起人

主要讲解了 Vite 原理与关键技术 、 项目实战、插件生态、Vite Module Federation 探索

什么是 Vite ？

Vite 有多快？

Vite 为什么快？

Vite 设计基于 2 个 趋势：

1. ES Modules 广泛支持

2. 高性能语言重写 Compiler
   

Vite 核心原理

No-Bundle 带来的优缺点

优点：

• 快

• ESM 标准兼容

缺点：

• 请求熟练增多

• Dev 和 生产不一致

• 部分依赖不提供 ESM

Webpack 迁移 Vite 实践

Vite 使用常见问题

CommonJS 的挑战

• dev 环境：

• src 源码，手工修改为 ESM

• node_modules：optimizeDeps.include

• 使用插件 @originjs/vite-plugin-commonjs

• 生产构建：

• Vite 默认使用 @rollup/plugin-commonjs

• 配置 build.commonjsOptions，例如：transformMixedEsModules

浏览器兼容

• dev 开发环境依赖 ESM，但 build 打包仍可兼容 IE11

• @vitejs/plugin-legacy

其它

• jsx 支持

• .vue 文件必须显示声明 <script lang="jsx"> </script>
  

• 文件后缀必须是 .jsx

• Typescript 兼容

• esbuild 只做转译，不执行类型检查

• 每个文件独立编译 isolatedModules

• Node built-ins

• Vite will not support (same as webpack5)

Vite 插件生态以及插件推荐

• https://github.com/vitejs/awesome-vite

• https://vite-rollup-plugins.patak.dev/

• @vitejs/plugin-vue / @vite-plugin-vue2
  

• @vitejs/plugin-legacy
  

• @vitejs/plugin-vue-jsx
  

• @vitejs/plugin-react
  

什么时候该上 Vite ？

这个问题也是当时一位在场的观众向讲师提的问题，我也特别好奇。

讲师说： 在新的项目 / 和一些小的项目上可以使用 Vite 构建，小的项目可以通过Webpack 迁移到 Vite, 对于老项目和比较大的项目不建议现在迁移到 Vite ,会有很多坑要踩。

从多端适配到智能代码——看前端创新演进之路

讲师： 韦沿海

京东零售前端技术专家

主要讲解了 前端研发提效历程，前端智能化新方向，前端智能实践。

以下内容是不对外开放的，做了脱敏处理。

前端提效历程

工程化 ——> 多端适配 ——> 可视化搭建

工程化

自动化

• 以 Grunt、Gulp 为代表工具

模块化

• 以Webpack 为代表工具

多端适配

跨应用端

• 主要指 HTML5 ReactNative 小程序
  

跨框架

• 主要指Vue React
  

前端提效- 可视化搭建

可视化搭建提效弊端

1. 组件物料增长缓慢

2. 个性需求难以及时满足

前端智能代码提效方向

1. D2C (设计稿转代码)

2. 智能服务 （布局还原、语义化、组件识别......）

3. 可视化工作台 （提供物料库，二次编辑，并提供相应逻辑开发） toC / toB

智能代码提效处理

设计稿处理

• 画板设计

• 图层处理

• 数据导出

算法处理

• 智能识别 （图片 文字 外链，组件，区块.....）

• 智能布局 （流式布局、定位布局....）

• 智能语义

• 智能逻辑 (根据设计稿智能识别当前页面逻辑) 难点

可视化工作台处理

• 布局还原处理

• 编辑器

• 节点树

• 还原对比

• 视图预览模式

• .......

• 组件映射库

• 组件识别

• 一键替换

• 组件入参

• ......

• 逻辑开发

• 组件化

• 生命周期

• 属性设置

• 事件绑定

• 字段绑定

• 埋点上报

• ........

• 代码生成

  
  

• JSON 数据

  
  

• AST 处理

  
  

• DSL 支持

  
  

传统开发流程 与 智能开发流程的区别

谈谈 我对 可视化 方向的看法

我是做 中后台服务方向的，对于可视化方向也挺感兴趣，也体验过市场很多的低代码平台，也很多朋友交流过 “低代码”。 其实早在前几年就有 这个了，只不过不叫 "低代码"，以前叫 " 0 代码"， 简而意之，就是编写少量代码，出结果，来达到团队提效，尽早交付产品。 就目前来看，可视化分为 toC 和 toB.

• toC 主要是针对个人客户，主要应用于一些 H5 活动页 展示页 问卷调查 ..... (需求不会太复杂，只是物料库需要不断的更新)

• toB 主要是针对企业客户和内部员工使用，主要应用于 一些 内部组件生成 报表生成 组件生成 ...... （需求复杂，物料库更新没有那么频繁）

现在 智能化 在融入 “低代码” 开发中，大大会省去开发用时，也会迎接更多的挑战，可视化路还很长。