当前位置: 首页 > 科技观察

前端月度趋势榜:4月最受欢迎的20个前端开源项目

时间:2023-03-17 15:51:47 科技观察

GitHub有一个Trendinglist(趋势榜)。在Trending页面上,您可以看到一些最近流行的开源项目或开发者。这个页面可以是很多人主动获取一些开源项目和活跃开发者的最佳方式。所以,猫哥每周一都会给大家推荐一个前端周趋势榜上周前10的项目,每个月都会推荐一个前端月度趋势榜前20的前一个月的项目,这样,大家可以知道最新有哪些优秀的前端项目开源了,使用的前端主流技术栈有哪些,以免错过好的开源项目。1.headless-ui一组完全无样式、完全可访问的UI组件,旨在与TailwindCSS完美集成。https://github.com/tailwindlabs/headlessui2.react-flowReactFlow是一个用于构建基于节点的图形的库。您可以轻松地实现自定义节点类型,它附带了迷你地图和图形控件等组件。请随意查看示例或阅读博客文章以开始使用。https://github.com/wbkd/react-flow3。ViteVite,一个基于浏览器原生ES导入的开发服务器。在服务端使用浏览器解析导入,按需编译返回,完全跳过打包的概念,服务端随时可用。同时不仅有Vue文件支持,还可以处理热更新,热更新的速度不会随着模块的增加而减慢。对于生产环境,同样的代码可以用rollup敲出来。虽然还是比较粗糙,但是我觉得这个方向是有潜力的。如果做得好,完全可以解决改一行代码等半天热更新的问题。Vite具有以下特点:快速冷启动即时模块热更新(HMR,HotModuleReplacement)真正的按需编译https://github.com/vitejs/vite4。tailwindcss一个实用优先的CSS框架,用于快速构建自定义定义用户界面。无需离开HTML即可快速构建现代网站。TailwindCSS是一个功能类优先的CSS框架,它集成了flex、pt-4、text-center和rotate-90等类,可以直接在脚本标记语言中组合以构建任何设计。https://github.com/tailwindlabs/tailwindcss5。tauriTauri是一个为所有主要桌面平台构建超小型和快速二进制文件的框架。开发人员可以集成任何编译为HTML、JS和CSS的前端框架来构建他们的用户界面。应用程序的后端是一个基于Rust的二进制文件,带有一个与前端交互的API。Tauri应用程序中的用户界面目前使用macOS和Windows上的winit和Linux上的gtk作为Tauri团队培养和维护的窗口处理库。WRY可以在macOS上使用WebKit,在Windows和Linux上使用WebKitGTK。https://github.com/tauri-apps/tauri6。vscodeVisualStudioCode是一个跨平台编辑器,用于编写在OSX、Windows和Linux上运行的现代Web和云应用程序。也是当今前端最受欢迎的编辑器!https://github.com/microsoft/vscode7。Vue.jsVue.js是一个渐进式JavaScript框架,也是最流行的前端框架。易于使用已经了解HTML、CSS和JavaScript?立即阅读指南并开始构建应用程序!灵活一个繁荣的生态系统,可以在库和完整框架之间自由扩展。高效20kBmin+gziprunsize超快虚拟DOM最省心的优化https://github.com/vuejs/vue8。React用于构建用户界面的声明式、高效且灵活的JavaScript库。声明式React使创建交互式UI变得轻而易举。为应用程序的每个状态设计干净的视图,React在数据更改时有效地更新和正确呈现组件。以声明方式编写UI可以使您的代码更可靠且更易于调试。组件化创建具有自己状态的组件,这些组件形成更复杂的UI。组件逻辑是用JavaScript而不是模板编写的,因此您可以轻松地在应用程序周围传递数据并将状态与DOM分开。LearnOnce,WriteAnywhere无论你现在使用的是什么技术栈,你都可以随时引入React来开发新功能,而无需重写现有代码。React还可用于使用Node进行服务器渲染,或使用ReactNative开发本机移动应用程序。https://github.com/facebook/react9。prismaPrisma是下一代ORM,包括以下工具:PrismaClient:自动生成和类型安全的Node.js和TypeScript查询构建器PrismaMigrate:声明式数据建模和迁移系统PrismaStudio:用于查看和编辑的GUIPrismaClient数据库中的数据可以在任何Node.js或TypeScript后端应用程序中使用,包括无服务器应用程序和微服务。这可以是RESTAPI、GraphQLAPI、gRPCAPI或任何其他需要数据库的API。https://github.com/prisma/prisma10.next.js这是一个用于生产环境的React框架。Next.js为您提供生产环境所需的所有功能和最佳的开发体验:包括静态和服务端融合渲染、支持TypeScript、智能打包、路由预取等无需任何配置的功能。https://github.com/vercel/next.js11。three.js官网对Threejs的介绍很简单:“Javascript3D库”。openGL是一个跨平台的3D/2D绘图标准,WebGL是openGL在浏览器上的一种实现。Web前端开发者可以直接使用WebGL接口进行编程,但是WebGL只是一个非常基础的绘图API,需要程序员具备大量的数学知识和绘图知识才能完成3D编程任务,代码量巨大.Threejs封装了WebGL,让前端开发者无需掌握大量的数学知识和绘图知识,就可以轻松进行Web3D开发,降低了门槛,大大提高了效率。https://github.com/mrdoob/three.js12。tiptap基于ProseMirror的无头、框架无关和可扩展的RTF编辑器。https://github.com/ueberdosis/tiptap13。CypressCypress是为现代网络构建的下一代前端测试工具,旨在解决开发人员和QA工程师在测试现代应用程序时面临的主要挑战。Cypress简化了设置测试、编写测试、运行测试和调试测试,支持端到端测试、集成测试和单元测试,并支持测试在浏览器中运行的任何东西。支持MacOS、Linux和Windows平台。https://github.com/cypress-io/cypress14。deno一个安全的JavaScript和TypeScript运行时。2020年是非常特殊的一年,原因有很多。最重要的是:时隔5年,RisingStar总冠军不是Vue.js,而是Deno……太惊喜了!Deno是来自Node.js的创建者RyanDahl的JavaScript运行时。拥有10年的Node.js经验和迭代经验,它经常被视为Node.js的续集,因为它修复或改进了许多点。https://github.com/denoland/deno15。React-use是ReactHooks的必备集合。libreact的端口https://github.com/streamich/react-use16。esbuild是一个将“JavaScript”和“TypeScript”代码打包并分发到网页上运行的压缩工具。esbuild是一个用Go语言编写的工具库,用于打包和压缩Javascript代码。其最突出的特点是其极快的包装速度。下图是esbuild与webpack、rollup、Parcel等打包工具打包效率的benchmark:https://github.com/evanw/esbuild17。nuxt.js很容易使用您使用的Vue框架NuxtJS自信地构建您的下一个Vue.js应用程序。一个开源框架,使Web开发变得简单而强大。https://github.com/nuxt/nuxt.js18。ant-design企业级UI设计语言和React组件库。:sparkles:特点:rainbow:提取自企业级中后台产品的交互语言和视觉风格。:package:开箱即用的高质量React组件。使用TypeScript开发,提供完整的类型定义文件。??全链路开发设计工具系统。:earth_africa:支持数十种国际语言。:art:深入到每一个细节的主题定制能力。https://github.com/ant-design/ant-design19。storybookStorybook是一个UI组件的开发环境,开发者可以通过它浏览组件库,查看各个组件的不同状态,交互开发和测试组件。Storybook运行在应用程序之外,允许开发者独立开发UI组件,提高了组件的可重用性、可测试性和开发速度。因此您可以快速构建而不用担心特定于应用程序的依赖性。特点:自带众多组件设计、文档、测试、交互等简单易用的API使其易于配置和扩展,甚至扩展到支持移动本地开发https://github.com/storybookjs/storybook20.vue-element-adminvue-element-admin是一个基于vue和element-ui的后端前端解决方案。它采用最新的前端技术栈,内置i18n国际化解决方案、动态路由、权限验证,提炼典型业务模型,提供丰富的功能组件。可以帮助您快速构建企业级中后台产品原型。同时提供系列教程文章,如何从零开始搭建一个完整的后台工程。摸你的手,带你用vue玩后台系列1(基础篇)摸你的手,带你用vue玩后台系列2(登录权限篇)摸你的手,带你玩vue的使用后台系列三(实战篇)摸摸你的手,带你使用vue后台系列四(vueAdmin是一款极简后台基础模板)摸摸你的手,带你使用vue后台系列五(v4.0新版)摸你的摸手,带你打包一个vue组件摸手,带你优雅使用图标摸手,带你合理使用webpack4的姿势(上)摸手,带你合理使用webpack4的姿势(下))这个项目还在维护中。而且还配有文档,非常不错。GithubStar数62.2K,Github地址:https://github.com/PanJiaChen/vue-element-admin