5 ms·
Ask HN: What's the best path to learn JavaScript as a beginner?
Hello Hacker News. I come from the world of Java and I never took JS seriously. I had previously used it to create websites using jQuery, etc but times have changed. JavaScript is popping up everywhere, so I decided to learn it last year. Unfortunately, I was extremely unsuccessful, since I finished learning ES5 and immediately decided to jump into frameworks such as React and Angular. Both confused the crap out of me, and then I saw VueJS (supposedly framework of the year) and that was a little easier for me.
But I still have a feeling that I'm going at learning JS the wrong way. For instance, TypeScript, Babel, and Webpack are very alien to me, even though they seem to be indispensable tools for writing safe, cross-browser apps.
What order do you recommend for learning the various aspects of JavaScript, and as an extension, front end development?
Thanks for your time.
- GrumpyOldDev 10y agoIn alignment to codegeek's recommendation, and depending on your conditions / preferences: You can also pick up small gig building more (and better) websites for local businesses. There's always a dumpy restaurant wanting a new website for few hundred bucks. The time you would spend with a textbook / tutorial, you can also consider synchronously apply them to real life commercial use. Also, you know Java and probably a lot of backend / db stuffs... you can bundle the whole stack together and build business solutions too instead of just "websites". Like a simple restaurant POS UI, sends order to kitchen kind of system... again, depending on how much free time you have and willingness to code for little pay just to learn. JS / Front End Dev is one of the best setup to pair up with small jobs like that IMO. I can also recommend Douglas Crockford's book JavaScript: The Good Parts http://shop.oreilly.com/product/9780596517748.do http://shop.oreilly.com/product/9780596517748.do Disclaimer: Never an academia kind of person, I take forever to go through any book. I found myself learn faster when I can go hands-on and fail within reasonable comforts. Now 15+ years into front end, I consider myself doing quite alright...
- gurgyi 10y agoFriend
- gurgyi 10y agoဧကရာဇ္
- codegeek 10y agoI am learning JS myself and here is the order that seems to work for me: 1. DO not start with ANY framework. None. Forget about react, vuejs or whatever the flavor of the month is. Just don't pay attention to it. 1. Start with plain ES5. One good resource: http://eloquentjavascript.net http://eloquentjavascript.net 2. Once you have a good grasp of ES5, then learn ES6. Again, for ES6, don't worry about Babel or shit like that. Just learn the syntax and new things about ES6 and directly test in Chrome 3. Learn how to compile ES6 into ES5 (Babel etc) 4. Learn Typescript (the daddy of all). Typescript will convert to ES5 or ES6 both. So make sure your concepts of ES5/ES6/ES(n) are clear before you do typescript so that it is not all magic for you. 5. Then, start learning about the bundlers and compilers like webpack and Babel etc. For bundlers, webpack is hot right now. Babel is good for ES6 to ES5 conversion but then again, typescript could take care of that. 6. Finally, time for frameworks. Start with one. React is good. Vuejs is good. They are all good at something. By the time you are at this step and you did all the steps before it, you will know what you are doing. My 2 cents. This could change depending on which month/year are we talking about :)
- applecrazy 10y agoThanks for your suggestions. One question: why use Babel at all if TypeScript offers type safety and ES6 conversion? Or does Babel have some other "killer feature" that makes it useful in a TypeScript project?
- ohstopitu 10y agoif you use TS, you don't really need Babel at all. However, if you don't (I used TS, it was great, but I had some weird issues so I moved back to JS), Babel is awesome! I just use Babel (with gulp - backend or webpack - frontend) and use just one preset - babel-preset-latest and never worry about ES(x). Not because ES(x) is not important, but because if you keep reading more and more features, you'll get stuck on just those. ES(x) should be more natural... As an example, a function in ES5 would be along the lines of function () { //your_stuff_here } but in ES6 it's more like () => { //your_stuff_here } which is a lot less typing. Also, I'd advice you to use ESlint from the very beginning as it helps you maintain a good coding style from the start.
- devwastaken 10y agoWhen learning about ES6, I found some nice videos on it. https://youtu.be/yswb4SkDoj0 https://youtu.be/yswb4SkDoj0 No facecam, gimmicks, or bad audio/voice. Simply just shows the code, its output, and outlines the logic.
- applecrazy 10y agoThese tutorials look really helpful, thanks.
- adamnemecek 10y agoTo add to what codegeek said, "Secrets of the JavaScript Ninja" by John Resig (the creator of jQuery) is also very good https://www.amazon.com/Secrets-JavaScript-Ninja-John-Resig/dp/1617292850/ref=as_li_ss_tl?sa-no-redirect=1&linkCode=ll1&tag=adamnemecek03-20&linkId=0a0b18b990c8ab79a86e8ce1fa3008b7 https://www.amazon.com/Secrets-JavaScript-Ninja-John-Resig/d...
- ggrochow 10y agoIm a huge fan of 'You Don't Know JS' by Kyle Simpson (getify) https://github.com/getify/You-Dont-Know-JS https://github.com/getify/You-Dont-Know-JS
- Maciej001 10y agoThis is a very good starting point: https://sivers.org/learn-js https://sivers.org/learn-js. You can also check Wes Bos's courses that are well regarded (wesbos.com). Choose one path and stick to it. Once you finish and decide to learn React.js you may consider joining React in Flip Flops (https://www.reactinflipflops.com https://www.reactinflipflops.com) [I am organising it]
- Maciej001 10y agoThis is a very good starting point: https://sivers.org/learn-js https://sivers.org/learn-js. You can also check Wes Bos's courses that are well regarded (wesbos.com). Choose one path and stick to it. Once you finish and decide to learn React.js you may consider joining React in Flip Flops (https://www.reactinflipflops.com https://www.reactinflipflops.com) [I am organising it]
- LiamPa 10y agohttps://www.codecademy.com/ https://www.codecademy.com/
- applecrazy 10y agoI've tried Codecademy for Python, but their approach doesn't really teach you the concepts very well or in enough detail. For example, their AngularJS tutorial didn't explain how to set up tooling or how to structure an application. It just jumps into directives (I think?) without giving you much context.
- nkkollaw 10y agoI never got as much as with this: https://www.udemy.com/understand-javascript/ https://www.udemy.com/understand-javascript/. It explains not only how things are,but why. This IMO is the key to understanding.
- matbram 10y agoPersonally, the best resources that were invaluable to me were the Jon Duckett books called... JavaScript and jQuery: Interactive Front-End Web Development http://javascriptbook.com/ http://javascriptbook.com/ and.. HTML and CSS: Design and Build Websites http://www.htmlandcssbook.com/ http://www.htmlandcssbook.com/ The Javascript one gives a really solid foundation for learning Javascript from the ground up and front-end web development in general. Also there are practical examples of many things the beginner/average developer usually is tasked with building and doing. There is also the companion book that he did a couple years earlier on HTML and CSS. They are pretty much both the first things that show up on Amazon when you search for Javascript and jQuery as well as HTML and CSS, and best sellers in their respective category. In terms of what you should start with, I'd recommend basic front-end development, but browser extensions are good too. Hope that helps!