大前端2020年前瞻:有哪些你不能错过的技术趋势?

本文涉及的产品
函数计算FC,每月15万CU 3个月
简介: “学不动”的大前端,在 2020 年有哪些你不能错过的技术趋势?又有哪些你将面临的挑战?

作者|张晓楠
文章链接:https://mp.weixin.qq.com/s/wxGul8muHeFSiaRCKi-NHA

image.png

提起大前端,总会有人抱怨“学不动”了,因为新东西实在太多。2019 年的大前端领域虽然并没有出现什么颠覆性技术,但是 Flutter、WebAssembly、Serverless 的火爆发展还是超乎我们预期,也让我们进一步看到大前端的融合趋势。在即将到来的 2020 年,大前端领域又有哪些你不能错过的技术趋势呢?正值 GMTC2019 全球大前端技术大会召开之际,我们采访了大会四位专题出品人:PayPal Senior Software Engineer 于航,腾讯前端技术专家 / 总监、IVWEB 团队负责人刘恒兵(河伯),腾讯 QQ 小程序前端负责人黄佳琳,阿里巴巴前端技术专家桑世龙(狼叔),请他们对 2020 年进行展望,同时也阐述 2020 年前端从业者可能将要面临的挑战。

InfoQ:2019 年即将过去,在今年大前端领域,您印象最深刻(或者认为最重要)的一件事情是什么?

于航: 我印象最深的要属 WebAssembly 在 2019 年的飞速发展了。从 3 月份 Mozilla提出 WASI (WebAssembly 系统接口,WebAssembly System Interface)的概念到后来成立 ByteCode Alliance 联盟(字节码联盟),再到最近 WebAssembly 进入 W3C 成为正式推荐标准,Wasm 在 “out-of-web” 领域的发展着实迅速。不仅如此,伴随着谷歌和 Mozilla 强有力的推广和在 Chrome 以及 Firefox 上对 MVP 标准的快速实现,Wasm 目前已经或者正准备逐渐取代 PNaCl、SIMD.js 甚至 ASM.js 等昔日的流行技术。

刘恒兵(河伯): 2019 年我认为相对重要的是 TypeScript 的大规模普及和流行,至少在我们团队,TypeScript 已经跟 JavaScript 并行成为我们的重要选择了。当然选这个的原因还在于 TypeScript 的普及会反向推动 ES6(ECMAScript 6.0)的进步和发展。我们知道在最近 Node.js 13.2.0 版本中,正式支持了 ECMAScript modules,这些新特性的逐渐支持其实也源于社区内先行者们的探索和实践,正因为这样的努力才最后推动了 JavaScript 的进一步发展。

黄佳琳: 2019 年印象最深的是小程序的发展,以及各大主流 App 纷纷推出小程序平台。小程序发展至今,热度不断攀升,目前小程序平台越来越多,这也促使各种跨平台的小程序框架不断涌现。已有的框架在性能和兼容性方面也在持续优化(例如 taro 和 uni-app 都会在本次 GMTC 大会上有相关的分享),同时也出现了像 kbone 这样的新思路。结合小程序云的开发能力,越来越低的开发门槛将持续刺激小程序的发展。

InfoQ:在今年年初您对大前端领域的趋势预测中,如今看来跟您预测最相符的一个技术趋势是什么?最超乎您预期的一个技术趋势是什么?

桑世龙(狼叔): 在我看来,今年大前端增速放缓,并没有出现很多颠覆性的技术,反而在细分领域厮杀得非常厉害,我想这是好事,意味着前端正在走向成熟。这点从框架、语言,甚至是前后端分工上都有体现。比如 Flutter,跨端能力进一步增强;比如小程序,不断涌现出各种转译实现,例如 Wepy、Taro 等, ReactReconciler 出现之后,出现了 Remax 框架,通过 Remax 把生成的「虚拟 DOM」渲染到视图层,从而做到了使用真正的 React 去构建小程序;比如 React,能讲的新特性并不多,在 Create-React-App 火爆之后,类似的支付宝的 Umi 框架也正在悄然兴起,尤其值得一提的是 Umi UI,在可视化辅助编程领域可谓一个新的突破。但无论怎么看,这些都不算是颠覆性的变革,而是在深度上更精进一步。

