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

41–50 of 211 posts

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

#41

Post by acemarke »

vmasto wrote: post #29
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?

There is some overhead to its use, both conceptually and with actual performance. I wrote a comment a while back describing some concerns with using it [0]. I also have some links relating to potential performance issues as part of my React/Redux links list [1].

[0]: https://www.reddit.com/r/javascript/comments/4rcqpx/dan_abra...

[1]: https://github.com/markerikson/react-redux-links/blob/master...

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

#42

Post by 20years »

dglass wrote: post #20

This is exactly why I don't do frontend development anymore. The number of tools needed to get an app up and running is ridiculous. Add in cross browser compatibility and it's all just one big headache.

You don't need all of these tools to get an app up and running even though reading the tech blogs may make it seem like you do. Frontend dev isn't really that difficult if you focus only on what is really needed for your app at hand.

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

#43

Post by dceddia »

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…

I'll add a second vote for create-react-app; it's a great tool.

It gets a project up-and-running fast and contains basically all you need. It's not a "boilerplate" that dictates which libraries you use (in terms of Redux, Router, HTTP, etc.).

So here's the interesting part: it basically turns your build into a dependency, with all the pros and cons that entails.

CRA is regularly updated so if you choose to, you can keep your project in sync with the latest fads/features in builds -- snapshot testing, minified production build, hot module reloading (coming soon), etc. Of course, like any dependency, there's the risk of breaking changes.

It's a tradeoff, but a pretty good one in my opinion. Having been part of a couple projects that started in Grunt, then moved to Gulp as the Grunt build was getting slower... it's painful to have to retool the build system, basically ever. "Set it and forget it" works great for a few months, but there always seems to be some new trick to make things faster/better/etc that your tool can't do.

I really like the "build as dependency" idea.

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

#44

Post by ng12 »

fourthark wrote: post #33
treehau5 wrote: post #21

Earlier quoted context omitted.

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.

Yeah, difference is between a "standard library" with a million components, and a million independently distributed components. With the usual tradeoffs between centralization and competition.

How do you think you get to a standard library? How do you package the best tools when you don't know what the best tools are?

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

#46

Post by nulagrithom »

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 for a simple webpage, which would be silly. We're building a web app, right?)

I'd dare to compare Gulp + Webpack + Babel to your "compiler" in a way. I'm a little lost at why we're using both Webpack and Gulp though. Babel is a necessary evil to ensure we're "cross-platform" in a manner of speaking. These are probably your most "unnecessarily complicated" tools.

ESLint and Flow check your code for obvious mistakes. Reminds me of IntelliSense and compiler warnings. Again, pretty standard stuff.

Mocha is a test runner and Chai is an "assertion library". Chai isn't a big deal: expect(foo).to.equal('bar'); Simple stuff.

Feel free to scoff at Redux and Immutable if you'd like. Probably unnecessary.

Am I the only one that likes this ecosystem? I feel like it follows the Unix philosophy of "Make each program do one thing well". You need almost all these tools in other environments -- they're just typically chosen for you in advanced.

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

#47

Post by morgante »

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…

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 to Webpack).

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

#48

Post by beejiu »

giancarlostoro wrote: post #39
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.

I've never been a front-end guy, and now the barrier grows with all these frameworks to make amazing applications still holding me back. Plus the fact that if I have NoScript installed, all my work is now pointless. I hate going to websites that literally don't work @ all if I have no JavaScript enabled, with the exception of HN and those rare sites that have minimal JavaScript in use.

> I hate going to websites that literally don't work @ all if I have no JavaScript enabled

It is no surprise that businesses don't want to spend an extra 20% development time supporting 0.5% of web users. At some point, it becomes a problem for the user - you cannot support everyone.

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

#49

Post by astrobe_ »

beejiu wrote: post #48
giancarlostoro wrote: post #39

Earlier quoted context omitted.

I've never been a front-end guy, and now the barrier grows with all these frameworks to make amazing applications still holding me back. Plus the fact that if I have NoScript installed, all my work is now pointless. I hate going to websites that literally don't work @ all if I have no JavaScript enabled, with the exception of HN and those rare sites that have minimal JavaScript in use.

> I hate going to websites that literally don't work @ all if I have no JavaScript enabled It is no surprise that businesses don't want to spend an extra 20% development time supporting 0.5% of web users. At some point, it becomes a problem for the user - you cannot support everyone.

Except they could spare 200% development time with only HTML+CSS. Many times the real motivation is monetization. Simple sites like HN that don't get revenue from readership don't need Javascript.

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

#50

Post by czep »

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 end work. I may not ever use all these tools, but again it's helpful to see their setup illustrated in an easy fashion.

Apart from React, what would be the next most important tool to pickup?

Post reply on HN