Recommend 20 front-end open source projects worth collecting

The world of open source is colorful every day. What new challenges will there be in the front-end field in 2022? Below are 20 interesting open source projects we've put together, hopefully one of them you'd like to collect.

★1. Proton particle

Site: https://github.com/drawcall/Proton

Proton is a lightweight, flexible Javascript particle animation library. Using it, you can easily create various cool particle animation effects. This project is referenced by nearly 2k projects on github. Proton also supports 3d particle version .

★2. Awesome LowCode Component

Site: https://github.com/aliaszz/awesome-lowcode-component

LowCode - The hottest concept in the front-end field in recent years, the Awesome LowCode Component project collects various LowCode components and cutting-edge technical solutions for you, which can be used to quickly build enterprise-level projects or directly for development, greatly improving business requirements and business realization s efficiency.

★3. wp2vite

Site: https://github.com/tnfe/wp2vite

A particularly useful project that enables your webpack project to support vite. Compared with webpack, the construction speed of vite development environment can be increased by about 80%, and the construction speed of production environment can be increased by about 50%.

★4. Awesome State

Site: https://github.com/tnfe/awesome-state

various front-end state management solutions in the industry, including state libraries such as react, , angular, and small programs.

★5. Front-end engineering tool Feflow

Site: https://github.com/Tencent/feflow

Feflow is a front-end workflow and specification tool open sourced by Tencent to improve engineering efficiency. At present, it has been widely used in NOW live broadcast, Fantasia live broadcast, Fantastic Friendship, mobile QQ, group video, group gift giving, echo, application treasure, Penguin and other businesses.

★6. TDesign React Starter

Site: https://github.com/Tencent/tdesign-react-starter

TDesign React Starter is based on tdesign-react, developed with React and Vite2 , and can be configured with personalized theme. It aims to provide project out-of-the-box, configuration-style middle and background projects.

★7. Web IDE UI

Site: https://github.com/DTStack/molecule

Molecule is a VS Code inspired web IDE UI framework built with React.js. By designing an extension mechanism similar to VS Code, a highly abstract Web IDE UI system can be built quickly and easily.

★8. Flutter game library

Site: https://github.com/flutterkit/zerker

Zerker is a flexible, lightweight Flutter animation game framework. Have you tried using Flutter to develop cross-end games? At the same time, it can also create Widget component animation effects, such as fly-out animation, pop-up animation, scene transition and so on.

★9. InkPaint

Site: https://github.com/drawcall/inkpaint

InkPaint is a lightweight Canvas graphics rendering library running on the node.js side. Use InkPaint to dynamically synthesize various pictures, pdfs, etc. on the server side. At the same time, InkPaint is a common library between node.js and the browser, and it can still run normally on the browser side.

★10. Golang for Node.js Developers

Site: https://github.com/miguelmota/golang-for-nodejs-developers

This guide contains numerous examples for anyone learning Go from Node.js and vice versa. Go is a high-performance, high-concurrency, cross-platform language that is getting more and more attention and applications. As the saying goes, more skills do not overwhelm you, and mastering one more language means that you have more choices in application development.

★11. Cloud Development CloudBase CMS

Site: https://github.com/TencentCloudBase/cloudbase-extension-cms

CloudBase CMS is a Node.js-based Headless content management platform developed and launched by Tencent Cloud. It provides rich content management functions, is simple to install, and is easy for secondary development. It is closely integrated with the cloud development ecosystem to help developers improve their development. effectiveness.

★12. Qiankun micro front-end practice

Site: https://github.com/wl-ui/wl-mfe

qiankun is a complete set of micro front-end solutions. This project will introduce how the Vue project can access __qiankun__ through a micro service demo. This project is a micro front-end background management system project based on vue3+koa2+qiankun2.

★13. Online Video Editor

Site: https://github.com/kudlav/videoeditor

An online video editor that supports features like timeline manipulation and video cropping. The project uses server-side rendering and supports modern mainstream browsers.

★14. Code Clock Collection

Site: https://github.com/drawcall/clock-shop

This project is a collection of dozens of various and fun clock codes. Find a good-looking clock to hang on your blog homepage, and it will instantly become taller.

Kapture 2022-03-04 at 22.20.27.gif

Kapture 2022-03-04 at 22.22.30.gif

★15. Awesome made by chinese

Site: https://github.com/JN-H/awesome-made-by-chinese

An open source project from Chinese developers on Github. This project collects and organizes some of our Chinese developers' own works, each of which is worthy of praise. Similar projects like Awesome also

★16. Alloy Worker

Site: https://github.com/AlloyTeam/alloy-worker

The transaction-oriented high-availability Web Worker communication framework has withstood the test of large-scale front-end projects such as Tencent document .

★17. Mall low-code platform

Site: https://github.com/wangyuan389/mall-cook

Mall-Cook is a visual mall construction platform based on vue development, including multi-page visual construction, Json Schema generator (visual construction material control panel), and realization of component pipeline standard access platform. The latest version uses uni-app to reconstruct materials and template projects, and supports the generation of H5 and mini-program multi-end malls.

★18. WebGPU Samples

Site: https://github.com/austinEng/webgpu-samples

WebGPU is the latest Web 3D graphics API. At present, there are very few learning materials about WebGPU on the Internet. This project contains a series of WebGPU examples and codes, which can help you get started quickly.

★19. Front-end information TNT Weekly

Site: https://github.com/tnfe/TNT-Weekly

The weekly project maintained by the front-end team of Tencent News TNTWeb recommends you the latest excellent articles and industry progress in the front-end field at home and abroad every week. The project has received 3.5k+ stars since it was open sourced, and is deeply loved by front-end developers in the industry.

★20. Programmers cook at home

Site: https://github.com/Anduin2017/HowToCook

There are recipes everywhere, searched everywhere on the Internet, and even video tutorials, but there are always elusive "appropriate amounts" and "seasonings" that pop up from time to time. Said, it is quite a headache, and the "HowToCook" project was born.

Thanks for your patient reading!