From Designer to Developer

The enabling of the browser as a first-class container when building software solutions has led to a migration of business logic and complexity from the server to the browser.

If we go back only 5 years, most front-end applications where page oriented and the front-end developers dealt mostly with HTML, CSS, Images and a moderate amount of JavaScript that for the most part added a bit of visual candy to the pages.

Today, many applications has significantly more logic and complexity running in the browser than in the back-end server.

This is not necessarily an issue in all organizations, but many organizations are staffed with dedicated resources for the front-end and back-end development. A typical profile of the back-end developer is a software engineer with strong skills on design, algorithms, separation of concerns, etc. A typical profile of a front-end developer is someone with more of a design and graphics background.

After reviewing code, designs and architectures at a large number of projects around the world, it seems we may have a skills-gap among the front-end developers. I often see browser-hosted applications that lack even fundamental software engineering traits.

As more and more of the complexity of the applications move to the front-end, the front-end developers would benefit from obtaining the same traditional software skills commonly held by back-end developers.

Existing resources...

At first I thought I'd write up how to apply basic software skills using JavaScript, but after a bit of poking around on the internet, I found a set of great resources explaining exactly what I wanted to explain. Since some of my writing is going to assume that you know these basic skills, I'll simply point give you the references below.

If the list above is not sufficient for you to pick up the advantages with object-oriented JavaScript, please do another google search and I'm sure you'll find even better resources than the ones above.

If you came to JavaScript from a design background, I recommend that you get your head around the following concepts:

  • Separation of concerns.
    Try to break up your code into sections that have as little functional overlap as possible
  • Modularity.
    Separation of software into independent interchangeable modules.
  • Abstraction.
    Let your JavaScript objects (or classes) represent some kind of semantic while hiding its internal implementation.
  • Anticipation of change.
    Some parts of your software is likely to be modified as the software evolved. Separate it out, design your software so that modification of this section of software is easy.
  • Generality.
    Can you generalize the problem. Perhaps you can use one abstraction for more than one problem?
  • Incremental development.
    Build the software incrementally. Make a plan for how to get to the end result (incidentally, this is often something that designers know better than software engineers :))
  • Consistency
    Use a consistent coding style.

Google searches on these topics should also yield a set of results

What can I do for you?

What I plan to do is to write a set of articles on slightly more advanced topics. I'll assume that you know the basics from above. I'm not quite sure what to focus on first, but my current plan is to introduce you to the GoF design patterns and how we these may be applied to browser development.

No Comments Yet.

Leave a comment