关于数据智能浪潮对前端技术发展影响的一些思考

简介: 在大数据和人工智能的浪潮下,到底对前端技术的发展带来了什么影响?

作者 | 继风

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

以团队在负责在做的阿里云飞天大数据平台为例,从在 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
上图引用月影老师在《跟月影学可视化》中讲述web前端与可视化的关系和不同

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

开源技术组件层面:

  • AntV
  • Echarts
  • HighLights
  • ...

image.png
重数据可视化的产品

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

image.png
在专业的细分领域,比如地理,安防,新零售,等领域中不同场景就有很多机会 具体比如在我们阿里云的一站式大数据开发治理平台的 DataWorks 产品就有用于做流程编排的 DAG,图分析,数据的血缘分析等有意思的可视化。
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 中一些人机对话,互动游戏中的一些实践,具体可以看 https://www.zhihu.com/question/56560321/answer/203249193
image.png
这一轮的技术变革,有两个大的宏观的背景 1.AI技术的第三波潮起 随着2010年前后,深度学习技术的成熟,计算力的提升,以及互联网时代积累的大数据财富,人工智能技术开始一段与以往大为不同的复兴之路;分别在语音识别,图像识别,自然语言处理等相关技术上获得根本的突破。

例如, 2012 年到 2015 年,在代表计算机智能图像识别最前沿发展水平的 ImageNet 竞赛(ILSVRC)中,参赛的人工智能算法在识别准确率上突飞猛进。2014 年,在识别图片中的人、动物、车辆或其他常见对象时,基于深度学习的计算机程序超过了普通人类的肉眼识别准确率。下图就摘自李开复老师的《人工智能》就体现了这个趋势:
image.png
对于前端来讲,另一个必备条件就是 WebRTC (Web Real-Time Communication)技术的成熟,它于2011年6月1日开源并在Google、Mozilla、Opera支持下被纳入万维网联盟的W3C推荐标准;通过它,前端可以便捷地处理图像,视频,语音等内容。大家目前看到很多有意思的交互底层就是依赖他。
image.png

DX

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

写在最后

以上就是我在实践中关于数据浪潮下前端技术发展的一些思考,当然前端技术技术这几年能获得这么长足进步,除了数据智能,其他大趋势(比如移动互联,5G,IoT)也深刻影响了前端技术的走向,但这些就不在本文讨论的范围内,有机会再跟大家讨论。一直很喜欢吴军在《智能时代》一书中提到的一个观点:“2%的人将控制未来,成为他们或者被淘汰”。期望各位前端同学都能在这波数据智能化的浪潮中找到自己的定位。


image.png
关注「Alibaba F2E」
把握阿里巴巴前端新动向

