HN Explorer

Ask HN: Is there a good tour of the modern JavaScript landscape

11 points by oolongCat ↗ HN
I have been building websites for brief time now and whenever I need a JS lib, all I do is add it to the main html as a .js file and it just works.

Recently as I am getting more jobs I am starting to notice that this is a little (well.. more than little) cumbersome.

So I started looking at what I can do, so I find Node, and how you can use node to compile your code and then present the result to the user.

The more I read the I became confused, gulp, grunt, webpack, npm and more. The worst thing is, some of the tutorials only show a very basic use-case. Nothing advanced.

For example I wanted to learn ReactJS, while I can get the basics up and running and I understand what's happening, I feel like I cant go any further.

If anyone knows of a good resource I can read/watch/listen and understand how I need to set up my own dev environment when developing front end JS I would really appreciate it.

8 comments

[ 4.7 ms ] story [ 25.2 ms ] thread
baldfat
Having taught myself javascript in the mid-late 1990s and brought down a few servers by simple mistakes (Not always my own) I swore myself off the language and haven't looked back. Now I am looking to jump back in to do some app development and js seems the easiest way currently.

I have looked at https://www.youtube.com/watch?v=hQVTIJBZook JavaScript the good parts 2009.

There seems to be much better handle on JS so I also would be interested in "Best Practice" for modern JavaScript development.

mc_hammer
most of those are either made in the spirit of unix where one tool does one thing

  - gulp and grunt are for handling multiple js scripts and all your folders of js scripts, makefile stuff

  - ill assume webpack is for minimizing js

  - bower and npm are package managers, while npm is just node modules, bower can do some cool stuff like install jquery or bootstrap into your local public_html folder

  - es6/ecmascript is a standardized featureset of javascript that people are working on. you can use it now, but you have to install babeljs, and use expirimental option in chrome
youtube has great tutorials.

there is yeoman.io and yo that sets up skeletons for the dev environment

there are 'base fiddles' ex 'react base fiddle' that can get you going. there is also bower and docker vm images with skeleton projects. also there is a lot of skeleton projects on github.

(its ez to breakdown a base fiddle and see whats needed to get the dev going)

seesharp
Um, your points about Bower/NPM and Webpack are not really correct.

NPM is the de facto package manager for JavaScript these days. Some points on why NPM is a better choice: https://gofore.com/ohjelmistokehitys/stop-using-bower/.

So on to Webpack, Webpack is not only for minifying JS. Webpack can actually be seen as a replacement for Gulp/Grunt. With the use of plugins you can compile Sass or TypeScript or use Babel to transpile your ES6/7 code to ES5 etc..

gordonzhu
I created a video course that addresses the exact problem you're describing and shows you how to build a full multi-page app backed by a database (but it's for Angular rather than React).

http://www.angularcourse.com

When I was learning I saw the same thing you're still seeing — most tutorials only explain high-level concepts and when they do show code examples, they are tiny, arbitrary, and unrealistic. So when I quit my job to teach web development, I wanted to make sure I didn't do the same thing as everyone else.