Web-OpenSource-List

Web OpenSource List

Showcase

  • 2020-vanillawebprojects : Mini projects built with HTML5, CSS & JavaScript. No frameworks or libraries

  • YesPlayMusic : 高颜值的第三方网易云播放器，支持 Windows / macOS / Linux :electron:

  • Gui Challenges : Components from the YouTube show GUI Challenges: accessible, responsive, adaptive and cross browser components.

WebSite Clone

  • Hulu Website Clone : This is an HTML & CSS project with a bit of JavaScript. It is a clone of the Hulu homepage and part of a YouTube tutorial

Portfolio

  • Dopefolio : A Blazing Fast Multipage Portfolio Template for Developers 🚀

Examples

Dev Tools

Toolchains

  • Volta : The Hassle-Free JavaScript Tool Manager.

  • Turborepo : The High-performance Build System for JavaScript & TypeScript Codebases

  • Wireit : Wireit upgrades your npm scripts to make them smarter and more efficient.

IDE

  • Rekit : IDE and toolkit for building scalable web applications with React, Redux and React-router

  • Keretes : A Programming Environment for TypeScript & Node.js built on top of VS Code.

  • Playroom : Design with JSX, powered by your own component library.

Code helper

  • mometa : 🛠 [Beta] 面向研发的低代码元编程，代码可视编辑，辅助编码工具

Debug

  • mdebug : 基于 React 开发的新一代 web 调试工具，支持 React 组件调试，类似于 Chrome Devtools。A Lightweight, Easy To Extend Web Debugging Tool Build With React。

  • fuite : A tool for finding memory leaks in web apps

  • memlab : Analyzes JavaScript heap and finds memory leaks in browser and node.js

Test

  • Mocha : Mocha is a feature-rich JavaScript test framework running on Node.js and in the browser, making asynchronous testing simple and fun. Mocha tests run serially, allowing for flexible and accurate reporting, while mapping uncaught exceptions to the correct test cases. Hosted on GitHub.

  • istanbul : Istanbul instruments your ES5 and ES2015+ JavaScript code with line counters, so that you can track how well your unit-tests exercise your codebase.

  • Jest : Jest is a delightful JavaScript Testing Framework with a focus on simplicity.

API Mocking

  • Mock Service Worker : Mock by intercepting requests on the network level. Seamlessly reuse the same mock definition for testing, development, and debugging.

Bundler

  • Webpack : Webpack is a static module bundler for modern JavaScript applications.

  • 2017-Parcel : Blazing fast, zero configuration web application bundler.

  • browserify : browserify will recursively analyze all the require() calls in your app in order to build a bundle you can serve up to the browser in a single <script> tag.

  • 2017-Backpack : Backpack is minimalistic build system for Node.js. Inspired by Facebook’s create-react-app, Zeit’s Next.js, and Remy’s Nodemon, Backpack lets you create modern Node.js apps and services with zero configuration.

  • 2017-Microbundle : A zero-configuration bundler for tiny modules, powered by Rollup.

  • FuseBox : FuseBox is a bundler/module loader that combines the power of webpack, JSPM and SystemJS.

  • 2019-Snowpack : Build web applications with less tooling and 10x faster iteration. No bundler required.

  • 2020-Rome : Rome is an experimental JavaScript toolchain. It includes a compiler, linter, formatter, bundler, testing framework and more. It aims to be a comprehensive tool for anything related to the processing of JavaScript source code.

  • 2021-Astro : Astro is a fresh but familiar approach to building websites. Astro combines decades of proven performance best practices with the DX improvements of the component-oriented era. Use your favorite JavaScript framework and automatically ship the bare-minimum amount of JavaScript—by default.

Obfuscator

  • JavaScript obfuscator : JavaScript Obfuscator is a powerful free obfuscator for JavaScript, containing a variety of features which provide protection for your source code.

Library

UI Framework

  • Svelte : Svelte is a new way to build web applications. It’s a compiler that takes your declarative components and converts them into efficient JavaScript that surgically updates the DOM.

  • Stimulus : A modest JavaScript framework for the HTML you already have.

  • 2019-Neo : This is a new paradigm. If you want to enter a new era of making better Web Based User Interfaces, the following concepts will be addictive.

HTML & CSS

  • tailwindcss : A utility-first CSS framework for rapid UI development.

  • CSS Blocks : CSS Blocks is an ergonomic, component-oriented CSS authoring system that compiles to high-performance stylesheets.

State Management

  • Recoil : Recoil is an experimental state management library for React apps. It provides several capabilities that are difficult to achieve with React alone, while being compatible with the newest features of React.

  • xstate : State machines and statecharts for the modern web.

  • zustand : A small, fast and scalable bearbones state-management solution using simplified flux principles. Has a comfy api based on hooks, isn’t boilerplatey or opinionated.

    • zundo : 🍜 undo/redo middleware for zustand. <1kB
    • zustood : 🐻‍❄️ A modular store factory using zustand

