4 ms·

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

11 points by oolongCat 11y ago

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.

baldfat 11y ago
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.
mc_hammer 11y ago
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 11y ago
  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..
codeaddslife 11y ago
Take a look at http://www.frontendhandbook.com http://www.frontendhandbook.com.
- oolongCat 11y ago
  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 11y ago
    Hi, I just published a new version of SurviveJS. Feel free to ask anything about the effort. :)
gordonzhu 11y ago
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.
bzalasky 11y ago
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

11 points by oolongCat 11y ago

baldfat 11y ago

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.

mc_hammer 11y ago

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 11y ago
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..

codeaddslife 11y ago

Take a look at http://www.frontendhandbook.com http://www.frontendhandbook.com.

oolongCat 11y ago
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 11y ago
  Hi, I just published a new version of SurviveJS. Feel free to ask anything about the effort. :)

gordonzhu 11y ago

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.

bzalasky 11y ago

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