HN Explorer

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

214 points by alibarber ↗ HN
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?

71 comments

[ 2.9 ms ] story [ 123 ms ] thread
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...)

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

alibarber
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
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
Do you think he should use typescript or javascript? Would typescript slow down learning or help learning?
drinchev
Definitely it will slow down learning, but most of all you will be quite confused in the end, what is JavaScript and what is TypeScript.
rhacker
If he's coming from typed languages he should definitely learn Typescript or at LEAST Javascript with Flow.
chatmasta
I wouldn’t touch TS until I had an understanding of JS. The many libraries without typings will just make things confusing IMO.
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.

chatmasta
All good points. Some counters:

- Re: React. I actually disagree with this given that OP is an experienced programmer. The react API is very, very simple to learn but difficult to master. The forced conventions are good for productivity. If you use create-react-app, I don't see any reason to put off learning it until later, but of course you should start with the JS basics before installing react. I'm not sure vue would be better; in fact it might be worse as a first experience, just because there is far less documentation / community / ecosystem around it.

- Re: python backend. That's fine, but if the goal is to learn JS, you're not learning much by writing the backend in Python are you?

Nice tip on the crossbar.io, I'm going to check that out.

paultopia
Disagree slightly with the point about far less documentation/community/ecosystem on Vue. The Vue documentation is stunningly amazing---probably the best out-of-the-box documentation I've ever seen for a library, and that really makes it vastly easier to learn than its competitors.
sametmax
> Re: python backend. That's fine, but if the goal is to learn JS, you're not learning much by writing the backend in Python are you?

It's true that backend JS has the most modern dialect, and without any need for a transpiler. And OP did mention "modern".

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

sametmax
Learning just the js language takes one day if you are an experienced programmer. It's a very small language.
mzzter
How is JavaScript a small language at all? It’s comparable to Java in the number of language features.

Java Reference https://docs.oracle.com/javase/specs/jls/se7/html/index.html

JS Reference https://www.ecma-international.org/publications/files/ECMA-S...

sametmax
It's not even on the same planet.

In JS you have a very small number of types, keywords and a ridiculously small stdlib.

I'm not sure what to make of your comment.

tomc1985
There is a lot of meta-knowledge buried in using those few features that he is probably referring to. Knowledge of language features is one thing, knowledge of when to use them is another
sametmax
That's true for every language.

The only hard part with JS is the accumulation of bad design decision that means you gotta avoid or hack around part of the language.

The rest is just a basic dynamic language with some async semantics. Nothing crazy.

alibarber
This is something that I'm not sure how I feel about in general. I'm not really interested in learning any particular framework (because there seem to be about a billion and the landscape changes every day), but then again re-inventing the wheel over and over is never fun, even if learning something new. I'm hoping that something like React might be quite instructive to use and study in looking at its design choices and API structure - and also to learn _why_ someone might want to use it and what the problems are in JS/Front end development that it's there to solve...
tomc1985
The thing is, you aren't reinventing the wheel. There is a certain amount of repetition in programming... you will always need to sort a list, or iterate a for loop, or assign a couple of variables.

There is a re-occurring thread of inventors (especially on here) building things that are more complex than necessary, and certainly more complicated than the problem they are working on. React, Angular, Electron, and a lot of other tools all use 1000 words where 100 would do. If you go through programming thinking that that is normal, or acceptable, you are doing more harm to the ecosystem and your own knowledge than if you had "reinvented the wheel" a couple of times on smaller tasks.

In the long run neither frameworks nor languages matter. If programming to you is reaching for the latest framework du-jour then you will find yourself left in the dust unless you keep with technology's futile and arbitrarily-hastened pace. (And no, I do not consider it OK that this is considered necessary) But if you master the concepts of what the tools do... then you start seeing just how badly and inefficiently they are written. Then you find yourself bypassing them, and simultaneously completing projects faster than ever while writing bespoke code that fits your requirements perfectly, and is also much easier to maintain (because hey you wrote it)

sametmax
> In the long run neither frameworks nor languages matter.

While I agree with this statement, a real life project include several people, some new to the projects, some good, some not, some with experience and some young. It requires communication and sharing things.

And tooling helps a lot with that.

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

tomc1985
l_t's response was very good, I would recommend what he has to say.

To follow-up... essentially, yes. A text editor and a <script> tag is one way to approach it, though I would advise that you stick with making something small. One-off, toy SPA's are a great way to get to know JS. (Here's a challenge: TodoMVC sans frameworks ==evil grin==) With big ideas it is a lot harder to do this with big ideas until you have a firm layout of the code in your head.

In fact, this may go against a lot of recommendations but I'd recommend getting comfortable with ES5 before moving to ES6. A lot of existing code is written to ES5 standard and, while ES5 is certainly missing LOTS of important goodies, there is more than enough language to do most kinds of data-processing. (Though don't feel bad if you find yourself building a util.js with a bunch of string manipulation functions, for example, or find yourself importing jquery... I consider JQ to be an exception to the 'no tooling' rule, because classic JS DOM manip really, really sucks). Things like callback hell are important to understand, even if you never intend to write in that style.

sireat
If you want modern Javascript I'd say React is a better choice than Vue.

I spent 10 years doing embedded Javascript(not web) and wanted to see what modern webdev was like.

Vue came highly recommended but I do not feel like I am writing pure Javascript when writing Vue. Vue might be a better choice for someone who does not want to write JS.

