2022前端趋势报告(上)

news2024/11/14 21:59:12
前端博主,热衷各种前端向的骚操作,经常想到哪就写到哪,如果有感兴趣的技术和前端效果可以留言~博主看到后会去代替大家踩坑的~
主页: oliver尹的主页
格言: 跌倒了爬起来就好~

一、前言

本文内容来自于《State of Frontend 2022》,这是一份关于国内外在2022年前端,这份报告其实之前就出了,在最近和我司的小伙伴聊天的时候发现有小伙伴感兴趣但没有看过,所以想简单分享一下其中的一部分,看个乐吧!

耐心看完,也许会有所收获~

二、正文内容

这篇调查报告一共分为 13个小节,本文为1-5小结,报告从不同的角度分享了一下在2022年前端生态圈的一些现状,有预期的,也有超预期的;

2.1 01 Intro

第一小节是对调研的对象和地区以及总体内容做了一个简单的概述,说明了一下报告的背景,这份报告来自于125个国家的3703位开发者,并且还有19个前端专家

并且报告还说,相比前几年前端的日新月异,2022年的前端逐渐趋于成熟与稳定,新的框架确实在不断推出,但是在某些领域中对这些新框架的推行没有那么顺利了(PS:毕竟React和Vue已经非常成熟了)

然后就是一些感谢和推广,没有那么重要~跳过~

2.2 02 Developers & work conditions

第二小节是对开发者以及工作环境作出的一个统计~大致如下:

首先是工作条件,在受访者中,高达56%的开发者表示是远程工作,只有5%的开发者表示是在办公室,远程开发者的比例是如此的高,并且这种工作理念非常新颖,以至于在2020年的报告中根本没有统计到这个点...

这种工作条件能否在今年持续下去是一个未知状态,毕竟这种工作模式的弊端显而易见,沟通成本会大量提升,相比纯远程办公 混合模式 可能会更加适合实际情况,也就是一部分时间在家,一部分时间在办公室;

接着是对前端工作的开发人员进行的统计,统计发现,干前端的不一定是前端工程师,还有很多其他的人在兼职干着前端的活!(PS:哈哈...不过也要有警惕,这说明前端的技术入门容易,竞争更激烈)

然后是对工作年限进行统计,28.4%的开发者是工作年限5~10年,24.1%的开发者表示工作了超过10年...(PS:也算是好事吧,说明前端这个行业是有深耕的条件的);

其中,超过半数以上的都成为了中高级以上的职位,28.9%的中级,28.6%的高级,还有首席技术官,还有技术领导等等(PS:从统计上看,晋升到团队核心,领导、首席技术官都是有可能的,当然,到这个级别精通前端是其中一方面了,除了卓越的眼界,前后端,各种技术栈肯定是都比较理解的,从没听说光靠前端或者光靠后端就走到首席技术官的)

另外,值得注意的是,这份报告中约有18%的受访者来自于非科技型公司,某种程度上说,这份报告是有一定可信度的;(PS:当然,也仅仅是一定程度上的可信)

2.3 03 Frameworks

从这一节开始就是关于技术的了,开发者会为项目选择一个好的框架~并且会遵循一些社区上关于使用的最佳实践~

在过去的一年中最受欢迎的框架前三名分别是:ReactNext.jsVue.js;(PS:最受欢迎的框架依然还是React,但是翻看一下国内的招聘软件,中小型公司的前端技术栈更偏向于Vue,中大型企业更倾向于React,具体还得看项目组)

过去一年中最不受欢迎的框架前三名是:AngularReactGatsby;(PS:Angular真的是时代的眼泪了.....翻看了多个招聘软件,对于Angular的需求真的是少之又少,基本就是老旧项目的维护,个人不建议投入过多精力去深入了解~有这个精力大把的新框架,新库可以去学习)

在将来最想学习的框架,前三名分别是:SvelteRemixNext.js;(PS:Svelte确实可以,但是想要撼动React或者Vue的地位很难...又要到了高呼学不动了,学不动了的时候了,不过国内要求Svelte的比较少,翻了下招聘软件,甚至比Angular还少,对于一般的开发者而言,还是精通React或者Vue来的价值高,这两者绝对是领头地位)