在 Node.js 领域,今年新东西也不多。最新已经发布到 v13,lts 是 v12,Egg.js 的生态持续完善,进度也不如前两年,成熟之后的创新就少了。在很多框架上加入 TypeScript 似乎已经大致正确,比如自身是基于 TypeScript 的 Nest 框架,比如阿里也开源了基于 Egg 生态的 Midway 框架。另外,GraphQL 也有很强的应用落地场景,尤其是 Apollo 项目带来的改变最大,极大地降低了落地成本。已经用 Rust 重写的 Deno 在稳步发展中,没有火起来,但也有很高的关注度,它不会替代 Node.js,而会是基于 Node 之上的一种更好的尝试。

大家可能会感觉 Node.js 热度不够,但事实上很多做 Node.js 的人已经投身到研发模式升级上了。对于今天的 Node.js 来说,会用很容易,但用好很难,比如高可用、性能调优,这些还是非常有挑战的。我们可以假想一下,流量打网关,网关根据流量来实例化容器,加载 FaaS 运行时环境,然后执行对应函数提供服务。在整个过程中,不许关心服务器和运维工作,不用担心高可用问题,是不是前端可以更加轻松地接入 Node.js?这其实就是当前大厂在前端做的基于 Serverless 的实践,比如基于 FaaS 如何做服务编排、页面渲染、网关等。接入 Serverless 不是目的,目的是让前端能够借助 Serverless 创造更多业务价值。

于航:最相符的可能就是 WebAssembly 将会在 2020 年底成为 Web 新技术浪潮的主角,不过现在来看这个时间可能要提前了。Wasm 技术自 2015 年被提出后经过四年多的发展,现在逐渐从规范制定转向到了技术实施的层面。但实际上相较于规范制定所花费的时间,今年以来,技术实施的进度是以肉眼可见的速度在发展。因此伴随着各类基础设施的完善和落地,相信 Wasm 被真正应用到各类实际项目中的日子并不会太遥远。

刘恒兵(河伯):相对符合我的预测的技术趋势应该是工程提效。提效对于企业研发来说非常重要,因此大前端领域建设中如何更好地提效也是最值得关注的重点之一。无论是 React Native 还是 Flutter,其实都是在提效(大前端跨端研发)的基础之上兼顾性能。另外,同构、组件、智能研发、Serverless 等等都离不开企业提效。

让人惊喜的大前端领域的技术趋势应该就是 Wasm 逐渐看到了商业化的可能,我们目前在播放器场景下通过 Wasm 来解决浏览器不支持 H.265 编解码的问题。可以看到随着浏览器逐渐完善其基础能力,大前端的空间也越来越大。

黄佳琳:与我预测相符的是 Flutter 的爆炸性发展和 Flutter for Web 的发布。此外,小程序平台也在尝试和 Flutter 技术结合,提升小程序的渲染性能。

最超乎我预期的一个技术趋势是 Docker 在前端领域的快速发展。Docker 在过去一年里改变了我们团队的构建方式和部署方式,在效率提升上十分明显。

InfoQ:预测 2020 年的大前端领域,您认为最值得关注的技术趋势是什么?

于航:伴随着 WebAssembly Post-MVP 标准的逐渐完善,Wasm 在 Web 领域能够擦出怎样的火花?这是我比较关注的事情。Wasm 能否真正享受到与 JavaScript 一样的浏览器控制能力?是否能够直接操纵 DOM 进而以更低的成本来操作和构建前端 UI 组件 / 页面?

谷歌和 Mozilla 对 WebAssembly 的大力推广可见其对该技术的重视程度,但在此之前 Wasm 真正落地的项目其实并不多,因此 2020 年可能会是一个 Wasm 应用百花齐放的年份。不仅如此,在构建 AI 以及区块链应用上,基于 WebAssembly 技术构建的 SSVM 虚拟机可能也将会在 2020 年得到大规模使用,此举将会把 Wasm 技术的应用场景拓宽到更多领域。

刘恒兵(河伯):我基于 2019 年大前端技术趋势的发展再进行一下延展,我认为企业效率以及大前端性能可能会是 2020 年最值得关注的大前端趋势。针对企业提效这点,未来 Serverless、基于 AI 的智能研发、高效的全链路监控等都能在大前端中扮演更多的角色和戏份;在性能方面,除了浏览器逐渐提升基础能力之外,跨端研发这样能让大前端更为一体的技术,将会逐渐被更多团队所选择。

