AI和大数据下,前端技术将如何发展?

本文涉及的产品
云原生大数据计算服务MaxCompute,500CU*H 100GB 3个月
云原生大数据计算服务 MaxCompute,5000CU*H 100GB 3个月
简介: 2010年前后,各种大数据应用进入爆发期。如果说之前的Web应用更多地是在“产生”数据,那在2010年之后,如何更好地“展现”数据则被提上了新的高度,很多前端技术也随之打开了新的篇章。本文作者结合自己的实践,从数据可视化、软件Web化和交互多样化三个方面,分享大数据和人工智能对前端技术发展的影响。

image.png

概览

因为长期在做跟阿里云飞天大数据平台相关的前端工作,也一直在思考一个问题:“大数据的前端跟其他业务的前端有什么不一样”,具体来说就是,在大数据和人工智能的浪潮下,到底对前端技术的发展带来了什么影响。

以团队在负责在做的阿里云飞天大数据平台为例,从在 2009 年写下第一行代码,现在已经是阿里大数据发展的第 11 个年头。我是 2011 年加入阿里的,之后就一直在负责做大数据相关的前端工作,基本上参与了阿里绝大部分大数据发展的历史进程。现在回头看,很庆幸自己在一个历史的变革时期入行,更有幸见证了一些划时代意义的数据产品的诞生,以及它们对前端技术带来的变革。
image.png

如果我们把 2010 年当做大数据 Web 产品应用的元年,会发现它是一个有趣的年份,为什么这样讲?

回看前端的发展历史,在 2005 年前后有一波大的技术变革,就是从 Web1.0 到 Web2.0 的过渡。

在此之前,前端更多地是做纯内容的静态展示,比如下图中的那个时期的苹果和雅虎的官网。

image.png

之后前端开始逐渐做成复交互的动态网页,这其中一个重要的历史性标志就是 Gmail 对 Ajax 等新技术的应用。

image.png

而在 2010 年前后,各种大数据应用进入一个爆发期间,阿里很多知名的应用基本都在那段时间展露头角,现在回头再来看那段历史,这其中很大的一个原因,随着互联网的大发展,特别是 Web2.0 之后,数据的有了大爆发的增长。

下图就很好地展现了这个趋势,如果说之前的 Web 应用更多在“产生”数据阶段,那在 2010 年之后如何更好的“展现”数据被提上了新的高度,很多前端技术也因之打开了新的篇章。

image.png

后面会结合自己的实践,以三条主线来讲讲数据智能浪潮对前端技术发展的影响,分别是数据可视化,软件泛 Web 化和交互多样化。

数据可视化

大数据浪潮下,最明显的一个特征就是数据的指数型增长,从上图中就能看到这个趋势,随之而来的挑战就是如何更形象地展现数据并进行交互展示,也就是我们通常讲的“数据可视化”。

回到技术本身,那数据可视化对前端最大的影响应该是大大促进了 SVG,Canvas 和 WebGL 的发展。

image.png

而这当中,除了浏览器底层技术的升级,在上层可视化库和可视化应用也涌现了大量优秀的作品,其中佼佼者包括:

  • 开源技术组件层面
    • AntV
    • Echarts
    • HighLights
    • ...

image.png

  • 重数据可视化的产品
    • 阿里云大屏可视化产品 DataV
    • 阿里云的 Quick BI
    • BI 分析工具 Tebleau
    • 特色领域的分析产品,比如 Plantir

image.png

在专业的细分领域,比如地理,安防,新零售,等领域中不同场景就有很多机会。具体比如在我们阿里云的一站式大数据开发治理平台的 DataWorks[1] 产品就有用于做流程编排的 DAG,图分析[2],数据的血缘分析等有意思的可视化。

image.png

软件 Web 化

大家最近应该注意到一个现象那就是:Web 系统做得越来越复杂,很多原先桌面端的复交互应用逐渐 “泛 Web 化”,甚至很多应用一上来就是 Web 的技术做第一版。

