I’m creating a project generator for developing web applications with Raxx. Project tentatively named Raxx.Kit at this point.
The discussion of Brunch in phoenix has recently been discussed on the forum. It seams like starting today few people would add brunch to a project.
So my questions are;
if you were starting a web project today what JavaScript build set up would you use?
Should I include a JS build tool in a generated project or is it too much of a project specific decision and it’s best for people to add there own?
In several recent projects I have made use of npm scripts and this was enough for me. However webpack does seam to be gathering enough of the javascript community to be worth considering.
I would probably use webpack. Although parcel seems interesting as well.
I personally like that there is development in this area in the js community as well as the general move towards “zero config” … I think Dan Abramov - The Melting Pot of JavaScript talk explains it well.
Actually, for a generator, I’d do the minimal possible to get a working project using npm scripts with the expectation that the developer would run them using yarn. At the end of the generator run, I’d display a message like:
The generator has created a minimal JavaSript build pipeline. It is
recommended that you take ownership of the JavaScript build pipeline
by either extending the generated npm scripts or by using a tool
like: webpack, Parcel or the build tool of your choice.
In other words, punt and let the developer choose their own tools. But let them know that it is expected that they should choose a tool. By using brunch in the Phoenix new generator they are kind of implying that you should use brunch.
Having said that, I like brunch and I’m a bit disappointed that it isn’t being actively maintained. I wonder if anyone has volunteered to take it over?
I would definitely include one - just to bring the barrier down for people getting started - but also make it easy for people to swap out for whatever they want.
On the surface this is an attractive argument but case in point Brunch and Phoenix - total neophytes aren’t even going to be familiar with npm - and so ultimately they have to learn about Brunch and the npm eco-system.
Building the npm skill set is going to have much broader applicability than the insert your current build tool here skill set. So there is some sense to a simple npm scripting setup that leverages focused packages like Babel, Browserify, UglifyJS, etc. - you’re going to have understand all this anyway (including the concepts behind those tools) and when you get fed up with it all, make your own choice later …
Generators like create-react-app and vue-cli are great because they get you going fast but they do not necessarily foster an understanding of the foundation - which you will have to tweak at some time in the future. Looking at the generated project infrastructure can be a great learning experience (and a good source for scavenging ideas) but that can only be unlocked if you already have some notion of what you are looking for.
Well I’m thinking of having more things opt in than opt out. So you should be covered with mix raxx.kit and the add what you what in the static files directory.
Certainly this thread hasn’t produced a run away winner. Several people have suggested things newer than webpack. (parcel/yarn) so to me it is looking like npm or nothing
Yeah I just do plain npm buildscripts, it already has them and you need npm regardless, so why not just use it as it will always be available and never go out of style as long the the node packaging system exists (which at this rate might be forever…).
After some more experiments it looks like it is probably unnecessary to add any js scaffold as adding plain npm build scripts is very easy. I might right a blog to expand on the set up but a perfectly acceptable development environment can be set up with the following steps.
use @external_resource path/to/file for all files that are to be included in the build.
3 Define a compilation step for assets using node
Define a npm script that watches for changes in source files and recompiles them.
There are far too many options here for me to list but my favourites right now are rollup and node-sass both come with a --watch option.
4 Supervise watcher in application.
children = [
# other children ...
{Task, fn() -> System.cmd("npm", ["run", "watch"]) end}
]
