This is a walk-through of the steps I personally took in a single year, to begin learning JavaScript. My goal was to be able to get a job in a position where Javascript would be at the forefront of what I do on a daily basis.
I should make it clear that my journey wasn’t as smooth as what I’m about to present to you, this should give you a much smoother ride. The inspiration for writing this article is that I’ve been asked how I’ve gotten to the level I’m at in JavaScript in just under a year. (At the time of writing I was working full time as a javaScript developer at BSkyB.)
When I started it would have been great to have a pointer toward relevant information and resources to get me on my way. The hardest part for me was the middle ground. There are plenty of resources for beginners and for advanced but the intermediate content was a harder to come by, so I will make sure to include what I did there.
One last point before I start is a massive disclaimer, I’m by no means at an expert level and I’m still learning lots but I also don’t foresee that learning progression about to stop anytime soon. When it comes to coding no one is the best and if you really enjoy it you’ll always keep progressing.
1.
Enter this journey with an open mind and no preconceptions on how you can utilise what you already know about coding from another language.
I say this because I don’t have a massive coding background. I was a freelancer for quite some years and like a lot of freelancers I just knocked out websites using WordPress. So I had very basic knowledge of PHP, lots of CSS, and HTML5. That is my background but a lot of people come from a strong coding background and when they come to JavaScript they try to implement the patterns they have learnt and incorporate them into JavaScript. Doing this I feel is not utilising the true power and nature of JavaScript.
2.
Now lets learn some basics, first port of call is to do something interactive. You could jump into a book like JavaScript: The Good Parts by Douglas Crockford (which I did!) but to me the book was a little too intense as a starting point. There are a couple of good online interactive courses and the one I chose was Codecademy.
Once you start, you are faced with an application that looks a little like a code editor. Tasks need to be completed to proceed to the next level.
You get a good amount of basics learnt here, but more importantly you are actually coding and see results. This is key factor because actually coding is paramount to learning and far more effective than just reading books. (reading books/tutorials is a must but try typing out what you are learning)
It’s also worth mentioning that after writing this article that Freecodecamp has been mentioned to me numerous times and therefore it’s worth putting them in. From what I’m told they have really good courses with the added bonus of also having a community, which sounds very useful to me.
3.
“You don’t know JS” book series by Kyle Simpson were a big part into actually learning relevant information about JavaScript. All the books are on Github and free to view! Making the series open source and allowing the community to get involved in the outcome prior to being printed is a key part to the credibility of these books. Currently having 102 contributors, 253 closed issues, the level of scrutiny the content went under gives the series strong trustworthiness.
Since reading them heavily and regularly going back I’ve gone and bought the books I most used as hardcopies.
Doing this means I have them for offline reading and more importantly I hope I was able to support Kyle with his continued good work.
Up & Going is a superb introduction and where you should begin reading this series. What I’ve found great about the book series is the way everything is explained. You don’t just get told how something should be done and nothing more. You get told why and an in-depth background into the subject. When going through the literature you get a confident feeling that what you are learning has been thoroughly thought out due to its open source nature.
You are going to get a nice introduction into the language with subjects such as: Values & Types, Objects, Arrays, Functions, Built-In Type Methods, Coercion, Truthy & Falsy, Variables etc…
This You Don’t Know JavaScript book series offers a contrary challenge: learn and deeply understand all of JavaScript, even and especially “The Tough Parts”.
4.
Next back to YDKJS book series and getting an understanding into Scope & Closures.
When going through the book, as mentioned before it is a good idea to test what you are learning and you are given plenty of opportunities to do so by the author.
For this I went towards JsBin. You get 5 panels, HTML, CSS, JavaScript, Console and Output. The link I’ve given you will bring you to a page with JS + Console panels open.
This way you can test code straight away and see the output, look at screen shot bellow for an example.
5.
So you’re learning more and more, testing code out. What I did next was to try and be a part of the JavaScript community. I joined Twitter and Github.
Twitter was to start following influential JavaScripters + blogs + news sites here are a few to get you started: @getify, @BrendanEich, @holtbt, @jhusain, @andrestaltz, @drboolean and my self if you feel the urge! @_cmdv_
Github is a superb place to look for examples of code, to see how others are doing it and numerous other tools/frameworks/libraries that talented people make. It’s also a good way to start sharing what you do or even collaborate with others. Open source I feel is marvellous for the whole ecosystem, in what ever language you are doing. Some still feel it is a bad idea but I’m all for sharing my knowledge and using or contributing with others.
6.
Around now I was reaching the dreaded intermediate stage I briefly mentioned at the beginning of this article. I felt I was learning the basics but was just unable to think of how I could progress from here.
This is when frameworks came into light, lots of hype, talk of how easy they are to use and all the great things they can do. At the time Angular seemed like a good choice, it had a strong community. I’d be able to get a lot out of the box and actually start making things, I also dabbled in Ampersand.js.
Taking this choice for me was a slight time waster, not because the Frameworks are bad ones but I’ve come to realise that Frameworks come and go so often in JavaScript that picking one might not be the right direction to take. I then realigned my goals and felt that I wanted to learn how these Frameworks work under the hood! Optimistic I know, but in my eyes if you learn vanilla JavaScript then your skills/knowledge will stretch much furthers and for a longer duration than putting all your eggs inside a Framework.
I felt as if I was failing and finding it difficult to reach where I wanted to be, in reality I was being impatient. I did watch this magnificent video by Milton Glaser on the whole subject of failing and if I’m honest I still do. When dealing with a flexible language like JavaScript be ready to see endless options and opinions! So try not to get disheartened and try to think of the bigger picture. (Easy to say I know!)
7.
You have to remember at this stage, you actually have some great tools under your belt due to reading the two YDKJS books and playing around with the code. What next? For me it was video tutorials.
It came apparent that Kyle Simpson was also a teacher and he gave talks as well as various courses. In comes Frontendmasters.com, I know the name might make you think that it will all be front-end related but trust me it really isn’t. The course in particular I’m talking about is Kyle’s Advanced JavaScript if you are a Pluralsight member it can also be found here.
There are free alternatives like continuing to read the YDKJS book series, but for me watching someone talk about a subject and have them walking you through the code is fantastic for knowledge retention. What’s great about the Frontendmasters video courses is they have a running theme to encourage you to follow along coding at the same time! But what is even better is you have the advantage of pausing and rewinding if you get stuck.
You have to remember the people giving these courses are knowledgable/experts and for me paying to access that felt right. Because of all the expenses it cost to actually get the video content out there, it’s only fair that there is a fee.
The course I pointed you to goes hand in hand with the first two YDKJS and the third This & Object Prototypes. Watch the course and work your way through the books too. I’m still going back to This & Object Prototypes book because the content is so useful. Look out for OLOO (objects linking to other objects). This will explain my early mention of how keeping an open mind will allow you to use JavaScript to its full potential rather than implementing patterns from other languages like the use of “class”. Here is an article that covers the issues with ES6 class.
But keep in mind that these are opinions and people also make great arguments towards the use of Class, it will ultimately be a personal choice.
8.
Eric Elliott has put together a vast list of Essential JavaScript Links. I advise you take a good look through this list as its content is really great. There is also lists of great news sites, people on twitter, videos etc… I’ll pick out a few articles that will be more relevant at this stage of your journey.
- The Two Pillars of JavaScript Part 1: Prototypal OO
- The Two Pillars of JavaScript Part 2: Functional Programming
Now we’re starting to delve into deeper subjects combined with online videos this was how I got through this intermediary section of our trip.
Eric Elliott always give endless great content, with either his own or pointing to great content from others.
Right about now I took a shine to functional programming but I wasn’t aware at the time that functional programming was what I was actually learning. This may seem a little too in-depth but with your openness the more you look into the subject the more it will become clear why it is very useful. If you don’t feel this is the right direction for you then not to worry as I also took an offshoot.
Asynchronous Programming: The End of The Loop by Jafar Husain on egghead.io is a low level introduction into functional programming and there’s more to come on that subject but firstly lets take that offshoot.
9.
You might have noticed but incase you haven’t already come across it. Most current JavaScript libraries, plugins and frameworks are on a package manager called NPM, Ruby has Gems, PHP has Composer. To get full use of NPM you will need to have NODE.js installed here is a quote from the node site.
Node.js® is a JavaScript runtime built on Chrome’s V8 JavaScript engine. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient. Node.js’ package ecosystem, npm, is the largest ecosystem of open source libraries in the world.
The lowdown is that Node allows you to run JavaScript on the server and this opens up endless options to the JavaScript world.
If you want to go a little more in depth then you can look at a paid course on both Plurasight + Frontendmasters.
10.
If you’ve reached this point you’ll be in a good place to start experimenting with vanilla JavaScript in an application environment. As I said previously I kept away from Frameworks but that’s not to say they are outright a bad thing, so I put my investigative boots on and went hunting for a potential option!
My findings were that React ticked all of my boxes, firstly it isn’t what I deem a full Framework because in reality it will only deal with the view layer and the rest of the app implementation is left to you.
It teaches great implementations, like modular components how to deal with state (generally pointing towards a global state passed through the app in props). You’re not restricted to using all things React. You can use what ever to deal with your data layer, backend, api etc…
And more importantly if you know JavaScript you are in a really good place with React. Again back to some great video courses when it came to learning React.
Ryan Florence is a strong speaker and funny too so that makes it a little more entertaining. Initially I took the course on ReactWeek which was a 5 day course. I discovered and took the course once it had already completed as it was recorded. Though it is a very good course I’ve had trouble with playback of the videos and after trying to get help, a couple of email exchanges down the line I was just ignored because in their eyes my internet connection was the problem! But fear not they told me I was apparently the only one to suffer this issue! Ryan did a similar course though shorter on FrontendMasters. You will be surprised at how easy it is to get up and going when you know JavaScript with React.
11.
Now you could choose to continue reinforcing what you have already learnt or find new things to learn. I personally took a shine to Functional programming along with a library called RxJS by author and Sourcerer Matt Podwysocki.
This all happened from taking a course presented by Jafar Husain, he is a very genuinely enthusiastic teacher. That to me is when I learn the best, if you are watching/interacting with a person who loves what he is doing it shows and you naturally become more interested. I know it sounds like I was paid for this testimony but trust me this all came out of my own pocket!
Unfortunately the course I’m talking about is due for release on FrontendMasters as I took it live a couple of months ago and it takes that time to get up onto the site. (It’s now been release and available to watch here!) Not to be a an awful tease here is another great video about the exact subject though not as in depth from Jafar.
For more knowledge on RxJS Ben Lesh’s tutorials on Egghead.io are an insightful way to get your teeth into RxJS, there a couple of new ones from André Staltz.
I should mention that RxJs have a great gitter channel too, you’ll need Github to join but they are a really helpful bunch.
12.
I’ll make this the last step as this is really just going in the direction I have taken when really at this point you will be able to choose which direction you’d like to take.
The last video by Jafar gives you a good introduction of some functional programming concepts but you can dive in much deeper and this is what I’m doing right now. Here is a great book Mostly Adequate Guide by Brian Lonsdorf, he also did a course on the subject here
Functional programming is such an interesting subject and I’m sure I’ve unearthed something that will keep me busy for quite some time but like all things programming don't ever expect to be completed!
André Staltz has also been working on a very interesting project called Cycle.js which combines functional programming and RxJS! I’ve not fully investigated it yet but so far it was a blast to use and if you like React then this will be right up your street.
Finally we’ve reached the position I’m now in, maybe my passion helped me a lot when it came to learning so much in so little time but please don’t think all this information is set in stone, I regularly keep going back to subject I hit near the beginning of the course and I try to do more and more github repos. But I’ve only just recently come into an actual working environment so this is where my knowledge is really getting tested and I’m sure I will trip up a load but I’m prepared to learn from my failures as well as my peers and continue on my mission.
“It has been mentioned that I failed to mention testing and TDD
Testing is really important part when you start to code bigger applications or join a team. I was lacking in this area and since having joined a team I’ve spent a lot of time trying to learn testing/tdd/bdd in JavaScript. I really want to get into TDD but it is going to have to be a long term thing as you only get to reap the benefits when used constantly. Hopefully soon!
5 questions every unit test must answer
Thank you for getting this far and to @deadlyhifi for the proof reading.
Good luck on your journey and I hope this has been an aid.
