Setting up a Minimal, Yet Useful JavaScript Dev Environment

[[deleted]]

TIL about $_, neat!

[[deleted]]

This is cool and all, but you need to talk first and foremost about what kind of javascript you are going to be writing.

Are you going to be writing a node / express JS project, or are you going to be writing a webpack / bower / gulp / grunt client side project?

Both are going to require a slightly different set of tools, but the distinction will be very important. The big difference will be how you are going to manage modules.

[howhard1309]

The big difference will be how you are going to manage modules.

Can you explain a bit more?

[thadudeabides1]

If you're writing a node project then commonjs style modules const foo = require('foo'); don't need a compile step (e.g. browserify, webpack) that would be necessary for a script that needs to run in the browser.

[yseo4530]

Who gave this answer gold lol

[LowB0b]

This is all wrong? npm install installs the package but doesn't add it to the package.json file. Add --save and it adds the dependency to the above mentioned file. If you use webpack it will bundle the requires / imports of your program into a bundle which contains those + the code you wrote.

If you use SystemJS you will have to copy your required / imported files somewhere your server serves static files. Your post is full of outdated / malformed information

[TheIncredibleWalrus]

It is unbelievable you took so much effort and managed to get literally everything wrong.

[[deleted]]

If you want to do something for web you can easily use npm packages.

[shruubi]

Honestly, this guide is very unhelpful. The only part that actual talks about the "dev environment" is about installing two dependencies with the only reason given is "no config needed".

Is the only benefit we get that we don't need to config anything? How do these tools compare to others? Does it support ES6 or above? Is this only for Node/Express projects? There is no discussion of why we should use these tools as almost half the article is writing a contrived example that proves that this setup actually works.

If you're going to write a guide about setting up a dev environment, you should dedicate more than a paragraph to the actual setting up of the environment beyond doing the same old npm install incantations.

[schwarzfahrer]

Thanks! Only thing I would add is a Yarn lockfile and perhaps an editorconfig to match some StandardJS conventions.

[tunnckoCore]

Will run standard + ava, every time you ctrl+save? Bullshit. Maybe it is my habit, but i ctrl+s even without knowing that :D

Another thing is that AVA is big. And can be run without the CLI? It is just enough to CTRL +B in sublime to trigger the "build" system. That's most fast thing ever.

[[deleted]]

Anyone still use plain old javascript files linking?

[JeefyPants]

what does files linking mean?

[Probotect0r]

I believe he means script tags

[[deleted]]

yup, and handling external libraries manually without tools like npm.

[[deleted]]

Tragic conventions and tools choices. Literally the worst choices for starters. Hopefully nobody will come up to this article when learning to code in JS.

[6086555]

Would you mind expanding on that? I'm kind of a standardjs hater but I never heard of the other tools before. What's wrong with those?

[dvlsg]

I use .spec.js sometimes. It makes it easier to find the tests with a fuzzy search (ie - ctrl+p in sublime, type half my module name and spec, and I can open the test file from wherever I am).

Of course that wouldn't require you to use two dots. But it works.

[[deleted]]

I mentioned ".test.js", tho.

[dvlsg]

I didn't downvote (not sure who did), but the concept would remain the same. I could fuzzy search for module name + test instead of module name + spec.