黄佳琳:2020 年的大前端领域,随着跨平台框架、Serverless 等技术的不断成熟,端的边界会变得越来越模糊,大前端将进一步走向融合。在小程序方面,我认为值得关注的是小程序的工程化趋势。Web 项目的工程化在 2019 年日趋规范,而小程序项目的工程化目前还不够完善,我们在这方面则做出了尝试,提供了官方的 CI 构建方案。随着小程序项目的复杂化,小程序工程化方面的更新值得大家在 2020 年去重点关注。

InfoQ:您认为对于前端从业者来说,2020 年可能面临的最大挑战是什么?

于航:前端技术逐渐开始不再局限于 Web,或者说不再局限于我们所熟知的 JavaScript + CSS + HTML 这三种技术了。随着前端应用体积的逐渐增大,更多用于提高应用性能、解决大型应用工程化构建问题的解决方案开始逐渐涌现。

不仅如此,近年来,依赖于 Node.js、Chromium 等前端相关的成熟技术或底层基础设施,Electron/NW.js 也让我们可以将前端技术应用在本地桌面构建领域,类似的还有 React Native 在移动应用开发领域所占有的一席之地。

除了应用开发领域,基于 Serverless 的 BFF 层也开始将后端的“部分控制权”移交到了前端开发者的手中。而 2020 年,我相信随着 WebAssembly 技术及其相关基础组件的逐渐成熟和完善,其在“ on-web ”和“ out-of-web ”这两个领域内,都会开始不断涌现出更多的、在各类新技术领域和场景下的尝试,Web 技术逐渐开始向多领域融合。再借助 WebAssembly 本身的高性能、高可移植性以及可大量复用历史代码库等特性,相信类似 Chrome OS 的“浏览器操作系统”又会席卷而来。

为了迎接前端技术的快速发展,前端开发者需要不断学习、快速横向扩展所了解的知识领域,这样才能够在遇到问题时找到最合适的解决方案,然后再进行对该知识领域纵向而深入地了解。

刘恒兵(河伯):我认为 2020 年最大的挑战是前端技能模型的扩展(无边界化)。以前做前端,懂 HTML+JS+CSS 就好了,但现在不同,Serverless 的发展让前端更多参与到中后台建设中,如果要做得更专业,就要掌握更多的 Server 知识。在端上也如此,React Native、小程序、Flutter 等跨端技术要求我们更多地去掌握 Native 上的技能知识。所以如何快速适应变化和发展、快速普及知识 / 能力模型变得尤为重要。

黄佳琳:如果说 2020 年大前端融合是趋势所在,那么对前端从业者来说既是机遇,也是挑战。机遇在于前端开发的天花板越来越高,想象空间越来越大;挑战在于对优秀前端开发人员的要求越来越高。前端发展方向趋于多元化,而真正的全能型人才比较稀缺,我们要在关注领域动态、扩大知识面的同时,找准自己专精的方向去钻研,忌浅尝辄止。

桑世龙(狼叔):不可否认,这依然是大前端最好的时代。对于前端从业者来说,证明自己的最好办法不是看你获得多少资源,而是看你可以创造多少业务价值。虽然在垂直领域的深耕可以让我们有更多生存空间,但我更愿意认为 Serverless 可以带来前端研发模式上的颠覆,只有简化前后端开发的难度,才能更好地放大前端的业务价值。最后,引用我常说的一句话送给大家:”少抱怨,多思考,未来更美好。“

