2020 年大前端技术趋势解读-精品文档资料整理.docx
《2020 年大前端技术趋势解读-精品文档资料整理.docx》由会员分享,可在线阅读,更多相关《2020 年大前端技术趋势解读-精品文档资料整理.docx(27页珍藏版)》请在淘文阁 - 分享文档赚钱的网站上搜索。
1、2020 年大前端技术趋势解读 来源 腾讯IMWeb前端团队 光阴荏苒 非比寻常的一年度即将过去。在这过去的一年度中 与其讲前端的平稳期即将到来 不如讲前端反而进入了技术深水区。换言之 在全栈以及多端的影响下 前端领域里“术业有专攻的时代已经到来。 如今的前端早已不再拘泥于知足页面展示 而是开场延展到通过全栈来闭环产品。这说明前端已经有才能透过业务深化产业 继而影响商业结果。这种表象的改变背后是本质的转变 从更为宏观的角度来讲 前端正在通过持续的技术革新以及技术交融不断打破自身边界 进而重新定义自身价值。在这种大变革的时代背景下 腾讯 IMWeb 前端团队也正在与时俱进得进展着技术更新、优化与
2、晋级 结合自身这一年度的快速开展 IMWeb 团队为大众带来 2020 年度大前端技术趋势解读。 回首今年度的技术趋势 本文拟通过回首 2020 年度七大主要的前端技术趋势来展现前端早已由单纯工具解决问题的属性逐步转变为深化产品机制解决商业问题的角色。前端开发者的关注点也早已不是怎样使资源利用效率更高 页面体验更优和保证业务的稳定输出 而是更为关注产品才能、产业形式、数据建立和商业转化。 开源站点 bestofjs.org 收录了 Github 上 1500 个开源工程 并且还基于 GithubTrending API 的公开数据 更新统计这些工程的 Stars 新增趋势。基于 Bestofj
3、s 去年度的报告以及数据 下面展示了 Top30 的前端重点工程 并对此进展简单的介绍。 相比于去年度 学习资源越来越丰富了 Top100 内有 14 个工程是与前端根底学习相关的 侧面可以看出前端行业的繁荣 同时也反映出知识以及人才的迭代速度是非常快的。Deno 超过 Vue.js 一跃成为过去一年度 Star 增长最快的开源工程 打破了 Vue.js 连续 4 年度登顶的垄断。固然在工业届使用 Deno 落地在业务场景的情况还比拟少 但是目前的开展势头还是不错的。还记得因为 Deno 的出现 出现的那句经典的“求不要更新了 老子学不动了。事实证明“学不动的时代 并没有到来。除了跟学习相关的
4、工程 倘假设只关注垂直领域的技术工程 我们会惊喜地发现 TypeScript 持续升温 照旧保持着高速成长的状态 将来的潜力不可限量 通过工程分布的情况 明显能看到 React 生态圈 Vue 生态圈 Angular 生态圈 伴随着 WebAssembly 核心标准成为阅读器的标准 继 HTML、CSS 以及 JS 之后 像 C/C 、Rust、Go 等语言编写的高性能模块也在阅读器上运行。相信在不久的将来 Web 应用的桌面客户端化 也将成为一种趋势 Strapi 位列 Nodejs 相关领域的第三名侧面反响了低代码的趋势还在持续升温 各家都在研制自己的低代码平台来提升开发效率 JS Fra
5、mework 相关的领域 Next.js 超越 Nest 成为了今年度的冠军。在强大的 React 体系的影响下 业务越来越多的人选择使用同构以及直出的方案来构建 Web 应用 Serverless Framework 也进入了前 Top100 固然排名不高 但是已经开场渐渐展示出了可持续开展的势头。对于一个被厂商裹挟的技术而言 这一切来之不易 大前端生态系统已经逐步完善 前端工程化逐步完善 DevOps 已经走向了系统化的开展方向 前端技术已经进入深水区 由于直播行业的炽热 和疫情的影响 音视频领域在过去的一年度也有着蓬勃的开展。在前端领域 WebRTC 的技术在持续升温。 接下来 主要盘点
6、下在即将过去的 2020 年度前端行业发生了哪些重要的事情 同时共享下腾讯 IMWeb 团队在过去一年度中都做了哪些工作。 总结 2020 年度度趋势 1、TypeScript 爆发增长 从 2019 年度开场 社区内掀起了学习使用 TypeScript 的浪潮 从 npm 的下载量来看 近几年度 TypeScript 呈现爆发式增长 甚至在 2020 年度在 Github 语言的排行榜上跃居到了第四位。 数据来源 s:/octoverse.github 相比于同类型工具 如 Elm、ClosureScript、CoffeeScript 等 TypeScript 可谓是一马领先 数据来源 st
7、ateofjs2019 在最新的 2020Stack Overflow Survey 中 TS 受大众喜欢程度排名第二 仅次于 Rust 数据来源 StackOverflow Survey Result 2020 在如此爆炸式的增长浪潮中 TypeScript 必将给前端生态带来新的气象 同时也会促使前端开发者更多地关注代码设计、易用可维护、编码原那么及设计理念等方面的知识。 IMWeb 团队自 2018 年度起开启 至今已完成绝大局部业务向 TS 的转型迁移。在多端复用模块代码中 以 TS Jest 为根本要求 保证公共代码的可维护性以及可测试性 在 TS 编写中 我们更多地遵循面向对象设计
8、原那么 SOLID 原那么、KISS 原那么等 适当的运用设计形式 帮助更好地进展代码开发以及维护。同时 在 TS 践行中 辅以单元测试覆盖 可以指导我们更好地拆分组织代码 编写可测试的模块 在公共核心业务模块中覆盖单测用例。 2、三大框架 React 领先 前端界的三大主流框架 React、Angular 以及 Vue.js 今年度仍是炙手可热。此外 在过去一年度 这三大主流框架还迭代了许多版本。在三大框架之中 根据过去一年度的 NPM 下载量 React 仍然稳居首位。 2020 年度的 StackOverflow Trends 显示 React Vue.js Angular 在 Gith
9、ub2020 年度的新增 Stars 数量上 Vue.js 照旧超过了 React 下面分别总结各个框架 2020 年度的动态 1 React React 自发布 v16 版本后 迭代的版本都是以修复、优化为主 当前最新版本 v17.0.1 今年度 8 月正式推出的 v17 版本 并无显著的新特性 而是一个垫脚石“版本。为了后续能兼容 v18 版本 或讲是为了能到达逐步“晋级的目的 这也能躲避当工程的依赖存在多个版本 React 时出现问题。这种逐步晋级的理念与 VUE 的渐进式兼容晋级颇为相似。 2 Vue.js 2020 年度 Vue.js 的重大变化无疑是 Vue.js3.0 的发布 有
10、了非常多新特性 总结如下 对 Vue.js 进展了完全 Typescript 重构 让 Vue.js 源码易于浏览、开发以及维护 重写了虚拟 Dom 的实现 对编译模板进展优化、组件初始化更高效 性能上有较大的提升 Vue.js2 对象式组件存在一些问题 难以复用逻辑代码、难以拆分超大型组件、代码无法被压缩以及优化、数据类型难以推倒等问题 而 CompositionAPI 那么是基于函数理念 去解决上述问题 使用函数可以将统一逻辑的组件代码收拢一起到达复用 也更有利于构建时的 tree-shaking 检测 这个使用起来有些类似于 React 的 hook 以上变化都秉持着 VUE 的“渐进式
11、框架“ 理念 Vue.js3.0 持续开发兼容旧的版本 即使晋级了 Vue.js3.0 可以以按照之前的组件开发形式进展开发。 3 Angular Angular 在今年度 11 月推出了 v11.0.0 版本 主要变化为 将其依赖的 Typescript 版本晋级至 4.0,不再支持 Typescript3.9 版本 Angularv11 在继 v10 弃用 IE9、10 以及 IEmobile 支持后 将其完全删除 参加了 Webpack5 晋级至 Angularv11 版本 即可使用 Webpack5 的新特性 如更快的构建速度、模块联邦等。 IMWeb 团队的前端技术栈主要围绕着 Re
12、act 体系进展构建的 包含了基于 Webpack 的最正确理论 IMFLOW 和围绕着 React 体系完成的组件生态。在三大框架逐渐同质化的今天 将来的你使用何种框架就得由工作岗位的需求来决定了。 3、WASM 展露头角 WebAssembly 源于 Mozilla 提议的 Asm.js 工程 也被称为“设计补充 JavaScript 其本解码速度比 JS 解析快得多 让高性能的 Web 应用在阅读器上运行成为可能。该模块可在阅读器中的专有虚拟机上执行 与 JavaScript 虚拟机分享内存以及线程等资源。目前主流阅读器根本都支持了 WebAssembly。 在 2019 年度 12 月
13、 15 日 WebAssembly 正式成为 WorldWide Web Consortium (W3C) 的标准 参加到了 HTML、CSS 以及 JavaScript 的行列 继而成为阅读器官方的标准的第四门语言。WebAssembly 也正式抵达了 1.0 版本 获得了主流阅读器 Firefox、Chrome、Safari 以及 Edge 的支持。 会议上讨论了诸如 关于构建 WebAssembly 新型生态系统 WebAssembly 的将来和 WebAssembly 与诸如 Javascript 等其他支持技术的关系 WebKit 的 WebAssembly 实现的编译、启动以及运行
14、时等 benching 领域进展的研究以及开发 其中 Ben 演讲的“Expandingthe PIE 。 短短几年度的时间里 WebAssembly 获得了长足的进展。 Ability 目前有 100 多个不同的工程使用 WebAssembly。这些应用包括 自由手绘应用程序、媒体播放器、Gameboy 仿真器、阅读器内压缩/解压应用程序 甚至还有一个 AR 数独解谜应用程序。 Producer 目前大约有 15 种编程语言可以以稳定的、面向消费的方式编译到 WebAssembly。其中包括 .Net AssemblyScript C Haskell Rust 以及 Zig 等 还有更多的正
15、在开发中。 Interoperability WebAssembly 如今有了一个基于才能的 API 设计 它允许 WebAssembly 代码与外部世界交互 同时仍然保存了 WebAssembly 的沙盒特性。此外 曾经强大而有用的 WebAPI 集合如今正在不断得到实现。 Embedder 如今可以在许多不同的平台上运行 WebAssembly。目前正在积极开发的运行时大约有 20 个。WebAssembly 不再局限于阅读器。这里有区块链实现、无效劳器应用程序、操作系统可执行程序以及物联网实现的例子 它们被部署在独立以及受限制的嵌入式运行时环境中。 看到这么多不同的工程以及运行时 真是令
16、人惊讶 。随着 WebAssembly 的不断开展 Web 中文兴趣组WebAssembly 研讨会也在今年度的 8 月 29 日在线上举行 重点讨论了 WebAssembly 技术应用与实现 尤其是在多媒体、编译器和新型语言、仿真器、Web 前端框架、虚拟机、云、游戏引擎、工具等多方面的应用场景 。在将来的一年度里 WebAssembly 会有更多的时机出如今大众的面前 我们也会在业务中落地基于 WebAssembly 的应用。 WebAssembly 的出现为 Web 开发者翻开了一扇新的大门。 在去年度 wasm 对你来讲也许还仅是技术文章中的一个常见名词 你压根想不到他会在阅读器中得到
17、如何的应用 什么时候会被大公司真正用起来。在今年度 你很有可能已在不知不觉中成为 wasm 的使用者了。目前国内外越来越多的团队基于 wasm 进展了业务理论。 IMWeb 团队擅长的音视频领域 我们通过将 ffmpeg 编译为 wasm 版本且在阅读器中运行 将过去处于黑盒中 只有阅读器底层才能使用的音视频编解码才能彻底解放。 目前我们可以在前端页面中对音视频流直接进展处理 在完全不依赖后台的情况下 便捷、高效的实现了视频播放帧预览与视频帧截图等功能。目前团队正在进一步探究 wasm 在音视频和其他过去前端无法触及的领域的可行性理论。 4、Low-Code 恰逢其时 从 2021 年度 Fo
18、rrester 的研究报告提出“low-code一词到今天 低代码领域持续升温。 从低代码领域的行业角度看 2017 年度后 微软、甲骨文等各大厂家纷纷参加了低代码赛道的竞争。近年度来 获得 3.6 亿美元融资的 Outsystems 更是成为低代码领域海外市场的一只独角兽。国内方面 也不乏云凤蝶、点石、iVX、轻流、积木等平台的诞生 低代码产品领域的蓬勃开展 正成为特定场景软件开发的重要趋势。 区分一下 no-code、low-code、pro-code no-code 自己编程给自己用 给用户的感觉就是一个软件。因此 平台不会给自己定位成一个“编程工具。主要是通过图形化的操作来降低学习曲线
19、 类似 PPT、Excel 等。在垂直领域的特定场景中 才能做到好用。 low-code 编程给其别人用 通过降低专业难度 让运营人员 CitizenDeveloper 也介入进来。平台评估好预制的场景以及需求 减少从头写代码的本钱 一定程度上可以通过图形化的方式知足业务诉求。 pro-code 日常软件开发经过中的手写代码 可以通过逻辑以及模块复用来进展提效。 区分了概念之后 还需要考虑面向的用户。不同的用户对应着不同的解决方案。用户大致分为三类 前端开发人员、后台开发人员、产品运营人员。 为什么要做低代码 基于目前可视化以及模型驱动理念 结合当下大前端跨端体验的交融技术和云原生的支持 通过
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 2020 年大前端技术趋势解读-精品文档资料整理 前端 技术 趋势 解读 精品 文档 资料 整理
限制150内