2.4 04 Libraries

过去一年中哪个库是经常用并且最喜欢的,前三名分别是:AxiosLodashRedux;(PS:Axios的使用率是真的高,超过60%了,Axios与其说是一个库,某种程度上可以说它是一种标准了!)

接着报告说到Redux,Redux很难但是真的很有用,它可以很好的处理大型项目的状态管理,但是,Redux的入门难度非常高,初期对于Redux可能很难接受,但尽管难,也要学习,因为它可以给简历增色;(PS:Redux虽然说是单独的一个库,但我翻看了一下招聘软件,发现用到Redux几乎都是React,在Vue为主的相关的岗位里更多的要求是针对VueX的,要不要学,看个人,我建议初学者可以不考虑,前端的生态圈很庞大,Redux的优先级并没有特别高);

过去一年中,最不喜欢的库,前三名分别是:ReduxMomentLodash

Redux的高难度成为第一名完全可以理解,重点是第二名Monent,这个库官方自己都已经不再维护,并且推荐其他库了,仍然有超过40%的人使用了它....

在未来有哪个库是希望学习的,前三名分别是:ApolloRxJSRelay;(PS:好家伙,直接好家伙,讲真的,这三个库之前都没有听说过,看来还得继续去了解了解啊~)

在过去的一年中,关于组件库 或者说UI框架这一块最喜欢的是:

将近30%的人喜欢自己自定义,这也是正常的,类似于AntDesign这种其实更适合于admin类型的后台管理系统,如果是直接面向用户的,那么必然还是要跟着设计师走的;

至于CSS的工具中,SCSS占据了半壁江山,报告中直接说到

Having nearly half of respondents say they don’t only use SASS but it’s the favorite is incredible to me, and I happen to agree since it’s a favorite of mine as well

(PS:在现代框架中,SCSS,Less等CSS辅助工具已然是非常重要的一环,如果小伙伴对这一块还没有来得及学习,我建议认真看一下,它的优先级我觉得仅仅在框架之后,还是非常有必要的)

另外,值得注意的是 Tailwind,它的排名能有这么高是着实没有想到的,在结合框架的情况下使用这种编写方式可能真的对工作效率提升巨大吧;

关于开发工具,统计的结果前三名如下:EslintPrettierWebpack

关于这三者,基本现代项目大多会用到,Eslint不用说,多人协同开发下Eslint确实很有效,不管是语法上还是格式上,与之对应的TSLint是针对TypeScript的,不过以我个人所知道的来说貌似很多团队即使装Eslint,也没有启用,原因很简单,对于不熟悉的来说它极其影响开发效率,以快速交付的团队来说,进度大于质量,为了赶进度,可以适当抛弃一些质量,同理这个原因也适用于TypeScript;

Prettier,格式化工具,使用率非常高,确实好用,也可以配合Eslint进行代码编写规范上的约束;

至于webpack,不能说不好用,只是说它在设计架构上天然弱于Vite,Vite在未来确实可能会替代Webpack;

2.5 05 Typescript

这一个小节讲的全部是关于Typescript,Typescript终于出息了~

过去一年中使用过Typescript的比例高达84%;

这个比例说明Typescript确实已经成为新项目开发的主流,它受到了开发人员的普遍欢迎,报告甚至说到

TS made web development way less frustrating than it was before

它的语法确实可以大大提高程序的可靠性,能在开发阶段就可以帮助我们排查出许多语法问题;它使得前端代码更加可控;不仅如此,在微软的推动下Typescript也许在某一天会成为行业标准!

在现代项目中,很少还会有商业项目会完全不是用TS,如果对这些不是用TS的项目进行调查,那么会发现绝大多数是属于政府类的,科技型的公司已然基本接受Typescript了

关于Typescript的未来,跟前两年的预测相比发生了很大的变化,放在前两年几乎没人敢确定未来是属于JavaScript还是Typescript,毕竟就前端的发展速度来看,一切皆有可能,但今年结果不同了

