Like many WordPress developers, I started learning JavaScript before I really even knew what JavaScript was.  By “learning JavaScript,” I mean that I Googled how to make dynamic changes to the CSS on my page, discovered that jQuery was the option, and later found out that jQuery was a JavaScript library, and so on.

WordPress is a safe space from which we can explore the different technologies surrounding it to improve our sites and create more dynamic experiences for our users. This includes JavaScript.

In Matt Mullenweg’s State of the Word this year, which I was lucky enough to attend, he said in terms of user interaction, the future of the web will be API-driven JavaScript interfaces. WordPress.com recently finished a year and a half of iteration in their admin interface, which is now driven by a React-powered app, called Calypso.

WordPress.com recently finished a year and a half of iteration in their admin interface, which is now driven by a React-powered app, called Calypso.

The discussion around JavaScript-driven interfaces isn’t new, though. In 2012, Founder of Ghost, John O’Nolan, who was at the time leading the WordPress user interface team, suggested a more simple, blogger-focused WordPress rather than a CMS.  After becoming frustrated with WordPress’s more complex approach, O’Nolan left the WordPress project and founded Ghost. Ghost eschews PHP for Node.js on the server side while WordPress.com has maintained the traditional database layer we call WordPress.

Calypso is a good example of the type of JavaScript Single-Page Applications (SPAs) that sites will need moving forward as they attempt to meet the specific needs of their users.  I doubt there will be a universal API. I do, however, think that as WordPress developers we need to learn how to better build these types of applications. This is what excited me most about Mullenweg’s challenge to learn JavaScript, deeply.

I recently sat down with fellow Torque contributor Roy Sivan on The WP Crowd to discuss how to learn JavaScript as a WordPress developer.

You can hear our whole conversation by watching the video, but I want to share some thoughts from the discussion. Also, Carl Alexander, a writer that provides useful content to help improve PHP development skills, shared some thoughts on JavaScript with us after that the recording that were really useful.

What Framework Should You Learn?

Based on the way people talk about the WordPress REST API, it often seems like it is absolutely essential to learn a JavaScript MVC framework. While it may be helpful, it also limits perspective on learning the REST API or mastering JavaScript.

There are a lot of frameworks to choose from. Determining which one to learn is a difficult decision.

My personal answer is “AngularJS.” I have no interest in debating this. They are all just tools. Choose the one you are comfortable with and move on.

“What Framework Should I Learn” is also the wrong question to ask.

Learning a JavaScript MVC framework is a quick way to start building something. But it’s not going to give you a deep understanding of the language. In fact, it may actually prevent you from learning the language deeply.

Most WordPress developers are not used to the MVC pattern since WordPress doesn’t use it. And until you are exposed to it, it’s not easy to grasp. Learning that, plus JavaScript itself is a tall order. Personally, the first few times I looked at Angular it was way too confusing for me. Then I learned Symfony, which didn’t require any new PHP knowledge, but it did require me to grok the MVC pattern. Once I started to understand it, Angular came much easier to me.

jQuery, Angular, and Backbone are not useful when it comes to learning JavaScript. None of them will help you learn how object-oriented programming works in JavaScript. On the other hand, Roy and I have been working on a single page web application as a plugin admin screen for our automated A/B testing plugin

On the other hand, Roy and I have been working on a single page web application as a plugin admin screen for our automated A/B testing plugin Ingot. It would have been insane to write the whole thing in vanilla JavaScript when a few hundred lines of Angular could make it work.

Learning a framework provides tremendous value. It helps you get things done, become more familiar with the language, and gain a better understanding of how that type of coding works. Roy has a great series on building web applications with Angular and the WordPress REST API, which is a useful resource for those looking to learn these skills.

Start With What You Know (Or Don’t)

Roy suggested that you should start with what you know and go from there. When I chatted with Carl, he said that advice resonated with him and he went on to talk about coding a jQuery plugin to learn JavaScript:

“I can’t say coding the plugin in jQuery helped me understand JavaScript a lot better. I don’t have much personal insight around that (yet, anyhow). I know for me the complexity isn’t the syntax. It’s the DOM interactions, method overloading, binding to DOM elements, etc. That’s where it’s so different versus other languages.”

I think this speaks to the tension between practical learning and learning the language deeply. I know from personal experience. I used jQuery for a long time to manipulate the DOM, without realizing that all DOM elements were objects and attributes.

Most of the time, thanks to libraries like jQuery and frameworks like Angular, you can avoid learning what object really are and how they work. JavaScript Is Sexy, a site that features highly-regarded curriculum on JavaScript, published a post two years ago, called “OOP in JavaScript: What You Need to Know.” I recommend giving it a few reads.