Mini Program & Cross App

  • wepy : 让小程序支持组件化开发的框架，一个最受欢迎的小程序框架。

  • 2018-mpx : A enhanced miniprogram framework with data reactivity and deep optimizition.

  • Remax : Remax 将 React 运行在小程序环境中，让你可以使用完整的 React 进行开发。

  • 2017-Taro : 多端统一开发框架，支持用 React 的开发方式编写一次代码，生成能运行在微信/百度/支付宝/字节跳动小程序、H5、React Native 等的应用。

  • 2018-Chameleon : Chameleon /kəˈmiːlɪən/，简写 CML，中文名卡梅龙；中文意思变色龙，意味着就像变色龙一样能适应不同环境的跨端整体解决方案。

  • 2019-alita : 一套把 React Native 代码转换成微信小程序代码的转换引擎工具。我们不造轮子，不发明新框架，只是提供工具把 RN 扩展到微信小程序端。

  • uni-app : uni-app 是一个使用 Vue.js 开发跨平台应用的前端框架。

Scaffold

  • 2018-@pika/web : Install npm dependencies that run directly in the browser. No Browserify, Webpack or import maps required.

  • 2018-code-server : code-server is VS Code running on a remote server, accessible through the browser.

Pattern Libraries

  • Material-UI : A Set of React Components that Implement Google’s Material Design.

  • Ant Design : An enterprise-class UI design language and React-based implementation.

  • 2019-Chakra UI : ⚡️Simple, Modular & Accessible UI Components for your React Applications.

  • 2020-headlessui : Completely unstyled, fully accessible UI components, designed to integrate beautifully with Tailwind CSS.

CSS Pattern Libraries

SSR Fullstack

  • 2019-ssr : A most advanced ssr framework on Earth that implemented serverless-side render specification for faas and traditional web server.

  • 2021-Remix : Build Better Websites. Create modern, resilient user experiences with web fundamentals.

  • 2022-Astro : Build faster websites with Astro’s next-gen island architecture 🏝✨

Web APIs

  • Pressure.js : Pressure is a JavaScript library for handling Force Touch, 3D Touch, and Pointer Pressure on the web.

  • finder : CSS Selector Generator, Generates shortest selectors.

Virtual DOM

  • Snabbdom : A virtual DOM library with focus on simplicity, modularity, powerful features and performance.

  • asm-dom : A minimal WebAssembly virtual DOM to build C++ SPA (Single page applications)

  • Million : Million is a lightweight (<1kb) Virtual DOM. It’s really fast and makes it easy to create user interfaces.

Web Worker

  • Workly : A really simple way to move a stand-alone function/class to a worker thread.

  • workerize : Moves a module into a Web Worker, automatically reflecting exported functions as asynchronous proxies.

  • workerize-loader : Automatically move a module into a Web Worker (Webpack loader).

  • greenlet : Move an async function into its own thread, a simplified single-function version of workerize.

  • 2017-Comlink : Comlink’s goal is to make WebWorkers enjoyable. Comlink removes the mental barrier of thinking about postMessage and hides the fact that you are working with workers.

Network

  • 2014-axios : Promise based HTTP client for the browser and node.js.

  • 2014-request : Request is designed to be the simplest way possible to make http calls. It supports HTTPS and follows redirects by default.

Storage

  • 2013-localForage : Offline storage, improved. Wraps IndexedDB, WebSQL, or localStorage using a simple but powerful API.

  • 2023-kv.js : KV.JS is a fast, in-memory data store written in pure JavaScript, heavily inspired by Redis. It is capable of handling multiple data types, including strings, lists, sets, sorted sets, hashes, and geospatial indexes. Additionally, with more than 140 functions, KV.JS supports a vast variety of operations, ranging from SET, GET, EXPIRE, DEL to INCR, DECR, LPUSH, RPUSH, SADD, SREM, HSET, HGET, and many many more.

  • cookies.js : Tastier cookies, local, session, and db storage in a tiny package. Includes subscribe() events for changes.

DB

  • 2013-Pouchdb : PouchDB was created to help web developers build applications that work as well offline as they do online.

  • 2014-Lovefield : Relational Database With Schema

  • LokiJS : LokiJS is a document oriented database written in javascript, Its purpose is to store javascript objects as documents in a nosql fashion and retrieve them with a similar mechanism.

  • 2017-Lowdb : Small JSON database for Node, Electron and the browser. Powered by Lodash.

  • 2017-RxDB : The reactive, serverless, client-side, offline-first database for your next javascript-application.

  • 2017-Dexie.js : Dexie.js is a wrapper library for indexedDB - the standard database in the browser.

  • 2018-turtleDB : turtleDB is a JavaScript framework and in-browser database for developers to build offline-first, collaborative web applications. It provides a developer-friendly API to access an in-browser database built on top of IndexedDB.

  • 2020-sql.js : sql.js is a javascript SQL database. It allows you to create a relational database and query it entirely in the browser.

  • 2021-absurd-sql : sqlite3 in ur indexeddb (hopefully a better backend soon)

