前端技术浪潮与应用

前端技术浪潮与应用

本次主要会从下面几个方向和大家一起聊聊2020年前端那些事儿

一、前端基建

首先聊一下前端传统方向也就是我们常说的前端基建？那么前端基建其实很多哈。什么是基建？一切有利于研发效能提升的，直接或者间接有助于业务开展能力建设的都叫基建。

基建涉及的话题也是很多如图所示比如组件库、规范、打包等等。本次呢？我会从这四方面来聊一下四个方面前端基建行业现状是啥样滴？应用领域是啥？行业内解决方案（行业已有轮子）都是啥？来进行简单的播报，废话不多说，先来看看前端可视化

01.前端可视化

前端可视化可分为两大类：页面可视化搭建、数据可视化

页面可视化也就是WebIDE

数据可视化，顾名思义对数据进行可视化给人看

01-1.页面可视化搭建

我们看一下，前端行业提效分析，主要分为四大类：pro code/low code/no code/auto code 如图可以看看这几种方式的流程差别，那么基于这样一个提效分析，我调研了业界对页面可视化提效这里所做的轮子调研，大概调研了22+个轮子，都有哪些呢？请看上回分解：前端可视化搭建工具业界的轮子

①页面可视化背景-前端行业提效分析

②业界-前端行业提效轮子：前端可视化搭建工具业界的轮子

大家可能看不清楚这张图上都有啥，我给大家总结下要点：

③背景-提效轮子总结归纳

核心思想都是非常相似的，和我们部门做的ZERO是一样的设计思想和思路

这些可能大家都比较熟悉了，调研了这么多也有比较新颖的想法和解决方案，比如淘宝的imgcook，站在更前沿去解决低效问题，下面来介绍下业界比较前沿的一个可视化搭建工具imgcook，如何上了智能化的班车来做前端的提效工具的。

④智能化相关行业提效分析

在看这个imgcook之前我们先来看看这几张图片

上面这两张图是智能化的工业4.0的演进、还有组成和支撑，那么下面这两张图展示的是智能工业话的真实案例和收益；可见智能化对这些行业的影响是非常大的；总的汇总来看，各个行业智能化之后，会提效降本，某类人员会减少，某类人员会转型升级，并带来质量的提升或业务增量。

所以类比到前端行业智能化几年之后，整体会大大提效，一部分简单重复性工作会被智能化所取代，也可能会诞生一些新的职位，如业务逻辑配置师（和代码生成机器人协作）之类的，前端升级做更有挑战性的工作内容。所以如果能够智能化一键生成代码，肯定也会给前端带来巨大的收益。

分析：图1.图2.比如近几年提出的以智能化为背景的工业 4.0，工业 4.0 的核心策略抓手大概有制造过程智能化、可视化、标准化管理协作、跨领域上下有集成整合，以达到高效生产；类比到前端行业一样，依赖的底层设施正在云化并逐步标准化（数据标准化、服务标准化等）、前端工程化成熟、跨 PD /设计师/服务端的协作研发一体化、业务个性化定制生产可视化智能化，这些策略在前端行业也都存在。

图3.再来看智能化带来的成果，其领头羊项目厦门远海全自动化智能码头，一线人员减少 70%，效率提升 20%；

图4.被誉为行业之母的金融行业，其典型的智能银行网点，其操作类柜台人员占比下降 15%；操作类柜台人员转型后的复合型人才提升至 90%；新增 超级柜台机、自助购汇机、虚拟柜员机 之后，减网点面积、减柜员 进一步减少成本。

⑤举例可视化搭建其中的一个例子来看前端可视化——imgcook

可视化搭建工具业界太多了，只拿一个我觉得站在智能化这个前沿技术基础上比较新奇且有创意的一个来详细说说，大家看下图看看这个可是化搭建新在哪儿？

imgcook的目标：就是从（设计稿、原型稿、PRD、APIHub、CodeHub 等资源）通过智能化的手段直接生成代码。

imgcook的核心功能：imgcook 的 目前对外的核心功能是 从设计稿 通过 CV/NLP 等深度学习、传统机器学习、专家规则系统、算法工程 等综合手段直接生成代码。

imgcook介绍-产品大图

下面介绍一下产品运行流程：大家可以看图我给大家讲解一下

具体来看看目前的产品使用流程，导入设计稿后可以一键生成代码，可以所见所得地在可视化编辑器中进行干预编辑，然后可以生成各种 DSL（React/Vue/Rax/小程序DSL等） 的代码，然后代码可以通过 VS Code 插件、imgcook-cli 等直接引入到自己的项目工程中，每个团队项目可能有自己的工程目录规范，通过 Plugin 扩展也支持自定义，imgcook 的团队高级自定义能力支持各个维度的自定义能力，以满足不同场景的生成代码需求。

步骤一：导入设计稿→步骤二：可视化干预→步骤三：查看生成代码（可选）→步骤四：进工程链路（vs code 插件直接导入）→可选步骤：团队高级自定义（Plugin设置）

imgcook介绍-产品大图

从下到上分别是：

①基于算法工程框架和产品

②基于视觉稿 CV 分析 和 NLP 分析

