2020 前端开源领域技术展望

简介: 导读:可以说开源前端领域正如偏右所说的渡过了波澜不惊的2019年,2020年开启了下一个10年,站在这个起点展望前端的未来,必会面临巨大的变化和挑战。说实话,展望接下来的十年会发生什么?十年对于互联网,对于前端来说太长了,很难想象十年后会是什么一个场景,但这路上有些事情在我们看来正在发生。

1.jpg
作者|展炎、御术、偏右

导读:可以说开源前端领域正如偏右所说的渡过了波澜不惊的2019年,2020年开启了下一个10年,站在这个起点展望前端的未来,必会面临巨大的变化和挑战。说实话,展望接下来的十年会发生什么?十年对于互联网,对于前端来说太长了,很难想象十年后会是什么一个场景,但这路上有些事情在我们看来正在发生。

TypeScript 是当下的政治正确但前端终将语言无关

毫无疑问 TypeScript 将成为很长一段时间的主流,大型前端开源项目大都已经或正在全面拥抱 TypeScript,他能让我们拥有很多面向对象语言、强类型语言才具备的先进特性,能帮助我们提升代码质量,降低团队协作上的成本和风险,如果我们的项目还未转过来,是时候动手了。

但一个开源项目的质量跟语言本身并无直接关系,更别说 TypeScript 本身依旧还只是带「静态类型检查」的「弱类型」语言,OO并不是必须的,用原生 JS 也一样能写出优雅的封装与继承,更让人期待的是WebAssembly(https://www.zhihu.com/question/362893829) 的潜力被真正开发出来后,前端终将语言无关,前端在研发的是人机交互界面上的产物。

浏览器技术和云计算的进化将加速前端构建和资源加载的变革

Webpack 5 正式版发布,通过物理缓存大幅提升构建性能,在短期内还会是主流构建工具;但随着 ES Modules 成为主流,CJS 淡出,ESM CDN 大范围使用后构建工具将转向 Bundless,Webpack 不可避免也会逐渐退出历史舞台。特别是当 HTTP/2 到来,支持请求与响应的多路复用来,HTTP 首部字段被大大压缩,传输效率会得到极大的提升,届时我们将不再需要对资源文件进行合并操作,构建工具也会随之加速进化。

C/S 到 B/S 再到 C/S

历史总在不断重复轮回中循环上升,互联网,特别是云的出现让软件从 C/S 走向了 B/S,甚至如 WebAssembly 技术的出现,我们能更低成本的将原先的客户端软件移植到浏览器上去,一切看上去都是朝着 B/S 发展。然而我们也要看到另外一个趋势,自成生态的巨型应用如微信、支付宝、Facebook 等正在收敛浏览器上软件至他们的客户端上,背后的典型技术是小程序、PWA,我们甚至已经看到了出现在 PC 客户端上小程序。而借助如 Electron 这类项目,很多 B/S 模式的软件服务在推出自己的客户端以谋求用户更专注的使用体验,特别是很多传统以 C/S 模式提供服务的软件推出客户端会更贴合用户的心智。这是我们看到的历史轮回,但接下来的这段 C/S 历程跟过去的 C/S 所用到的技术已经完全不一样了,不管是小程序、PWA还是Service Worker、Electron、这 Client 端上开源项目会迎来一个春天。

新兴交互场景将唤起 Micro UI

Micro Frontends (https://micro-frontends.org/) 正风生水起,然而它不过是已经风靡多年但仍备受争议的Microservice Architecture(https://microservices.io/) 在前端的应用,可以帮我们更好地去解决复杂应用的开发和维护问题。在人机交互,用户如何在一个复杂的产品中找到此时此刻最需要的一个 UI,仍然是一个未被很好地解决的问题。用户常常迷失在一个个大型 APP 复杂的 UI 中,然而很多时候我们只是需要一个能高效完成某项工作的 UI,姑且称为 Micro UI 吧。在银河帝国等科幻小说及科幻电影中,常常能看到一种叫“信息窗”的黑科技,这样的每个信息窗就是一个 Micro UI。随着 AI、AR、VR 、IOT 持续推进话,设备将越来越懂人,信息和数据的呈现也将越来越生动化,这些在科幻中才出现的东西在未来 10 年一定有一些会变成现实 ,这种 UI 的开发方式也将为前端的开发方式带来质的变化。

RPA & Marchine Driven UI

在 AI 和 IOT 时代,如果你然坚持认为应用一定是一个需要由专业人士设计开发,并且由用户通过手机主动使用 Web 产品的话,那么你将有较大概率过未来。

RPA 这个远古时代活跃在游戏外挂的古老的技术在 AI、标准化产品飞速发展的正在焕发着升级,UiPath(https://www.uipath.com/)、Zapier(https://zapier.com/)、Microsoft Power Platform(https://flow.microsoft.com/zh-cn/) 、UI Bot(https://www.uibot.com.cn/) 等工具正在改变很多行业的工作方式,而以 Google Assistant 为代表的智能助理正在改变人们使用电脑的方式。作为前端,我们要考虑是:UI 不仅是被人消费的,还可以被机器消费,甚至只需要描述你的意图,这些非常需要一种高效的方式让你的应用可以被机器人来驱动。甚至应用已经不再是一个当下我们能看到的,而是一个个机器人了,而我们提供的则是:RPA 机器人制作工具、可以被 RPA 来驱动的标准 UI。如何设计与实现可以被机器人、人同时使用的 UI 是我们面临的一大挑战。

图形技术依旧会是界面上的热点

尽管脑机交互已经在实验室里孵化,但未来十年眼睛依旧还是人类获取外界信息最主要的通道,图形化可以比文字快十倍甚至万倍的速度清晰有效地传达信息,这是人类经历漫长进化习得的强大视觉化思考本能。在数据愈加丰富、使用场景愈加多样的下一个十年,如何高效的从数据中获得洞察依旧会有强烈的诉求,前端这个最接近数据可视化能力模型要求的工种依旧会是这个领域的主力。而另一方面,未来会出现新的「屏」,不管是 IOT 下的实屏还是 VR、AR 下的虚屏,当下已经相当完备和标准化的绘图 API 最有机会被新「屏」优先支持和采用,在这基础上利用图形技术实现一套新的 UI 基础设施甚至语言都是有可能的。

前端智能化

前端近年来一直尝试提升效率,可视化研发、搭建体系、工程&工具、端多解决方案等等都是为了解决效率,但天花板已然出现,下一步必然会引入智能化能力,在原来的技术体系&产品上,注入自然语言识别、图像识别的能力,使得效能的发生一系列质的变化,来突破这个天花板。更大层面上,运用智能化能力来解决工作中的问题,会逐步成为前端的必备能力和思考方式。

就算不想去蹭人工智能的热,事实上是你不得不接受并开始学习人工智能,大量简单如千人千面的Banner、营销活动页已经纯粹通过人工智能自动化生产,并不需要前端去参与研发,复杂如中后台的表单、表格、图表展现也已经可以通过提供接口智能推导出最佳的页面实现,只需要一行代码输入数据就能出可视化图表,甚至从设计稿直接生成页面也将变成现实。前端智能化的项目将会越来越多,任何时候开始都不晚,但不开始就晚了。

端到端的研发

随着云原生和业务平台能力逐步完备,前端运用Serverless能力来完成端到端的研发工作会逐步成为一种趋势,在这个趋势的背后,会面临两个挑战,一方面是需要将现有的工具和平台延展到Serverless上,在支持Serverless的同时,必须将端到端一体化的来看待,包括:研发工具、监控体系、质量体系等等;另一方面对人员自身能力和意识有了新的要求。前端这个岗位的职能边界和能力范围的会发现变化。

基于前端智能化与端到端的研发方向上,是未来前端开源上的最具吸引力的项目;而在整体的层面上,前端具备吸引力的项目会有两个方面的特征:

在现有相关体系上提出新的理念和思想;随着框架、构建库等基础设施收敛,类似的重复性的开源项目会减少,但创新并不会停止,等到更多关注和认可的一定是能力在基础设施上提出新的理念和思想的项目。
在现有相关体系上与其他领域产生链接;有些技术未必是刚刚出现,但今天重新受到前端业内的关注,比如WebAssembly,因为大家发现了新的运用场景。未来将现有前端技术与其他技术领域相结合的项目和设计,会受到开源社区的更多关注。

We are hiring

淘系技术部依托淘系丰富的业务形态和海量的用户,我们持续以技术驱动产品和商业创新,不断探索和衍生颠覆型互联网新技术,以更加智能、友好、普惠的科技深度重塑产业和用户体验,打造新商业。我们不断吸引用户增长、机器学习、视觉算法、音视频通信、数字媒体、移动技术、端侧智能等领域全球顶尖专业人才加入,让科技引领面向未来的商业创新和进步。
请投递简历至邮箱:ruoqi.zlj@taobao.com

更多技术干货关注「淘系技术」微信公众号!
屏幕快照 2020-02-07 下午3.57.54.png

相关文章
|
5月前
|
JSON 前端开发 JavaScript
惊艳!阿里开源 15.2k Star 企业级低代码引擎揭秘,如何变革前端开发方式?
阿里巴巴开源的 LowCodeEngine 是一款企业级低代码引擎,具备可视化编排、UI 渲染、代码生成等全链路能力。支持 React、Vue、Rax 等框架,提供高扩展性与类型安全,助力高效开发,降低维护成本,适用于后台系统、多端同步等场景。
886 1
|
4月前
|
JSON 监控 前端开发
AMIS:百度开源的前端低代码神器,18.4k star 背后的开发效率提升利器
AMIS(前端低代码框架)是百度开源的低代码前端框架,基于纯 JSON 配置即可生成完整后台页面,包括表单、表格、图表、CRUD 列表,支持可视化拖拽编辑。,星标数已达 18.4k,百度内部已沉淀超过 5 万个页面,广泛应用于审核系统、数据管理后台、模型监控等落地场景
832 0
|
8月前
|
人工智能 自然语言处理 前端开发
DeepSite:基于DeepSeek的开源AI前端开发神器,一键生成游戏/网页代码
DeepSite是基于DeepSeek-V3模型的在线开发工具,无需配置环境即可通过自然语言描述快速生成游戏、网页和应用代码,并支持实时预览效果,显著降低开发门槛。
1515 93
DeepSite:基于DeepSeek的开源AI前端开发神器,一键生成游戏/网页代码
|
8月前
|
前端开发 Java 物联网
智慧班牌源码,采用Java + Spring Boot后端框架,搭配Vue2前端技术,支持SaaS云部署
智慧班牌系统是一款基于信息化与物联网技术的校园管理工具,集成电子屏显示、人脸识别及数据交互功能,实现班级信息展示、智能考勤与家校互通。系统采用Java + Spring Boot后端框架,搭配Vue2前端技术,支持SaaS云部署与私有化定制。核心功能涵盖信息发布、考勤管理、教务处理及数据分析,助力校园文化建设与教学优化。其综合性和可扩展性有效打破数据孤岛,提升交互体验并降低管理成本,适用于日常教学、考试管理和应急场景,为智慧校园建设提供全面解决方案。
495 70
|
5月前
|
Web App开发 前端开发 关系型数据库
GitHub 2.8k star 开源既封神,“Liquid‑Glass‑React”,让你前端界面瞬间拥有苹果级液态玻璃效果!
Liquid-Glass-React 是一款开源前端组件,旨在将 Apple iOS 26 的“液态玻璃”视觉效果引入 React 应用。凭借逼真折射、多种反射模式、响应式交互及高度可配置性,它已获得 2.8k stars,成为提升 UI 质感的热门工具。
496 0
|
前端开发 JavaScript 测试技术
前端测试技术中,如何提高集成测试的效率?
前端测试技术中,如何提高集成测试的效率?
|
6月前
|
人工智能 前端开发 数据可视化
天都塌了,17K+ Star 的AI开源神器!Onlook 如何颠覆前端开发与设计协作?怎么办
Onlook是一款开源的视觉优先代码编辑器,结合Figma直观操作与VS Code强大功能,支持浏览器中实时构建、编辑和部署React应用。项目已获17K+Star,提供快速创建Next.js应用、所见即所得的可视化编辑、AI驱动开发工具及一键部署协作等功能,是前端开发与设计协作的理想选择。
938 0
|
10月前
|
安全 前端开发 开发工具
【01】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-项目开发实战-优雅草卓伊凡拟开发一个一站式家政服务平台-前期筹备-暂定取名斑马家政软件系统-本项目前端开源-服务端采用优雅草蜻蜓Z系统-搭配ruoyi框架admin后台-全过程实战项目分享-从零开发到上线
【01】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-项目开发实战-优雅草卓伊凡拟开发一个一站式家政服务平台-前期筹备-暂定取名斑马家政软件系统-本项目前端开源-服务端采用优雅草蜻蜓Z系统-搭配ruoyi框架admin后台-全过程实战项目分享-从零开发到上线
478 5
【01】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-项目开发实战-优雅草卓伊凡拟开发一个一站式家政服务平台-前期筹备-暂定取名斑马家政软件系统-本项目前端开源-服务端采用优雅草蜻蜓Z系统-搭配ruoyi框架admin后台-全过程实战项目分享-从零开发到上线
|
12月前
|
人工智能 前端开发 小程序
2024年12月30日蜻蜓蜻蜓AI工具系统v1.0.0发布-优雅草科技本产品前端源代码已对外开源可免费商用-优雅草老八
2024年12月30日蜻蜓蜻蜓AI工具系统v1.0.0发布-优雅草科技本产品前端源代码已对外开源可免费商用-优雅草老八
360 31
2024年12月30日蜻蜓蜻蜓AI工具系统v1.0.0发布-优雅草科技本产品前端源代码已对外开源可免费商用-优雅草老八
|
10月前
|
前端开发
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
278 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布

热门文章

最新文章

  • 1
    前端如何存储数据:Cookie、LocalStorage 与 SessionStorage 全面解析
  • 2
    前端工程化演进之路:从手工作坊到AI驱动的智能化开发
  • 3
    Vue 3 + TypeScript 现代前端开发最佳实践(2025版指南)
  • 4
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(五):背景属性;float浮动和position定位;详细分析相对、绝对、固定三种定位方式;使用浮动并清除浮动副作用
  • 5
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(六):全方面分析css的Flex布局,从纵、横两个坐标开始进行居中、两端等元素分布模式;刨析元素间隔、排序模式等
  • 6
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(一):CSS发展史;CSS样式表的引入;CSS选择器使用,附带案例介绍
  • 7
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(八):学习transition过渡属性;本文学习property模拟、duration过渡时间指定、delay时间延迟 等多个参数
  • 8
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(九):强势分析Animation动画各类参数;从播放时间、播放方式、播放次数、播放方向、播放状态等多个方面,完全了解CSS3 Animation
  • 9
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(四):元素盒子模型;详细分析边框属性、盒子外边距
  • 10
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(二):CSS伪类:UI伪类、结构化伪类;通过伪类获得子元素的第n个元素;创建一个伪元素展示在页面中;获得最后一个元素;处理聚焦元素的样式