Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

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

github.com

Post reply on HN
Print view View original

21–30 of 211 posts

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

#21

Post by treehau5 »

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…

It's funny, but if some of these people griping about web development tried to unpack their favorite enterprise framework, like Spring MVC or whatever J2EE/.NET architecture they are running, there would be way more packages and bundles wrapped up together. It's just the web is finally getting to a good place.

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

#22

Post by jasonthevillain »

rhodri wrote: post #16

Yarn came out this month

To me, Yarn seems like the least troublesome new thing. Is it new and redundant? Yeah, but it's also a drop in AND drop out replacement for NPM.

Many of the other "modern touches" would require you to rewrite your whole app if you concluded something was more trouble than it was worth.

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

#23

Post by rootlocus »

ng12 wrote: post #8
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.

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.

  > You might pick Ant, Ivy, Docker, Dropwizard, Guice, Jersey, Jackson, Mockito, JUnit, etc.
I would pick maven, and add the rest as dependencies inside the pom.xml file (the only configuration file I need to worry about). It would take me about 5 minutes and then I could import the project into IntelliJ IDEA and hack away. I can write a tutorial about it in a single blog post, together with the necessary commands to build, test and deploy the artifact.

With javascript, I need: webpack.conf, package.json, .babelrc and god knows what else. Seems like every piece of technology around javascript (transpilers, packers, dependency managers) requires another layer of configuration, another set of CLI commands, and another waste of time trying to figure out why it doesn't work.

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

#24

Post by ceronman »

ng12 wrote: post #8
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.

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.

Java is no less complex indeed. I'm just starting to use its ecosystem and I definitely think it has a lot of complexity.

But there are other tools that are much simpler. One example is the Dart programming language. I know it's not very popular here in HN land, but the experience is really really nice. You have a fast, powerful, concise, sane and optionally static typed language with awesome tooling (debugging, introspection, profiling, package management) and great support from Google. All this comes in a single easy to use installer. The only extra thing that you might need to download is a plugin for your favorite editor or IDE. Dart, of course, doesn't enjoy all the hype that the JS ecosystem has, but the barrier of entry is really low, and the tools are extremely polished, stable and very production ready. I recommend anyone who is not scared of leaving the hype train to give it a try.

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

#25

Post by lucideer »

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…

The "one dependency" quoted is "react-scripts"[0], which just acts as an effective meta-package for auto-including 45 other dependencies.

That said, treehau5 has a point. This shouldn't inherently be an issue in devDependencies, unless there are individual problems. The end product is what's important.

[0] https://www.npmjs.com/package/react-scripts

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

#26

Post by LordHeini »

ourmandave wrote: post #18
rhodri wrote: post #16

Yarn came out this month

Come Nov 1st, it will be so last month .

Don't forget that next month someone will pull down his trivial package doing uppercase or something and the whole stack (of cards) will come crashing down. Lately there was some great post here on hn mocking all that js framework lunacy. But i guess that joke is old now as well...

But seriously does someone use this to do proper work? And if so does this person expect this to be maintainable in the near future?

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

#27

Post by sospep »

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

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

#28

Post by elnado »

Roboprog wrote: post #10
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.

Describing that collection of tools as "minimalistic" was indeed a touch of irony. Angular (1.x) might not be "cool" anymore, but it can be pretty darn "minimal" to set up: https://github.com/roboprog/ang-prog-enh (above not quite done, it's for a presentation I'm going to do in December, but it's pretty close) React works better for many things - server side rendering for SEO; endless scrawling wall of chunks of mor…

Yeah that's awesome! I still reference the Angular seed project whenever doing a quick front-end for a prototype.

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

#29

Post by vmasto »

cel1ne wrote: post #6

I would give up Immutable because of it's bad performance and often confusing api. Also I'd give up Mocha, Chai & Sinon for tape, which is way simpler and more than enough: https://medium.com/javascript-scene/why-i-use-tape-instead-o...

Care to provide sources for Immutable's bad performance?

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

#30

Post by vmasto »

k__ wrote: post #19
bsou wrote: post #7

Alternative stack that gets you much of the same stuff with less: TypeScript, React, Redux, Webpack, Immutable, Ava - TypeScript covers much of the benefit of es6/babel/eslint/flow, Ava covers chai/mocha, and webpack can cover most of what gulp provides

There are many alternatives to chai/mocha. Ava, Jest and Tape. I wouldn't consider Webpack an alternative to Gulp. Gulp is more generic. But if you use Webpack you can replace to task-runner part with a few scripts. When using ES6 or TypeScript I'd also consider Immutable to be optional, because of "const" and "Object.assign()/Spread-Operator". Also, React & Redux can be replaced with 1 thing, when you use a framewor…

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