
Ask HN: Resources for catching up on modern JavaScript for Python/C++ Programmer - alibarber
When first learning to program (back in high school 10+ years ago) I played around a lot with JavaScript, building &#x27;cool&#x27; websites that did all kinds of things in JavaScript. I haven&#x27;t really touched it since.<p>I moved on to Java and now program professionally in Python and C++ (desktop apps development) and do some webapps development as side projects.<p>I&#x27;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&#x27;ve been lately using the great Charts.js library. I would love to get up to speed with how &#x27;modern&#x27; JS works for frontend development. I&#x27;m not so concerned with learning particular frameworks in depth (but should I be?) - moreover what particular programming&#x2F;design paradigms are considered the most effective?<p>What resources have people in a similar situation to me found to be useful?
======
chatmasta
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/READM...](https://github.com/getify/You-Dont-Know-
JS/blob/master/README.md))

\- Source code. Read the source code of as many JS projects as you can find.

~~~
sametmax
+1 for You Don't Know JS.

But the rest is a bit "all or nothing" isn't it ?

React is a huge bite for a start, espacially since you need webpack. How about
something lighter first, like Vue.js ? Once you get how it works, you can up
your game and go to React (+ webpack + Mobx, don't try redux at first it's too
much) or Angular 2.

As for the backend, you can stay in Python first and do a rest API. Then once
you get the front right, write a backend using node AND a framework. Do not
attempt to pure JS first, it's like doing web Python without django or flask.
Possible, but not worth it. ExpressJS is close to flask in philosophy, except
for the asynchronous part.

If you really want to have fun though, checkout crossbar.io.

It's a Python router than allow very easy PUB/SUB and RPC between clients.
Clients can be written in JS, Python, Java, C#, etc.

You can even write JS clients in the browser, making push notifications and
other real time feature a breeze. It's a good way to give you motivation to
try on JS: mix it with what you know, and try a new exciting technology. Plus
a good way to see the difference between async in JS and in Python.

~~~
tomc1985
Scratch all that. Go for as long as possible without reaching for a framework
like React or Vue. You don't learn JS learning those tools, you are just
learning the tool.

React et al gives language newbies good shoulders to stand on, but a lot of
React's so-called concepts map fairly simply to lesser-known language
primitives. (And for the record, writing a simple, one-way databinding library
in JS takes all of about 20 lines of code)

Don't be a tool, learn more than the tools :)

~~~
dalai
Could you expand a bit on your recommendation? Do you mean just ES6? Do you
have specific resources to suggest? What do you think about all the associated
tooling for writing, compiling, testing and debugging, when starting? Is a
browser and a text editor good enough, or is a minimal setup vital, in
particular when one is building something that is more than a toy project?

~~~
l_t
I would try to think of it from a first-principles approach. You can begin
with a blank slate, for instance, a single HTML file with a <script> tag. Only
when "doing it yourself" becomes tedious do you start to look for libraries to
solve your problem.

Personally, I find a bare minimum of tooling to be valuable. I have built SPAs
using 100% vanilla JS, and it can be quite repetitive and error-prone. I'd
recommend using highly simple build tooling (maybe Brunch) and an extremely
simple view layer like [https://github.com/Matt-Esch/virtual-
dom](https://github.com/Matt-Esch/virtual-dom). Pretty much everything else
you can build yourself with surprisingly few lines of code -- state
management, routing, event handling, data bindings, etc. I think of it as
"building your own framework", and although you might not want to do it for
every project, the learning experience is great.

------
happimess
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
> _make liberal use of google 's 'tools -> past year' feature._

I didn't understand this. May someone please give an example? Thanks.

~~~
happimess
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
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!

------
Raphmedia
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-...](https://medium.com/the-node-js-collection/modern-javascript-
explained-for-dinosaurs-f695e9747b70)

[https://medium.com/@parsyval/javascript-prototype-vs-
class-a...](https://medium.com/@parsyval/javascript-prototype-vs-
class-a7015d5473b)

[https://medium.freecodecamp.org/here-are-examples-of-
everyth...](https://medium.freecodecamp.org/here-are-examples-of-everything-
new-in-ecmascript-2016-2017-and-2018-d52fa3b5a70e)

------
arsalanb
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
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.

------
et-al
To add to the link pile: A Study Plan To Cure JavaScript Fatigue -
[https://medium.freecodecamp.org/a-study-plan-to-cure-
javascr...](https://medium.freecodecamp.org/a-study-plan-to-cure-javascript-
fatigue-8ad3a54f2eb1)

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!

------
1ba9115454
A one page re-introduction.

[https://developer.mozilla.org/en-
US/docs/Web/JavaScript/A_re...](https://developer.mozilla.org/en-
US/docs/Web/JavaScript/A_re-introduction_to_JavaScript)

~~~
logicallee
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.

------
m0meni
[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.

------
agentultra
[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/)

------
auganov
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)

------
Waterluvian
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/)

------
thedirt0115
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-2...](https://hackernoon.com/how-it-feels-to-learn-javascript-
in-2016-d3a717dd577f)

------
scandox
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
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.

------
chauhankiran
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-...](https://medium.com/the-node-js-collection/modern-javascript-
explained-for-dinosaurs-f695e9747b70)

------
KerrickStaley
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)

------
petercooper
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.

------
flaviocopes
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!

------
mcintyre1994
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
That is some entertaining lecturer, thanks for that!

------
kotrunga
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.

------
regexman
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.

------
mabynogy
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.

------
thinkxl
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

------
rhacker
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.

------
econner
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
Additional question. Is it possible to develop JavaScript without setting up
Node?

~~~
acemarke
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...](https://raw.githubusercontent.com/reactjs/reactjs.org/master/static/html/single-
file-example.html) ).

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

------
dhanunjaya
try [https://watchandcode.com/](https://watchandcode.com/)