相关实践学习
基于MaxCompute的热门话题分析
Apsara Clouder大数据专项技能认证配套课程:基于MaxCompute的热门话题分析
相关文章
|
存储 前端开发 安全
前端如何存储数据:Cookie、LocalStorage 与 SessionStorage 全面解析
本文全面解析前端三种数据存储方式:Cookie、LocalStorage与SessionStorage。涵盖其定义、使用方法、生命周期、优缺点及典型应用场景,帮助开发者根据登录状态、用户偏好、会话控制等需求,选择合适的存储方案,提升Web应用的性能与安全性。(238字)
1209 0
|
12月前
|
前端开发 搜索推荐 开发工具
通义灵码与颜色板生成器,为前端开发提供智能配色解决方案
在前端开发中,色彩搭配对用户体验和界面美观至关重要。通义灵码提供的颜色板生成器通过自动推荐配色方案、随机生成颜色组合及支持自定义调整,帮助开发者高效完成配色任务。该工具支持一键导出为 CSS 样式表,并提供简洁的中文指令交互方式,大大提升开发效率,助力开发者打造美观和谐的用户界面。
|
10月前
|
人工智能 前端开发 JavaScript
前端工程化演进之路:从手工作坊到AI驱动的智能化开发
前端工程化演进之路:从手工作坊到AI驱动的智能化开发
1012 18
前端工程化演进之路:从手工作坊到AI驱动的智能化开发
|
存储 监控 安全
前端框架的数据驱动方式如何保证数据的安全性?
总之,前端框架的数据驱动方式需要综合运用多种手段来保证数据的安全性。从传输、存储、访问控制到防范攻击等各个方面进行全面考虑和实施,以确保用户数据的安全可靠。同时,不断加强安全管理和技术创新,以应对不断变化的安全挑战。
575 60
|
前端开发 JavaScript 测试技术
前端测试技术中,如何提高集成测试的效率?
前端测试技术中,如何提高集成测试的效率?
|
前端开发 Java 物联网
智慧班牌源码,采用Java + Spring Boot后端框架,搭配Vue2前端技术,支持SaaS云部署
智慧班牌系统是一款基于信息化与物联网技术的校园管理工具,集成电子屏显示、人脸识别及数据交互功能,实现班级信息展示、智能考勤与家校互通。系统采用Java + Spring Boot后端框架,搭配Vue2前端技术,支持SaaS云部署与私有化定制。核心功能涵盖信息发布、考勤管理、教务处理及数据分析,助力校园文化建设与教学优化。其综合性和可扩展性有效打破数据孤岛,提升交互体验并降低管理成本,适用于日常教学、考试管理和应急场景,为智慧校园建设提供全面解决方案。
744 70
|
人工智能 移动开发 前端开发
WeaveFox:蚂蚁集团推出 AI 前端智能研发平台,能够根据设计图直接生成源代码,支持多种客户端和技术栈
蚂蚁团队推出的AI前端研发平台WeaveFox,能够根据设计图直接生成前端源代码,支持多种应用类型和技术栈,提升开发效率和质量。本文将详细介绍WeaveFox的功能、技术原理及应用场景。
7537 68
WeaveFox:蚂蚁集团推出 AI 前端智能研发平台,能够根据设计图直接生成源代码,支持多种客户端和技术栈
|
前端开发 Java Shell
【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
1015 20
【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
|
前端开发 Cloud Native Java
Java||Springboot读取本地目录的文件和文件结构,读取服务器文档目录数据供前端渲染的API实现
博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
Java||Springboot读取本地目录的文件和文件结构,读取服务器文档目录数据供前端渲染的API实现
|
前端开发 JavaScript API
惊呆了!这些前端技术竟然能让你的网站实现无缝滚动效果!
【10月更文挑战第30天】本文介绍了几种实现网页无缝滚动的技术,包括CSS3的`scroll-snap`属性、JavaScript的Intersection Observer API以及现代前端框架如React和Vue的动画库。通过示例代码展示了如何使用这些技术,帮助开发者轻松实现流畅的滚动效果,提升用户体验。
1273 29

热门文章

最新文章

  • 1
    前端如何存储数据:Cookie、LocalStorage 与 SessionStorage 全面解析
    1209
  • 2
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(九):强势分析Animation动画各类参数;从播放时间、播放方式、播放次数、播放方向、播放状态等多个方面,完全了解CSS3 Animation
    539
  • 3
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(八):学习transition过渡属性;本文学习property模拟、duration过渡时间指定、delay时间延迟 等多个参数
    419
  • 4
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(七):学习ransform属性;本文学习 rotate旋转、scale缩放、skew扭曲、tanslate移动、matrix矩阵 多个参数
    415
  • 5
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(六):全方面分析css的Flex布局,从纵、横两个坐标开始进行居中、两端等元素分布模式;刨析元素间隔、排序模式等
    529
  • 6
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(五):背景属性;float浮动和position定位;详细分析相对、绝对、固定三种定位方式;使用浮动并清除浮动副作用
    708
  • 7
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(四):元素盒子模型;详细分析边框属性、盒子外边距
    1317
  • 8
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(三):元素继承关系、层叠样式规则、字体属性、文本属性;针对字体和文本作样式修改
    303
  • 9
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(二):CSS伪类:UI伪类、结构化伪类;通过伪类获得子元素的第n个元素;创建一个伪元素展示在页面中;获得最后一个元素;处理聚焦元素的样式
    1099
  • 10
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(一):CSS发展史;CSS样式表的引入;CSS选择器使用,附带案例介绍
    492