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 文件必须显示声明
  • 文件后缀必须是 .jsx

• Typescript 兼容

  • esbuild 只做转译，不执行类型检查
  • 每个文件独立编译 isolatedModules

• Node built-ins

  • Vite will not support (same as webpack5)

Vite 插件生态以及插件推荐

• https://github.com/vitejs/awe...
• https://vite-rollup-plugins.p...
• @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 主要是针对企业客户和内部员工使用，主要应用于 一些 内部组件生成 报表生成 组件生成 ...... （需求复杂，物料库更新没有那么频繁）

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

关注公众号: 前端自学社区 , 加入自学交流群，一起成长学习！