支持Typescript逐渐变多,虽然还没有到50%,但结果已经出现了一定程度的倾斜;Typescript是否会取代Javascript目前还依然是一个疑问,可以继续往后观察;

三、小结

篇幅的原因,关于报告的内容先分享到这~到这不难发现,说是技术趋于稳定,但前端的发展依然很快,框架依然不断推新中,只不过在React和Vue的统治下很难再出现前几年那种颠覆性的改革;

就现在的前端而言,如果有初学的小伙伴问哪些是前端必须要学的,通过报告的统计以下这几个处于第一梯队,是要优先去学习了解的;

  • 框架:React/Vue,二选一;

  • 前端库:axios,lodash,任意一个类似于ant-design的组件库;

  • 辅助工具:Eslint,Prettier,Webpack;

  • CSS工具:Scss;

  • Typescript;

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/672428.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

N卡几千块的“智商税”,这下终于要没了

关于 CPU 显卡搭配,有句话大家肯定听过:「 i卡配iU、A卡配AU、N卡配 Fxxk U」 。 小白不要误会,这句话只是大家在喷N卡的定价问题。 拿刚刚过去的剁手节对比,AMD 这边旗舰显卡 RX 7900XT、XTX 价格直接跌到了 5/6000 出头。 而 …

Jenkins集成SonarQube代码质量检测

上一篇文章> Jenkins发布Kubernetes(K8s)集群(基于containerd) 一、SonarQube简介 1、简介 SonarQube是管理代码质量一个开放平台,可以快速的定位代码中潜在的或者明显的错误 2、下载 https://www.sonarsource.com/products/sonarqube/downloads/ 二、实验环境…

Spring Boot请求处理-常用参数注解

PathVariable 路径变量RequestParam 获取请求参数RequestHeader 获取请求头RequestBody 获取请求体【Post】CookieValue 获取Cookie值RequestAttribute 获取request域属性ModelAttribute 1. PathVariable 该注解主要用于rest风格的搭配使用,请求路径中不再以k:v的…

软考高级系统架构设计师(四) 计算机网络2磁盘阵列

目录 磁盘阵列RAID RAID级别 ​IPV6 网络接入技术 综合布线 磁盘阵列RAID 磁盘阵列(Redundant Arrays of Independent Disks,RAID),有"数块独立磁盘构成具有冗余能力的阵列”之意。 磁盘阵列是由很多块独立的磁盘&#…

全新形态骨传导,久戴不疼,南卡OE骨传导耳机

随着生活品质的提高,科技的发展,人们对于日常用的耳机可以说是要求越来越高,越来越挑剔了。从耳机的外在设计,内在音质,佩戴的舒适及安全性上都有更高的追求。当然,耳机的设计者们也不遗余力的发挥着他们的…

华为OD机试真题 JavaScript 实现【高矮个子排队】【2023Q2 100分】,附详细解题思路

一、题目描述 现在有一队小朋友,他们高矮不同,我们以正整数数组表示这一队小朋友的身高,如数组{5,3,1,2,3}。 我们现在希望小朋友排队,以“高”“矮”“高”“矮”顺序排列,每一个“高”位置的小朋友要比相邻的位置高…

PHP学习笔记第四天

前言 作者简介:不知名白帽,网络安全学习者。 博客主页:不知名白帽的博客_CSDN博客-网络安全,CTF,内网渗透领域博主 网络安全交流社区:https://bbs.csdn.net/forums/angluoanquan 目录 PHP超级全局变量 PHP $_GLOBALS PHP $_SER…

在 Navicat Premium 中管理 MySQL 用户 | 第 3 部分:配置用户权限

第 3 部分:配置用户权限 在本系列中,我们一直在探索如何使用 Navicat 的旗舰产品 Navicat Premium 执行常见的用户管理任务。在 第 1 部分 中,我们学习了如何使用 Navicat Premium 用户管理工具保护 MySQL root 帐号。而 第 2 部分 重点介绍…

csrf入门

一.CSRF是什么? CSRF(Cross-site request forgery),中文名称:跨站请求伪造,也被称为:one click attack/session riding,缩写为:CSRF/XSRF。 二.CSRF可以做什么&#xff…

