2022前端趋势报告(上)

前端博主,热衷各种前端向的骚操作,经常想到哪就写到哪,如果有感兴趣的技术和前端效果可以留言~博主看到后会去代替大家踩坑的~
主页: 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.hqwc.cn/news/1194.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

MySQL 高级(进阶) SQL 语句

目录 创建两个表格 location 表格​编辑 store_info 表格​编辑 ---- SELECT ---- ---- DISTINCT ---- ---- WHERE ---- ---- AND OR ---- ---- IN ---- ---- BETWEEN ---- ---- 通配符 ---- ---- LIKE ---- ---- ORDER BY ---- ---- 函数 ---- ---- GROUP BY ---- ----…

viewLifecycleOwner.lifecycleScope生命周期,kotlin

viewLifecycleOwner.lifecycleScope生命周期,kotlin viewLifecycleOwner.lifecycleScope.launch {viewLifecycleOwner.whenCreated {Log.d(TAG,"onCreated")}viewLifecycleOwner.whenStarted {Log.d(TAG,"onStarted")}viewLifecycleOwner.whenR…

MySQL-SQL全部锁详解(下)

♥️作者:小刘在C站 ♥️个人主页: 小刘主页 ♥️努力不一定有回报,但一定会有收获加油!一起努力,共赴美好人生! ♥️学习两年总结出的运维经验,以及思科模拟器全套网络实验教程。专栏&#xf…

C++之工厂模式

目录 一、为什么要使用工厂模式 优点 缺点 二、简单工厂(Simple Factory) 好处: 不足: 三、工厂方法: 好处: 不足: 四、抽象工厂(Abstract Factory) 一、为什…

【软考网络管理员】2023年软考网管初级常见知识考点(10)- 网际协议IP及IPV6,IPV4详解

涉及知识点 分类的IP地址,子网划分,CIDR和路由汇聚,IPV4数据报格式,IPV6协议,软考网络管理员常考知识点,软考网络管理员网络安全,网络管理员考点汇总。 原创于:CSDN博主-《拄杖盲学…

数据分析案例-航空公司满意度数据可视化

🤵‍♂️ 个人主页:艾派森的个人主页 ✍🏻作者简介:Python学习者 🐋 希望大家多多支持,我们一起进步!😄 如果文章对你有帮助的话, 欢迎评论 💬点赞&#x1f4…

【算法之贪心算法IV】leetcode56. 合并区间

452. 用最少数量的箭引爆气球 力扣题目链接 有一些球形气球贴在一堵用 XY 平面表示的墙面上。墙面上的气球记录在整数数组 points ,其中points[i] [xstart, xend] 表示水平直径在 xstart 和 xend之间的气球。你不知道气球的确切 y 坐标。 一支弓箭可以沿着 x 轴…

IDEA字体配置

IDEA默认字体:JetBrains Mono 1、下载Monaco字体(windows版):下载地址👈 2、双击安装 3、在IDEA中切换Monaco字体

C++ DAY3

1.思维导图 2.有以下类定义&#xff0c;按要求实现剩余功能 #include <iostream> using namespace std;class Person { private:int age;int *p; public://无参构造Person():p(new int(89)){age 18;}//有参构造Person(int age,int num){this->age age;this->pne…

【MySQL】SQL的函数用法

文章目录 聚合函数Count()Max()Min()Sum()Avg() 其他常用函数时间函数字符串函数SUBSTRING函数:切割字符串([start:end])SUBSTRING_INDEX函数:切割字符串(split)LOWER&UPPER函数:大小写转化CONCAT&CONCAT_WS函数:连接字符串REPLACE函数:字符串替换 数学函数ROUND函数:四…

Spring Boot高阶篇笔记

一、Spring Boot整合Redis缓存 JSR-107、Spring缓存抽象、整合Redis 1、JSR107 Java Caching定义了5个核心接口&#xff0c;分别是CachingProvider, CacheManager, Cache, Entry 和 Expiry。 • CachingProvider定义了创建、配置、获取、管理和控制多个CacheManager。一个应…

一点基础、但一直没分清的概念2023/06/28

文章目录 1.export和export default的区别2.npm和cnpm的区别3.npm run dev/serve的区别4.slice、splice和split的区别 1.export和export default的区别 模块功能主要由两个命令构成&#xff1a;export和import。export命令用于规定模块的对外接口&#xff0c;import命令用于输…