It starts out innocently enough; you need to hide a div in your plugin admin screen, so you go to Google and type something like: jQuery hide element. Then, you realize that you also need to change the text of one of your h3 tags when the user selects a specific option. You keep telling yourself that this is the last time, but you’ve already done it. You’ve created a big heaping mess of jQuery spaghetti. Your JS file is now hundreds of lines of code snippets that show and hide elements, change HTML text, swap out input values, and anything else that you need to make your plugin admin “dynamic.” We’ve all been there; there’s no shame in admitting it. In WordPress, often the JS that drives our interfaces is an after thought. I’ve cooked up jQuery spaghetti more times than I care to say.
In this session, I’ll share my experiences in converting a popular WordPress plugin, Ninja Forms, from a PHP/HTML plugin to a mostly JS application. We’ll talk about the tools and technologies that we’ve used to avoid the dreaded pasta of bad code, along with how we overcame some WordPress-specific challenges. We’ll cover how we to plan and build a data-driven user interaction, rather than a reactive, snippet-driven mess.