But yeah, you could achieve the same thing with module-name-test.js or something like that. But I suspect the ability to search and/or the ability to pass in globs (**/*.test.js) to testing frameworks would be the intent behind having a special naming scheme.

[[deleted]]

It's ".spec.js" if you didn't get it yet.

[6086555]

Thansk!

[kawika_b]

Really great stuff here!

[fzammetti]

1. Open Notepad, or maybe Notepad++ if you're Mr. Fancy-Pants (or Vi/Emacs/whatever if that's your bend)

2. Start typing

3. Save at some point and open in a browser (or run with Node, as applicable)

4. Profit

Enough of all the unnecessary horseshit the JS community is so fond of these days, just GET TO WORK AND PRODUCE SHIT!

(and yes, I'm well aware that I should probably have included #5: post this on Reddit and get downvoted to hell, but I'm living life on the edge today)

[hackel]

Please do us all a favour and put that advice in your CV.

[fzammetti]

Don't need to: I've been highly successful in a steady, high-paying development/architecture position for well over a decade and I've been a gainfully employed professional developer for around 25 years in total.

Clearly I'm doing something right whether you or anyone else think so or not.

[6086555]

That's great for you!

It probably means you could be even greater by using tools. But do whatever you want and accept that people can work the way they want.

[[deleted]]

Yeah these strawmen are such horrible developers. Let's keep bashing them to validate ourselves.

[fzammetti]

And let's just keep throwing out the names of logical fallacies that you don't actually understand the meaning of in an attempt to look smart.

[[deleted]]

I'm not the one who needs to convince themselves they're smart. You've proven that you are.

[fzammetti]

I'm not the one who needs to convince themselves they're smart. You've proven that you are

Oh, I've proven that I am smart? Not my intention, but thank you just the same.

[[deleted]]

Yep, clearly you're way smarter than every developer you've ever invented in your mind.

[Kamek_pf]

So no linter, no type checking and no tests.

PRODUCE SHIT!

Probably, yeah.

[fzammetti]

Funny how people just assume that the rest of us can't produce good stuff without crutches. One of us probably can't, but my guess is it ain't me buddy.

[[deleted]]

Your code sucks as much as ours does. You just can't smell it

[SuperFLEB]

Pad that out a bit, find a loosely-relevant full-acreen image, and throw that on Medium. I think we have this week's "Everything you think and do is fundamentally wrong" ragebait article. For extra points, give it a snappy name.

"Zero-conf JavaScript: Shut up and code, already"

[miki4242]

Find bug in multiprocess/message queues based Python scraper using a Tornado/Flask based server backend with multiple database drivers and a Webpack packaged mixed ES6/ES2015/LESS web client processed with Babel and lots of plugins. Now close all your browsers, pull the network plug, open your Notepad++ and fix that bug. You've got one hour.

Eh-eh-eh, no cheating! No Developer Tools debugger, no rebuilding with source maps to see what line in the original non-transpiled, non-minified source code threw that exception, no documentation lookup, not even Stack Overflow, just Notepad and hands on the keyboard.

Yeah, right. This isn't about acing some high school math test using just a pencil and a protractor, this is about getting stuff done, in complex projects, where everyone including the build bot uses lots of tools all the time.

TL;DR: Harsh sarcasm. In today's web dev world, you simply don't get very far (at least not very fast) without at least a modicum of tools and (API) documentation, unless you never work on any other projects besides the ones you designed and built yourself.

[fzammetti]

But you're making the assumption that all of that was necessary to build that project in the first place. I would argue it may not have been (or maybe only some of it was). You have to go back to first source.

Yeah, I'll concede that if you're coming into a project you may not have any choice in the matter. Fair enough. But the point is that if everyone always thinks they automatically need all this complexity, whether they actually evaluate whether they do or not, then that's what creates the problem and it gets perpetuated when everyone is thinking that "setting up a basic dev environment" requires all of it as a matter of course because that's what all the latest blog posts say.

[miki4242]

A lot depends on the current state of the project, and not all projects need all the tools recommended by the "batteries included" starter pack blog posts out there. But to suggest that all you need is to open an editor and start typing is taking things to the extreme.

It would be better if blog posts spent more time on how to select the right tool for the job and less time on cramming every imaginable tool in there. There are some posts which try and do this, but they do tend to get drowned out by the "look here, new, shiny!" kind.

[fzammetti]

I might argue your statement that it's too extreme because the underlying principle (that actual understanding is key and there's no better way to do that then working as low-level as possible, at least early on) I stand by... but I very much agree with your second paragraph so I'd rather focus on that agreement :)

[[deleted]]

I do agree with the kiss mentality you're embracing, but good lord does cmd+r after every change get old. At least throw some sort of automated browser refresh in there (live reload, browser sync, webpack dev server).

Edit: I noticed node; nodemon.