Live data from Hacker News

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

github.com

81–90 of 211 posts

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

#81
post #37
post #30

Earlier quoted context omitted.

Nit: not sure why you mention const. It does not provide any kind of immutability assurance.

I just use const instead of var/let all the time and it prevented me from overriding the variable later, which forced me to write my code a bit more functional then before I used it. I know that I can still change indirect references or override valueOf() etc.

You probably know this, but for anyone else reading, the problem is that if you assign an object or array using const, the object/array members are still mutable. If you have a tree structure, you have to recursively Object.freeze the entire tree to get immutability, which AFAIK is basically what immutable.js does for you. I also use const by default, but I find that more often than not my variables are trees and lists.

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

#83
post #50

As a back-ender looking to dabble with modern front-end development best practices, I'm encouraged to find guides like this one. Even if the array of available packages and tools appears dizzying, and often times faddish, it's nice to see the many options laid out rather concisely. I have a decent handle on React and some of its immediately related tools, which has greatly improved my fluency with contemporary front…

The good news is that it can all be broken down into view library, state management, transpiler, build tools, and test framework. Almost all of these tools fit one or more of these categories. If you pick the one or two most popular libraries from each of these categories and build a toy app using them, you'll be 90% of the way there. The stack listed in this article is the current vogue.

If you're not already using webpack with react, I would recommend putting the time in to learning that. It's a beast and the documentation leaves a lot to be desired, so you'll have to supplement your education with a lot of google searches, but it's quite powerful and flexible.

React has come to dominate the ecosystem so rapidly that for the medium term you're probably fine just sticking with that, and learning complementary tools like various flux or relay/graphQL implementations. Angular is the only other tool I regularly run into as a freelancer, but this is less and less often. Almost all the clients I've worked for in the last six months have wanted react. Of course there are many more exotic stacks that some people swear by, but if your goal is to cover the largest percentage of the job market possible, react and angular will get you there with a minimum of effort.

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

#84

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…

I love this ecosystem.

It's living, it's thriving.

I love the fact that tons of great engineers are coming up with new ideas everyday to make my life as a developer easier.

I love hearing a developer at a daily stand-up meeting saying he's been up all night trying out a new shiny thing and concluding by saying it also solves a big issue we had in our product and here's the pull request (timestamp 4am).

The hype is here for a reason. Hype is nothing bad, being excited about your tools makes your days happier.

I love the fact that JS people are never going to take "No" for an answer, constantly pushing the boundaries of what's possible, and making the web standards improve. I love the rise of functional programming. JS is a playground where mathematical theory and all of its beauty meets practice and the real world. It attracts talented people who bring a new perspective to our field. I love the fact that now I have theorems that ensure my login button will work.

> I'm a little lost at why we're using both Webpack and Gulp though.

Same here. I think one of the huge benefits of webpack is that it actually kills a lot of complexity by allowing you to skip gulp/grunt in most cases.

I think most people do not realize that the JS ecosystem is actually removing complexity.

Most people think the JS ecosystem is overly complicated, when in fact, it's just that in JS the complexity is exposed. This allows us to focus on reducing it. In order to address an issue, you must first make it visible.

Nowadays the trend in JS is to use multiple small tools that solve specific issues very well. We have a complexity in setup in exchange for less complexity in development. I argue this is a good thing, because setup is easy to document and only happens once in a project. Whereas you face development complexity every day.

This part from the tutorial is very significant to me:

> I recommend writing everything from scratch yourself

Yes! Yes! Yes! That's the heart of the JS philosophy: the ecosystem is trying very hard to make you understand what you are doing and why. It's giving you the keys to question what you're told and improve it. It's also why there's so much trolling. It's a good thing, question what seems too complex so that people can tackle the issue.

Please, do keep saying JS sucks, it's exactly what makes it so strong.

Do not use a framework, wire-up things yourself so that tomorrow you can repair it or upgrade it easily.

Do not write your router from scratch. But do connect the standard-issue router to your business logic yourself. Don't let someone else plug it in for you. It'll fit, but it won't look as good as if it were custom-made by a great tailor.

Finally, I love the config files. I hear a lot of trolling about all the config files, but I love the fact that I don't need to tell both webpack and mocha how to transpile JS and can just let the .babelrc tell them and everyone else. It's amazing that you can just git clone something and have all your environment setup as the author intended: language variant, linting... with .eslintrc developers using IntelliJ and atom both see the same messages.

Long live JS, or whatever comes next as we improve it!

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

#85
post #27

define:irony - a state of affairs or an event that seems deliberately contrary to what one expects and is often amusing as a result. example: This is a minimalistic and straight to the point guide to assembling a JavaScript stack. It teaches you how to set up ES6, Babel, Gulp, ESLint, React, Redux, Webpack, Immutable, Mocha, Chai, Sinon, and Flow. It

Exactly. I clicked on the link and when I saw the list of libraries alongside the word 'simple', I immediately thought it was a parody or satire site. I kept reading, looking for the joke and wondering why I didn't 'get' it?!?

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

#86
post #27

define:irony - a state of affairs or an event that seems deliberately contrary to what one expects and is often amusing as a result. example: This is a minimalistic and straight to the point guide to assembling a JavaScript stack. It teaches you how to set up ES6, Babel, Gulp, ESLint, React, Redux, Webpack, Immutable, Mocha, Chai, Sinon, and Flow. It

You don't need ES6, Babel, Gulp, Immutable or Flow.

Now it's just React, Redux, Webpack, and a testing suite.

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

#87

Earlier quoted context omitted.

I like it too. People vastly over-estimate the complexity of these tools. As a freelancer, I start a new project every other week or so. It's really not hard to get up and running with these tools. They're also incrementally adoptable: since most of them are loosely coupled, you can get started with a new one without rewriting your whole stack (for example, I first used React with Gulp+Browserify, not I've switched t…

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 entire programming community seems to suffer from ADHD and is constantly inventing new languages". People who are using grunt didn't pack-up their bags and move to gulp, then pack up their bags and move to webpack. Rewriting your front-end in a new webframework every 6 weeks isn't a thing that actually happens. That's as absurd as suggesting that after leaving ruby for node, your team left node for golang, then left golang for rust, then finally rewrote their application in elixir.

All these different tools solve different problems, or solve them under different constraints, or solve them in ways that better match their backend languages. There isn't some magical tool that everyone needs to jump to.

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

#88

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.
Post reply on HN