这里说的泛 Web,从表现中又可以分为两种:

一是直接用前端技术去做桌面软件,其中标志性事件就是 NW.js 和 Electron 在 2013 起步后的蓬勃发展;大家熟悉的 IDE VSCode 就是这当中的典型代表;阿里的桌面版钉钉 UI 层大量用到的 Web 的技术。

image.png

另外一种就是直接在 Web 上实现,比如 大家最近能看到各种 Web'X' 系统( Google Docs )。

这背后推动力,一是随着浏览器相关逐渐走向统一,用它的技术可以更便捷地实现跨端,另一个就是云计算大数据的兴起,特别云端的存储和算力逐渐突破了原先的本地 PC 的性能边界,因而重塑了原先人机交互的入口。

关于跨端的好处自不用多讲,我想想重点讲讲第二点。要讲这个逻辑,我又得简单讲讲计算机的发展,从占地 170 平方米的世界上第一台通用计算机 “ENIAC”,到苹果和微软时代的个人 PC,移动时代的 iPhone 和 Andriod,再到云计算时代的大型计算集群。

image.png

对开发者工具而言,之前前很多软件很多都是本地,因为它往往用本地 PC 的计算力就够了,但大数据的场景下计算本地算力肯定是不够的,它是依赖云端的计算集群(以我们阿里飞天大数据平台而言,我们已经 10 万台计算集群的规模),如何在用户侧用上更方便和灵活地使用这些算力就是我们前端重点要做的,而这是原先软件的架构要不不能让你做定制,要不定制的成本很高(有时候甚至超过了重新做一套的成本),因此很多系统会选择重新起航做一版。

这其中,我们负责阿里云的 Dataworks 中的两大件:WebIDE 和 WebExcel ,就非常典型的例子。

image.png

Dataworks 从一开始就是根据云原生的思路设计开发的,后端需要通过云计算提供强大的算力替换原先的本地算力,前端需要实现更精巧的架构设计来对应日益复杂的交互能力;具体到我们的应用,它包括但不限于:

  • 架构层面
    • 状态管理
    • 插件化
    • ...
  • 复交互的组件
    • Editor
    • Form/Excel
    • Tree
    • Logivew
    • ...

交互多样化

最近今年在以数据驱动的人工智能的大力发展下,特别在图像识别,语音识别,自然语言处理方面获得了很大的突破,让前端的新交互也获得了长足的进步。

UX

在面向使用者(UX)产品由 GUI(Graphical User Interface)变成 XUI,用户不仅可以用通过鼠标键盘方式操作图形界面,更可以通过面部表情,身体动作,语音交互等形式提供新的交互形态。

下图就是在 2016 年左右,我们在阿里云ET中一些人机对话,互动游戏中的一些实践,具体可以看这里[3]。

image.png

这一轮的技术变革,有两个大的宏观的背景。

AI 技术的第三波潮起

随着 2010 年前后,深度学习技术的成熟,计算力的提升,以及互联网时代积累的大数据财富,人工智能技术开始一段与以往大为不同的复兴之路;分别在语音识别,图像识别,自然语言处理等相关技术上获得根本的突破。

例如, 2012 年到 2015 年,在代表计算机智能图像识别最前沿发展水平的 ImageNet 竞赛(ILSVRC)中,参赛的人工智能算法在识别准确率上突飞猛进。2014 年,在识别图片中的人、动物、车辆或其他常见对象时,基于深度学习的计算机程序超过了普通人类的肉眼识别准确率。

下图就摘自李开复老师的《人工智能》就体现了这个趋势:

image.png

WebRTC

对于前端来讲,另一个必备条件就是 WebRTC (Web Real-Time Communication)技术的成熟,它于 2011 年 6 月 1 日开源并在 Google、Mozilla、Opera 支持下被纳入万维网联盟的 W3C 推荐标准。通过它,前端可以便捷地处理图像,视频,语音等内容。大家目前看到很多有意思的交互底层就是依赖他。

