编程语言趋势大观：Python 反超 JavaScript

根据 Github 的相关数据我们可以发现 JavaScript 常年保持榜首位置，但是在 2021 年 Q4 被 Python 反超（很可能是因为分流了一部分人去使用 TypeScript），而 TypeScript 持续保持上涨态势，受到更多前端开发者的青睐，可以想象在未来 TypeScript 将大有可为。

2021 年的前端人偏爱什么？

image.png

  • 出乎大家的意料，2021 年 Google 的命令行工具 zx 一举获得前端项目新增的 Star 数量头筹，你可以使用它自由地在命令行书写 JS 语法，甚至可以使用我们熟悉的 await 和 promise，可见前端工程师自由的灵魂也来到了 bash 表达式中；
  • 2021 年未来可期的前端人伴侣 vite，“快”是它的核心，它主要解决的痛点就是项目启动缓慢， 还没有尝试过 vite 的小伙伴何不试试这款不需要做任何编译的神器，说不定它帮你省下的时间可以让你在午后悠闲地喝一杯咖啡；
  • SSR 早就不是什么新鲜的内容，但是 Next.js 或许能帮你带来更好的开发和用户体验；
  • React ，我们的老朋友了，2021 年前端生态圈的丰富度依旧保持 React > Vue > Angular；
  • 如果你要试试跨端技术，Tauri 可能会助你一臂之力，任何可以用 JavaScript 来写的应用，最终都将用 JavaScript 来写。

    HTML6.0

    HTML6.0 目前处于提案阶段，但是社区已经开始有了一些零星的讨论，所以可能它离我们并不太远。
    HTML6.0 中，可能会新增“增强身份验证”和“集成摄像头” 两个能力，大家可以持续关注相关进展。
    一直以来，浏览器由于身份验证问题导致 Web 应用在很多场景乏力，特别是目前大部分 APP 是十分“重”的，功能繁多，如果这两个能力得以普及，那么可能会有更多的 WEB 应用代替以前 APP 的极速版本。
    由于新冠疫情影响，越来越多人的工作方式变成了 WFH。可以预见，疫情彻底清除以后，远程办公也许会成为不少人的选择。所以“集成摄像头”能力，很有可能在人与人线上交流场景中，发挥更大的作用。
    2022 年，可能 HTML6 并不会推出，但是可能会有更多利于用户体验的提案出现。

    Web3.0

    目前都处于在混沌中寻找出路，针对 Web3.0 的形式、构成和应用，在每个人各抒己见、畅所欲言发表看法之后，经过一系列的沉淀，出来的结果会让 Web3.0 轮廓更加清晰。比如 User Own Content 具体的含义是什么，讨论之后才会有一些比较清晰的结论。至于讨论背后可能存在的引导方向的人为推手，肯定会被淘汰出去，所以 2022 年真很有可能是 Web3.0 的元年，也值得每个前端开发去关注。

    前端框架

    总的来说，React，Vue，Angular 依然是强势铁三角向前发展。在 2022 年 Vue3 会成为 Vue 的默认版本，React 18 也会发布正式版本，从目前社区关注度来看， Vue3 源码 Github star 27k+， React 18 WG Github star 3.9k+，且在 npm 的下载量上，新版本下载数目都比较可观，所以很有可能今年尝试和使用的人会变得更多。

打包器

打包器大概可以分为两类：

  • 传统编译：Webpack, Rollup, Parcel, Esbuild
  • ESM 混合编译：Snowpack, Vite

ESM 混合编译：在开发环境编译时，使用 Server 动态编译 + 浏览器的 ESM，基本上实现了“开发环境 0 编译”的功能。而生产环境编译时，则会调用其他编译工具来完成（如 Vite 使用 Rollup）。

目前是 Webpack、Rollup、Esbuild 三分天下：

  • Webpack：我们的老熟人，生态最丰富、功能最多，独自吃掉 70% 的市场份额；
  • Rollup：ESM 版的 Webpack，甩掉了很多历史包袱；
  • Esbuild：Go 写的 Webpack，性能有数十倍提升。