uniapp webview H5跳转微信小程序

第一步&#xff1a;manifest.json 第二步&#xff1a;index.html <!DOCTYPE html> <html lang"zh-CN"><head><meta charset"utf-8"><meta http-equiv"X-UA-Compatible" content"IEedge"><title>…

Unity编辑器扩展-第六集-创建窗口/批量填图

第五集链接&#xff1a;Unity编辑器扩展-第五集-撤回操作/禁止操作/加快捷键_菌菌巧乐兹的博客-CSDN博客 一、本节目标效果展示 1.创建窗口 2.图片批量赋值到物体上 二、创建窗口 这个功能其实也很好理解&#xff0c;我们之前学了点击选择&#xff0c;但我们难免会遇见需要…

python学习——Matplotlib数据可视化基础

目录 Matplotlib数据可视化基础1.基础语法与折线图rc参数调整中文显示的问题 2.散点图3.条形图案例一&#xff1a;横向条形图案例二&#xff1a;多个条形图案例三&#xff1a;最后一个刻度 4.直方图实例1 频率分布直方图和频数分布直方图 5.饼图6.箱线图综合案例&#xff1a;直…

Centos7 上的sqlite3安装及升级

一.wget升级 yum install -y wget 二.sqlite3安装 sudo yum install sqlite-devel 查看sqlite3的版本 sqlite3 -version 三.sqlite3升级 下载源码 wget https://www.sqlite.org/2023/sqlite-autoconf-3420000.tar.gz 版本可去官网选择 SQLite Download Page 解压、编译 tar z…

类的真正形态

问题 经过不停地改进&#xff0c;结构体 struct 变得越来越不像它在 C 语言中的样子了&#xff01;&#xff01;&#xff01; struct 在 C 语言中已经有了自己的含义&#xff0c;必须继续兼容 在 C 中提供了新的关键字 class 用于类定义 class 和 struct 的用法是完全相同的…

微信接口测试拓展

背景 最近收到一个SRC提交的漏洞&#xff0c;泄露了微信小程序的appkey和appSecret&#xff1b;于是乎为了搞清楚影响&#xff0c;漏洞风险和利用方式&#xff0c;便有了这篇文章&#xff1b; 在了解漏洞风险之前先来了解一下微信的几个平台&#xff1b; 微信公众号平台 微…

进行压力测试的目的是什么?重要性体现在哪?

进行压力测试的目的是什么&#xff1f;重要性体现在哪&#xff1f;压力测试是通过施加一定压力或负荷于测试对象&#xff0c;以评估其结构、性能和可靠性的过程。它可以是静态压力测试&#xff0c;即施加一定压力并持续一段时间&#xff0c;也可以是动态压力测试&#xff0c;即…

十四.EtherCAT开发之ST MCU STM32F407ZGt6+ AX58100的开发FOE应用

十四.EtherCAT开发之ST MCU STM32F407ZGt6 AX58100的开发FOE应用 STM32F407ZGt6与AX58100是 SPI连接&#xff0c;工作在SPI模式。 FoE(File Access over EtherCAT)可实现EtherCAT节点之间的文件传输。 14.1 SSC TOOL配置 boot mode与FOE支持 FOE 说是要在状态机的boot mod…

本地同城美食小程序软件开发

以下是同城美食小程序软件的一些常见需求&#xff1a; 餐厅列表和搜索&#xff1a;提供详细的餐厅信息&#xff0c;包括店铺地址、联系方式、特色菜品等&#xff0c;并让用户可以通过关键字或地理位置搜索并筛选餐厅。 菜单浏览&#xff1a;展示每个餐厅的菜单&#xf…

控制您的数据:Web3私有链为数据主权带来的突破性变革

在数字化时代&#xff0c;数据已经成为企业和个人最宝贵的资产之一。然而&#xff0c;随着大规模数据泄露和滥用事件的频发&#xff0c;数据主权和隐私保护成为了备受关注的问题。在这个背景下&#xff0c;Web3私有链的出现为数据主权带来了一场突破性的变革。 首先&#xff0c…