UI Frameworks (2006-2016)

Marketo Retrospective Part 4
As part of a series, I am doing retrospective lessons from my 9 years at Marketo. I learned alot of things and this is my way of processing all of that experience into bite-sized nuggets of wisdom. Today, a little deep dive into how the client-side technology has evolved.

UI Frameworks
In 2006, I was introduced to jQuery and it changed my whole outlook on web development. When I joined Marketo at the end of that year, I was looking for something LIKE jQuery, but specifically designed for enterprise applications. What I found was YUI-Ext by Jack Slocom. At the time, Yahoo had something called YUI (Yahoo User Interface) which could be used to make applications. However, Jack (a programming genius) realized that there were no common components like drop down boxes, tables and trees. He built the components as an open source project called YUI-Ext (extensions).

Marketo’s first UI was built in YUI-Ext 0.33 Alpha. It was early days for sure and the code had plenty of problems. However, the time it would have taken to rebuild all of that functionality would have been enormous. As a designer, I was able to make a very rich interface without the huge investment of time. Here is a picture of one of the first screens of Marketo. (Interesting review of that 2007 app)

Notice how hokey it looks. Eloqua used to call us PlaySkool. Even our logo was not super deluxe.

However, building out tabs and trees and layout was SO easy compared to making everything by hand. In 2009-2009, we updated the UI and we took the opportunity to upgrade the UI Framework. Jack Slocum turned his YUI-Ext into a company called ExtJS and dropped the dependency on Yahoo. We skipped version 1.0 and upgraded immediately to 2.0. It was a 9 month project, but when it was done, the UI was faster and sleeker.

We used to name all of our releases after elements in the periodic table like Hydrogen and Helium. This was the Carbon user interface. It was a great year for Marketo. The UI was new and easy to work with. We started to grow rapidly and make lots of sales. The UI framework, again, was a key ingredient in build a next generation interface without spending insane time on it.

Eventually ExtJS renamed themselves to be Sencha and the product was called ExtJS. The Marketo interface got more and more complicated. Elsewhere in the world, new frameworks were being introduced like Angular. Sencha has a few releases that were not excellent and were not easy to upgrade. 3.0, 4.0 and 5.0 were progressively harder and harder to manage. Eventually, the engineering team gave up and we were stuck in an old UI framework that we couldn’t upgrade.

This huge benefit had turned (after 7 years) into a huge liability. Creating new features became very difficult. The larger team struggled to learn the system that had grown to be gigantic. Think of all the things Marketo does. There is programming for all of it. It’s alot.

I wanted to upgrade the system, plus the UI was starting to look old. The cool skeuomorphism of the past had been replaced with the flat Apple look of the present. Rather than upgrade the framework, we just upgraded the CSS styling. In the spirit of the elements, I called that the Cobalt user interface.

Notice the flat look, no gradients, no rounded corners. I didn’t love this look, but I did my best with it at the time. The worst part was not upgrading the framework. I set myself on a journey to try and upgrade the framework. The reason was that recruiting had become difficult. No one worth their salt in Silicon Valley wanted to work on 5 year old technology. Also, the slowness of the interaction along with the slow pace of development made creating new features intolerable. The roadmap slowed to a crawl and routinely UX goodness was cut from scope.

Finally, the decision to bite the bullet and change the whole UI framework was made. This is a huge decision for any company to make. Currently, in 2016, the framework of choice is React and Redux. This framework is the coolest shit of the year. It makes development a breeze. At Marketo, changing the UI also required changing all of the internal APIs away from PHP towards something more powerful like Java. This is a particularly huge process, but it is unavoidable if you want to move forward.

The newest UI was named after the element Mercury. It was my last project and I left as it was beginning engineering. Since I left, the look has apparently changed significantly. I don’t know what it will look like. I have have my old designs of it from last year, but it will be surprise to me when I see it. My design used some patterns pioneered at Slack and also used at Salesforce Lightning.

Looking into my crystal ball…React and Redux will be replaced with other technologies and become old and crusty. It’s a never-ending cycle. There is infinite desire for speed and flexibility.

Well, that was a longer blog post than I anticipated. If you made it this far, you get a cookie. (Go get yourself a cookie and say “this is for the blog post”.) I hope you liked it. (The post….and the cookie).

UPDATE
I forgot to mention, with React and Redux, you can use this awesome component library that works like Google Material design.

2 thoughts on “UI Frameworks (2006-2016)”

  1. Did you just say it looked “hokey”? LOL, if I recall, a lot of hard work went into that fresh visual design 😉 I remember the talk about that logo… “we need it to be web 2.0, man”. Good times, I do recall.

    In all seriousness, it’s awesome to see the progression and hear you talk through it. Nice!

Leave a Reply