Introducing Code Anatomy, an ongoing series of posts

Code Anatomy is a new series where you'll see how I build those critical little helper functions that make developing Forms 2.0 and FlowBoost scripts (as well as JavaScript code in general) more flexible and maintainable.

Many of these functions have equivalents in major JS frameworks (though the details are usually different). If you've read my Nation posts and CodePen demos, you've probably picked up that in the Marketo world I'm a no-framework guy. There are a few reasons for this.

First and foremost, when you're customizing embedded Marketo forms, it would be reckless to add a dependency on a framework, since a 3rd-party site may swap out frameworks at any time and they sure don't want you loading something heavy every time (and the attendant possibility of version conflicts). So if you want your forms code to work anywhere, it can't depend on a framework. The case is pretty much closed right there.

I do love functional libraries like Ramda and Lodash and use them for thicker projects, for what we typically do on a single LP — special form input behaviors, dynamic CSS styling, some document.location manipulation — they're overkill. Even if you're sure your code won't need to work on a non-Marketo LP, you still don't need a framework just to call a a few array utilities. (If you're doing Ajax stuff, that's a fine justification for including a lightweight lib, but such projects are rare.)

Going native

Of course, not leaning on a framework means you need to use (that is, learn and use, which is A Good Thing in my book) native JS & DOM functions.

For example, you'll use document.querySelector/querySelectorAll to find HTML elements, and you'll convert element collections to arrays using Array#slice instead of getting ready-made arrays back from the framework.

Being able to use these raw methods is key to working on many different client sites. I'm way more comfortable now being thrown into a “fix our forms ASAP” situation than years ago, when I'd say, “So, you guys okay with me adding MooTools?” (MooTools is a practically-defunct framework that I still love, but its demise helped me learn raw JavaScript.) It's great to be able to ignore whether jQuery/Moo/ReactJs/Sencha/etc. is loaded elsewhere on a page, instead honing in immediately on what needs to be done (which requires fluency in the Forms 2.0 API, a mini-framework in itself).

What's to come

The Code Anatomy posts (the first out today, alongside this intro) will cover tasks like converting list-like string fields to arrays, touching up Marketo forms with CSS classes to allow styling individual field rows, setting up simple translation maps using JS objects, and creating interdependent form checkboxes (think the infamous “Subscribe to all” checkbox). Hope you like 'em!