Beginner’s Guide to Learning JavaScript as a WordPress Developer

 This is a contribution by Sufyan bin Uzayr. 
If you have been following the happenings in the WordPress community for the past couple of months, you might already be aware of the rising importance of JavaScript.

First up, the WordPress.com desktop app, Calypso, departed from the standard PHP route and has been coded using JavaScript (something CodeinWP talked about recently). And if that was not enough, in his annual “State of the Word” address in December 2015, Matt Mullenweg kept it straight and simple:

Learn JavaScript, deeply.
Naturally, more and more WordPress developers are now turning towards JavaScript, and for all practical purposes, 2016 is going to be the year of JavaScript, at least from the perspective of WordPress developers.
https://twitter.com/WordCampUS/status/673276970977902593/
If you are an existing WordPress developer, how should you begin your journey with JavaScript? More importantly, what aspects of this diverse coding language should you care the most about? In this post, I will attempt to answer these questions.

Your beginner’s guide to learning JavaScript as a WordPress developer

Introducing JavaScript to WordPress developers

Once again, if you have been active in the WordPress community, you might have already familiarized yourself with the basics of JavaScript and as such, we probably do not need to remind ourselves that JavaScript is different from JAVA.

Now, moving on to another question: is JavaScript really that unknown for WordPress?

Not really.

In fact, even before WordPress 4.4, JavaScript has had a role in WordPress – the js folder within wp-includes and wp-admin stands for JavaScript, which has so far, been mostly employed in theme development. Thus, even though JS has been around in the world of WordPress for quite a while, now with the first half of REST API on board and applications such as Calypso, its role has risen manifolds.

Any WordPress developer starting off with JavaScript might feel confused, simply because JavaScript has a world of its own. For example, take up three very common terms that are associated with JS: jQuery, AngularJS and Node.js.

jQuery-AngularJS-Node.js

All of the three above entities, even though related to JavaScript, are totally different from each other. JQuery is a JavaScript library, whereas AngularJS is a JavaScript framework, and Node.js is a JavaScript runtime environment.

There are some coders who believe it is wiser to start off with plain vanilla JS, while others prefer relying on a framework or a library. And the talk doesn’t end there. If you decide to start with a JavaScript library, you will also have to learn about its add-ons or plugins (yes, there are plugins that extend the core functionality of libraries, much like libraries extend the core features of JavaScript).

Confused already? Read on!

Know the fundamentals

If you are really serious about your JavaScript skills, you must focus heavily on the fundamentals. This is especially important because as a WordPress developer, you must already be aware of PHP, and JS is different from PHP in various aspects.

Most PHP developers are accustomed to PHP’s functional approach, and while PHP does have a lot of object-oriented principles, it is, for the most part, a functional language. JavaScript, on the other hand, is a strictly object-oriented language. Mozilla Developer documentation talks about the OOP basics of JavaScript in detail.

Once you have mastered the fundamentals and basics of JavaScript, you can get started with frameworks.

Pick a JavaScript framework

Learning a JavaScript framework is vital if you wish to get started with building JS applications and projects as quick as possible. If you have had some experience with theme development in WordPress, you might already be familiar with HTML and CSS, and more importantly, you will be aware of the ease of coding that a good framework can bring to the table.

Experts and coders are divided when it comes to picking the perfect JavaScript framework for beginners. Personally, for users who are familiar with the MVC framework, such as concrete5 developers, I have always recommended AngularJS as the better choice.

Angular supports the MVC structure and is really easy to get started with. However, WordPress coders, at times, are not very familiar with the MVC structure and as such, React seems to be an easier and more apt option. Furthermore, since React uses just the View component, it is popular among designers as well.

There are other options as well, but for the most part, any journey in the world of JavaScript frameworks should begin with either React or AngularJS. I once wrote a comparative article about the two frameworks, and for greater details, you can find that article here.

Decide what you need

Much like any other skill, learning a new programming language is a matter of needs and requirements. After all, you are trying to learn JavaScript because you need it.

In JavaScript, libraries and frameworks are defined on the basis of your needs. For example, Node.js is ideal for folks who have to deal with server-side programming. Similarly, while React is a great choice for web development, it is lacking when it comes to mobile app development.

For WordPress developers, the needs can basically be split as backend or frontend.  If you are dealing with frontend development, frameworks such as AngularJS, React, or Backbone.js will suffice for your needs.  You can find a longer list with more options here.

angularjs

For  backend coders, however, especially ones who are already well-versed with PHP, Node.js is a skill worth acquiring. 

node.js

Where to learn

Thanks to the internet, there is no shortage of resources for anyone willing to learn something new, and JavaScript is no exception either. You can discuss your doubts at Stack Overflow, follow the tutorials at Udemy or Lynda.com, and of course, refer to the great literature produced by several WordPress blogs out there.

JavaScript is Sexy is a good resource for learning JavaScript, whether you are a beginner or an advanced learner. Unfortunately, this site has not been updated for quite a while, so you’ll need to proceed with caution. That said, certain threads such as OOP in JavaScript is still useful and relevant.

Codecademy’s JavaScript Track is quite popular among beginners, and you should give it a spin. Similarly, if you are keen on learning jQuery, Code School’s Try jQuery plan is a good pick.

For learning React, I have found React for Beginners to be the most well-planned and structured resource. Superhero.js is another amazing collection of resources and tutorials that you can learn from.

In terms of books, the options are plenty, and you can find some of the most useful and popular ones on this GitHub thread.

Editor’s note. There’s also something Ionut mentioned in our latest transparency report. I’m talking about Zac Gordon’s new site and course titled JavaScriptforWP.com.

Conclusion

As a WordPress developer, your journey towards learning JavaScript will, more or less, be identical to the way you began with PHP.

Practical knowledge of PHP is sufficient to tweak and get more out of WordPress and themes or plugins, but if you wish to seriously build something big, knowledge of PHP fundamentals is essential. Similarly, while mastering a framework in JavaScript will give you a quick start, you will also need to master the fundamentals of JS, in order to get the most out of it.

Have you started learning JavaScript? How has your experience been so far? Please share your views in the comments below.