UI框架：由于模块化 CSS、摇树、MVVM 的流行，UI 框架的选择其实没有那么举足轻重了，针对自己选用的框架选择一个符合项目风格的 UI 即可。预计今年也不会有黑马闯入和变动。

2E 测试

单测框架的选型大多是跟着前端框架/脚手架模板/平台支持等一起的，其实没有提供给开发者太多的选择，所以这里只看看 E2E 测试。
在 2021 下半年，全新的 E2E 测试时代来临了！cypress 超越 puppeteer 成为最受欢迎的 E2E 测试框架

桌面端

值得关注的只有两个：

  • Electron: 我们的老熟人，Chromium + Nodejs，深受大家喜爱；
  • Tauri: 异军突起的新星，Webview + Rust。对比 Electron 因为不用打包 Chromium 和 Nodejs 运行时，产物体积小，运行性能好；
  • 其他：只是把后端替换了下，如换成 .Net, Go 等。

image.png
低代码发展历程
国际知名咨询研究机构 Gartner 发布了《2021 年企业低代码应用平台魔力象限》。（国内低代码厂商不包含在内）

  • 其中，OutSystems、Mendix、微软、Salesforce、ServiceNow 被评为行业领导者；
  • Appian、Oracle 和 Pega 被评为挑战者；
  • Creatio、Kintone、Newgen 和 Quickbase 被评为利基市场参与者；
  • 今年没有厂商被评为远见者。

Gartner 预测：“到 2023 年，超过 70% 的企业将采用低代码（LCAP）作为他们发展战略的关键目标之一“。
同时，Gartner 还预测：到 2025 年，整体 LCAP（低代码开发平台）市场规模将达到 290 亿美元，年复合增长率超过 20%；其中，LCAP 的细分市场预计将在 2020——2025 年之间，从 44.5 亿美元增长至 143.8 亿美元，复合年增长率为 26.4%。

image.png

AI 与图形化的探索

前端可以依赖 D3.js，ECharts，WebGL 等进行数据可视化的显示：
image.png

也可以用可视化的手段去解释模型，辅助算法同学调参。

目前提到人工智能，和前端密切相关的几个 JS 类库有：

  • tensorflow.js：基于 tensorflow.js Node 的 tvnet 算法，可以提取视频中的稠密光流
  • deeplearning.js
  • kera.js

高性能计算：

  • asm.js
  • WebAssembly
  • GPU
  • Opencv，前端做 CV 算法，物体跟踪、图像处理、特征检测等等

一般的 tensorflow 模型动辄几百兆，在前端怎么跑呢？这就不得不提到 MobileNet，这是针对于移动端模型提出的神经网络架构，能极大地减少模型参数量，同理也能用到浏览器端上。

在较早的 2017 年，一篇关于图像转代码的 Pix2Code 论文掀起了业内激烈讨论的波澜，讲述如何从设计原型直接生成源代码。随后社区也不断涌现出基于此思想的类似 Screenshot2Code 的作品，2018 年微软 AI Lab 开源了草图转代码 工具 Sketch2Code，同年年底，设计稿智能生成前端代码的新秀 Yotako 也初露锋芒， 机器学习首次以不可小觑的姿态正式进入了前端开发者的视野。
image.png
阿里的 imgcook 可以通过识别设计稿（Sketch / PSD /图片）智能生成 React、Vue、Flutter、小程序等不同种类的代码，并在同年双 11 大促中自动生成了 79.34% 的前端代码，智能生成代码不再只是一个线下实验产品，而是真正产生了价值。

2022 年随着低代码和图形化技术的逐步完善，二者会相互完善和成就彼此。使用者通过 AI 实现页面的还原然后再通过低代码平台对页面进行调整，整个过程基本上不写什么代码就可以完成整个页面的搭建，搭建页面真的会变得特别简单。

跨平台技术撬开多「端」世界的大门
但是，移动端的跨平台技术并不是仅仅考虑一套代码能够运行在不同场景即可，还需要解决性能、动态性、研发效率以及一致性的问题。那下面我们一起看一下主流的 WebView、React Native、Flutter 多端跨平台解决方案的优劣。

