I spent the day finally adding a modern build system / bundler to my side project, and I chose Parcel. Parcel is really cool! I really wish they'd stop calling it "zero-configuration". It has configuration options (--out-dir, --public-url), there's just no configuration file for them. I really wish they would make one, since it's annoying to have your configuration be hidden in a batch file.
Yeah, In my experience Parcel is nice, but Meteor does a better job at offering a zero-config build system than parcel. Because it also provides the node server (which may of course be seen as a drawback to some) it allows to do stuff like multiple bundles for multiple browsers, exact code splitting using dynamic imports etc. with actual zero-config.
Congrats to the Parcel team! Really great work. Having used Parcel in personal projects for the past year, it really is a great user experience.
Despite what people says in the comments, Parcel has its (great) value. The ability to import a rust file directly and have it compiled to a web assembly module for example, is a great piece of engineering and exceeded my expectations for web build tools. Parcel also hits the sweet spot where it's both zero-config, and easy to customize if you find the need.
Honestly? Parcel has a better experience than your C++ build tools. Be it CMake, Ninja, or whatever build tools people use in 2018.
I love that Parcel is out, even if yes it is another bundle, because it helps highlight the major problem with bundlers right now: they (but especially WebPack) are a meta-platform over the web unto themselves and they encourage use of features that are not supported by the web platform, in a way that's not easily transformed into what the web platform does currently, or will realistically, support, creating lock-in.
Just as we're getting to the point where many of these tools should be optional because we have great modern JS and modules support in browsers, and many projects are already written in supposedly standard modules, many are blocked from actually shipping code that runs un-built on the browser because of bundler features like importing images, CSS, etc.
IMO, the fact that 1726 modules is a “reasonable” number for a web app is a clear indication that there is something seriously wrong with this process.
Another factor contributing to this being the norm is the fact that web applications are always under pressure to count the bytes over the wire so there's a tendency to break things up into smaller chunks. Otherwise people would be moaning about large files.
I think the JavaScript ecosystem needs something akin to Boost. I do not like using Boost in C++, however the way their libraries are built and integrated into standard is awesome.
That's the result of JS lacking anything resembling a standard library. Just look at how long it took just for Object.entries to make its way into the language.
I hate doing javascript. I have no desire to attempt to understand or mess with JS or build systems past the bare minimum I can manage to get a project working so I can move on with my life.
So I tried using this. It was nice while what I was doing fit inside of everything that was default settings and/or what maintainers used. As soon as I stepped outside of that I ran into things like having to hope someone implemented a Parcel plugin for some random transform (an issue that applies to Webpack, too, but Webpack has so many more users that you're guaranteed someone actually did make one that actually works correctly), or: https://github.com/parcel-bundler/parcel/issues/645. Having an issue on something as popular as Bootstrap 4 be open for 6+ months is pretty frustrating. I spent several hours flailing at this issue to no avail.
I switched to Webpack 4 and had all of my existing build system and some additional niceties working in <45 minutes.
I've used used Parcel for a few projects this year and really enjoyed it for the most part. I've found it's basically effortless for building static projects, but its lack of documentation can be frustrating when errors pop up (e.g. I was stuck on an older version for a while due to some issue with a newer release) and I still haven't quite figured out the best pattern for extracting the hashed bundle names for use in other places.
That being said, Webpack 4 (released months ago) shipped with a similar zero config option, so I'll likely go back to it for future projects.
The main complication remaining with Parcel, IMO, is one that mostly derives from the syntax being used: there's no clear way to separate "I want this file to be added to the bundle, and a string URL for it" and "I want the appropriate representation of this file's contents".
My line of thought here is helper methods in an empty package namespace, so that they only exist at build time and are stripped out in the result.
I love the idea of Parcel but I've struggled with a number of non-obvious problems when using it on hobby projects.
° Sourcemaps not working (wrong files / no source translation)
° Randomly losing exports (a module with multiple exports where one of them ends up as an empty object - fix by clearing cache and restarting)
° Errors like "module 71b not found"
° Hot module reload enabled by default, meaning that all top level code runs again when you reload the code (e.g. here's an extra canvas in your dom)
My preferred zero config setup for hobby projects has become <script type="module">[1] and a live reload server[2].
If I'm working on a React project then I will always use Create React App when I can[3].
When I take something beyond the hobby stage and into maintaining it as an ongoing project, I use TypeScript Quickstart[4]—to abstract the underlying Webpack config and start writing code immediately.
I'll only reach for Webpack when I know that I need more flexibility than any of these other tools offer—which isn't very often.
I think the ultimate solution to bundling is to go the way of the CLIs, and Angular CLI in particular, where the framework team configures a sensible default bundle config with a few options exposed via the CLI. The user can then build with a single command and everything just works. The user can eject from the CLI and configure manually if needs be, but most of the time that won’t be necessary.
Bundlers probably have a certain minimum complexity that can’t be reduced if they want to be universally applicable, but a lot of that can be hidden for most use cases, particularly if using the same framework.
What is WebPack and SystemJS? I am being tongue in cheek but I totally agree. See all this bundling stuff? Nothing is more boring and lifeless to me personally and Angular CLI has shielded me from all of it. Really great project.
The only real problem I am having is lazy loading and dynamic component's. I am being forced really to add routes to lazy load some heavy components but I would really like not to have to deal with that. I believe there is a way to use SystemJS to load dynamic components at runtime but there is scant information and have no interest to pursue it. A small price to pay.
Yup, just FYI Angulars CLI is based on Embers. Just putting it out there because the oldest thriving framework which put out a lot of great ideas often gets forgotten in these discussions :)
Just tried it quickly; didn't work. It did something and then I got a blank page. Probably some config missing that it needs but the point is: no zero conf and doesn't work as advertised.
For a recent project (with modest needs), I just used a short makefile[1] and plain ES5. I found the experience refreshing as there is definitely peace of mind in depending on one less black box.
There is indeed something uncomfortable about a big node_modules directory or a magic build tool. It's almost like bathophobia, where instead of depths there is 3rd-party javascript code.
Gulp has/had the right approach. There's only so much flexibility and complexity configuration format can support without becoming strange copy-pasted incantations that can only be reasonably expressed and clearly visualized through code. And they've proven that, eating Grunt's lunch, but then they blew it with never-ending alpha and general stewardship fail.
And with regards to Parcel vs Webpack, it's not (at least not yet) even a competition since webpack 4 is basically zero-configuration and is so much more advanced tool at all levels.
Just other day was trying to remember why everyone switched from gulp to webpack. There was some reason for it right? Or was it just that gulp/plugins were unstable.
Do remember looking into it for small side project but ended up just using npm scripts, maybe that's part of it.
I try to avoid using webpack, because it looks over overcomplicated. So I would prefer a tool like this. Do stuff automatically and dig deeper if you need some custom option. Nice job! Well done!
I suspect that most services start very lean, and if they become popular people request more and more stuff and it gets added, making the thing more complicated.
Webpack is too complicated though, so if this can stay simple, why not.
Seems like a nice alternative to more opinionated language dependent site generators and webapp frameworks built on top of Webpack (ex. Gatsby, Next.js, Nuxt).
Is something really wrong with WebPack? Didn’t we decide that we want more modularity and plugins, instead of “zero configuration” solutions that lock you into a few technologies? What about the next hip new frameworks that release in the future? Will they just be piled into parcel, or will they add a plugin system? This seems like an unsustainable model.
Caching and parallelization are my complaints with WebPack. WebPack doesn't cache that well out of the box, and plugins like HardSource seem to have errors often enough that they're kind of annoying. WebPack also doesn't have parallelization built in, so you need something like HappyPack. Maybe I was doing something stupid, but I wasn't able to get HappyPack and HardSource to work together nicely.
1. The existing tool is way too complicated to configure and slow. Let me introduce a new, zero-configuration, blazing fast tool
2. OK so because it's strongly opinionated there are some things it can't do. So we'll allow you to extend it via plugins. You'll have to configure this.
3. Due to the increasing popularity, we are making a meta-version that lets you re-plug any element in the entire system with one of your own choosing. You'll have to configure this.
The code looks nice, I hope it has helped you in your life.
But frankly, if a JavaScript developer ever really wants to solve the problem... Learn enough C++ to write the equivalent code that compiles 6.5M in 0.1 seconds (assuming a nice HD).
This is fine argument. Although I work primarily in JS, I don’t think that this is the tool for any job. There are lot of nice tools in JS out there. While using single tool written in JS it might be not looks slow, but when you must use multiple of them in day to day work it start be a problem.
To sum up: I don’t think JS was designed to build such tools. Although it is very nice language to write in, it is not so efficient in runtime.
Oh no! One language has a build process and toolchain... We should clearly throw everything else out and just use this one hammer for everything! /s
Believe it or not, some people have problems in domains with contexts that have nothing to do with yours and the things they come up with are equally valid solutions.
[+] [-] merricksb|7 years ago|reply
https://news.ycombinator.com/item?id=15853149 (435 points/163 comments)
[+] [-] h1d|7 years ago|reply
[+] [-] Jasper_|7 years ago|reply
[+] [-] sgillen|7 years ago|reply
I think really the value proposition here is “very little if any setup needed” and making so there was no setup possible may have gone too far.
[+] [-] hazza1|7 years ago|reply
[+] [-] h1d|7 years ago|reply
[+] [-] kabes|7 years ago|reply
[+] [-] yzmtf2008|7 years ago|reply
Despite what people says in the comments, Parcel has its (great) value. The ability to import a rust file directly and have it compiled to a web assembly module for example, is a great piece of engineering and exceeded my expectations for web build tools. Parcel also hits the sweet spot where it's both zero-config, and easy to customize if you find the need.
Honestly? Parcel has a better experience than your C++ build tools. Be it CMake, Ninja, or whatever build tools people use in 2018.
[+] [-] Nimelrian|7 years ago|reply
I don't think there are many people who'd say that there's any good experience with using CMake for any slightly complicated project.
[+] [-] IshKebab|7 years ago|reply
[+] [-] spankalee|7 years ago|reply
Just as we're getting to the point where many of these tools should be optional because we have great modern JS and modules support in browsers, and many projects are already written in supposedly standard modules, many are blocked from actually shipping code that runs un-built on the browser because of bundler features like importing images, CSS, etc.
[+] [-] oweiler|7 years ago|reply
[+] [-] bradknowles|7 years ago|reply
[+] [-] borplk|7 years ago|reply
[+] [-] yoz-y|7 years ago|reply
[+] [-] crooked-v|7 years ago|reply
[+] [-] mattbreeden|7 years ago|reply
So I tried using this. It was nice while what I was doing fit inside of everything that was default settings and/or what maintainers used. As soon as I stepped outside of that I ran into things like having to hope someone implemented a Parcel plugin for some random transform (an issue that applies to Webpack, too, but Webpack has so many more users that you're guaranteed someone actually did make one that actually works correctly), or: https://github.com/parcel-bundler/parcel/issues/645. Having an issue on something as popular as Bootstrap 4 be open for 6+ months is pretty frustrating. I spent several hours flailing at this issue to no avail.
I switched to Webpack 4 and had all of my existing build system and some additional niceties working in <45 minutes.
[+] [-] vmware505|7 years ago|reply
[+] [-] h1d|7 years ago|reply
Perhaps your problem will be solved as parcel takes more time for third parties to fill those small niches.
[+] [-] jacobsimon|7 years ago|reply
That being said, Webpack 4 (released months ago) shipped with a similar zero config option, so I'll likely go back to it for future projects.
[+] [-] oweiler|7 years ago|reply
[+] [-] crooked-v|7 years ago|reply
My line of thought here is helper methods in an empty package namespace, so that they only exist at build time and are stripped out in the result.
[+] [-] codecurve|7 years ago|reply
° Sourcemaps not working (wrong files / no source translation)
° Randomly losing exports (a module with multiple exports where one of them ends up as an empty object - fix by clearing cache and restarting)
° Errors like "module 71b not found"
° Hot module reload enabled by default, meaning that all top level code runs again when you reload the code (e.g. here's an extra canvas in your dom)
My preferred zero config setup for hobby projects has become <script type="module">[1] and a live reload server[2].
If I'm working on a React project then I will always use Create React App when I can[3].
When I take something beyond the hobby stage and into maintaining it as an ongoing project, I use TypeScript Quickstart[4]—to abstract the underlying Webpack config and start writing code immediately.
I'll only reach for Webpack when I know that I need more flexibility than any of these other tools offer—which isn't very often.
[1]: https://jakearchibald.com/2017/es-modules-in-browsers/
[2]: https://github.com/tapio/live-server
[3]: https://github.com/facebook/create-react-app
[4]: https://github.com/danprince/typescript-quickstart
[+] [-] jf-|7 years ago|reply
Bundlers probably have a certain minimum complexity that can’t be reduced if they want to be universally applicable, but a lot of that can be hidden for most use cases, particularly if using the same framework.
[+] [-] Fifer82|7 years ago|reply
The only real problem I am having is lazy loading and dynamic component's. I am being forced really to add routes to lazy load some heavy components but I would really like not to have to deal with that. I believe there is a way to use SystemJS to load dynamic components at runtime but there is scant information and have no interest to pursue it. A small price to pay.
[+] [-] awesomepeter|7 years ago|reply
[+] [-] jillesvangurp|7 years ago|reply
[+] [-] h1d|7 years ago|reply
People who haven't tried can't even tell if you just screwed it up or there's actually a problem.
[+] [-] M4v3R|7 years ago|reply
[+] [-] gvalkov|7 years ago|reply
There is indeed something uncomfortable about a big node_modules directory or a magic build tool. It's almost like bathophobia, where instead of depths there is 3rd-party javascript code.
[1]: https://github.com/gvalkov/tailon-next/blob/master/frontend/...
[+] [-] synthmeat|7 years ago|reply
And with regards to Parcel vs Webpack, it's not (at least not yet) even a competition since webpack 4 is basically zero-configuration and is so much more advanced tool at all levels.
[+] [-] spiritcat|7 years ago|reply
Do remember looking into it for small side project but ended up just using npm scripts, maybe that's part of it.
[+] [-] minpur2|7 years ago|reply
[+] [-] voltagex_|7 years ago|reply
[+] [-] vmware505|7 years ago|reply
[+] [-] nkkollaw|7 years ago|reply
Webpack is too complicated though, so if this can stay simple, why not.
[+] [-] deltron3030|7 years ago|reply
[+] [-] unknown|7 years ago|reply
[deleted]
[+] [-] ivanfon|7 years ago|reply
[+] [-] thatswrong0|7 years ago|reply
[+] [-] mattbreeden|7 years ago|reply
https://parceljs.org/plugins.html
[+] [-] joshwa|7 years ago|reply
1. The existing tool is way too complicated to configure and slow. Let me introduce a new, zero-configuration, blazing fast tool
2. OK so because it's strongly opinionated there are some things it can't do. So we'll allow you to extend it via plugins. You'll have to configure this.
3. Due to the increasing popularity, we are making a meta-version that lets you re-plug any element in the entire system with one of your own choosing. You'll have to configure this.
4. GOTO 1.
[+] [-] cjhanks|7 years ago|reply
But frankly, if a JavaScript developer ever really wants to solve the problem... Learn enough C++ to write the equivalent code that compiles 6.5M in 0.1 seconds (assuming a nice HD).
[+] [-] nemothekid|7 years ago|reply
[+] [-] rydel|7 years ago|reply
[+] [-] voltagex_|7 years ago|reply
[+] [-] tomnipotent|7 years ago|reply
Believe it or not, some people have problems in domains with contexts that have nothing to do with yours and the things they come up with are equally valid solutions.
[+] [-] modernerd|7 years ago|reply
Fastpack is a binary JS bundler written in OCaml:
http://fastpack.io/
It’s new and missing some features (http://fastpack.io/docs/get-started.html ), but already faster than Webpack / Parcel. It also supports Webpack loaders.