③多维度识别要生成代码的要素

④识别后可视化呈现出来

⑤如果识别出错就进行可视化干预，并可视化补充额外逻辑

⑥（左一）然后应用集成到各自的工程链路（VSCode 插件、WebIDE插件、imgcook-cli）中。

⑦（右一）生成的代码也支持自定义，最常用的是 DSL（React/vue/小程序 DSL…）和 Plugin（不同的团队有不同的目录规范等）自定义。

⑧（右二）同时整个技术体系我们最关注的的是技术方面的度量指标，如代码真实可用率、模型准确度和提效数据等。

下面来介绍下核心技术难点

核心技术难点-智能识别表达拆解

我们来看看这张技术大图里面，实现复杂度比较高的部分：智能识别表达拆解，从直观上分析，为了生成表达所需要代码，需要多维度的信息输入和提取，需要各种详尽的元信息（图像、文本、样式、属性等），同时需要提取出不同颗粒度的可复用的单元（物料），以及抽取背后的动态逻辑（动态字段、循环、交互逻辑等）。

首先是这里智能识别表达的拆解问题，直接端到端目前的业界的可用解决方案目前还没有，业界也有类似 pix2code screenshot2code 的方案，一个是颗粒度太大，适合解决组件识别的问题，一个是可用度不高，尤其对于 C 端的视觉稿还原度，C 端设计师是不接受像素级偏差的。

具体我们来看看怎么拆解成可解的问题，从直观上分析，为了生成表达所需要代码，需要多维度的信息输入和提取，需要各种详尽的元信息（图像、文本、样式、属性等），同时需要提取出不同颗粒度的可复用的单元（物料），以及抽取背后的动态逻辑（动态字段、循环、交互逻辑等）。

核心技术难点-智能识别表达拆解-技术分层

首先从上到下，先将设计稿中输入，进行图层信息处理，各层具体如下：

图层处理层：主要将设计稿或者图像中图层进行分离处理，并结合上一层的识别结果，整理好图层元信息。

物料识别层：主要通过图像识别能力识别图像中的物料（模块识别、原子模块识别、基础组件识别、业务组件识别）。

图层再加工层：对图层处理层的图层数据做进一步的规范化处理。

布局算法层：转换二维中的绝对定位图层布局为相对定位和 Flex 布局。

语义化层：通过图层的多维特征对图层在生成代码端做语义化表达。

字段绑定层：对图层里的静态数据结合数据接口做接口动态数据字段绑定映射。

业务逻辑层：对已配置的业务逻辑通过业务逻辑识别和表达器来生成业务逻辑代码协议。

可视化编排：最后输出经过各层智能化处理好的代码协议，用可视化引擎所见所得呈现处理，可以进行可视化干预和补充。

出码引擎层：最后经过人工干预后的更准确的协议内部，经过表达能力（协议转代码的引擎）输出各种 DSL 代码。

工程链路层：最后通过 vs code 插件、webIDE 插件， 输出各个工程项目环境中。

01-2.数据可视化

①数据可视化-行业现状

这张图是技术和市场上2020年大图：这个图上分了很多模块大家可能看不太清楚，我给大家理一下，

他会主要分成这么多组：

1. 前三个我标出来：一、图数据库（底层存储）、图计算引擎（中间层裁剪加工）、图可视化（图分析）这三个实际上是整个图技术的核心技术；
2. 下面这四个刚好是图技术所代表的应用领域：比如知识图谱领域其实已经有很多商业化的产品出来了，还有像反欺诈、社交网络分析、还有网络安全等等这是这四个在这个大图里面有了应用非常广泛的领域。

那么基于这样一个领域我们聊聊下一话题 数据可视化应用领域-核心技术流程和挑战

②应用领域：核心技术流程与挑战

①数据可视化我们有哪些落地场景：除了前四个是图中已经有的，还有监管合规呀、个人安全守护，除了这些业务其实很多公司也有很多成熟的产品，基于这样一个应用领域的核心流程：数据存储、数据处理、最后到可视化展示和应用；

②基于这样的领域，我们发现其实核心流程都是一样的？刚提到那三种：数据获取、结构化装载、最后到一个存储、存储完我们还会对数据进行一个装载分析最后会到达一个可视化展示和应用的阶段；

③那在这个里面前端同学就会遇到很大的挑战：

1. 从一个图的caseStudy怎么到图的可视化？

   那这里面一共有三个痛点问题：

   1. 一、可看：图数据巨大如何很好可视化出来
   2. 二、可理解：有了数据如何去理解
   3. 三、可分析：理解之后如何分析洞察

我们把刚才说的形象化一点，举个例子：比如这是一个100个节点图数据，传统去看会非常麻烦，如果简单通过图可视化技术，就会发现是非常容易的。

③应用领域：理想的图可视化能力大图

这就是刚才提到的可视化前端的三个难点详情：可看、可理解、可分析

实际上就是把节点和边怎么快速渲染出来，除了常规的数据关系之外，我们还会有一些时序数据、位置比如地图位置信息还有海量的数据都需要一整套的引擎去做，包阔对节点、样