The hip people told me to avoid React (FB, too massive etc).

Surprisingly React feels great for writing Javascript. Just learn ES6 features(arrow functions for one) and go to town.

EastLondonCoder
Brilliant recommendations. I would like to add learning redux as soon as possible is a good thing.
adamsea
I would say yes and no. Closures, prototypical inheritance, etc, i.e. the language basics are all are really helpful to understand and be comfortable before using redux. Also, if the OP isn't using React.js then Redux may not be appropriate.

That said, yeah, if you are using React.js you should definitely learn and use redux.

acemarke
I'm a Redux maintainer. We generally recommend learning React first before trying to learn Redux, if only to minimize the number of new concepts you're dealing with at once. And yes, the more comfortable you are with actually using JS, the better you'll be at both React and Redux.

It's worth noting that Redux is not tied to React, and can be used with any UI layer (Angular, Ember, Vue, vanilla JS, etc).

adamsea
Agree with all of the above. ES6 is great, as is (imho) using Javascript in a functional-programming style.

And, 100% avoid the "class" keyword.

When I was learning node.js I used "learnyounode", a terminal-based game/learning program. It was great. It had lessons which appropriately increased in difficulty, code examples, and guidance on which documentation to peruse in order to complete the coding assignments (each of which was a tiny application). There's one for Javascript too. They are both here:

https://github.com/workshopper

Learning to understand closures and the "this" context (including prototypical inheritance) can take a bit, but is extremely useful and important.

Related to the above, learn the Javascript "module pattern" design pattern.

When you get to the appropriate point, the source code of Redux is fairly simple and clearly written: https://github.com/reactjs/redux/tree/master/src

"Secrets of the Javascript Ninja" is an older book but a good one. So is "Javascript: The Good Parts."

hannofcart
In my opinion, prototypal inheritance does not belong in the same league of importance as closures, async programming, promises in the "modern JavaScript" ecosystem. In fact, I'd replace it with generators.
chrismeller
Why would you ever recommend against using actual ES6 classes? Not only is it the new standard, he’s coming from Java...

TBH, the only reason that seems to make sense is some kind of weird “I knew JavaScript before it had classes!” kind of sentiment that wouldn’t actually teach him anything of value.

thinkxl
Prototypal inheritance plays a huge role in understanding the language because JavaScript uses it for everything.

It might be a good idea to learn about this before using ES6 classes; remember that ES6 classes are syntactic sugar on top of prototypal inheritance anyway. They wouldn't learn legacy patterns, but the actual pattern that JavaScript uses.

chrismeller
I grant you that it plays (or at least played) a huge part, but as things move towards ES6 classes (which are very similar to every other language with classes), I would still argue that you’re insisting upon learning prototype inheritance for no real reason.
thinkxl
You are missing the point; if you use JavaScript, you use prototypal inheritance whether you like it or not, e.g.:

  function getUser() {}
That is creating an instance of the `Function` constructor object[1][2]. In a Classical (as classes) language, you would see that like this:

  // `Function` being a class 
  function getUser extends Function {}
but because JavaScript is purely prototypal, this works differently.

You say that there's no reason to learn prototypal inheritance, well, the only and valid reason is that to write at least decent JavaScript you have to understand how it works behind the scenes.

* [1] - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Refe...

* [2] - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Refe...

Edit: add links

chatmasta
I use ES6 classes every day, and I would recommend it. However, for someone coming from a language like Python, it's easy to get confused over inheritance issues where JS does not behave like Python (or Java for that matter).

It doesn't need to be extreme. I just recommended writing one or two "classes" using the old style, in the beginning, because that's a great way to solidify understanding of how the inheritance actually works. Whereas when you're using ES6 classes, you're using hidden abstractions that can make debugging very confusing if you don't know what the "class" keyword is doing.

chrismeller
I came from a C# background, not Java, but didn’t find anything supremely confusing about class inheritance in JS. Differences to be sure, but nothing that was groundbreaking.

Debugging I can see as being a reasonable argument - as you step through code you should understand what “proto” means. That’s the most compelling reason I’ve seen thus far...

MoTTs_
On the contrary, classes and inheritance in both Python and JavaScript behave basically the same. In Python, classes are objects (a building, not a blueprint), and inheritance is done by delegation.

https://i.imgur.com/p9Kw815.png

If you've used Python classes and inheritance all this time and never felt confused, then people can also use JavaScript's classes and inheritance and never feel confused.

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

Idk how he could be more clear about why.

btilly
Async programming / closures. You can't just call a function on an object in a loop like you can in Python.

Actually if you're willing to use https://github.com/scopsy/await-to-js as a transpiler, and await/async on the back end in node, then you actually CAN just call a function in a loop like you would in Python, modulo a tiny amount of decoration that is pretty similar to how you'd do it with Twisted.

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!
1ba9115454
A one page re-introduction.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re...

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.

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/

2. https://www.youtube.com/watch?v=JxAXlJEmNMg (videos, watch all of them)

3. http://jstherightway.org/

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

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.

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/

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

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

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

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

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

kotrunga
A lot of great advice here. Just throwing this in:

http://exploringjs.com/

A lot of great free material, about the actual language, not a framework.

mabynogy
I come from c++ too. My js looks like that: 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
You already got some great resources here. I also drop my blog https://flaviocopes.com where I am tackling one frontend development topic every day, if you want one more item in your RSS feed!