Using Browserify to Build a Customizable Javascript Object

The Synopsis

One of my clients who is in the lead generation business often asks to clone forms to test different variations. The variations can vary from style updates to functionality updates. I tend to just make all forms self contained within their directory and this would include all the assets like images, css and javascript. Here we will be talking about the javascript that controls the sign up process. The javascript for this process is pretty simple and each form behaves the same. Below is a stripped down object literal of what I use in these forms. I want to be able to build this object literal and extend it with new methods per form variation.

The Up and Running

I used browserify to build out the object literal.  Have a look at their install page to get up and running. Browserify uses Node.js require method and this is what we will leverage.

The How

Here we have a file called formLogicObj.js that will be run through browserify to build out the object. As you can see we are require-ing four modules into these four properties.

Now we need to require file formLogicObj.js  and assign the exported function to a variable for reference. For the purpose of this demo we will create formLogic.js in the same root directory formLogicObj.js resides.

Running browserify on the CLI.

If everything is successful you should now see a new file in js/bundle.js. This is the file browserify generates when it runs formLogic.js.  


Extending formLogicObj.js with new methods.  Below is the updated module.

Now  let’s say you have a new form created in another directory say /forms/variation/001. In this directory it would contain your cloned form with assets and along with a formLogic.js in the root. formLogic.js in this case would look different compared to the version above. This version would reference the default formLogicObj.js (the updated version above) and then pass in any new methods it needs to require. Below is what it would look like.

Notice that we are passing in object as the first parameter and an array as the second. The object is where we will create a new property and the value will require our newMethod.js. For the array you need to pass in the name of the new property.

Now, create a new method in /myModules and call it newMethod.js

If you run our new formLogic.js through browserify you should now our new methods being bundled with the default methods,

Using SQLite.swift To Save Data

Simple example using SQLite.swift. Follow the link to their git repository for more information and further documentation. I went this route for a current project, mainly to use sqlite. I would normally opt for since it now has good swift support.



CJ Deep Linking with Google Analytics Outbound Link Tracking

One of our projects we use commission junction for our affiliate tracking. We also wanted to be able to track these in google analytics. The issue was that CJ dynamically appends data to the outbound url once you click it. In order for GA to be able to intercept that and fire an event we had to implement the code below.  Not the best but it does the job.


© 2015 Aldo Lugo

Theme by Anders NorenUp ↑