2024年 JavaScript 状态报告解析

而 WebSocket 62.6% 的使用率,Service Workers 42% 的使用率和 Intl 31.3% 的使用率也算是合情合理,毕竟受使用场景限制。

Shadow DOM (42.1%) ,Custom Elements (33.4%)无疑是今年最令人疯狂的浏览器 API 了,想想不通过使用 React 和 Vue,仅通过浏览器原生提供的功能就能实现高效可复用的组件化,生命周期函数什么的也一应俱全,仿佛好不容易学会的 React 好像明天就要过时,JavaScript 原教旨主义者终于一统天下。

可是别高兴的太早,现实还是很骨感,别说现在还没有像 Fusion,Antd 一样成熟的 UI 组件库可以开箱即用,如何通过这些 API 稳定搭建 SPA 应用,整个社区还没有讨论出一个像 React,Vue 和 AngularJS 一样的成熟方案,所以还是先等等吧,先熟悉一下 API 总是没错的。

至于像 Web Audio (20%), WebGL (17.5%), Web Animations (16.3%),WebRTC (14%),Web Speech API (8.2%), WebVR (3.3%)这些只有特定开发需求才会使用的 API,使用的人少也是十分正常,但是可千万不要因此就忽略了这些 API。

像 Web Audio ,Web Speech 和 WebRTC 对于影音视频流的传输和交互就非常重要,WebGL , Web Animations 和 WebVR 则更是将 Web 世界的表达能力拉高了好几个台阶。我觉的大家真该好好想想如何结合自身的业务场景通过这些浏览器能力寻求更新的突破,说不定下个风口或是交互模式创新就诞生在你的团队。到时候可千万别忘了给我发个红包(笑)。

其他

最后我们再看看 WebAssembly (WASM) 的调研情况,真正使用过的开发者占比为 10.5%,73.9% 的开发者听过但是没用过,15.6% 的开发者则是听都没听说过。

我觉得大多数前端开发者应该都处于听过没用过的象限,目前社区关于 WebAssembly 也确实没有很大的音量。用 C++ 和 Rust 编写 Web 应用这种事情对于 Web 开发者而言也的确没有多大吸引力。未来的发展如何,我还是抱着静观其变的态度。

技术框架


技术框架部分我将重点关注技术框架的使用数量以及对框架的满意程度两个方面,它们代表了当前流行的技术选型以及未来可能流行的技术方向。每一种技术我都会附带 ??? 链接,方便您点击了解更多技术细节。

**语言风格

**

2020 年对于 JavaScript 究竟应该怎么写才对味这个问题, TypeScript 毫无争议地一锤定音,93% 的参与调研者表示十分满意通过 Typescript 约束自己的 Javascript 代码,看来这个年头还不拥抱 Typescript 的开发者绝对是 out 了。

而对于当前的语言风格是否令人满意的调研则表示,在满分 5 分的限定下,无论是 2019 年还是 2020 年,开发者们都只打了 3.6 分这样差强人意的分数来表达 JavaScript 在更优雅的编写方面还有很多探索的空间。

  前端框架

前端框架方面 React,Angular 和 Vue.js 毫无疑问地依然是世界三大框架。但说出来你可能不信,「最令人满意的前端框架」居然不是 React 而是 2019 年才由 Rich Harris 推出的 Svelte。有 66% 的被调研者表示感兴趣这个框架,并且 89% 的被调研者表示使用这个框架令他们感到十分满意,总之一句话,用过的都说好。

Svelte 人如其名,强调在构建时就直接产出最小的完整的代码,从而在使用时可以直接使用构建后的组件,而无需添加框架自身,因此不仅打包后的应用代码体积更小,由于没有 diff 操作,性能也大幅提高。只可惜目前 Svelte 还不支持 Typescript,也没听说过哪些大型项目在使用,否则众多前端开发er 们可就又有的学了。

  数据层

数据层框架上国外火的一塌糊涂,国内却怎么也火不起来的 GraphQL 依旧是数据层框架排行榜的万年老二,使用最多的状态管理框架依旧是耳熟能详的Redux。沾着 GraphQL 和 React 的光,Apollo Client 近三年来也一直稳稳地占据了排行榜第三名的位置。

比较有意思的是 2020 年异军突起的两大框架 Vuex 和 XState 迅速的从老牌状态管理框架 Redux,MobX 的身体上越过分别获得了最受开发者满意排场榜上第三名和第四名的好成绩。我 Vuex 倒是没怎么用过,但是 XState 倒是实打实调研了一把,确实是物有所值的好框架,特别是最近流行的逻辑编排,状态编排,各种编排,配上自带的流程图,不仅立刻感觉高大上了很多,而且确实切实解决程序状态复杂后,难以梳理清楚的老问题。

  后端框架

我最近一年几乎没怎么写服务端应用,通过调研报告才发现我用的最熟练的 Koa 的流行度已经连年下跌,到了使用度排名的中部位置。现在 Next.js 和 Express 才是开发服务端应用的首选,并且也是用过的都说好。仔细一看 Hulu,Docker,Netflix 都在用 Next.js,和我一样掉队的同学真应该好好补补功课。

  测试框架

