Rebuilding Our Donation Checkout Page

This line popped into my head the other day when I was thinking about writing this article and about all of the different software products I use regularly. You see, even though I’m not irretrievably lacking in technical skills, software has often appeared like so much magic to me. I point at something, click the mouse, the man behind the curtain (or screen) does his thing, and boom, out spits the result I was looking for. It’s fantastic.

It was actually a while ago that I had this realization—the realization that even though I use software all the time, I never really think about any of the machinery operating behind the scenes. And frankly, that’s fine and also pretty normal I suspect. People expect things to work as advertised. You point, click, and go on your way. That’s what you’re paying for, and again, it’s fantastic.

But while there’s nothing wrong with only caring about the results of the application you are using, I’ve come to appreciate some of the hidden work that takes place behind the curtain. In fact, the longer that I’ve worked at StayClassy, the more intrigued I’ve become by this world that operates out of so many people’s view.

When I recently talked to one of our developers about a major project he was undertaking, I knew I had to write something about it. Why? Because even though it will benefit everyone using our platform, very few people will ever realize that anything has even changed…

Meet the Man Behind the Curtain

 
Image may be NSFW.
Clik here to view.
Meet David Fu.
 

David is our lead front-end software engineer and one of the many talented members of our development team. Together they are responsible for delivering the best software we possibly can to our clients and their constituents.

One of the major projects that David has recently taken on is overhauling all of our front-end code to make it more efficient (more on that shortly).

As one part of that massive project, David has taken apart the code for our existing checkout page and put it back together again from scratch. What follows is an interview I conducted with David about this piece of his effort, what it entails, and why it will benefit our clients. I’ve tried to make things as simple and non-technical as possible and to use images to help illustrate concepts.

So, let’s start with the basics, how can non-technical people understand what a webpage is “made of” so to speak?

DF: Well you can think of a web page as being made up of three basic parts. There’s HTML, CSS, and Javascript. Each is a different computer language that achieves different things.

HTML provides the framework and structure of a webpage; it’s a lot like the foundation and beams in a building. It’s the skeleton of the page. CSS is more like the interior decoration, the carpets, wall colors, paintings etc. CSS is used to manipulate the appearance of the page to the viewer, to make it visually appealing. I’m simplifying but that’s a basic way to think about it.

SC: What about JavaScript?

DF: Well, and again I’m simplifying, HTML and CSS just give you a way to present the page to the viewer, JavaScript lets you perform more dynamic tasks. It let’s you handle things that require logic. For example, if you wanted to validate a certain form field to make sure that the page viewer has filled it out properly, you can do that using JavaScript.

Image may be NSFW.
Clik here to view.

What does it mean when people say JavaScript is client side scripting? And why is that useful?

DF: That basically means that JavaScript code runs in the actual web browser. So when you are viewing a page through Firefox, Chrome, Internet Explorer, or whatever you use, the JavaScript on the page is being run by the browser. The alternative is to run code that contains that type of logic on the backend, via languages like php, ruby, python, java, etc.

Image may be NSFW.
Clik here to view.

This is really bad for user experience though. If you run things on the backend, then every time you want to change something on the page, like displaying a validation error, you would have to reload the entire page. JavaScript allows you to perform this logic in the browser so you don’t have to continually refresh the page, providing a more seamless experience for end users.

So why did you rebuild our checkout page from scratch? What was wrong with the old version?

DF: Well without going into too much technical detail, we were loading more JavaScript files than we really needed to be, which can slow load times. Probably the biggest issue though was that the code on the page was loaded synchronously and all of the JavaScript was stacked up front.

SC: And that means?

DF: That means that everything loaded in order, so if something upstream was loading slowly, everything else would have to wait. This could result in a white screen showing up for a while as the slow element worked on loading.

One of the biggest changes we made was switching to asynchronous loading. Now the elements that are ready to load do not have to wait on the ones that are moving more slowly. This speeds up the page load in an absolute sense and it also improves “perceived loading time.” In other words, instead of seeing a white screen for a second, the user will see the page render giving them the sense that everything is moving faster.

So on a practical level what’s different for clients now?

DF: Well the faster that checkout pages load, the better for our clients. People don’t have patience on the web. We expect things to load fast and if they don’t we leave. That’s why it’s especially critical to optimize for speed on a donation checkout page. The last thing we would want is for someone to bounce out of the process because it was taking too long.

You also told me that you implemented angular.js too, what’s that?

DF: Angular.js is a pretty new and revolutionary JavaScript framework made by the folks at Google, that allows you to improve code organization through modularity and improves the way you can render the UI.

SC: *Puzzled look* so basically it will help everything work even better now?

DF: Yeah, basically.

SC: Cool.

At this point in our conversation, I realized there would likely be diminishing returns moving forward, as I’d just about hit the wall of my technical knowledge. Like most other people, I will probably never really be able to understand all the different facets of what makes my favorite software programs run, but that doesn’t make it less interesting to me. Even the very modestly technically inclined among us can gain a deeper appreciation for the products they use everyday by trying to take a peak behind the curtain every once in a while.

Have an Idea for a Fundraising Campaign?

 
Image may be NSFW.
Clik here to view.

Photo Credit: stock.photos