8 ms·

Ask HN: Resources for catching up on modern JavaScript for Python/C++ Programmer

214 points by alibarber 9y ago

When first learning to program (back in high school 10+ years ago) I played around a lot with JavaScript, building 'cool' websites that did all kinds of things in JavaScript. I haven't really touched it since. I moved on to Java and now program professionally in Python and C++ (desktop apps development) and do some webapps development as side projects. I've found myself doing lots of data visualisation and analysis (performance benchmarking etc) and for the most part I used Matlab and various python libraries to achieve this - but I've been lately using the great Charts.js library. I would love to get up to speed with how 'modern' JS works for frontend development. I'm not so concerned with learning particular frameworks in depth (but should I be?) - moreover what particular programming/design paradigms are considered the most effective? What resources have people in a similar situation to me found to be useful?

1ba9115454 9y ago
A one page re-introduction. https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re...
- logicallee 9y ago
  Perhaps this should be called "single-page" rather than one page. It's 6,000 words and paginates to 27 pages when pasted into Word without modification (13.5 point font.) I decided to time myself reading it, I would say quite carefully. It took 15 minutes of slow, careful reading. (I did not stop to do exercises). It's really excellent however, and if you have 15 minutes, go ahead and read it. It's very approachable.
Waterluvian 9y ago
Mozilla Development Network[1] is my go to for core js documentation. Google will regularly return lots of w3schools content but I find it to be very unreliable. 1: https://developer.mozilla.org/en-US/ https://developer.mozilla.org/en-US/
chatmasta 9y ago
I was in a similar position two years ago. Best advice I can give is to just build a full-stack website with JS on front and back. Make sure you get your tooling set up so you can use ES6, and then just focus on building what you want. I would recommend using create-react-app for frontend as it sets up all the tooling for you and is production ready. On backend, I would recommend parse-server but I just have a personal affection for its batteries-included approach. You could also just use a simple node/express setup (and/or mount parse-server onto it). Three major things that might trip you up, and you should read about and practice early: - Async programming / closures. You can't just call a function on an object in a loop like you can in Python. - Promises. Figure out how to use these instead of callbacks as soon as you can. - Prototypical inheritance. I recommend explicitly writing "classes" with the "old style" of YourClass.prototype.method before moving to using the "class" keyword. The "class" keyword is just syntactical sugar on prototypical inheritance so it's a good idea to learn the raw form before the sugared form. Recommended reading: - "You Don't Know JS" (https://github.com/getify/You-Dont-Know-JS/blob/master/README.md https://github.com/getify/You-Dont-Know-JS/blob/master/READM...) - Source code. Read the source code of as many JS projects as you can find.
- alibarber 9y ago
  Thanks - those types of tips were exactly what I was looking for. I've had an idea for a webapp brewing on the side but wasn't sure how best to jump in, and also the main things to look out for when learning something new.
- lhlmgr 9y ago
  thanks for that! it was an instant-star. However, my approach was to start with an more-or-less small project with react / redux / typescript. In the beginning it was a pain, but now it works.. mostly.
- reacweb 9y ago
  Do you think he should use typescript or javascript? Would typescript slow down learning or help learning?
  - 9y ago
mcintyre1994 9y ago
You might like javascript30.com, it's a free series of 30 videos without any frameworks/build tools etc etc. I found it good to build up knowledge really quickly of loads of new APIs, and Wes is a great teacher.
- rapfaria 9y ago
  That is some entertaining lecturer, thanks for that!
m0meni 9y ago
http://2ality.com http://2ality.com and everything else by the author including these books on modern JS http://exploringjs.com http://exploringjs.com are gold.
Raphmedia 9y ago
Here are three excellent article. I think that you should read them in the following order: https://medium.com/the-node-js-collection/modern-javascript-explained-for-dinosaurs-f695e9747b70 https://medium.com/the-node-js-collection/modern-javascript-... https://medium.com/@parsyval/javascript-prototype-vs-class-a7015d5473b https://medium.com/@parsyval/javascript-prototype-vs-class-a... https://medium.freecodecamp.org/here-are-examples-of-everything-new-in-ecmascript-2016-2017-and-2018-d52fa3b5a70e https://medium.freecodecamp.org/here-are-examples-of-everyth...
arsalanb 9y ago
I'm in the same position as you. I realised I was still writing spaghetti code that relied heavily on DOM manipulation with Jquery. I am currently learning how the language has evolved and the following has been helpful — 1. https://javascript.info/ https://javascript.info/ 2. https://www.youtube.com/watch?v=JxAXlJEmNMg https://www.youtube.com/watch?v=JxAXlJEmNMg (videos, watch all of them) 3. http://jstherightway.org/ http://jstherightway.org/ 4. http://eloquentjavascript.net/ http://eloquentjavascript.net/ Hope this helps :)
- alibarber 9y ago
  Thanks that's great :D I discovered JQuery a while back and it's been fun to use at work for simple dashboards - i.e. Build Status Page / Tests etc, but I figured that trying to keep track of all the DOM changes in a larger project would be a bit of a pain, so excited to learn some new stuff and the 'proper' way to do things.
agentultra 9y ago
https://github.com/getify/You-Dont-Know-JS https://github.com/getify/You-Dont-Know-JS https://wesbos.com/es6-for-everyone/ https://wesbos.com/es6-for-everyone/ https://mostly-adequate.gitbooks.io/mostly-adequate-guide/ https://mostly-adequate.gitbooks.io/mostly-adequate-guide/ https://egghead.io/ https://egghead.io/
happimess 9y ago
I'm a middling JS programmer myself, but I have two tips to share. First, when you're wondering how to do some specific thing (say, filtering an array by some predicate), search for 'es6 filter array', rather than 'javascript filter array.' Second, make liberal use of google's 'tools -> past year' feature.
- et-al 9y ago
  > make liberal use of google's 'tools -> past year' feature. I didn't understand this. May someone please give an example? Thanks.
  - happimess 9y ago
    When you search for information on google, the results page contains a 'tools' link up top. If you click it, you have the option to restrict your search to a variety of time frames. In my experience, any result from more than a year ago is likely to be irrelevant in the world of javascript.
    - et-al 9y ago
      This is a game changer! I've always added the desired year to my search terms hoping that would match a date on a page, but this is much more precise. Thanks!
regexman 9y ago
If you are ok paying. I think the frontendmasters.com has some brilliant introductions. I specidfically enjoyed the React course on it done by Brian Holt. Spends a lot of time on tooling as well which I think is really important long term. You will also get access to a course on d3.js by Skirley Wu(look her up) which will help you tie in react with d3. If you are short on time and dont want to spend time research the right material to stufy on this may help.
scandox 9y ago
I think if you leap straight from old JS to ES6 it might leave you with some weird gaps, especially with regard to why some things got to be the way they are. A book I found very good on this score was: Effective Javascript http://effectivejs.com/ http://effectivejs.com/ Also understanding Promises properly I think is quite important (even if you don't choose to employ them yourself) and I found this book also very useful: http://shop.oreilly.com/product/0636920032151.do http://shop.oreilly.com/product/0636920032151.do
paultopia 9y ago
Like others have said, You Don't Know JS is freaking amazing---really covers all of basic JavaScript up to the new and fancy stuff. Less about design paradigms and more about just becoming comfortable with the mechanics of the language, weird stuff like prototypes and dealing with all the async craziness and the terrifying `this keyword and all those other nuts and bolts on which all the "modern" practices depend.
KerrickStaley 9y ago
I recommend looking at a few of the (free[mium]!) courses offered on egghead.io. They're succinct, information-packed, and interesting. In particular, I liked this React course: https://egghead.io/courses/react-fundamentals https://egghead.io/courses/react-fundamentals
rhacker 9y ago
Greatest thing to learn is webpack when you get into front-end development. Don't use a starter kit, the webpack tutorial should be followed - otherwise you don't really know what your build is doing.
auganov 9y ago
In terms of design patterns, I wouldn't expect js to be that different from python. JS is a very non-opinionated language and so is the community. Just make sure you understand prototypical inheritance. "Modern" js is mostly about syntactic patterns. Airbnb has a nice style guide that incorporates most of them https://github.com/airbnb/javascript https://github.com/airbnb/javascript
dhanunjaya 9y ago
try https://watchandcode.com/ https://watchandcode.com/
econner 9y ago
I liked Nicholas C. Zakas book on ES6: Understanding ES6 https://leanpub.com/understandinges6/read https://leanpub.com/understandinges6/read Free to read online.
mmsimanga 9y ago
Additional question. Is it possible to develop JavaScript without setting up Node?
- acemarke 9y ago
  Sure - you can absolutely still just write an index.html file and toss in some script tags. You can even do that with React (see https://raw.githubusercontent.com/reactjs/reactjs.org/master/static/html/single-file-example.html https://raw.githubusercontent.com/reactjs/reactjs.org/master... ). But, most modern JS apps have some kind of a build step, and the build tools themselves are all written in Javascript. So, you need Node to run those tools, in the same way you'd need the Python runtime to run an app written in Python, or the JRE to run an app written in Java.
  - mmsimanga 9y ago
    Thanks, I spend all writing SQL. I have always found the prospect of setting up JavaScript development environment daunting. First and only time I tried to Node something went wrong in my setup and I spent days trying to figure out the issue. I didn't get far with both Node and JavaScript. I suppose my only issue is time.
et-al 9y ago
To add to the link pile: A Study Plan To Cure JavaScript Fatigue - https://medium.freecodecamp.org/a-study-plan-to-cure-javascript-fatigue-8ad3a54f2eb1 https://medium.freecodecamp.org/a-study-plan-to-cure-javascr... The author recommends this plan: Week 0: JavaScript basics Week 1: React Week 2: Building a React project Week 3: Mastering ES6 Week 4: State management (Redux) Bonus: Building APIs with GraphQL So pick and choose from all the links here and just study them depending on the week. To kick you off, I'd check out Wes Bos (Javascript30 guy). For more in depth stuff, dive into You Don't Know JS. Have fun!
thinkxl 9y ago
If you like books, read these in this order: 1. Eloquent JavaScript by Marijn Haverbeke 2. Secrets of the JavaScript Ninja by John Resig (jQuery author) and Bear Bibeault Those two books formed the foundation for my understanding of JavaScript. Now, I understand any framework or pattern easily. Edit: format
petercooper 9y ago
Maybe start at https://javascriptweekly.com/issues/380 https://javascriptweekly.com/issues/380 and step back through issues seeing what of the JavaScript zeitgeist jumps out at you and encourages you to discover more.
thedirt0115 9y ago
A classic humorous look at the modern Javascript landscape as of a couple years ago: https://hackernoon.com/how-it-feels-to-learn-javascript-in-2016-d3a717dd577f https://hackernoon.com/how-it-feels-to-learn-javascript-in-2...
kotrunga 9y ago
A lot of great advice here. Just throwing this in: http://exploringjs.com/ http://exploringjs.com/ A lot of great free material, about the actual language, not a framework.
mabynogy 9y ago
I come from c++ too. My js looks like that: https://p.sicp.me/h5pxz.js https://p.sicp.me/h5pxz.js The best author about JS imho is 2ality (someone mentionned it already). My advice is to avoid npm and frameworks. Write plain JS.
flaviocopes 9y ago
You already got some great resources here. I also drop my blog https://flaviocopes.com https://flaviocopes.com where I am tackling one frontend development topic every day, if you want one more item in your RSS feed!
chauhankiran 9y ago
I would suggest to read Modern JavaScript Explained For Dinosaurs[0]. This will help you to understand the growth of JS. [0]. https://medium.com/the-node-js-collection/modern-javascript-explained-for-dinosaurs-f695e9747b70 https://medium.com/the-node-js-collection/modern-javascript-...

214 points by alibarber 9y ago

1ba9115454 9y ago

A one page re-introduction. https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re...

logicallee 9y ago
Perhaps this should be called "single-page" rather than one page. It's 6,000 words and paginates to 27 pages when pasted into Word without modification (13.5 point font.) I decided to time myself reading it, I would say quite carefully. It took 15 minutes of slow, careful reading. (I did not stop to do exercises). It's really excellent however, and if you have 15 minutes, go ahead and read it. It's very approachable.

Waterluvian 9y ago

Mozilla Development Network[1] is my go to for core js documentation. Google will regularly return lots of w3schools content but I find it to be very unreliable. 1: https://developer.mozilla.org/en-US/ https://developer.mozilla.org/en-US/

chatmasta 9y ago

I was in a similar position two years ago. Best advice I can give is to just build a full-stack website with JS on front and back. Make sure you get your tooling set up so you can use ES6, and then just focus on building what you want. I would recommend using create-react-app for frontend as it sets up all the tooling for you and is production ready. On backend, I would recommend parse-server but I just have a personal affection for its batteries-included approach. You could also just use a simple node/express setup (and/or mount parse-server onto it). Three major things that might trip you up, and you should read about and practice early: - Async programming / closures. You can't just call a function on an object in a loop like you can in Python. - Promises. Figure out how to use these instead of callbacks as soon as you can. - Prototypical inheritance. I recommend explicitly writing "classes" with the "old style" of YourClass.prototype.method before moving to using the "class" keyword. The "class" keyword is just syntactical sugar on prototypical inheritance so it's a good idea to learn the raw form before the sugared form. Recommended reading: - "You Don't Know JS" (https://github.com/getify/You-Dont-Know-JS/blob/master/README.md https://github.com/getify/You-Dont-Know-JS/blob/master/READM...) - Source code. Read the source code of as many JS projects as you can find.

alibarber 9y ago
Thanks - those types of tips were exactly what I was looking for. I've had an idea for a webapp brewing on the side but wasn't sure how best to jump in, and also the main things to look out for when learning something new.
lhlmgr 9y ago
thanks for that! it was an instant-star. However, my approach was to start with an more-or-less small project with react / redux / typescript. In the beginning it was a pain, but now it works.. mostly.
reacweb 9y ago
Do you think he should use typescript or javascript? Would typescript slow down learning or help learning?
- 9y ago

mcintyre1994 9y ago

You might like javascript30.com, it's a free series of 30 videos without any frameworks/build tools etc etc. I found it good to build up knowledge really quickly of loads of new APIs, and Wes is a great teacher.

rapfaria 9y ago
That is some entertaining lecturer, thanks for that!

m0meni 9y ago

http://2ality.com http://2ality.com and everything else by the author including these books on modern JS http://exploringjs.com http://exploringjs.com are gold.

Raphmedia 9y ago

Here are three excellent article. I think that you should read them in the following order: https://medium.com/the-node-js-collection/modern-javascript-explained-for-dinosaurs-f695e9747b70 https://medium.com/the-node-js-collection/modern-javascript-... https://medium.com/@parsyval/javascript-prototype-vs-class-a7015d5473b https://medium.com/@parsyval/javascript-prototype-vs-class-a... https://medium.freecodecamp.org/here-are-examples-of-everything-new-in-ecmascript-2016-2017-and-2018-d52fa3b5a70e https://medium.freecodecamp.org/here-are-examples-of-everyth...

arsalanb 9y ago

I'm in the same position as you. I realised I was still writing spaghetti code that relied heavily on DOM manipulation with Jquery. I am currently learning how the language has evolved and the following has been helpful — 1. https://javascript.info/ https://javascript.info/ 2. https://www.youtube.com/watch?v=JxAXlJEmNMg https://www.youtube.com/watch?v=JxAXlJEmNMg (videos, watch all of them) 3. http://jstherightway.org/ http://jstherightway.org/ 4. http://eloquentjavascript.net/ http://eloquentjavascript.net/ Hope this helps :)

alibarber 9y ago
Thanks that's great :D I discovered JQuery a while back and it's been fun to use at work for simple dashboards - i.e. Build Status Page / Tests etc, but I figured that trying to keep track of all the DOM changes in a larger project would be a bit of a pain, so excited to learn some new stuff and the 'proper' way to do things.

agentultra 9y ago

https://github.com/getify/You-Dont-Know-JS https://github.com/getify/You-Dont-Know-JS https://wesbos.com/es6-for-everyone/ https://wesbos.com/es6-for-everyone/ https://mostly-adequate.gitbooks.io/mostly-adequate-guide/ https://mostly-adequate.gitbooks.io/mostly-adequate-guide/ https://egghead.io/ https://egghead.io/

happimess 9y ago

I'm a middling JS programmer myself, but I have two tips to share. First, when you're wondering how to do some specific thing (say, filtering an array by some predicate), search for 'es6 filter array', rather than 'javascript filter array.' Second, make liberal use of google's 'tools -> past year' feature.

et-al 9y ago
> make liberal use of google's 'tools -> past year' feature. I didn't understand this. May someone please give an example? Thanks.
- happimess 9y ago
  When you search for information on google, the results page contains a 'tools' link up top. If you click it, you have the option to restrict your search to a variety of time frames. In my experience, any result from more than a year ago is likely to be irrelevant in the world of javascript.
  - et-al 9y ago
    This is a game changer! I've always added the desired year to my search terms hoping that would match a date on a page, but this is much more precise. Thanks!

regexman 9y ago

If you are ok paying. I think the frontendmasters.com has some brilliant introductions. I specidfically enjoyed the React course on it done by Brian Holt. Spends a lot of time on tooling as well which I think is really important long term. You will also get access to a course on d3.js by Skirley Wu(look her up) which will help you tie in react with d3. If you are short on time and dont want to spend time research the right material to stufy on this may help.

scandox 9y ago

I think if you leap straight from old JS to ES6 it might leave you with some weird gaps, especially with regard to why some things got to be the way they are. A book I found very good on this score was: Effective Javascript http://effectivejs.com/ http://effectivejs.com/ Also understanding Promises properly I think is quite important (even if you don't choose to employ them yourself) and I found this book also very useful: http://shop.oreilly.com/product/0636920032151.do http://shop.oreilly.com/product/0636920032151.do

paultopia 9y ago

Like others have said, You Don't Know JS is freaking amazing---really covers all of basic JavaScript up to the new and fancy stuff. Less about design paradigms and more about just becoming comfortable with the mechanics of the language, weird stuff like prototypes and dealing with all the async craziness and the terrifying `this keyword and all those other nuts and bolts on which all the "modern" practices depend.

KerrickStaley 9y ago

I recommend looking at a few of the (free[mium]!) courses offered on egghead.io. They're succinct, information-packed, and interesting. In particular, I liked this React course: https://egghead.io/courses/react-fundamentals https://egghead.io/courses/react-fundamentals

rhacker 9y ago

Greatest thing to learn is webpack when you get into front-end development. Don't use a starter kit, the webpack tutorial should be followed - otherwise you don't really know what your build is doing.

auganov 9y ago

In terms of design patterns, I wouldn't expect js to be that different from python. JS is a very non-opinionated language and so is the community. Just make sure you understand prototypical inheritance. "Modern" js is mostly about syntactic patterns. Airbnb has a nice style guide that incorporates most of them https://github.com/airbnb/javascript https://github.com/airbnb/javascript

dhanunjaya 9y ago

try https://watchandcode.com/ https://watchandcode.com/

econner 9y ago

I liked Nicholas C. Zakas book on ES6: Understanding ES6 https://leanpub.com/understandinges6/read https://leanpub.com/understandinges6/read Free to read online.

mmsimanga 9y ago

Additional question. Is it possible to develop JavaScript without setting up Node?

acemarke 9y ago
Sure - you can absolutely still just write an index.html file and toss in some script tags. You can even do that with React (see https://raw.githubusercontent.com/reactjs/reactjs.org/master/static/html/single-file-example.html https://raw.githubusercontent.com/reactjs/reactjs.org/master... ). But, most modern JS apps have some kind of a build step, and the build tools themselves are all written in Javascript. So, you need Node to run those tools, in the same way you'd need the Python runtime to run an app written in Python, or the JRE to run an app written in Java.
- mmsimanga 9y ago
  Thanks, I spend all writing SQL. I have always found the prospect of setting up JavaScript development environment daunting. First and only time I tried to Node something went wrong in my setup and I spent days trying to figure out the issue. I didn't get far with both Node and JavaScript. I suppose my only issue is time.

et-al 9y ago

To add to the link pile: A Study Plan To Cure JavaScript Fatigue - https://medium.freecodecamp.org/a-study-plan-to-cure-javascript-fatigue-8ad3a54f2eb1 https://medium.freecodecamp.org/a-study-plan-to-cure-javascr... The author recommends this plan: Week 0: JavaScript basics Week 1: React Week 2: Building a React project Week 3: Mastering ES6 Week 4: State management (Redux) Bonus: Building APIs with GraphQL So pick and choose from all the links here and just study them depending on the week. To kick you off, I'd check out Wes Bos (Javascript30 guy). For more in depth stuff, dive into You Don't Know JS. Have fun!

thinkxl 9y ago

If you like books, read these in this order: 1. Eloquent JavaScript by Marijn Haverbeke 2. Secrets of the JavaScript Ninja by John Resig (jQuery author) and Bear Bibeault Those two books formed the foundation for my understanding of JavaScript. Now, I understand any framework or pattern easily. Edit: format

petercooper 9y ago

Maybe start at https://javascriptweekly.com/issues/380 https://javascriptweekly.com/issues/380 and step back through issues seeing what of the JavaScript zeitgeist jumps out at you and encourages you to discover more.

thedirt0115 9y ago

A classic humorous look at the modern Javascript landscape as of a couple years ago: https://hackernoon.com/how-it-feels-to-learn-javascript-in-2016-d3a717dd577f https://hackernoon.com/how-it-feels-to-learn-javascript-in-2...

kotrunga 9y ago

A lot of great advice here. Just throwing this in: http://exploringjs.com/ http://exploringjs.com/ A lot of great free material, about the actual language, not a framework.

mabynogy 9y ago

I come from c++ too. My js looks like that: https://p.sicp.me/h5pxz.js https://p.sicp.me/h5pxz.js The best author about JS imho is 2ality (someone mentionned it already). My advice is to avoid npm and frameworks. Write plain JS.

flaviocopes 9y ago

You already got some great resources here. I also drop my blog https://flaviocopes.com https://flaviocopes.com where I am tackling one frontend development topic every day, if you want one more item in your RSS feed!

chauhankiran 9y ago

I would suggest to read Modern JavaScript Explained For Dinosaurs[0]. This will help you to understand the growth of JS. [0]. https://medium.com/the-node-js-collection/modern-javascript-explained-for-dinosaurs-f695e9747b70 https://medium.com/the-node-js-collection/modern-javascript-...