大家好,我是Echa。
好消息,2024年1月份前端生态圈非常权威的Best of JS 官方一年一度的正式对外宣布了2023最受欢迎的前端项目榜单,你们猜猜哪个前端项目是榜首?宣布之后顿时在前端圈内炸开了锅。
加上关注小编的大部分前端粉丝们私信留言,2024年前端要怎么入手学习呢?小编在百忙之中抽空整理一篇2023最受欢迎的前端项目榜单,送给前端的程序员们,方便大家跟着自己的兴趣爱好去规划学习,有一朝一日也能成为大鸟,在天空中随意翱翔。
同时小编也非常感谢Best of JS 官方团队前辈从2016年开始到2023年里,一年一度无私奉献,让我们这群程序员在学习前端方面没有那么迷茫。该榜单提供了过去 12 个月 JavaScript 生态系统中的趋势项目的概述!此榜单分15个类目,比以往多了3个类目。下面小编给大家一一介绍2023年最受欢迎分别有哪些:
年度最佳项目:shadcn/ui
官网:https://ui.shadcn.com/
Github:https://github.com/shadcn-ui/ui
年度最火的项目是 shadcn/ui,创建于2023年1月份,一年时间Star 44k+。这是一个用 React 编写的 UI 组件集合,可通过 TailwindCSS 进行自定义样式的设置。
该项目建立在 Radix 之上,这是一组提供诸如可访问性和键盘交互等基本功能的无头组件,shadcn/ui 与其他流行库(如 MUI、ChakraUI、React Spectrum)的区别在于它不是可下载的 NPM 包。相反,你可以通过终端命令将 shadcn/ui 组件集成到你的代码库中,该命令会安装底层依赖项并将组件源代码直接复制到你的代码库中,以便你进一步修改。
该项目的成功与 Tailwind CSS 的广泛流行(总体排名第 20 位)、对 React Server Components 的兼容性以及出色的文档密切相关。
似乎所有新的出众的 React 项目都采用了 shadcn/ui。甚至 Kent C. Dodds 也选择了它来开发 cutting-edge Epic Stack.
另一个涉及人工智能的例子:用户只需要提供 UI 的功能和外观等的描述,v0.dev 就可以生成由 shadcn/ui 组件组成的 JSX 代码。真神奇!
最后但同样重要的是,Best of JS 在将其从单页应用程序(SPA)转换为 Next.js 后也使用了它们。
它也催生了其他项目:
排名第二:Bun
官网:https://bun.sh/
Github:https://github.com/oven-sh/bun
Bun,也是我们前端老朋友了,创建于2021年4月,现在Star 67.04+ 是一个非常了不起的战绩。
Bun,2022 年的冠军,仍然保持着巨大的势头。
它旨在成为一个快速、全能的工具包,用于运行、构建、测试和调试 JavaScript 和 TypeScript 应用程序。
version 1 于 9 月正式发布(图表中的峰值!),它声称已经 “可用于生产”。
它的文档提供了使用 Bun API 和常见任务(如文件操作和处理数据库交互)的出色方案,以帮助你快速入门。
它对大多数 Node.js 生态系统(包括对旧的 CommonJS 通过 require 导入的支持)的兼容,以及对主要全栈框架(Next.js、Nuxt、Astro...)的支持,使其成为可能!
排名第三:Excalidraw
官网:https://excalidraw.com/
Github:https://github.com/excalidraw/excalidraw
Excalidraw是一款开源的虚拟手绘风格白板,具有协作性和端到端加密功能,可在各种操作系统上使用,包括Windows、macOS、Linux,甚至移动设备。只需打开浏览器,就能够轻松绘制出精美的流程图、示意图、开发架构图等常见图形,同时还可以作为会议绘图板的理想选择。这不仅是一款出色的绘图工具,还是一款极为便捷的电子白板应用。
特点
官网:https://www.tldraw.com/
Github:https://github.com/tldraw/tldraw
tldraw是一个在线协作的简单草图工具,并且免费开源。
tldraw最适合寻找免费、开源的图表解决方案的人。
它包括以下功能:
Nextjs
官网:https://nextjs.org/
Github:https://github.com/vercel/next.js
Next.js是一个基于React的轻量级框架,用于构建React应用程序。它在React的基础上提供了一些增强功能,包括服务器渲染(SSR)、静态生成(SSG)、路由等。Next.js的目标是简化React应用程序的开发流程,并提供更好的性能和开发体验。
后五名最受欢迎的项目,我相信大家都有了解。小编就不一一介绍了。
前端框架排名第一:React
官网:https://react.dev/
Github:https://github.com/facebook/react
首先要想学React 的粉丝们,小编推荐看这边之前整理的《细聊2023年React生态》,保证你受益匪浅。
2023 年,React 在 JavaScript 生态系统中仍然保持着领先地位,这一趋势从 2021 年和 2022 年延续至今,尽管偶尔会受到批评和争议。
React是用于构建用户界面的JavaScript库,起源于Facebook的内部项目,该公司对市场上所有 JavaScript MVC框架都不满意,决定自行开发一套,用于架设Instagram的网站。于2013年5月开源。
前端框架排名第二:htmx
官网:https://htmx.org/
Github:https://github.com/bigskysoftware/htmx
htmx是一个全新的前端开发工具,旨在帮助开发者利用现有的HTML、CSS和JavaScript来实现更加强大的Web应用。它的核心理念是“通过在HTML属性中添加动态行为”,通过简单的标记就能对页面元素进行交互、更新和操作。
它因文件尺寸小、与现有服务器端框架的无缝集成而受到称赞,因为它是 "send HTML over the wire" 趋势的一部分:要求服务器发送 HTML 部分块,而不是在客户端处理 JSON。
特性
htmx的特性非常丰富,其中包括:
前端框架排名第三:Svelte
官网:https://svelte.dev/
Github:https://github.com/sveltejs/svelte
Svelte简介Svelte是一个新兴的热门前端框架,作者是 Rich Harris,被称为前端界的【轮子哥】,有Ractive、Rollup 和 Buble开源作品。
svelte 早在2016年就已经发布,这些年来不断的迭代进化,目前已经相对成熟了,官方还配套了一个开箱即用的框架 sveltekit。
Svelte 即是一个前端 UI框架,同时也是一个 编译器。它被预测为未来十年可能取代React和Vue等其他框架的新兴技术。
特点
前端框架排名第四:Million
官网:https://million.dev/
Github:https://github.com/aidenybai/million
Million.js是一个非常快速和轻量级的优化编译器,使组件的速度提高了70%。想象一下React组件以原始JavaScript的速度运行。
前端框架排名第五:Vue.js
官网:https://vuejs.org/
Github:https://github.com/vuejs/core
Vue是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建,并提供了一套声明式的、组件化的编程模型,帮助你高效地开发用户界面。无论是简单还是复杂的界面,Vue 都可以胜任。至于Vue 特性,小编发文章讲了好多遍了,这里就跳过了。
2023 年,随着 React Server Components 的出现,React 进入了第三个时代。
React 核心团队与 Vercel 合作发布了第一个稳定版本: Next.js 13.4 App Router。尽管引领了令人兴奋的创新并投入了大量资源,但 Vercel 因其与 React 核心团队的特殊关系以及对实验性功能的早期访问而受到了一些批评。2023 年初,经常可以看到新的 React 功能首先在 Next.js 文档中记录。社区对某些设计决策并不满意,例如 拓展 fetch() API, 但是他们 正在回溯。也经常看到对 App Router 的稳定性和其开发服务器性能的抱怨。尽管如此,React Server Components 的早期采用者报告了许多有希望的好处,例如更小的打包体积和大大简化的代码。
React 团队 阐明了其对新实验性功能的立场和推出策略。框架可以采用 canary 版本,框架突破性的变更会被记录下来。他们也赶上了文档更新,以 React Docs Update 结束了这一年, 彻底记录了最新的 API (useFormState, , ‘use server’ ...).
我们还看到了 Server Actions的出现,这是 React 核心的一个新功能,首次在 Next.js 14中实现为稳定版本,为表单提交和突变实现了无缝的 RPC 调用。类似于 Remix 的理念,Server Actions 设计时考虑到了 渐进式增强.
2024 年,我们将很兴奋的看到其他框架将采用 React Server Components ,尤其是:
随着 Vue 2 宣布在 2023 年底生命周期即将结束,今年被认为是 Vue 及其社区的转折点,许多人开始向版本 3 升级。
为此,进行了迁移方面的努力,生态系统也跟了上来并不断发展:取得了巨大的成果! Nuxt 3 现在的下载量超过了 Nuxt 2. UI 框架,如 Vuetify 和 PrimeVue,比以往任何时候都更准备好帮助构建大型(和小型!)应用程序。诸如 VueUse, Pinia, 甚至 TresJS 等库不断发展壮大,以更好地为我们所有人提供支持。
与 2022 年一样,开发人员体验仍然是首要任务。 Vue 3.3 为 <script setup> 带来了改进的 TypeScript 支持。Nuxt 发布了 8 个小版本并推出了 Nuxt DevTools,这是一个创意和富有洞察力的 UI,可帮助我们更好地了解我们的应用程序并更快地开发它们。
展望未来,正如 Evan 所说,2024 年将是 Vue 令人兴奋的一年。Vue 3.4 即将发布, Vapor mode 现已开源,进展顺利。所有这些都为新的一年提供了更多的性能改进和社区创新。
今年,Next.js 仍然是后端/全栈类别的领先项目。
next-14 专注于改进服务器操作并引入了新的局部预览渲染模式。
借助 React Server Components,开发人员可以使用新的范式构建 Web 应用程序,从而大大简化代码:直接从组件中获取数据使其成为 async,并通过将表单绑定到服务器操作来更改数据。
这个介绍 展示了直接从组件进行 SQL 请求,但人们可能错过了重点:React Server Components 可以像独立的组件一样工作,可以将其放在应用程序中的任何位置,而无需任何繁琐的连接,该视频很好地帮助建立了由 RSC 实现的新思维模型,展示了服务器和客户端组件的无缝混合。
排名第二的 Astro 继续攀升。除了原始概念(生成无序 JavaScript 即可运行的超快速静态站点,并使用您选择的 UI 框架添加交互性的模块)之外,它还可以用于动态生成页面。
我对 .astro 文件的模板系统的简洁性(非常接近 JSX)以及出色的 DX(CLI 非常漂亮!)印象深刻。
astro-4 引入了用于开发的新工具栏、自动 i18n 路由和新的视图转换 API,以改善用户体验。
Bun 也是一个 bundler 所以我们今年将其纳入了 “构建工具” 类别。
第二名 Vite 仍然是最受欢迎的通用 bundler ,为 Astro、Nuxt、Remix、SolidStart、SvelteKit 等元框架提供支持。
11 月发布的 version 5 建立在 rollup 4 的基础上,带来了性能改进。
Evan You 宣布 他正在研究 Rolldown,这是 Rollup 的 Rust 替代品,将集成到 Vite 中。因此,Vite 的未来一片光明!
第三名 Biome 的崛起是今年的故事之一。它与 Rome 衰落 有关,这是一个雄心勃勃的项目,旨在统一工具(编译、 linting、格式化、打包、测试)。但这个项目背后的公司垮台了,该项目也随即停止。
不过幸运的是,该项目被 forked 并以 Biome 的名义重生。
11 月,Biome 赢得了 Prettier Challenge:创建 “一个可以通过 Prettier 95% 以上测试的 Rust 驱动的代码格式化程序” 。Prettier 都认可了,那我们可以期待 2024 年 Biome 的更多可能。
说到 Rust,Oxc 和 Rspack 是这个领域的新参与者,来自 ByteDance 团队。 Rspack 提供了与 Webpack 的兼容性,同时提供了无与伦比的性能。自官方发布 Rising Stars 以来,这是第一次 Webpack 没有进入榜单,我们感觉很奇怪,因为毕竟用它的人这么多!
2023年移动端排名第一的 Expo 是一个用于 React 应用的框架和平台。其 Expo SDK 提供了 React Native 和 Native 的组件或工具,帮助开发者仅使用 JavaScript/TypeScript,在 iOS、Android 和 Web 应用上开发、构建、部署和快速迭代。
React Native 框架技术(以下简称RN)源于 FaceBook 技术团队, 基于他们团队开发的前端框架React, 用于开发手机端 app 而生。
现在绝大多数 App 都采用混合模型开发,固定的基础的组件使用 Java 或 Swift 等原生语言开发,而偏运营的组件和页面则采用 React Native 等H5形式开发。
这样做的好处就是原生开发者致力于创造基础组件,H5 致力于运营体验。
现在的 iOS 审核速度已经很快了,几乎一天就有结果,但是之前,可能要审核一周,半个月,甚至还会不通过,然后又要重新开始进入审核等待,这对于大部分需要频繁更新的 App 来说是不可接受的。
在这种情况下,React Native 出现了,它的首打功能就是 热更新技术。
热更新技术可以稍微的绕过应用商店的审核而直接更新。这样就可以达到快速上线的功能目的。
在2023年发展趋势CSS in JS 排名第一的是 Tailwind CSS。该项目是一个为快速开发而精心设计的原子类CSS框架。
原来我们将搭建一个Vite项目需要你掌握一些CSS、Vue的知识。作为一个原子类CSS框架,如果你熟练掌握CSS,那么使用起来将会非常顺手。
所有的功能类,譬如flex、text-lg、font-medium可以直接写在template中,无须在style或是额外样式表中书写。这样的工作方式让我们在书写代码时非常直观而且快速,维护起来也很容易。
你可以把Tailwind当作一套精美的UI来看待,也可以把它当作一套大而全的工具库,能够实现任意你想得到的外观和效果,扁平化设计或是复杂的立体效果,温柔或者犀利的风格,都可以做得到。
2023年UI 框架排名榜第一的是DaisyUI。它是一款极为流行的 CSS UI 组件库,作者 Pouya Saadeghi 基于大名鼎鼎的 Tailwind CSS 框架构建的组件库。
daisyUI 的技术特性
Bootstrap 是一个老牌大哥了,是Twitter推出的一个用于前端开发的开源工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架。目前,Bootstrap最新版本为5.0。
让小编推荐哪个,其实也是个人所需,看项目所需来选择。
作为一名程序员,和专业的测试员。那Web项目即将上线,那肯定Web自动化测试工具是个不可缺少的。在2023趋势下,playwright 是由微软开发的Web UI自动化测试工具, 支持Node.js、Python、C# 和 Java语言。
playwright 特点如下:
支持所有主流浏览器
快速可靠的执行
playwright 测试工具排名第一,也是有原因的。
在当今快速发展的技术环境中,对跨平台桌面应用程序的需求正在不断激增。
开发人员面临着选择正确框架之挑战,以便可以高效构建可在 Windows、macOS 和 Linux 上无缝运行的应用程序。
在跨平台功能方面,Tauri、Electron、Flutter 和 Qt 足以在多个操作系统上运行应用程序。它们为 Windows、macOS 和 Linux 提供广泛的支持,使其成为需要广泛兼容性的项目的合适选择。
Tauri:Tauri 因其轻量级特性和低资源消耗而脱颖而出。它是构建快速且响应灵敏的桌面应用程序的绝佳选择;
Electron:以其较高的资源使用率而闻名,Electron 应用程序可能会占用更多内存和 CPU,从而影响较旧或功能较弱的计算机的性能;
关于静态站点详细介绍,小编在之前的文章有更详细的介绍《2023 年静态站点生成器 SSG 大全》,有兴趣的可以看看。
近年来,构建网站的方式发生了很大变化,出现了很多新的构建网站的方式。静态站点生成器 (SSG) 就是一种构建网站的现代 Web 开发技术,其正在变得越来越流行。
SSG是一种基于原始数据和一组模板生成完整静态 HTML 网站的工具。本质上,SSG会自动完成对单个 HTML 页面进行编码的任务,并使这些页面提前准备好为用户提供服务。因为这些 HTML 页面是预先构建的,所以它们可以非常快速地加载到用户的浏览器中。
SSG是内容管理系统 (CMS) 的替代品——另一种用于管理 Web 内容、生成网页和实施模板的工具。
静态站点生成器非常适合创建营销、文档和博客等网站。但不适用于想要显示经常变化的实时、动态数据的情况。例如,股票交易或内容需要不断更新的 SaaS 仪表板。在这样的场景下,像 Next.js、Astro、Nuxt.js、VitePree 这样支持服务端渲染的框架更能满足我们的需求。
从React诞生之后,前端组件化的方案深入人心,React遵循的是单向数据流的原则,属性通过Props自上而下的传递。当页面比较简单,组件之间的层级关系比较浅时,这种自上而下的单向数据流的方式是不会有问题的。如果页面一复杂,组件的嵌套层级一深,这种单向数据流的传递方式,将会使你陷入到“嵌套地狱”。状态管理本身,解决的就是这种“嵌套”地狱的问题,解决的是跨层级组件之间的数据通信和状态共享。
在状态共享这方面,不像 Vuex,React 的官方并没有强力推荐某种封装方案,所以 React 的状态管理工具五花八门,百花齐放。
Zustand 是一个轻量级的、无依赖的状态库,适用于 React 和函数式编程。它提供了一个简单、灵活的方式来管理应用程序的状态。
以 redux 为代表的这类单向数据流状态管理库,都是需要在最外层(根组件)包一个 Provider , Context 中的值都在 Provider 的作用域下有效,这样才能做到数据状态共享。
Zustand 则另辟蹊径,默认不需要 Provider,就想 Vue 中 pinia 状态管理库一样,直接声明一个 hooks 式的 useStore 后就可以在不同组件中进行调用,并且保持它们的状态共享和响应式更新。
当系统需要用文档编辑器写文本,需要绘图工具制图。一旦文本、图片修改,就需要在不同的工具间切换,专业绘图和编辑文字花费了用户宝贵的时间。
Mermaid可以做到,它通过允许用户创建便于修改的图表来解决这一难题。换句话说,Mermaid就是通过简单的语法绘制出复杂的图形。
Mermaid是一个基于 Javascript 的图表绘制工具,通过解析类 Markdown 的文本语法来实现图表的创建和动态修改。Mermaid诞生的主要目的是让文档的更新能够及时跟上开发进度。
还有可视化图表在Web前端开发中经常用到的,这个时候特别需要组建库就方便了。这个是ECharts 就可以满足你这个需求。
ECharts是百度开发的一款开源的数据可视化库。它提供了丰富的图表类型,包括折线图、柱状图、饼图、散点图、雷达图等,并支持动画效果、数据筛选、图表联动等交互功能。ECharts使用简单,具有强大的定制化能力,可以通过配置项和API来实现各种需求。它还支持响应式设计,可以自适应不同的屏幕大小和设备。
时代在进步,科技在发展。各种各类各样的数据模型框架争先恐后的免费并且开源面世在开发者面前。
随着ChatGPT的爆火,很多AI概念风靡互联网,让人目不暇接。从LangChain、Transformer到GPT、Bert以及ChatGPT,这些概念彼此之间又有联系也有区别。
用户可以利用LangChain的模块来改善大语言模型的使用,通过输入自己的知识库来“定制化”自己的大语言模型。
LLM(大语言模型) 是一项变革性的技术,它将人类的各类知识和逻辑能力打包进入了一个体积庞大的模型当中。
LangChain是一个用于开发基于语言模型的应用程序开发框架。总的来说,LangChain是一个链接面向用户程序和LLM之间的一个中间层。
它在 2023 年 3 月获得了 Benchmark Capital 的 1000 万美元种子轮融资,在近期又拿到了红杉2000-2500万美金的融资,估值已经提升到了2亿美金左右。
LangChain 可以轻松管理与语言模型的交互,将多个组件链接在一起,并集成额外的资源,例如 API 和数据库。其组件包括了模型(各类LLM),提示模板(Prompts),索引,代理(Agent),记忆等等。
一行代码,可能会创造出下一个让人惊叹的产品;
一个创新,可能会开启一个全新的科技时代;
一份初心,可能会影响到无数人的生活;
无论是在大公司工作,还是在小团队奋斗;
无论是资深的程序员,还是刚刚入行的新手;
每个人的代码,都有力量改变世界。
创作不易,喜欢的老铁们加个关注,点个赞,打个赏,后面会不定期更新干货和技术相关的资讯,速速收藏,谢谢!你们的一个小小举动就是对小编的认可,更是创作的动力。
创作文章的初心是:沉淀、分享和利他。既想写给现在的你,也想贪心写给 10 年、20 年后的工程师们,现在的你站在浪潮之巅,面对魔幻的互联网世界,很容易把一条河流看成整片大海。未来的读者已经知道了这段技术的发展历史,但难免会忽略一些细节。如果未来的工程师们真的创造出了时间旅行机器,可以让你回到现在。那么小编的创作就是你和当年工程师们的接头暗号,你能感知到他们在这个时代的键盘上留下的余温。