Beginning UI Design

Posted in: Blog, Development, Technology, UI on December 17, 2009

And now another word from the developer side of the house:

With many years of experience in the Microsoft static development world with all their fancy programs and business models I have found it quite difficult to make the initial pivot into the dynamic world of Python and Javascript. That being said, it has been quite exciting to not have everything handed to you on a silver platter. This post describes the initial design and structure of the code behind a flexible UI.

Javascript

In the Javascript world, one of the big points I keep hearing is that Javascript needs to be written from the prototypical mindset. As I have learned in past experiences, it almost always less of a headache to not fight the design of the paradigm but instead learn it’s intricacies and use it to your advantage. Hence, I have slowly learned how to incorporate duck typing to accommodate a style of coding that enables other developers to plug-in to the same objects being passed around and extend the current system.

With this belief in mind, I have come to a point where I believe the best course of action is to use a classic OOP design. The hardest part of implementing inheritance is that I constantly wonder if there is a way to be just as efficient in the dynamic/prototype paradigm. For most developers this is quite hard to put aside due to curiosity and performance improvements but my first lesson of operating in a startup, has been to focus on glaring, rather than possible problems. A difficult task but there are more interesting problems to solve at this point.

Events and State

One of my favorite parts of Javascript and Python is the ability to pass functions around as variables. Growing up in the Microsoft world, this was quite difficult to do with type restrictions on delegates. It was still possible but not nearly as easy. (It will be much easier with their upcoming dynamic keyword.) Seeing as how we need a way to link the state of a control to a particular action which occurs on the page (not necessarily attached to the state of the dom), I needed a way to call multiple functions when one action occurred. Basically, I needed Javascript to support event-driven design.

At this point all the event manager does is use an associative array to store function signatures in an array and then sequentially call those functions when the event is raised.


var onrender1 = function() { alert('Render receiver 1'); }
var onrender2 = function() { alert('Render receiver 2'); }
var manager = {
events: {},
    trigger: function(event) {
        for(e in this.events[event]) { this.events[event][e](); }
    }
}
manager.events.rendered = [onrender1];
manager.events.rendered.push(onrender2);
manager.trigger('rendered');
// Render receiver 1
// Render receiver 2
 
Download [zip]


Finally, the manager could be designed as a class to enable instances and attached to objects, allowing objects to enable events using duck typing if necessary.

This is only a basic implementation but works for are requirements quite well. It might be better to implement in the prototype model at a later time…but that’s for another time.

The entire purpose of enabling events is to call functions as soon as something happens This is extremely important when there are multiple controls/components whose visual state depends on a particular action (user initiated or not). A model similar to this is the UI state manager in Silverlight which handles events as well as supports dynamic transitions.

Personally, this is an exciting and interesting beginning to the UI development cycle.

- Collin

How to Succeed In A Startup

Posted in: Blog, Startups on December 3, 2009

While this blog discusses the elements that have helped me succeed in a startup environment it could just as easily be titled “Suggestions for success as a recent graduate” as it’s good advice for anyone entering a new field.  These points have also been written with a slant towards those in the software development world, my own area of expertise.

Find A Mentor:

Your first job is one of the greatest learning opportunities of your life and you should be prepared to make the most of it. When you find someone to learn from, everyone wins. It gives the mentor a sense of fulfillment and provides you with the chance to continue your education in a less formal environment. Try to learn from the design patterns that they use, how they leverage different technologies and the organizational patterns they follow in their code. This does not mean you should duplicate them exactly, but if they have been at the software development game for a while, there’s a good chance they know what they’re doing.

Require Transparency:

Young or old, startup or massive corporation, by accepting employment at any company you are trusting your livelihood with those who are employing you. They should respect this trust by keeping you informed of the financial status of the company as well as any uncertainty regarding your employment. Anything less shows a lack of respect for employees and poor character on the part of those employing you.

Take Ownership Of Your Product:

Your first software development position affords you the opportunity to establish a reputation as a quality coder and employee which will follow you for the rest of your career. Make the most of it! This is your code, your product, your culture, your time to shine. Particularly if you are fortunate enough to be on the ground floor of development, you have the opportunity to cement yourself as the “go to” engineer.

The benefits reach beyond your reputation as a software engineer and into the areas of job security, respect and success.
These are all simply points that I have picked up in my own short time as a software engineer. If you have any to add to the list, please, comment!

–Ben