相关实践学习
【文生图】一键部署Stable Diffusion基于函数计算
本实验教你如何在函数计算FC上从零开始部署Stable Diffusion来进行AI绘画创作,开启AIGC盲盒。函数计算提供一定的免费额度供用户使用。本实验答疑钉钉群:29290019867
建立 Serverless 思维
本课程包括: Serverless 应用引擎的概念, 为开发者带来的实际价值, 以及让您了解常见的 Serverless 架构模式
目录
相关文章
|
3月前
|
前端开发 JavaScript 测试技术
前端测试技术中,如何提高集成测试的效率?
前端测试技术中,如何提高集成测试的效率?
|
3月前
|
Cloud Native 前端开发 JavaScript
前端开发者必看:不懂云原生你就OUT了!揭秘如何用云原生技术提升项目部署与全栈能力
【10月更文挑战第23天】随着云计算的发展,云原生逐渐成为技术热点。前端开发者了解云原生有助于提升部署与运维效率、实现微服务化、掌握全栈开发能力和利用丰富技术生态。本文通过示例代码介绍云原生在前端项目中的应用,帮助开发者更好地理解其重要性。
124 0
|
3月前
|
前端开发 JavaScript API
惊呆了!这些前端技术竟然能让你的网站实现无缝滚动效果!
【10月更文挑战第30天】本文介绍了几种实现网页无缝滚动的技术,包括CSS3的`scroll-snap`属性、JavaScript的Intersection Observer API以及现代前端框架如React和Vue的动画库。通过示例代码展示了如何使用这些技术,帮助开发者轻松实现流畅的滚动效果,提升用户体验。
290 29
|
3月前
|
前端开发 JavaScript 搜索推荐
HTML与CSS在Web组件化中的核心作用及前端技术趋势
本文探讨了HTML与CSS在Web组件化中的核心作用及前端技术趋势。从结构定义、语义化到样式封装与布局控制,两者不仅提升了代码复用率和可维护性,还通过响应式设计、动态样式等技术增强了用户体验。面对兼容性、代码复杂度等挑战,文章提出了相应的解决策略,强调了持续创新的重要性,旨在构建高效、灵活的Web应用。
67 6
|
3月前
|
前端开发 JavaScript 搜索推荐
前端懒加载:提升页面性能的关键技术
前端懒加载是一种优化网页加载速度的技术,通过延迟加载非首屏内容,减少初始加载时间,提高用户访问体验和页面性能。
|
3月前
|
缓存 JavaScript 前端开发
JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用
本文深入讲解了 JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用。
87 5
|
3月前
|
移动开发 前端开发 JavaScript
惊!这些前端技术竟然能让你的网站在移动端大放异彩!
随着互联网技术的发展,移动设备成为主要的上网工具。本文介绍了几种关键的前端技术,包括响应式设计、图片优化、字体选择、HTML5和CSS3的应用、性能优化及手势操作设计,帮助开发者提升网站在移动端的显示效果和用户体验。示例代码展示了如何实现简单的双向绑定功能。
60 3
|
3月前
|
数据采集 前端开发 安全
前端测试技术
前端测试是确保前端应用程序质量和性能的重要环节,涵盖了多种技术和方法
|
3月前
|
编解码 前端开发 JavaScript
前端界的黑科技:掌握这些技术,让你的网站秒变未来感十足!
【10月更文挑战第31天】前端技术日新月异,黑科技层出不穷,让网页更加美观、交互更加丰富。本文通过响应式布局与媒体查询、前端框架与组件化开发等案例,展示这些技术如何让网站充满未来感。响应式布局使网站适应不同设备,前端框架如React、Vue则提高开发效率和代码质量。
74 3
|
3月前
|
JSON 前端开发 搜索推荐
惊!这些前端技术竟然能让你的网站实现个性化推荐功能!
【10月更文挑战第30天】随着互联网技术的发展,个性化推荐已成为提升用户体验的重要手段。前端技术如JavaScript通过捕获用户行为数据、实时更新推荐结果等方式,在实现个性化推荐中扮演关键角色。本文将深入解析这些技术,并通过示例代码展示其实际应用。
131 4

热门文章

最新文章

  • 1
    【Java若依框架】RuoYi-Vue的前端和后端配置步骤和启动步骤
  • 2
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 3
    【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
  • 4
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 5
    详解智能编码在前端研发的创新应用
  • 6
    巧用通义灵码,提升前端研发效率
  • 7
    【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
  • 8
    智能编码在前端研发的创新应用
  • 9
    【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程
  • 10
    抛弃node和vscode,如何用记事本开发出一个完整的vue前端项目
  • 1
    以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
    24
  • 2
    大前端之前端开发接口测试工具postman的使用方法-简单get接口请求测试的使用方法-简单教学一看就会-以实际例子来说明-优雅草卓伊凡
    43
  • 3
    【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
    25
  • 4
    巧用通义灵码,提升前端研发效率
    84
  • 5
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    137
  • 6
    详解智能编码在前端研发的创新应用
    92
  • 7
    智能编码在前端研发的创新应用
    75
  • 8
    【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    35
  • 9
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    111
  • 10
    【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
    73