Resources for Better Javascript
I've been developing in Java for a few years now. Through experience and studies, I've had a feel for how to work best with it. A few months ago, I've been moved to a new team and part of my day-to-day work now includes maintaining a web application built in Javascript (JS). I'm not an expert Javascript developer yet but I can already tell that our codebase needs work. Different projects and their timelines and vastly different people working on an app can take it's toll on it. Without the original developers and without a Javascript or front-end expert within reach, I've been put into a situation where I've become the go-to frontend developer. In this situation, I have to turn into an expert.
Learning Resources
With that, this is aimed to be an evolving post (constantly updated) sharing good resources on becoming a better Javascript developer. That includes learning how it works, what to use, and learn how to efficiently use it. The items below are arranged by topic.
Event-Driven Style
If you're coming from another language, this one might seem strangest or hard to get used to. Javascript is event-driven meaning it's in the background waiting for something to happen. It's quite different from others like Java where it receives a call to do something, it does it and then dies. The video below explains it quite well.
Youtube Video by LearnCode.academy
Higher Order Functions (HOF)
In mathematics and computer science, a higher-order function (also functional form, functional or functor) is a function that does at least one of the following: (1) takes one or more functions as an input (2) outputs a function -Wikipedia
This is used everywhere in JS. It's important to wrap your head around this. The video below explains it concisely while the book will give you much more reason and history.
Youtube Video by mpjme |Eloquent Javascript: Chapter 5 | Youtube video by LearnCode.academy
Closures
In a quick summary, closures discuss the variables and whether they are in scope (accessible) or not. For beginning programmers or if your language of choice doesn't have something similar, it's a good video to go over. This is interestingly enough an easy topic to grasp but useful to remember when working with Javascript.
Youtube (via mpjme)
Factories
Factories are functions that create objects. Sounds a little bit similar to classes, doesn't it? That's what some of the tutorials linked below discusses. It deals with what is factories and why you would choose one over the other.
Youtube (via mpjme)
Promises
Promises are native in ECMAScript 6 (new version of JS) but are already quite popular via third party libraries or frameworks. Promises are quite prominent if you use AngularJS. In a nutshell, a promise is a piece of code that can run after another function has finished. Say you have a function that checks the weather (as is explained better in the first article linked below), once that completes, you can choose to run function A if the weather is sunny, function B if the weather is cloudy or function C if we couldn't get the weather. This becomes extremely useful in handling web service calls. You can trigger success/failure logic depending on the result of the promise.
Note: ECMA6 isn't widely implemented in browsers as of writing.
Links: Angular JS Promises explained via a Cartoon | Promises on ECMA6 via mpjme | Promises on ECMA6 via Kyle Robinson Younge | Promise (via nsync) | Promises (via bsb)
Filter, Map and Arrow Function
I'm cheating here a little bit by coupling these three but they have some similarities.
Filters are HOF that take in a function or does a callback expecting the result as true or false and saves the values into a new array. It would, you guessed it, filter the given input. It's useful for let's say taking all the people under age 25 in an array of people. Note that an AngularJS Filter would be a totally different thing.
Filters (via mpjme)
Maps, on the other hand, are HOF that take in a function (expecting an object) and returns a new array based on those objects. What? It's simpler than it sounds. Take a list of students. We have a function that would take a grade. We pass this to map and we get back all the grades.
Maps (via mpjme)
Arrow Function. This is really cool. So if you're now doing HOF and doing all sorts of callback, you notice that it's ugly to always have function and return again and again. With arrow function, we just use an arrow or => to represent this.
//old way
var grades = students.map(function(student){
return student.grade;
})
//arrow function
var grades = students.map((student) => student.grade)
For simple functions, this looks really really nice and succinct. There's a catch though! This is only available in ECMAScript6. In a nutshell, the latest version of Javascript. It will take a little bit of time for it to be implemented. If you're supporting legacy apps like IE8 then just forget you read this section.
Arrow Function (via mpjme)
Shadow DOM
Besides ECMAScript 6, one of the things people are excited about in terms of upcoming features is Shadow DOM. Shadow DOM refers to adding elements to an object and encapsulating it. Think about embedding a video without having to specifically add buttons for play, pause, etc.Still... What the heck is Shadow DOM? The post linked below is titled exactly that. Although it was written in 2011, it's still a good read in trying to grasp your head around the concept. If video is more your thing, check out the embedded video which also does a great job explaining Shadow DOM.
What the Heck is Shadow DOM? | Shadow DOM W3 Spec | More Details and Sample Code
General Tips and Tricks
This section links more of techniques, things to look out for, weird behaviour and the likes.
Gotcha's in Javascript
General Info
ECMAScript 6: The newest version of Javascript. This post and this one are great references to all the new features. In general, I like all the new features that would make it easier to develop and maintain large web apps. Since we use JS in browsers, the browser has to obviously support it. Expect Chrome, Firefox, Edge to probably support it soon. Check out If you want this and are still supporting legacy browsers such as IE8, well...
ECMA 5/6 Compatibility Table: Thinking of using those new ECMA 6 features? Wondering why some Javascript API not working in that obsolete browser you're paid have to support? Check out this handy table for ECMA 6 support as well as ECMA 5. Don't forget to hit the checkbox named show obsolete platforms.
Best Practices
Below are list of links where you can read about best practices around the industry.
Post History
Ver 0.1: Contains Higher Order Functions and General Tips and Tricks
Ver 0.2: Added Filter, Map and Arrow. You'll notice I'm going through a JS youtube playlist.
Ver 0.3: Added General info wth ECMA 5/6 info.
Ver 0.4: Added Closures and Promises, some stock photos from Getty to make it look more professional :D
Ver 0.5: Added Shadow DOM
Ver 0.6: Added Factories
Ver 0.7: Added links to Best Practices
Feedback
Send me an email: krisviceral [at] gmail [dot] com