Media | 媒介资源

  • 2015-annyang : A tiny javascript SpeechRecognition library that lets your users control your site with voice commands.

  • 2015-SpeechKITT: A flexible GUI for Speech Recognition

Tuning | 性能调优

APM

  • LagRadar : Add this to any javascript application and you can see when the app drops below 60fps as the radar sweep changes colour and gets janky.

  • Lighthouse : Lighthouse an alyzes web apps and web pages, collecting modern performance metrics and insights on developer best practices.

    • 2023-Unlighthouse : Unlighthouse scans your entire site using Google Lighthouse, with a modern UI, minimal config and smart sampling.

  • stats.js : JavaScript Performance Monitor.

  • Falcon : Falco helps you monitor, analyze, and optimize your websites.

  • web-vitals-extension : A Chrome extension to measure essential metrics for a healthy site.

  • perfume.js : Web performance library for measuring all User-centric performance metrics.

  • badjs-report, 前端异常捕获与上报

Loading

  • Lozad : lozad.js is a light-weight library to lazy load elements using JavaScript.

  • 2018-whatcss : WhatCSS.info: CSS StyleSheet Pageload Analyser/Optimizer 🤷

  • 2018-instant.page : Make your site’s pages instant in 1 minute and improve your conversion rate by 1%.

  • 2018-lazysizes : lazysizes is a fast (jank-free), SEO-friendly and self-initializing lazyloader for images (including responsive images picture/srcset), iframes, scripts/widgets and much more.

Image

  • Jpegio : Convert any major image format into a highly optimized JPEG.

Rendering

PWA

  • Manifoldjs: PWA Builder : PWA Builder will give you an easy way to provide the missing pieces of your PWA, and not weigh down your site with data you don’t need or use.

  • Offline-plugin for webpack : This plugin is intended to provide an offline experience for webpack projects. It uses ServiceWorker, and AppCache as a fallback under the hood. Simply include this plugin in your webpack.config, and the accompanying runtime in your client script, and your project will become offline ready by caching all (or some) of the webpack output assets. you can also turn to Easy Offline First Apps With Webpack’s Offline Plugin for further information.

  • react-progressive-web-app : An opinionated React based repository which is optimized for Progressive Web App development.

  • RealFaviconGenerator: A great way to generate all the images, favicons, and associated files needed to display your app icon across different browsers.

  • Android Asset Studio - Launcher Icon Generator: Generate Android style icons.

  • pwmetrics : Progressive web metrics at your fingertipz

  • Workbox ：Workbox 是来自 Google Chrome 团队的快速将现有应用转化为 Progressive Web Apps 的 JavaScript 库；Workbox 允许我们通过 Webpack 插件、Gulp 插件以及 npm 脚本的方式快速地为当前应用的资源创建对应加载 ServiceWorker。

Experience Tuning

  • 2022-hotwired/turbo : Turbo uses complementary techniques to dramatically reduce the amount of custom JavaScript that most web applications will need to write: Turbo Drive accelerates links and form submissions by negating the need for full page reloads.

Polyfill

  • dialog-polyfill.js : Polyfill for the HTML dialog element.

  • Polyfill.io : Get a bundle of polyfills which have been minified ready for production website use. This endpoint responds with a JavaScript file containing the polyfills which should be served to the requesting browser.

Micro-FE Framework

  • 2018-Micro Frontends: Techniques, strategies and recipes for building a modern web app with multiple teams using different JavaScript frameworks.

  • Mooa : Mooa 是一个为 Angular 服务的微前端框架，前端微服务化：使用微前端框架 Mooa 开发微前端应用。

  • single-spa : Build micro frontends that coexist and can each be written with their own framework.

  • qiankun : 📦 🚀 Blazing fast, simple and complete solution for micro frontends.

  • Garfish : Garfish is a micro front-end framework, mainly used to solve the problems of cross-team collaboration, diversification of technology system, and increasing complexity of applications brought by modern web applications in the context of front-end ecological boom and increasing complexity of web applications, and Garfish has been polished and tested by a large number of online applications, with strong functional stability and reliability.

  • micro-app : micro-app 是一款基于类 WebComponent 进行渲染的微前端框架，不同于目前流行的开源框架，它从组件化的思维实现微前端，旨在降低上手难度、提升工作效率。它是目前市面上接入微前端成本最低的框架，并且提供了 JS 沙箱、样式隔离、元素隔离、预加载、资源地址补全、插件系统、数据通信等一系列完善的功能。

  • wujie : Web Components 是一个浏览器原生支持的组件封装技术，可以有效隔离元素之间的样式，iframe 可以给子应用提供一个原生隔离的运行环境，相比自行构造的沙箱 iframe 提供了独立的 window、document、history、location，可以更好的和外部解耦。无界微前端采用 webcomponent + iframe 的沙箱模式，在实现原生隔离的前提下比较完善的解决了上述问题。

Sandbox

  • 2022-workerbox : A secure sandbox to execute untrusted user JavaScript, in a web browser, without any risk to your own domain/site/page.
上一页

最近更新于 2023-04-16

comments powered by Disqus

© 2017-2022 NGTE all rights reserved