说到测试框架,自从 2019 年 Jest 从 Mocha 手中抢过龙头棍,从此就一直稳坐测试框架届的头把交椅。在使用度排名上,Mocha 和 Storybook 紧随其后,但是看起来似乎不可能撼动 Jest 的江湖地位。

比较值得注意的是,由 Kent C. Dodds 开发的 Testing Library 测试框架一经发布就引来了很多前端开发者的关注。Testing Library 主打 DOM 测试,全面支持主流的三大框架,提供一堆好用不贵的 API,用起来那叫一个符合用户使用习惯。可惜国内的开发者大多都不重视单元测试这块,更别提是 DOM 元素级别的测试,我大胆预测下 Testing Library 在国内会像 GraphQL 一样一直保持不温不火的状态,确实可惜但也没办法。

  构建工具

说到构建工具,那是真的有的聊了,虽然 webpack 依然以 89% 的使用率独占鳌头,但是要看众多开发者 2020 年感兴趣或是满意度高的构建工具,你会惊讶地发现曾经如日中天的 gulp.js,Browserify 已经渐渐显露出中年危机的势头,而 webpack 也在今年跌落神坛,在最受用户满意的构建工具排行榜只排到了第四名。

要说第三名被 TypeScript 抢去还能理解,前两名分别是 esbuild 和 Snowpack 我相信很多国内的开发者听到一定一头雾水,但其实分别去官网看看就能清楚这两个构建工具主打的还是构建速度的提升,尤其是 esbuild ,从官网上给的数据来看要比 webpack 构建速度提升了整整 113 倍。

老实说,随着项目越来越大,再加上 monorepo 方案逐渐在国内流行开来,构建时长有时候真是直接影响着开发体验,一个项目 build 十几秒,怎么看也不像是前端开发应该出现的场景,无论是 esbuild 还是 Snowpack,如果有机会,还是鼓励大家多去尝试,总结经验,造福社区。

  应用端 / 桌面端

毫无疑问,要想用 JS 编写桌面端应用,最好的框架绝对是 Electron。但如果要是开发移动端应用的话,2020 年选择就不止有 React Native 了,2020 年新登台的 Capacitor 同样十分亮眼,虽然只有 10% 的被调研者真正在使用,但是其中 84% 的开发者都表示使用起来十分令人满意。

但是从使用体验上看,整体的移动端/桌面端框架的满意度并不高,近几年基本保持在 3 分左右的状态,看来前端想要在各个端上实现反复左右横跳,还需要更加具有突破性的技术创新。

小结


以上就是 2020 年 JavaScript 整体状态的快速一览,总的来说,无论是语言特性还是各种框架和库,在 2020 年,都没有什么突破性的变化,爆发式的增长。但是仔细观察你会发现实际上在各个细分领域,都有些创新和实践在悄悄地发生,比如构建性能的提升,前端测试的完善,Web 表达的丰富等等等等。

一些前端领域老大难的问题,如何更高性能地实践组件化,如何真正实现 JavaScript 的「一次开发,处处运行」依旧没有一个盖棺定论,换句话说还在等待着更聪明的开发者来解决。

如果非要问 2020 年最红的技术是什么的话,我非常不客观地认为本届的奖杯毫无疑问地要颁发给 TypeScript,随着 TypeScript 新版本的更新,编写前端代码真是越来越对味。

以上,如果您喜欢这篇文章,别忘记点赞或是分享,让更多人看到。这些都会被我视为您对我创作的支持。

数据结构与算法

这一块在笔试、面试的代码题中考核较多,其中常考的数据结构主要有:数组、链表、队列、栈、Set、Map、哈希表等,不同数据结构有不同的方法以及储存原理,这些算是技术岗的必备知识。算法部分主要分为两大块,排序算法与一些其他算法题

排序算法根据考频高低主要有:快速排序、归并排序、堆排序、冒泡排序、插入排序、选择排序、希尔排序、桶排序、基数排序、Timsort这十种,这类考核点要么是算法的时间、空间复杂度、稳定度,要么是直接手写代码,故在理解算法原理的同时,对JS语言版的排序算法代码也要加强记忆。

  • 二叉树层序遍历
  • B 树的特性,B 树和 B+树的区别
  • 尾递归
  • 如何写一个大数阶乘?递归的方法会出现什么问题?
  • 把多维数组变成一维数组的方法
  • 知道的排序算法 说一下冒泡快排的原理
  • Heap 排序方法的原理?复杂度?
  • 几种常见的排序算法,手写
  • 数组的去重,尽可能写出多个方法
  • 如果有一个大的数组,都是整型,怎么找出最大的前 10 个数
  • 知道数据结构里面的常见的数据结构
  • 找出数组中第 k 大的数组出现多少次,比如数组【1,2, 4,4,3,5】第二大的数字是 4,出现两次,所以返回 2
  • 合并两个有序数组
  • 给一个数,去一个已经排好序的数组中寻找这个数的位 置(通过快速查找,二分查找)

前 10 个数

  • 知道数据结构里面的常见的数据结构
  • 找出数组中第 k 大的数组出现多少次,比如数组【1,2, 4,4,3,5】第二大的数字是 4,出现两次,所以返回 2
  • 合并两个有序数组
  • 给一个数,去一个已经排好序的数组中寻找这个数的位 置(通过快速查找,二分查找)

[外链图片转存中…(img-POOHIX7V-1720083211896)]

  • 4
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值