Step-by-step tutorial to build a modern JavaScript stack from scratch • Hacker News Board

Re: Step-by-step tutorial to build a modern JavaScript stack from scratch

#101

Post by Klathmon » Sun, Oct 30, 2016, 12:49 AM UTC

gotofritz wrote: post #98

stevoski wrote: post #61

From section 1 of the tutorial: > Since it came out in October 2016, [Yarn] received a very quick adoption and is becoming the new package manager of choice of the JavaScript community. We are going to use Yarn in this tutorial. It's October 2016 as I write. Tell me this tutorial is satire. Please.

Yarn solve some problems that the npm folks were unwilling / unable to solve, and is backed by Facebook + Google (+ others) so it's likely to be here to stay. Unless npm wake up and smell the coffee and implement some of it themselves, but experience shows they are quite opinionated and not in a good way.

IIRC the yarn developers worked with NPM to get it out.

It's not a lack of will or ability on the part of NPM that it can't be "fixed", it's that NPM has just so much baggage. They can't change how things are installed, because that would mean getting rid of features that many people rely on. For a while they didn't even have any documentation on how NPM worked, it was a bit tautological (npm worked in the way that npm worked...).

And rather than add flags or settings to NPM to support yarn's use cases which would bloat the code, add a pretty sizable increase to maintenance and support, and would really be a mess, they decided to create their own tool which is similar enough to make it easy to switch, but without any of the legacy baggage that NPM needs to support.

It's a perfect example of the unix philosophy at work ("Don't hesitate to throw away the clumsy parts and rebuild them."), and just about everyone (including NPM) is happy with the work they are doing.

Re: Step-by-step tutorial to build a modern JavaScript stack from scratch

#102

Post by Klathmon » Sun, Oct 30, 2016, 12:56 AM UTC

gravypod wrote: post #35

ng12 wrote: post #8

Earlier quoted context omitted.

Are you sure it doesn't seem that way to you because you're less familiar with the ecosystem? Compare it to a Java backend. You might pick Ant, Ivy, Docker, Dropwizard, Guice, Jersey, Jackson, Mockito, JUnit, etc. I don't consider that to be radically less complex than the front-end stack proposed here -- but it just seems that way because a lot of those are "de facto" tools.

It depends on what you're building. I think Java really shines better in the backend long-lived services realm. If you're just writing something that doesn't need any fancy "web" layers plain Java in a plain Eclipse project is all you need to get going. Nothing more. You just need to know how to type and what you're trying to do and most things you want to do are very easy to accomplish.

You can replace java with javascript and your sentence is still 100% true.

And I think that's the point many are trying to make. It's not overly complicated, it's just that people are trying to use every tool they read about without understanding it or why it was created.

If you are making a website for your restaurant, you don't need react, webpack, babel, sass, etc... You need a few hundred lines of html and like 20 of javascript and you are good to go. But if you are building a video streaming platform, then the extra complexity will most likely pay off.

Re: Step-by-step tutorial to build a modern JavaScript stack from scratch

#103

Post by dvdhnt » Sun, Oct 30, 2016, 1:03 AM UTC

Matachines wrote: post #56

What's the author's credibility? I know it's free, but why should I give my time to read this compared to other resources? I don't know how to say it without sounding like a dick, but the amount of long "learn web dev" resources by people who can't write well and whose only ethos is just being a programmer is ridiculous.

Well, for what it's worth, he has a Masters in Computer Science, his open source Initializr project is pretty popular apparently, this tutorial has 3700+ stars on Github, he wrote a book on HTML5, and was a front-end engineer at Yelp.

You can see his Github here https://github.com/verekia And his resume here http://verekia.com/resume/

