JavaScript Web

Open-source JavaScript projects categorized as Web

Top 23 JavaScript Web Projects

  • webpack

    A bundler for javascript and friends. Packs many modules into a few bundled assets. Code Splitting allows for loading parts of the application on demand. Through "loaders", modules can be CommonJs, AMD, ES6 modules, CSS, Images, JSON, Coffeescript, LESS, ... and your custom stuff.

    Project mention: Optimizing React Apps for Performance: A Comprehensive Guide | dev.to | 2024-04-02

    Click "Start Test." WebPageTest generates a comprehensive report with details about the loading process, including time to first byte (TTFB), page load time, and visual progress. ### Setting Benchmarks with Lighthouse Start with Lighthouse audits to maximize the performance of your React application. Evaluate Lighthouse's scores and suggestions with careful consideration. Next, set benchmarks that are in line with industry norms or customized to meet your unique performance goals. Lastly, pay close attention to the places in your application where it needs work. You can improve your React application's effectiveness by carefully following these procedures, which will guarantee that it satisfies the required performance requirements. ### Analyzing Performance Results with WebPageTest In order to fully evaluate your webpage's performance, launch WebPageTest with a variety of systems, simulating a variety of user scenarios. Examine the waterfall chart carefully to identify loading patterns and bottlenecks, which are essential for improving the user experience. To see the page's rendering process over time and do a thorough examination, use filmstrip views. To effectively assess performance, pay special attention to measures such as time to first byte (TTFB), start render time, and fully loaded time. Also, a better understanding of performance variances is made possible by comparing findings across various test designs, which helps make well-informed recommendations for improving webpage responsiveness and efficiency. ## Impact of third-party libraries on React app performance Third-party library integration can speed up development while improving functionality in our React application. It's crucial to consider the possible effects on performance, though. Because heavy or poorly optimized libraries might negatively impact the speed and usability of our application. ### Bundle Size Look at the distribution file sizes related to the library, and use tools such as Bundlephobia or Webpack Bundle Analyzer to fully evaluate their impact on your bundle size. This thorough analysis enables you to make well-informed decisions about whether to include the library, making sure that its contribution minimizes superfluous bulk in your application's codebase and is in line with your optimization goals. ### Network Requests Analyze how the third-party library affects network requests to maximize performance. Reduce the number of requests made overall by minimizing external dependencies. This will enhance the user experience and loading speeds. Select appropriate libraries, maximize asset delivery, and leverage code splitting to load components asynchronously. You may improve the effectiveness and responsiveness of your application and provide users with a better experience by cutting down on pointless network queries. ### Execution Time Examine the library's code for any possible performance problems or bottlenecks in order to analyze the runtime performance of the library. Look for places where the code may execute slowly or inefficiently. You may ensure smoother operation inside your application by identifying and addressing any areas of the library's implementation that may be impeding ideal performance by doing a comprehensive assessment. ### Code Splitting for Third-Party Libraries Implementing code splitting is an effective strategy to load third-party libraries only when they are required, reducing the initial page load time. Use dynamic imports to load the library lazily:

  • parcel

    The zero configuration build tool for the web. 📦🚀

    Project mention: React Server Components Example with Next.js | dev.to | 2024-04-16

    In the Changelog Podcast episode referenced above, Dan Abramov alluded to Parcel working on RSC support as well. I couldn’t find much to back up that claim aside from a GitHub issue discussing directives and a social media post by Devon Govett (creator of Parcel), so I can’t say for sure if Parcel is currently a viable option for developing with RSCs.

  • SurveyJS

    Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

  • lighthouse

    Automated auditing, performance metrics, and best practices for the web.

    Project mention: Top 20 Frontend Interview Questions With Answers | dev.to | 2024-02-03

    Google Core Vitals now represent the most important metrics to focus on when it comes to technical SEO. Google Core Vitals are a set of standardized metrics that Google uses to evaluate the user experience offered by a web page and assign it a technical SEO grade. Several tools exist to measure and report technical SEO performance, but the most reliable is Google Lighthouse.

  • hyperapp

    1kB-ish JavaScript framework for building hypertext applications

    Project mention: VanJS (Vanilla JavaScript): smallest reactive UI framework | news.ycombinator.com | 2023-05-25

    Please check out https://github.com/jorgebucaran/hyperapp

  • ZeroNet

    ZeroNet - Decentralized websites using Bitcoin crypto and BitTorrent network

    Project mention: Its Time to make ZeroNet great again! | /r/Satoshispl | 2023-11-09

    ZernoNet project: GitHub - HelloZeroNet/ZeroNet: ZeroNet - Decentralized websites using Bitcoin crypto and BitTorrent network

  • matter-js

    a 2D rigid body physics engine for the web ▲● ■

    Project mention: Copying Angry Birds with nothing but AI | news.ycombinator.com | 2023-10-31

    Do you think this worked so cleanly because there is a tutorial similar to this and its in the dataset?

    https://github.com/liabru/matter-js/wiki/Tutorials

  • flexsearch

    Next-Generation full text search library for Browser and Node.js

  • WorkOS

    The modern identity platform for B2B SaaS. The APIs are flexible and easy-to-use, supporting authentication, user identity, and complex enterprise features like SSO and SCIM provisioning.

  • AriaNg

    AriaNg, a modern web frontend making aria2 easier to use.

    Project mention: Modern web front end for aria2 (BitTorrent supported) | news.ycombinator.com | 2023-07-16
  • Dash

    A beautiful web dashboard for Linux

  • grpc-web

    gRPC for Web Clients

    Project mention: Ask HN: WebSocket server transforming channel subscriptions to gRPC streams | news.ycombinator.com | 2023-08-14

    * Additionally, client can stream data to the backend server (if bidirectional GRPC streams are used). I.e. client sends WebSocket messages, those will be transformed to GRPC messages by WebSocket server and delivered to the application backend.

    As a result we have a system which allows to quickly create individual streams by using strict GRPC contract but terminating connections over WebSocket transport. So it works well in web browsers. After that no need to write WebSocket protocol, client implementation, handle WebSocket connection. This all will be solved by a suggested WebSocket server and its client SDKs.

    The mechanics is similar to Websocketd (https://github.com/joewalnes/websocketd), but instead of creating OS processes we create GRPC streams. The difference from grpc-web (https://github.com/grpc/grpc-web) is that we provide streaming capabilities but not exposing GRPC contract to the client - just allowing to stream any data as payload (both binary and text) with some wrappers from our client SDKs side for managing subscriptions. I.e. it's not native GRPC streams on the client side - we expose just Connection/Subscription object to stream in both directions. GRPC streams used only for communication between WebSocket server and backend. To mention - grpc-web does not support all kinds of streaming now (https://github.com/grpc/grpc-web#streaming-support) while proposed solution can. This all should provide a cross-platform way to quickly write streaming apps due to client SDKs and language-agnostic nature of GRPC.

    I personally see both pros and cons in this scheme (without concentrating on both too much here to keep the question short). I spent some time thinking about this myself, already have some working prototypes – but turned out need more opinions before moving forward with the idea and releasing this, kinda lost in doubts.

    My main question - whether this seems interesting for someone here? Do you find this useful and see practical value?

  • bud

    The Full-Stack Web Framework for Go

    Project mention: Sveltekit with golang | /r/golang | 2023-05-11

    Yeah. It seems like Bud is the best option I have to get what I want: https://github.com/livebud/bud/

  • sitespeed.io

    sitespeed.io is an open-source tool for comprehensive web performance analysis, enabling you to test, monitor, and optimize your website’s speed using real browsers in various environments.

    Project mention: Is there a way to accurately measure website speed so I can document logs of changes to site speed and correlate that with changes to the website? | /r/webdev | 2023-08-04

    I've always liked sitespeed.io.

  • Node.js framework

    Node.js framework (by totaljs)

    Project mention: Building a CRUD API with Total.js: A Step-by-Step Guide | dev.to | 2023-11-15

    Total.js is a powerful web application framework for Node.js, providing an excellent foundation for building robust APIs. In this tutorial, we'll guide you through the process of creating a CRUD (Create, Read, Update, Delete) API for managing a collection of books using Total.js.

  • browser-fingerprinting

    Analysis of Bot Protection systems with available countermeasures 🚿. How to defeat anti-bot system 👻 and get around browser fingerprinting scripts 🕵️‍♂️ when scraping the web?

    Project mention: A site that tracks the price of a Big Mac in every US McDonald's | news.ycombinator.com | 2024-01-13

    Yes, there is a lot written about it. Here is one link I have saved:

    https://github.com/niespodd/browser-fingerprinting

  • next-pwa

    Zero config PWA plugin for Next.js, with workbox 🧰

    Project mention: Enable PWA with next.js 13 or later using next-pwa (disabled in development environment) | dev.to | 2023-05-27

    /** @type {import('next').NextConfig} */ const path = require("path"); const isDev = process.env.NODE_ENV !== "production"; const withPWA = require("next-pwa")({ dest: "public", disable: isDev, buildExcludes: ["app-build-manifest.json"], }); const generateAppDirEntry = (entry) => { const packagePath = require.resolve("next-pwa"); const packageDirectory = path.dirname(packagePath); const registerJs = path.join(packageDirectory, "register.js"); return entry().then((entries) => { // Register SW on App directory, solution: https://github.com/shadowwalker/next-pwa/pull/427 if (entries["main-app"] && !entries["main-app"].includes(registerJs)) { if (Array.isArray(entries["main-app"])) { entries["main-app"].unshift(registerJs); } else if (typeof entries["main-app"] === "string") { entries["main-app"] = [registerJs, entries["main-app"]]; } } return entries; }); }; const nextConfig = { experimental: { appDir: true, }, reactStrictMode: true, webpack(config) { if( !isDev ){ const entry = generateAppDirEntry(config.entry); config.entry = () => entry; } return config; }, }; module.exports = withPWA(nextConfig);

  • Discord-MusicBot

    An advanced discord music bot, supports Spotify, Soundcloud, YouTube with Shuffling, Volume Control and Web Dashboard with Slash Commands support!

  • serialize-javascript

    Serialize JavaScript to a superset of JSON that includes regular expressions and functions.

  • slash

    A collection of TypeScript/JavaScript packages to build high-quality web services. (by toss)

  • tus-js-client

    A pure JavaScript client for the tus resumable upload protocol

  • fluxible

    A pluggable container for universal flux applications.

  • loki

    👁 Visual Regression Testing for Storybook (by oblador)

    Project mention: Has anyone automated storybook for visual regression tests with loki.js? | /r/softwaretesting | 2023-07-29

    I am looking to automate storybook as part of visual testing on components. Client has suggested to try loki.js - https://loki.js.org/ . Any leads would be much appreciated!

  • superfine

    Absolutely minimal view layer for building web interfaces

  • socket

    A cross-platform runtime for Web developers to build desktop & mobile apps for any OS using any frontend library.

    Project mention: A SETI-like project to train LLM on libgen, scihub and the likes? | news.ycombinator.com | 2023-12-28

    we're working toward this with Socket runtime (https://github.com/socketsupply/socket).

    Our ultimate goal is to provide a web browser-compatible environment (for quickly building UIs) with a state of the art P2P protocol — A DTN design that is fault and partition tolerant, with comprehensive and complete NAT traversal, without any server or cloud infrastructure requirements from the user — lowering the technical and monetary barriers for distributing and parallelizing work beyond the cloud.

  • InfluxDB

    Power Real-Time Data Analytics at Scale. Get real-time insights from all types of time series data with InfluxDB. Ingest, query, and analyze billions of data points in real-time with unbounded cardinality.

NOTE: The open source projects on this list are ordered by number of github stars. The number of mentions indicates repo mentiontions in the last 12 Months or since we started tracking (Dec 2020). The latest post mention was on 2024-04-16.

JavaScript Web related posts

Index

What are some of the best open-source Web projects in JavaScript? This list will help you:

Project Stars
1 webpack 64,145
2 parcel 43,086
3 lighthouse 27,791
4 hyperapp 19,024
5 ZeroNet 18,209
6 matter-js 15,900
7 flexsearch 11,765
8 AriaNg 11,265
9 Dash 10,334
10 grpc-web 8,285
11 bud 5,500
12 sitespeed.io 4,624
13 Node.js framework 4,347
14 browser-fingerprinting 3,830
15 next-pwa 3,588
16 Discord-MusicBot 2,853
17 serialize-javascript 2,782
18 slash 2,481
19 tus-js-client 1,900
20 fluxible 1,808
21 loki 1,730
22 superfine 1,562
23 socket 1,458
Power Real-Time Data Analytics at Scale
Get real-time insights from all types of time series data with InfluxDB. Ingest, query, and analyze billions of data points in real-time with unbounded cardinality.
www.influxdata.com