Modern Javascript Series

Javascript is moving at a super fast pace right now. For a WordPress developer, this can feel daunting. Considering that at the 2015 State of The Word, Matt Mullenweg explicitly stated that Javascript and API driven interfaces are the future of WordPress it is important to stay on top of things. It is no longer enough to simply use jQuery and call it a day. There are lots of new tools and libraries out there that can help you write Javascript that scales well for applications of all sizes. What are the essential skills that one should be armed with in order to survive and thrive in this world of modern javascript development? I will attempt to answer this question in the upcoming series of “Modern Javascript” posts.

Modern Javascript

Below is an overview of some of the more important concepts that will be covered.

Task Runners

The main purpose of a task runner is to automate redundant tasks such as minifying Javascript files or compiling SASS. There are two major players: Gulp and Grunt.

In one word: automation. The less work you have to do when performing repetitive tasks like minification, compilation, unit testing, linting, etc, the easier your job becomes.


Package Managers

Just like PHP has Composer and Ruby has RubyGems Javascript now has a package manager. Actually in the Javascript world there are two major ones: NPM and Bower. Modern Javascript is going to require many libraries, so making use of these two package managers is essential.

Front End Frameworks

Anybody who has written some kind of Javascript knows how quickly it can get out of control. The Modern Javascript developer would normally use a framework such as AngularJS, ReactJs, or Ember. These frameworks, are absolutely essential in writing cleaner and more scalable javascript applications.

Module Loaders

In the old days of Javascript, to include a Javascript file, you’d simply need to use script tag to add a new script. However, modern Javascript often requires many files that may be dependent upon each other. Including each of these files manually in script tags would just be redundant. Module loaders can bundle scripts together in one file that can then be included on the page. Some of the more popular module loaders are Browserify, RequireJS, and Webpack.

Unit Testing

Unit testing isn’t something that is exclusive to Javascript. This practice is basically the act of writing automated tests of our code to make sure everything is behaving as it should. In order to write unit tests properly, it is important to write our code in such a way that our code can actually be tested. This is a post within itself. Just as important, it also requires that we have some sort of unit testing framework. There are many options available out there.

Templating Engines

I’ve talked extensively about the importance of templating engines in a previous post and WordCamp talk. Templating engines enforce separation of concerns, which is something that is easy to overlook when writing vanilla Javascript.

Essential design patterns

Javascript can be a quirky language. Design Patterns from other languages still apply, but there are some patterns that are more widely used in Javascript such as the module pattern, the revealing module pattern and the observer pattern among others.

Object Oriented Programming/Prototyping

Javascript has a different OOP model then most other language such as php. It uses something called prototype based programming.

Prototype-based programming is an OOP model that doesn’t use classes, but rather it first accomplishes the behavior of any class and then reuses it (equivalent to inheritance in class-based languages) by decorating (or expanding upon) existing prototype objects. (Also called classless, prototype-oriented, or instance-based programming.)

MEAN Stack

The MEAN stack is a stack that is Javascript from top to bottom. Whereas in LAMP, we have Linux, Apache, MySql and Php, MEAN is MongoDb, ExpressJs, AngularJS and NodeJs. While some say that MEAN is the next big thing, it doesn’t appear that LAMP is going to disappear anytime soon. That being said, MEAN also seems like its here to stay and will play a vital role in the Web over the next decade.

Further Reading

Difference Between NPM and Bower
Gulp Vs Grunt
4 Javascript Design Patterns You Should Know
Mastering the Module Pattern
Choosing a Front End Framework
Introduction to Object Oriented Javascript
The MEAN Stack