image.png

DX

在面向前端开发者(DX):智能化手段可以提升我们的研发效率和体验,以我们阿里和蚂蚁自身的实现看,Imgcook(D2C:Desgin to Code),代码智能提示[4],智能可视化 AVA[5],前端机器学习 pipcook[6] 都是挺有意思的尝试。
image.png

总结

以上就是我在实践中关于数据浪潮下前端技术发展的一些思考。当然前端技术技术这几年能获得这么长足进步,除了数据智能,其他大趋势(比如移动互联,5G,IoT)也深刻影响了前端技术的走向,但这些就不在本文讨论的范围内,有机会再跟大家讨论。

一直很喜欢吴军在《智能时代》一书中提到的一个观点:“2% 的人将控制未来,成为他们或者被淘汰”。期望各位前端同学都能在这波数据智能化的浪潮中找到自己的定位。

写在最后

如果大家对这块感兴趣,也希望来阿里巴巴一起做大数据和人工智能相关的工作,随时欢迎私信或者发简历给我:jifeng.zjd@taobao.com。大家一起合作,做件有意义的事情,团队长期招人。

相关链接

[1]https://www.aliyun.com/product/bigdata/ide
[2]https://zhuanlan.zhihu.com/p/132393588
[3]https://www.zhihu.com/question/56560321/answer/203249193
[4]https://zhuanlan.zhihu.com/p/115377444
[5]https://github.com/antvis/AVA
[6]https://github.com/alibaba/pipcook