React Native VS Flutter

React Native 是以 Web 技术开发原生应用的典型框架。但是与众多基于 html 的跨平台框架相比，Flutter 绝对是体验最好，性能与构建思路几乎最接近原生开发的框架。
根据 StackOverflow 统计数据，Flutter 得分 68.8％、React Native 得分 57.9％。

小程序

2017 年初微信率先推出小程序，其他互联网公司纷纷开发出自己的小程序，经过四年发展目前全网小程序已超过 700 万，微信小程序 DAU 超过 4.5 亿。

image.png

目前主流小程序平台有 10 多家，包括腾讯的微信小程序、QQ 小程序；阿里的支付宝小程序、淘宝轻店铺；字节跳动的头条小程序、抖音小程序；百度小程序等；不同平台的实现标准各不相同，开发者需要学习不同平台的开发规范做定制化开发。

标准化的路看着还很长。阿里巴巴主导发起并联合 W3C 中国及国内外厂商起草了 MiniApp 标准化白皮书（MiniApp Standardization White Paper）截至目前产出了 lifecycle，manifest，packaging 等几篇文档。腾讯没有参与

因此，各种小程序开发框架如百花齐放，层出不穷。

从框架的语法来说大致分为 React、Vue 两类：

  • Taro：React 阵营代表，通过实现一套 DOM/BOM 的 API（实际会操作 Taro DOM Tree — Taro 自定义的一颗虚拟 dom 树）通过 template Taro DOM Tree 在运行时动态生成页面结构。优势是框架兼容性更高支持：React、Vue、Preact 等，实现了一套自己的事件机制不依赖特定平台。同时缺点也比较明显：深层嵌套的 template 结构导致包体积略大，实际生成页面冗余节点较多；

image.png

  • Uni-app：Vue 阵营代表，提供 IDE 、开发配套流程完整上手容易，有最多的使用者。在编译阶段将 Vue SFC 写法的代码编译成 小程序代码文件（JS、WXML、WXSS、JSON），在运行阶段进行 vue 和 page 实例的绑定，将 patch 阶段的 dom 操作替换为 setData。优点是生成的页面结构与原生接近没有冗余节点。缺陷主要是可用框架比较局限，基本是 fork 特定版本的 vue 做定制化开发，无法支持其他版本和框架；

image.png
目前从一些社区反馈及测试结果来看，uniapp 在开发工具链、多端一致性体验上相对领先。Taro 背靠京东在自家多个小程序上使用（京东购物在阿拉丁小程序指数中排入 TOP10 ），近一年更新也很频繁，最新版本已经在适配鸿蒙应用。框架间并没有明显拉开差距，实际在选型时可能主要还是看团队本身的技术栈偏好。

除了使用框架开发外，在开发过程中也可以使用一些转换器来帮助将单平台小程序转换为其他平台的版本。目前主流的转换工具包括以下几个：

  • antmove：目前较为流行的多端转换器，可将支付宝/微信小程序转换为多端小程序，支持增量编译。转换支持度概览；
  • wx2swan: 微信小程序到百度小程序；
  • @qihoo/wx2qh：微信小程序到 360 小程序；
  • miniprogram-to-uniapp：uniapp 提供的转换工具，可将原生微信小程序转成 uniapp 项目来适配多端；
  • @tarojs/cli：tarojs 提供的转换工具，也只能将原生微信小程序应用转换为 Taro 项目；

随着一些跨端框架（Uniapp、Taro）的出现部分跨端转换器基本已不再维护，这边仅作补充。我们接下来了解一些跨端转换器相关的内容：

  • wept: 微信小程序实时运行工具，目前支持 Web、iOS 两端的运行环境；
  • hera-cli: 用小程序方式来写跨平台应用的开发框架，可以打包成 Android 、 iOS 应用，以及 H5；
  • weweb-cli: 兼容小程序语法的前端框架，可以用小程序的写法，来写 web 应用