Tour de force

WooExpert Platinum WooCommerce partner - biggest elephant in the eCommerce room.
Mailchimp Partner Mailchimp partner - you know what’s the newest cutting edge customer experience solution? Great email subject!
Clutch logo Clutch - clients say we’re top dogs in eCommerce. Throw us that stick now.
WordPress Vip WordPress VIP - Enterprise hosting partner

What can JavaScript bring to the WordPress feast?

JavaScript is a wanted language. On the TIOBE ranking, it balances at the very top, and if you explore the depths of the web, it hides in the NodeJS corner where it talks unrelated to NoSQL databases. And Google embraced it like a skinny kid and developed it into a buffed AngularJS guy. Most importantly, front-end developers appreciate it, both as a de facto “web programming language”, but also as a taskrunner assistant name Gulp & Grunt …

Listen to this article
0.5x 0.75x 1x 1.25x 1.5x
batman robin explorer web

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.

do not stack

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.

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!
  • 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.

bboys cpu
Watch out for timed base calls, timers, and animation-dependent events.

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

  • 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.

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!

Krešimir Končić
Krešimir Končić Owner at Neuralab

Ex QBASIC developer that ventured into a web world in 2007. Leading a team of like-minded Open Source aficionados that love design, code and a pinch of BBQ. Currently writing a book that explains why ‘coding is the easier part’ of our field.

Subscribe to our quarterly newsletter

Please fill in this field.
Please thick this field to proceed.

Related blog posts