Closed ykdojo closed 5 months ago
Here is a quick summary of our tools: @ykdojo
Zero Config: Parcel offers a seamless development experience, requiring no configuration. It supports various languages and file types out of the box, from HTML, CSS, and JavaScript to images, fonts, and more.
Dev Server: Parcel includes a built-in development server for easy project setup. It supports HTTPS, and a built-in API proxy helps simulate the production environment.
Hot Reloading: Automatic code updates in the browser without page reloads. Integration with React Fast Refresh and Vue Hot Reloading API preserves application state between updates.
Diagnostics: Parcel provides clear error diagnostics in the terminal and browser, including syntax-highlighted code frames and documentation links for issue resolution.
Native Performance: Written in Rust, Parcel's JavaScript compiler, CSS transformer, and source maps offer superior performance, outpacing other JavaScript-based tools by 10-20x.
Multi-core: Designed with a multi-core architecture, Parcel parallelizes work across all cores, enhancing performance in transforming source files, packaging, and optimizing output bundles.
Reliable Caching: Everything, from transformation to bundling, is cached, ensuring instant dev server restarts and avoiding redundant builds.
Lazy Dev Builds: Parcel can defer building files until requested in the browser during development, reducing dev server startup time.
Production Optimization: Parcel optimizes the entire app for production, including tree-shaking, minification, image resizing, content hashing, automatic code splitting, and more.
Tree Shaking: Supports tree-shaking for both ES modules and CommonJS, removing unused code and classes automatically.
Minification: Parcel includes minifiers for JavaScript, CSS, HTML, and SVG out of the box, ensuring optimized builds.
Image Optimization: Supports resizing, converting, and optimizing images with easy query parameters in HTML, CSS, and JavaScript.
Compression: Provides Gzip and Brotli compression options for app deployment.
Code Splitting: Automatically deduplicates common modules, allowing parallel loading and caching of dependencies.
Dashboard and Profile: Parcel automatically includes content hashes in output file names, enabling efficient long-term browser caching.
Transpilation: Automatically transpiles JavaScript and CSS based on specified target browsers, supporting JSX, TypeScript, and modern CSS syntax.
Differential Bundling: Generates nomodule fallbacks for old browsers when using <script type="module">
, resulting in smaller bundles.
Workers: Supports web workers, service workers, and worklets out of the box, following standard browser APIs.
Libraries: Can build libraries for multiple targets simultaneously, allowing compilation to different module types and TypeScript definitions.
Extensible Configuration: While requiring zero configuration initially, Parcel allows easy extension through a JSON-based config file for more complex build requirements.
Powerful Plugins: Parcel's core is language-agnostic, allowing customization through various plugins for transforming, resolving dependencies, bundling, optimizing, and more.
Named Pipelines: Supports the creation of named pipelines for transforming files in multiple ways during a single build.
Performance Design: Parcel's plugin system is optimized for performance, automatically parallelizing plugins and integrating with caching.
API Integration: Offers an API for programmatically performing builds, enabling integration into existing build systems.
Plasmo Overview:
Development Features:
Browser Extension Utility:
Case Study - ArConnect:
Case Study - Liveblocks:
Plasmo Itero:
Production Deployment:
Instant Server Start: No more waiting around – kickstart your development with on-demand file serving using native ESM. And guess what? No bundling required! It's like your code is ready to party right when you are.
Fast HMR: You know that feeling when you're waiting for your code to hot-reload, and it's slower than a turtle in molasses? Well, fear not! This frontend tooling comes with a Hot Module Replacement (HMR) that's speedy, no matter how big your app gets. Zoom, zoom, baby!
Rich Features: It's the full package deal. TypeScript, JSX, CSS – you name it, it's got it. Right out of the box. No need to wrestle with configurations. It's like having a superhero toolbelt for frontend development.
Optimized Build: Rollup, with its pre-configured magic, is here to make your life easier. Whether you're dealing with multi-page projects or creating the next big library, this tool's got your back. Building stuff has never been so smooth.
Universal Plugins: Plug and play, my friend. This tool's got a superset plugin interface that works seamlessly for both development and building. It's like having universal remote control but for your frontend workflow.
Fully Typed APIs: Flexibility meets TypeScript. The APIs are not just APIs; they are fully typed. So, you can code confidently, knowing that your buddy TypeScript has your back. No more second-guessing, just smooth sailing.
My take on this is that Parcel.js and Vite are all great tools with a general purpose, while Plasmo is specifically designed for browser extensions. For me, I think the best tool for this project would be Plasmo
cc: @ykdojo
Thank you for sharing this, @Jonath-z
I recommend choosing Plasmo as our framework. With a focus on extension development, Plasmo offers potential performance advantages. This decision aligns well with our project goals and ensures a smoother development process.
Thank you both.
@Jonath-z let me know if you might want to turn what you wrote into a Medium post, as well. We have a publication for this kind of thing.
@ykdojo definitely yeah. I would love that
Great! Here's the publication: https://medium.com/cs-dojo
It hasn't been active recently but we can start it up again.
^Looks like we all agree on Plasmo, so let's go with it.
Plasmo? Parcel.js? Vite?