What can JavaScript bring to the WordPress feast?

JavaScript is, by the way, the uncle of ActionScript, a programming language used to create Flash applications. Their syntax was cloned, so developers who had an experience in JavaScript were free to use their knowledge in creating, then popular, “rich” applications. Their similarities are due to the family they belong to – the ECMA standard. The development of the ECMA standard is closely linked to the development of JavaScript, and even Santa Barbara would be ashamed of the plots played out in the ECMA family. The details are, conveniently for the curious ones, available at Stackoverlfow!

Of course, history has repeated itself, but with the big boys this time – in 2014, Apple released the Swift programming language, which follows selected JS paradigms and ECMA standards. Simply put, if you’ve been developing in JavaScript for a long time, you can relatively easily switch to Swift and start writing native iOS apps, and with NodeJS, it’s almost the entire digital ecosystem – server, web and native!

It was only a matter of time before JavaScript would infect even the most popular web platform, WordPress. Matt Mullenweg is responsible for starting it all with his speech “State of the WordPresss” (2015). During this talk, he thoughtfully asserted that JavaScript is the future of WordPress (that part starts around 45:40 and lasts until 51:52).

This evolutionary event was a continuation of already well-established behind-the-scenes topics – jQuery is in WordPress since version 2.2.0, Underscores and BackboneJS is a standard part of the WP core since version 3.4.1 (2012), and Andrew Nacin even before Matt Mullenweg hinted the wave of change…

I think [WordPress 3.5] actually signifies a shift from PHP land to JavaScript land for pretty much everything we’re going to do in the future

WP 3.5 Lead Developer Andrew Nacin, on WPCandy, Feb 4 2013

There are a lot of stories about JavaScript in WordPress right now, and the first two articles in this series have a more extensive introduction to the whole topic (with reference to #WCEU and #WCNYC). It also spread to WordCamp Split #WCHR – Noel Tock spoke about his previous experience in creating modern WP applications, and Tomislav Ljeljak showed realistic implementations of the REST API and ajax calls. Read the full review of WordCamp Split on the extensive blog (author: Ivan Blagdan), and check out the experience gallery (and share <3) on Neuralab’s blog.

There are many such articles and conferences on the subject, and for good reason…We no longer have obstacles in loading complex 3D models, live-stream videos, layered navigation or animated-interactive presentations of content. For example, the second article in the series describes how you are free to create a 3D web game that has the WordPress REST API as a backend.

See the Pen Chill the lion by Karim Maaloul (@Yakudoo) on CodePen.

JavaScript is loved by the King of the Jungle, so why shouldn’t your users enjoy it too?

But it’s not easy to open Pandora’s JavaScript box and switch PHP themes to full-blooded JavaScript WordPress applications. Browser freezes, fuzzy interactions, and complicated interfaces have shown that we still have a lot to learn. Four main problems are present, and the WP community suggests certain tricks and tips:

1. Colorful world of JavaScript

React, Redux, Backbone, Underscores, Angular, Ember… The endless colorful fields of JavaScript at times become hallucinogenic. It is difficult to decide on any of the JS frameworks, and when you decide, each has its own way of developing, documenting and maintaining applications.

By the way, Javascript fatigue has been present in the industry for a long time, and the following tricks will make your daily front-end life easier:

• Start with BackBone – the framework is already included in the WP core itself and the entire media library has been created with it.
• When you decide on a framework, give it a chance and master it well. In general, you can create all kinds of applications with Angular, Backbone, and React.

• Read Adam White’s great presentation and video on Backbone programming for WordPress.

2. Designers of more interactive media

Web designers have plenty of tools to choose from – Sketch, PS, AI and now the new xD. In addition, Invision, Marvell, Framer, Figma, Canva, Muse… New creatives are expected to also master HTML / CSS / JS and to educate clients, developers and project owners. Truly demanding times (and very similar to the JS world of developers from point 1). A plethora of tools and new techniques leads to the accumulation of functions, animations and general chaos among interactive solutions, breaking probably all the rules of Dieter Rams.

Modern WP web design is complicated and immature, but the WordPress community has some tips for creating an interactive experience:

• In animations and interactivity, less is more.

• Create little by little and build on elaborate design foundations.

• Details, details, details! If the animation takes you a second too long, you won’t have a good user experience. If the UI element does not have a fast response, the user may not perceive the next required interactivity. Pay attention to the details!

• Communication with developers must be constant, rich and present from the beginning to the end of the project. Use the various formats and types of meetings from the Atlassian PlayBook (more under point 3).

• Educate the client to properly enter content, photos, embedded or video material through CMS.

• Use Invision & framerJS to build a prototype.

• Important: Design a fallback solution for users who do not have JavaScript enabled.

3. Tense backend

AJAX calls to the database can clog even the strongest portals. Take WooCommerce as an example – one Add to cart action makes about 40 updates to the database. If you have multiple widgets, menus and content sections on one interface, each of them will request content from the database and load the entire backend.

A few tips and tools around creating a JavaScript WP theme:

• Explore the REST API backend with the helper plugin.

• Existing tools within Chrome developer tools are great for JS analysis.

• The Postman API tester is ideal for analyzing WP REST API calls.

• Create a Trade-Off workshop with a client and designers. It will allow you to eliminate unnecessary technical complications. Also, such a workshop is a chance for you to suggest technically better solutions, those that are “easier” on the backend and database.

• Sparing session is also a useful type of workshop where you can go through alternative loading solutions of the entire JS interface with the designer.

4. RESTful clients

The first three points are related to your knowledge and the team you work with. Clients and web application owners are a different breed, and the benefits of JavaScript on the WordPress ecosystem are not their least concern. What interests them is the end user, product conversion, readability (or online shopping experience) but you already know that for sure. 🙂

Explain the advantages of the new modern web application in these fields:

• Involve the client (as soon as possible) in the website design project (work with them on the information architecture and content units). A standard kick-off meeting is crucial, but continuous collaboration will be the key to project success – Goals, signals and measures workshops help with such scenarios.

• Educate clients on content entry and how WP administration works. Immediately after the start of the project, get familiar with all the necessary actions for maintaining the JS WP application.

• Next to point 2… prototype often and early. Invision is a great tool in such scenarios where it is necessary for the client to leave realistic feedback on the desired solution.

These four points are not the only challenges in producing interactive JavaScript applications. The concepts of their elaboration are quite young and unfamiliar. Use this to experiment, test and refine your own processes. There is a lot of potential, as well as unexplored areas, but the direction of the open browser web is clear and unstoppable, especially in the WordPress community!