Edit: I find the article to be fairly well written, and I do have a background in reporting and am a full time dev using most of these tools (although I'm not particularly bound to them).

Re: Step-by-step tutorial to build a modern JavaScript stack from scratch

#104

Post by setr » Sun, Oct 30, 2016, 1:05 AM UTC

Can_Not wrote: post #87

threeseed wrote: post #73

Earlier quoted context omitted.

The complexity of the tools isn't the problem. It's the fact that the entire Javascript community seems to suffer from ADHD and is constantly inventing a new tool that is marginally better than the last. So for those us who don't do front end development we come back and suddenly have to learn 20 new tools.

> It's the fact that the entire Javascript community seems to suffer from ADHD and is constantly inventing a new tool that is marginally better than the last. If you assume that the entire Javascript community was one person or one coherent group, then yes. But it is not like that at all. You state this as if a single organization made grunt, then made gulp, then made webpack. This is nearly as absurd as saying "The…

Probably a better term than inventing is "standardizing". The community as a single general entity, is constantly changing what they accept is the "standard stack". I don't get to have my safe goto stack of LAMP for twenty years, and then swap out alternatives after research and my needs; the goto stack is radically different every year.

And ofc there's a big push for frameworks and languages over libraries, and libraries get coupled to frameworks, so anytime you do want to "upgrade" to the new thing, _everything_ goes with it.

Re: Step-by-step tutorial to build a modern JavaScript stack from scratch

#105

Post by swsieber » Sun, Oct 30, 2016, 1:09 AM UTC

Wintamute wrote: post #17

anon1253 wrote: post #3

I appreciate the effort, certainly do. But, and this a big but: the amount of tooling, libraries, complexity and systems needed for a "modern" web app is almost comical at this point.

The create-react-app tool from Facebook lets you create a "modern" (air quotes yours) web app with one development dependency and zero configuration. https://facebook.github.io/react/blog/2016/07/22/create-apps... It's surprisingly full featured. Testing, ES6, CSS, live reload dev server, building for production ... everything you need for the majority of React based web app builds. Literally up and running in minute…

Of course it's coming from a place of ignorance - that's where all new devs start, right? This one is perpetuated by the fact that whenever a dev pokes his head into the web dev world, the tools are different than the last time they checked.

Re: Step-by-step tutorial to build a modern JavaScript stack from scratch

#106

Post by novaleaf » Sun, Oct 30, 2016, 1:09 AM UTC

nulagrithom wrote: post #46

I feel like the people complaining about how many libraries there are in this stack don't know what these tools do. Most are small tools that do one thing very well. Yarn installs packages, much like Gem, NuGet, whatever. Pretty standard. React is a frontend framework. Not surprising that you'd use one. I suppose you could opt to write a giant pile of vanilla JavaScript instead (I'm assuming you're not using this kit…

Webpack + Typescript works as a replacement (without Gulp, Babel, eslint, or flow) if you are interested in giving typescript a go.

Re: Step-by-step tutorial to build a modern JavaScript stack from scratch

#107

Post by ern » Sun, Oct 30, 2016, 1:27 AM UTC

Can_Not wrote: post #87

threeseed wrote: post #73

Earlier quoted context omitted.

The complexity of the tools isn't the problem. It's the fact that the entire Javascript community seems to suffer from ADHD and is constantly inventing a new tool that is marginally better than the last. So for those us who don't do front end development we come back and suddenly have to learn 20 new tools.

> It's the fact that the entire Javascript community seems to suffer from ADHD and is constantly inventing a new tool that is marginally better than the last. If you assume that the entire Javascript community was one person or one coherent group, then yes. But it is not like that at all. You state this as if a single organization made grunt, then made gulp, then made webpack. This is nearly as absurd as saying "The…

Rewriting your front-end in a new webframework every 6 weeks isn't a thing that actually happens

I don't think any sane person would rewrite their apps everytime a new flavor of the month tool came out, but all this technical churn must make maintenance a nightmare.

Re: Step-by-step tutorial to build a modern JavaScript stack from scratch

#108

Post by 1_player » Sun, Oct 30, 2016, 1:28 AM UTC

gotofritz wrote: post #97

khc wrote: post #71

Earlier quoted context omitted.

I think the reason most of us dislike the ecosystem isn't because therre are many libraries and tools in the stack. In the C-world, every time you type 'make' I am probably executing two dozen different programs, so we are very comfortable with "Make each program do one thing well". The problem that most of us dislike the javascript/web ecosystem is that those set of libraries and tools keep changing every couple yea…

Just google "yarn vs npm" and you'll know the answer... the tools change because the technology is evolving, despite node the front end is still the driver, and mobile phones / browsers / etc are constantly being improved and evolved, and the ecosystem keeps up with it. Would you rather it all stayed static like in the C world and then you program a 2016 smartphone with a 2006 stack?

No, the problem is never improving the existing software but rewriting a new solution from scratch every 3 months [1][2], that, while it solves the shortcomings of the previous tool, now introduces a complete set of new problems. And people that actually have stuff to deliver are always playing catch up and fighting the bugs of alpha quality software.

I feel strongly about this, especially when reading a step-by-step tutorial, that's most probably intended at frontend "newbies", that for example is pushing Yarn: I played with it the other day on a working VueJS application, and got hit by a bug, causing yarn to delete important files in node_modules. My code wouldn't work anymore. Really sorry that I can't find the bug report anymore to prove my point. The workaround was going back to npm.

Teaching people alpha quality software is irresponsible. If you want to teach, or have stuff to deliver, use the battle tested tech. Experiment when you know how the pieces work together and have lots of free time.

1: https://www.jwz.org/doc/cadt.html

2: EDIT: this is a big problem of our industry, it happens in all environments, but the JS community is the worst IMO. Desktop Linux is the second worst offender.

Re: Step-by-step tutorial to build a modern JavaScript stack from scratch

#109

Post by neandrake » Sun, Oct 30, 2016, 1:33 AM UTC

vcarl wrote: post #94

Klathmon wrote: post #91

Earlier quoted context omitted.

I don't buy that either. The youngest thing on that list is yarn, but aside from that everything is a few years old at least. And nobody is saying you need to use anything. Npm works fine, bower still works fine, hell pulling down tarballs still works fine. You don't need to use the newest thing if you don't have the problems it's trying to solve.

Yeah, from the outside I can understand the "everything keeps changing!!" complaint, but having been involved in JS for a few years, every single tool that got replaced was replaced for completely valid reasons, that couldn't have been solved incrementally by improving what was already there. Grunt > Gulp > Webpack manual polyfills > 6to5 > Babel script tags > bower > NPM > Yarn nothing > Flow/Typescript All of these…

As an outsider my question would be why can't the existing tools update and adopt instead of being replaced?

Re: Step-by-step tutorial to build a modern JavaScript stack from scratch

#110

Post by johnwatson11218 » Sun, Oct 30, 2016, 1:33 AM UTC

majewsky wrote: post #88

johnwatson11218 wrote: post #51

I'm only half kidding but how complex does modern js have to get before it is easier to code business apps in something like unity3d?

This is exactly why asm.js and WASM exist: to enable frontend code to be written in something that's not JS.

good to know. I had heard of this stuff before but just assumed it was yet another framework.