相关实践学习
基于MaxCompute的热门话题分析
本实验围绕社交用户发布的文章做了详尽的分析,通过分析能得到用户群体年龄分布,性别分布,地理位置分布,以及热门话题的热度。
SaaS 模式云数据仓库必修课
本课程由阿里云开发者社区和阿里云大数据团队共同出品,是SaaS模式云原生数据仓库领导者MaxCompute核心课程。本课程由阿里云资深产品和技术专家们从概念到方法,从场景到实践,体系化的将阿里巴巴飞天大数据平台10多年的经过验证的方法与实践深入浅出的讲给开发者们。帮助大数据开发者快速了解并掌握SaaS模式的云原生的数据仓库,助力开发者学习了解先进的技术栈,并能在实际业务中敏捷的进行大数据分析,赋能企业业务。 通过本课程可以了解SaaS模式云原生数据仓库领导者MaxCompute核心功能及典型适用场景,可应用MaxCompute实现数仓搭建,快速进行大数据分析。适合大数据工程师、大数据分析师 大量数据需要处理、存储和管理,需要搭建数据仓库?学它! 没有足够人员和经验来运维大数据平台,不想自建IDC买机器,需要免运维的大数据平台?会SQL就等于会大数据?学它! 想知道大数据用得对不对,想用更少的钱得到持续演进的数仓能力?获得极致弹性的计算资源和更好的性能,以及持续保护数据安全的生产环境?学它! 想要获得灵活的分析能力,快速洞察数据规律特征?想要兼得数据湖的灵活性与数据仓库的成长性?学它! 出品人:阿里云大数据产品及研发团队专家 产品 MaxCompute 官网 https://www.aliyun.com/product/odps 
目录
相关文章
|
14天前
|
人工智能 分布式计算 DataWorks
大数据&AI产品月刊【2024年8月】
大数据& AI 产品技术月刊【2024年8月】,涵盖本月技术速递、产品和功能发布、市场和客户应用实践等内容,帮助您快速了解阿里云大数据& AI 方面最新动态。
|
22天前
|
数据采集 人工智能 安全
AI大数据处理与分析实战--体育问卷分析
本文是关于使用AI进行大数据处理与分析的实战案例,详细记录了对深圳市义务教育阶段学校“每天一节体育课”网络问卷的分析过程,包括数据概览、交互Prompt、代码处理、年级和学校维度的深入分析,以及通过AI工具辅助得出的分析结果和结论。
|
25天前
|
前端开发 JavaScript 开发者
震惊!Web 前端 href 与 src 竟有如此差异,快来一探究竟,掌握热门技术核心要点
【8月更文挑战第26天】在Web前端开发中,`href`与`src`是两个常用属性,但其差异常被忽视。`href`(超文本引用)用于创建文档间的链接关系,如链接至外部网页或引入CSS文件;`src`(来源)则用于在文档内嵌入资源,如图片或JavaScript文件。两者在使用场景及加载机制上有所不同:`href`支持并行下载且不阻塞渲染,适合非关键资源加载;而`src`加载时会暂停页面渲染直至资源加载完成,适用于如图片和脚本这类对页面显示至关重要的资源。因此,正确理解并运用这两个属性对于保障网页性能和用户体验至关重要。
38 3
|
25天前
|
存储 移动开发 前端开发
HTML5时代来临,这些新特性你掌握了吗?一篇文章带你玩转Web前端技术潮流!
【8月更文挑战第26天】HTML5(简称H5)作为新一代Web标准,相比HTML4带来了诸多增强功能。
35 2
|
19天前
|
前端开发 Java Spring
Spring与Angular/React/Vue:当后端大佬遇上前端三杰,会擦出怎样的火花?一场技术的盛宴,你准备好了吗?
【8月更文挑战第31天】Spring框架与Angular、React、Vue等前端框架的集成是现代Web应用开发的核心。通过RESTful API、WebSocket及GraphQL等方式,Spring能与前端框架高效互动,提供快速且功能丰富的应用。RESTful API简单有效,适用于基本数据交互;WebSocket支持实时通信,适合聊天应用和数据监控;GraphQL则提供更精确的数据查询能力。开发者可根据需求选择合适的集成方式,提升用户体验和应用功能。
52 0
|
19天前
|
大数据 数据处理 分布式计算
JSF 逆袭大数据江湖!看前端框架如何挑战数据处理极限?揭秘这场技术与勇气的较量!
【8月更文挑战第31天】在信息爆炸时代,大数据已成为企业和政府决策的关键。JavaServer Faces(JSF)作为标准的 Java Web 框架,如何与大数据技术结合,高效处理大规模数据集?本文探讨大数据的挑战与机遇,介绍 JSF 与 Hadoop、Apache Spark 等技术的融合,展示其实现高效数据存储和处理的潜力,并提供示例代码,助您构建强大的大数据系统。
25 0
|
19天前
|
前端开发 开发者 Apache
揭秘Apache Wicket项目结构:如何打造Web应用的钢铁长城,告别混乱代码!
【8月更文挑战第31天】Apache Wicket凭借其组件化设计深受Java Web开发者青睐。本文详细解析了Wicket项目结构,帮助你构建可维护的大型Web应用。通过示例展示了如何使用Maven管理依赖,并组织页面、组件及业务逻辑,确保代码清晰易懂。Wicket提供的页面继承、组件重用等功能进一步增强了项目的可维护性和扩展性。掌握这些技巧,能够显著提升开发效率,构建更稳定的Web应用。
49 0
|
23天前
|
前端开发 JavaScript API
Web服务器与前端技术的集成
【8月更文第28天】随着Web开发技术的发展,现代前端框架如React、Vue.js等已经成为构建复杂Web应用的标准工具。为了提供更好的用户体验,这些前端应用通常需要与后端Web服务器进行紧密集成。本文将详细介绍如何将React和Vue.js与后端Web服务器无缝集成,以创建高性能且用户友好的Web应用。
19 0
|
24天前
|
机器学习/深度学习 分布式计算 前端开发
构建前端防腐策略问题之前端代码会随着技术引擎的迭代而腐烂的问题如何解决
构建前端防腐策略问题之前端代码会随着技术引擎的迭代而腐烂的问题如何解决
|
26天前
|
前端开发 JavaScript 测试技术
前端开发需要哪些技术
前端开发需要哪些技术【8月更文挑战第25天】
39 0

热门文章

最新文章