Skip to main content

Front-End Software Design Goals

Modern web applications follow most performance guidelines from Yahoo! Exceptional Performance but in this blog post, I'll explain some of the software engineering design goals of Mojo's dependency management for asynchronous UI controllers in achieving performance, maintainability, and ease of use. In addition to this, I'd like to highlight that there are many libraries that are CommonJS AMD compliant, such as, Dojo's Backdraft Loader, RequireJS, and Curl.js -- Mojo's dependency management is inspired by these libraries but I specifically wrote Mojo's Mapper to make it easier for platforms  it specific to its domain.

Primary Design Goals for Front-End Microframework (Mojo)

  • Should be backend-end agnostic
  • Should understand DOM fractures / feature gating
    • On the platforms I work on, we have the capability to enable/disable certain features in real-time or even rollout features to a specific subset of users at any point in time without requiring additional deployments. Inspired by James Golick's Rollout library.
  • Should understand when a specific dependency isn't in the DOM and automatically fetch it by resource name
  • Should understand where dependencies are (CDN, Blob Storage, Relative)
  • Should enforce implementation silos to reduce "too many cooks in teh kitchen" situations on distributed teams
  • Should enforce message passing as a way of communicating between controllers instead of directly invoking commands (remember: controllers are asynchronously loaded).

Mojo Mapping HTML Elements to Controllers
In the above example, we can find ourselves easily mapping HTML elements that are present in the current state of the DOM to Controllers using JavaScript:

In this case, if one of the software engineers or product managers were to disable the Registration feature on the platform, Mojo's Mapper will detect the DOM change (notice that Registration isn't there) and will not try to inject Registration Controller. This is easier for any platform as we can ensure there won't be any JavaScript errors being thrown at a user.

Commonly, we try to take a proactive layering approach to rolling out features to customers -- sometimes deploying 10-20 times per day. This means, automated tests on the UI and the backend, as well as, Mojo's approach to only execute JavaScript (within a controller) when a particular feature is enabled.

Final Thoughts

Building a front-end that bakes in publish/subscribe, implementation silos, dependency management is just as important as writing web services that scale effectively on the Cloud. On any platform, an intelligently engineered front-end that can synergize with your platform's performance initiatives and feature gating mechanisms -- making it even more valuable as you deploy features continuously to your customers.

Good luck and have fun,
Jaime Bueza

Jaime Bueza is a software engineer in Vancouver, British Columbia, Canada. He has developed web applications for Nintendo, Starbucks, Bacardi, Nike, Electronic Arts, Ritchie Brothers, Kiwi Collections, Cox Communications and Microsoft. When he's not developing useful software that constantly evolves with business requirements, he's writing open source software and helping developers in the Windows Azure NodeJS community.


Popular posts from this blog

TextMate Tutorial: How to add a Strikethrough keybind to your Markdown bundle

Markdown is awesome for quickly generating Readme's on Github. After looking at other projects using the strike tag, I've decided to create a custom keybind for it in my TextMate Markdown bundle. Here's how:

1) Click the + sign on the bottom left and click New Command.
2) Paste this into the editbox and make sure you name your command "Strikethrough".

For the input field, select WORD in the drop down.
For the output field, select "insert as snippet".
As for the keybind, you can totally map it to whatever you're comfortable with but I chose Command-D as it is the same thing in Microsoft Word.


World of Warcraft Ninjalist addon: version 0.1 coming along quite nicely

After toying around with more GUI related issues in World of Warcraft's API, I've decided to take a totally different direction. Originally when I architected this addon, I knew in my mind it would be a super simple Console application that a user could easily paste in a name and add it to the database; however, why stop there?

After discovering AceGUI, I can easily start developing UI components in no time! As of right now, I've got it saving data in between game sessions--the interesting part will come when I'll have to develop the web service that will parse the SavedVariable.lua, eliminate duplicate entries, as well as, do a huge merge between their copy and whats on the server's (per realm basis of course).

Here's a screen shot of the responses when adding new Ninjas to your list:
When a user clicks add after entering a name in the textbox, it'll go ahead and add that person to the ninjalist tagging the user's realm and current date/time. Someday, I…

Plenty of Fish - Lessons Learned Meetup

Today, I had the fantastic opportunity of going to a retrospective by Plenty of Fish. As you may know, Plenty of Fish is the largest online dating site and it was all started by a local BCIT graduate named Markus Frind.

Below are notes that were taken on my iPhone. I do apologize as I am continually editing this blogpost.

What is Plenty of Fish? An online dating site.
Why enter the dating market? Back in 2003, it was the only thing that was interesting to build. Markus already knew ASP but wanted to learn more about building web applications with ASP.NET and improve his skills on his resume. 
How do you deal with the network effects problem? In the early days, Plenty of Fish gained traction through Vancouver and Toronto.  There wasn't any silver bullet or magic around it -- Plenty of Fish heavily relied on organic user growth and SEO. The focus was to retain users more than go out and acquire new ones.
What are some early challenges you faced? Markus actually ended up doing every…