
Ask HN: Is there a good tour of the modern JavaScript landscape - oolongCat
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.<p>Recently as I am getting more jobs I am starting to notice that this is a little (well.. more than little) cumbersome.<p>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.<p>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.<p>For example I wanted to learn ReactJS, while I can get the basics up and running and I understand what&#x27;s happening, I feel like I cant go any further.<p>If anyone knows of a good resource I can read&#x2F;watch&#x2F;listen and understand how I need to set up my own dev environment when developing front end JS I would really appreciate it.
======
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](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.

------
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](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.

------
bzalasky
Frontend Masters has a lot of content that you may find helpful...
[https://frontendmasters.com/](https://frontendmasters.com/)

Egghead.io also has some good courses [https://egghead.io](https://egghead.io)

------
codeaddslife
Take a look at
[http://www.frontendhandbook.com](http://www.frontendhandbook.com).

~~~
oolongCat
This is really awesome. Thanks very much.

I managed to find this today
[http://survivejs.com/webpack_react/introduction/](http://survivejs.com/webpack_react/introduction/)

~~~
bebraw
Hi,

I just published a new version of SurviveJS. Feel free to ask anything about
the effort. :)

------
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/](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..

