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. Learn more →
Top 23 Build Tool Open-Source 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.
-
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.
-
-
turbo
Incremental bundler and build system optimized for JavaScript and TypeScript, written in Rust – including Turbopack and Turborepo.
-
-
-
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.
-
earthly
Super simple build framework with fast, repeatable builds and an instantly familiar syntax – like Dockerfile and Makefile had a baby.
-
-
-
-
-
-
-
DependencyCheck
OWASP dependency-check is a software composition analysis utility that detects publicly disclosed vulnerabilities in application dependencies.
-
-
-
realize
Realize is the #1 Golang Task Runner which enhance your workflow by automating the most common tasks and using the best performing Golang live reloading.
-
modern.js
Modern.js is a web engineering system, including a web framework and a npm package solution.
-
-
-
Retire.js
scanner detecting the use of JavaScript libraries with known vulnerabilities. Can also generate an SBOM of the libraries it finds.
-
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.
Little confused as to why it has vite in it‘s name, it seems unrelated to https://vitejs.dev/
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:
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.
Supermemory has three main modules, managed by turborepo:
Hono does have a template application for Vercel, but in my case, my requirements were different (aren't they always 😅). I was working in a monorepo (using nx) because I wanted to manage my libs, tests, and examples all together in a single place, instead of having different repos.
Project mention: Gradle's leaky abstractions: Declarative(ish) shell, imperative core: Implementing a safe(ish) global configuration DSL | dev.to | 2024-03-24A ("shared") build service is kind of like a singleton, in that when you register one in any project, it's available in all projects as a single instance. (This unfortunately turns out not to be true, in some cases, when using composite builds, but can be worked around.) An actual singleton (global static instance) doesn't work at all, for the record—try it if you want to lose some sanity. Anyway, use a build service whenever you need global mutable state in your build.
To enable live reloading in Go we will checkout the command tool, Air - Live reload for Go apps.
Project mention: Cache is King: A guide for Docker layer caching in GitHub Actions | news.ycombinator.com | 2024-04-07Also CACHE keyword, for cache mounts. Makes incremental tools like compilers work well in the context of dockerfiles and layer caches.
That can extend beyond just producing docker iamges as well. Under the covers the CACHE keyword is how lib/rust in Earthly makes building Rust artifacts in CI faster.
So many tools in this space! This one looks a little bit like go-task, but it seems maybe better for production workflows because if timeout support, while go-task seems more aimed to command line work/makefile replacement.
—-
Check out: https://github.com/uncss/uncss
I've only used it once but it did the job (NOTE: Plain HTML, plain CSS, no build pipeline. So YMMV)
Project mention: Cpp2 and cppfront – An experimental 'C++ syntax 2' and its first compiler | news.ycombinator.com | 2024-03-31
Project mention: Show HN: Flox 1.0 – Open-source dev env as code with Nix | news.ycombinator.com | 2024-03-13How does Flox compare to Devbox? https://github.com/jetpack-io/devbox
Would you consider using some libraries in your project? There are lots of good ones in the Rust ecosystem, and many of them are not part of any existing browsers.
For example:
- https://github.com/servo/html5ever (HTML parsing - note: this is used in Servo)
- https://github.com/parcel-bundler/lightningcss (CSS parsing)
- https://github.com/DioxusLabs/taffy (web layout)
- https://github.com/pop-os/cosmic-text (text layout and rendering)
Obviously you should be free to work on whatever you like, but just as a benchmark on the scope of your project: I spent ~6 months implementing just the CSS Grid algorithm in Taffy last year. An entire browser from literal scratch is probably a 10 year project for one person.
Project mention: OWASP dependency check (<9.0.0) could fail to work after Dec 15th, 2023 | /r/programming | 2023-12-05
Project mention: Declarative Gradle is a cool thing I am afraid of: Maven strikes back | dev.to | 2023-11-11NOTE: I won’t mention SBT and Leiningen here because, with all due respect, they are niche build tools. I also won’t discuss Kobalt for the same reason (besides, it’s no longer actively maintained). Additionally, I won’t touch upon Bazel and Buck in this context, mainly because I’m not very familiar with them. If you have insights or comments about these tools, please feel free to share them in the comments 👇
Have you tried Bear? I used it for several projects and overall it works very well.
Modern.js framework
Project mention: Syncing Figma Variables and StyleDictionary with GitHub Actions | dev.to | 2023-08-03function getStyleDictionaryConfig(brand) { return { source: [`tokens/brands/${brand}/*.json`, 'tokens/globals/**/*.json'], platforms: { /** * Available platforms: https://amzn.github.io/style-dictionary/#/config?id=platform */ web: { transformGroup: 'web', buildPath: `build/web/${brand}/`, files: [ { destination: 'tokens.scss', format: 'scss/variables', }, ], }, }, } } /** * Build the tokens for each brand. * {@see - Example based on https://github.com/amzn/style-dictionary/tree/main/examples/advanced/multi-brand-multi-platform} */ ['microsoft', 'xbox'].map(function (brand) { ['web'].map(function (platform) { const StyleDictionary = StyleDictionaryPackage.extend( getStyleDictionaryConfig(brand), ) StyleDictionary.buildPlatform(platform) }) })
Retire.js
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.
Build Tool related posts
- Use CSS Variables to style react components on demand
- Supermemory - ChatGPT for your bookmarks
- Ask HN: How do we include JavaScript scripts in a browser these days?
- Next.js Shopify eCommerce Starter with Perfect Web Vitals 🚀
- Deploy a react projects that are inside a subdirectories to GitHub Pages using GitHub Actions (CI/CD)
- CSS Hooks and the state of CSS-in-JS
- Implementing SSO in React with GitHub OAuth2
-
A note from our sponsor - SurveyJS
surveyjs.io | 19 Apr 2024
Index
What are some of the best open-source Build Tool projects? This list will help you:
| Project | Stars | |
|---|---|---|
| 1 | vite | 64,595 |
| 2 | webpack | 64,145 |
| 3 | parcel | 43,097 |
| 4 | turbo | 24,847 |
| 5 | nx | 21,907 |
| 6 | Gradle | 16,109 |
| 7 | air | 15,133 |
| 8 | earthly | 10,816 |
| 9 | Task | 9,977 |
| 10 | uncss | 9,390 |
| 11 | xmake | 8,683 |
| 12 | devbox | 7,402 |
| 13 | rspack | 7,327 |
| 14 | lightningcss | 5,929 |
| 15 | DependencyCheck | 5,863 |
| 16 | wmr | 4,927 |
| 17 | sbt | 4,753 |
| 18 | realize | 4,436 |
| 19 | Bear | 4,397 |
| 20 | modern.js | 4,136 |
| 21 | Cake | 3,811 |
| 22 | style-dictionary | 3,626 |
| 23 | Retire.js | 3,503 |
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.
workos.com