Web-OpenSource-List

Web OpenSource List

Showcase

WebSite Clone

  • Hulu Website Clone #Project#: 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

Examples

Dev Tools

IDE

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

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

Debug

Test

  • Mocha #Project#: 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 #Project#: 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 #Project#: Jest is a delightful JavaScript Testing Framework with a focus on simplicity.

API Mocking

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

Bundler

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

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

  • browserify #Project#: 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 tag.

  • 2017-Backpack #Project#: 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 #Project#: A zero-configuration bundler for tiny modules, powered by Rollup.

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

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

  • 2020-Rome #Project#: 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 #Project#: 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.

SSR

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

Library

Framework

  • Svelte #Project#: 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 #Project#: A modest JavaScript framework for the HTML you already have.

  • 2019-Neo #Project#: 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 #Project#: A utility-first CSS framework for rapid UI development.

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

State Management

  • Recoil #Project#: 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 #Project#: State machines and statecharts for the modern web.

Mini Program & Cross App

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

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

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

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

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

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

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

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

Scaffold

Pattern Libraries

CSS Pattern Libraries

Web APIs

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

  • finder #Project#: CSS Selector Generator, Generates shortest selectors.

Virtual DOM

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

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

Web Worker

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

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

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

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

  • 2017-Comlink #Project#: 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 #Project#: Promise based HTTP client for the browser and node.js.

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

Storage

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

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

DB

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

  • 2014-Lovefield #Project#: Relational Database With Schema

  • LokiJS #Project#: 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 #Project#: Small JSON database for Node, Electron and the browser. Powered by Lodash.

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

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

  • 2018-turtleDB #Project#: 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 #Project#: 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 #Project#: sqlite3 in ur indexeddb (hopefully a better backend soon)

Media | 媒介资源

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

  • 2015-SpeechKITT: A flexible GUI for Speech Recognition

Animation | 动画库

Animation Effect

  • Woah.css #Project#: Animations for eccentric developers.

  • Hover.css #Project#: A collection of CSS3 powered hover effects to be applied to links, buttons, logos, SVG, featured images and so on.

  • iHover #Project#: iHover is an impressive hover effects collection, powered by pure CSS3, no dependency, work well with Bootstrap 3!

  • cssfx #Project#: A carefully crafted collection designed with a focus on fluidity, simplicity, and ease of use. Powered by CSS with minimal markup. Completely open source and MIT licensed.

  • CssCo: Photographic filters made with CSS, inspired by VSCO and CSSgram.

Tween Animation | 补间动画

  • react-motion #Project#: A spring that solves your animation problems.

  • 2017-Popmotion #Project#: A functional JavaScript motion library.

  • react-move #Project#: React Move 🌀 Beautiful, data-driven animations for React.

  • popmotion #Project#: Simple animation libraries for delightful user interfaces.

  • 2017-animateplus #Project#: Animate Plus is a JavaScript animation library focusing on performance and authoring flexibility. It aims to deliver a steady 60 FPS and weighs less than 3 KB (minified and compressed), making it particularly well-suited for mobile

  • 2017-Ant Motion #Project#: 使用 Ant Motion 能够快速在 React 框架中使用动画;我们提供了单项,组合动画,以及整套解决方案。

Plstopfic

  • Turn.js #Project#: Turn.js is a JavaScript library that will make your content look like a real book or magazine using all the advantages of HTML5.

Misc

  • ola #Project#: Smooth animation library for interpolating numbers.

Tuning | 性能调优

APM

Loading

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

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

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

  • 2018-lazysizes #Project#: 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 #Project#: Convert any major image format into a highly optimized JPEG.

Rendering

PWA

  • Manifoldjs: PWA Builder #Project#: 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 #Project#: 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 #Project#: 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 #Project#: Progressive web metrics at your fingertipz

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

Experience Tuning

Polyfill

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

  • Polyfill.io #Project#: 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.

Browser

  • browsh #Project#: A fully interactive, realtime, and modern text-based browser rendered to TTYs and browsers

Feature

  • fex-ua-device #Project#: 由于在国内生产 PC 的厂家有限,大众用户使用的浏览器也主要是当前的一些主流浏览器。因此目前的 UA 解析库在对 OS、浏览器外壳、浏览器内核等的识别率都相当高。但是由于国内的移动设备的五花八门,对于移动设备的硬件信息是很难用一套通用的方法进行识别,因此 ua-device 诞生。

Automation

  • Remote Browser #Project#: A low-level browser automation framework built on top of the Web Extensions API standard.

  • Rendertron #Project#: Rendertron is a dockerized, headless Chrome rendering solution designed to render & serialise web pages on the fly.

  • Rendora #Project#: Rendora is a dynamic renderer to provide zero-configuration server-side rendering mainly to web crawlers in order to effortlessly improve SEO for websites.

  • headless-devtools #Project#: Lets you perform Chrome DevTools actions from code by leveraging Headless Chrome+Puppeteer.

  • 2020-Kasaya #Project#: A "WYSIWYG" scripting language and runtime for browser automation.

  • 2019-Playwright #Project#: Playwright is a Node library to automate the Chromium, WebKit and Firefox browsers with a single API. It enables cross-browser web automation that is ever-green, capable, reliable and fast.

Architecture

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

Micro-FE Framework

  • Mooa #Project#: Mooa 是一个为 Angular 服务的微前端框架,前端微服务化:使用微前端框架 Mooa 开发微前端应用

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

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

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