Back end Vs. Front end

During the podcast and the follow-up conversation with Carl, I declared, as I often do, my preference for back-end work in PHP. Maybe it is because PHP was the second language, after English, that I became fluent in. Or, maybe it’s because back-end fits my skill set better.

Carl, who I think of as more of a back-end developer, stated that he “hates being labeled as one or the other.”

“This goes back to the scaling,” he said. “There’s a reason I push back on JavaScript and it’s not because I like back end better.”

Carl worries about the excitement around the new shiny JavaScript versus long-term stability. ”The exception is

“The exception is node, which I have no problem using and learning because it’s stable,” he said. “But I already know PHP better so there’s less use cases to use it.”

Node, as we discussed near the end of the video, is one of the first, if not the first, server-side JavaScript libraries. I have minimal experience with Node myself, but we all agreed it was a technology worth learning.

Where To Learn

The Internet is full of resources to help you learn JavaScript. Using JavaScript as a way to extend your skills outside of the WordPress bubble will help you improve as a web developer.

During the WPCrowd discussion, Roy recommended a few educational resources. Many were from Wes Bos — including his list of books for learning JS, his course React for Beginners, and his YouTube channel. In addition, Roy recommends The Frontend Masters beginner’s course.

I showed off my big old copy of JavaScript: The Definitive Guide, which I have only read a few chapters of, but comes in handy from time to time. Roy recommended JavaScript: The Good Parts as a smaller, more user-friendly alternative.

Roy’s website is also full of great information on using Angular and React with the WordPress REST API. His series on building an app with Angular and the WordPress REST API is a must-read.

Start With The Fundamentals

Learning a language deeply means learning the fundamentals. In JavaScript, at a minimum, this means understanding functions, scope, and closures. Before I wrap up, I’d like to challenge you, to take the time to learn or improve the depth of your knowledge on those three fundamental concepts.

You may not start building something as quickly as you would by learning React or Angular. You will, however, learn more about the languages you use every day in WordPress development. This will pay off big time when it comes time to fix something that doesn’t work on your site or to make something that isn’t currently possible with your chosen framework possible.

In PHP, we can choose to use functional programming or object-oriented programming. JavaScript is purely object-oriented. In JavaScript, functions create objects. Understanding that JavaScript is purely object-oriented, and what functions do, was the first step for me to go from writing JavaScript like it was functional PHP to doing it right.

Closures are a really useful convention of a language that gets used in JavaScript. They’re often underutilized by WordPress developers stuck in the 5.2-era. Two great, simple articles to help you think through closures in JavaScript are “Understand JavaScript Closures with Ease” and “A Graphical Explanation of Javascript Closures” by Ben Nadal.

To truly understand closures and how to work with them, you must first understand scope. Understanding the scope of events, variables, and objects in JavaScript can be a bit tricky. This Stackoverflow answer gives a very concise breakdown on variable scope.

In PHP, the variable always refers to the object it’s encapsulated in. In JavaScript, this is a little more complicated. The article “Understand JavaScript’s “this” with Clarity, and Master It” is a great resource for understanding this in different scopes and contexts.

As web developers, we mainly use JavaScript in the context of the DOM. This means that you have to understand the DOM as a structure of JavaScript objects in order to understand events and bindings. “Event Capturing and Bubbling in JavaScript” is a great article to help you visualize the DOM as a structure and understand its scope.

Go Forth And Learn, Deeply

You should learn a JavaScript MVC framework, but don’t let that be all you learn about JavaScript. The charge was to learn it deeply.I learned PHP quickly because WordPress helped me with the tricky parts. But until I started learning its fundamentals, I wasn’t particularly good at it. On a practical level, I was limited to what I could cobble together from common pre-built pieces. I wasn’t able to create anything unique.

I learned PHP quickly because WordPress helped me with the tricky parts. But until I started learning its fundamentals, I wasn’t particularly good at it. On a practical level, I was limited to what I could cobble together from common pre-built pieces. I wasn’t able to create anything unique.

If this is how you feel about JavaScript, then it’s time to go deeper. And I hope you will start by learning more about functions, closures, and scope. I know I have plenty more to learn.

If you’re just getting into JavaScript, do what it takes to balance the need to get things done with the need to learn the language deeply.

Josh is the owner and a developer for CalderaWP, makers of Caldera Forms, a different kind of form builder and URL builder, the visual editor for WordPress permalinks.

The post How To Learn JavaScript As A WordPress Developer appeared first on Torque.

Share This