Jun 11, 2009

Developing from UI

How does the usual development of the product starts in the Open Source community? Typically there are some wishes (requirements in the best case). Next coding starts. When the code is more or less ready, development of the UI starts. The UI reflects internal technical implementation. In particular, this is how TYPO3 was built and how many TYPO3 extensions are still built today.

Recently I decided to change my development practices completely. Earlier I followed the traditional way: PHP implementation first, UI last. Now I do the opposite: UI first, PHP next.

The interesting consequences of this methods are:

  • UI becomes more friendly to the user. This happens because the UI is not affected or limited by the underlying PHP implementation. User's satisfaction is a very important factor these days. Anyone can build the application these days. Those who can do it more friendly — win.
  • PHP implementation now serves the UI, not the opposite. It makes PHP code more structured because it becomes task–oriented. Also it speeds up the implementation time because I can develop task by task.

When the UI uses ExtJS, such development tactics become even more efficient. For example, for the rest application I completely created the UI part using static JSON files for the sample data. Now I implement PHP part for each UI part. I implement only what is necessary for the UI, not what could be necessary. Simple, fast and effective.


  1. I was just wondering about this. Thanks!

  2. Isn't that the old problem with Top-Down vs. Bottom-Up development. I don't think that it's so easy to distinguish whether the first or the second is better - in some situations the Top-Down way is better and some the Bottom-up way should be preferred it just depends. But I totally agree with you that UI Design shouln't be limited by technical things, therefore I'd say it's better to split UI-Design and development. Since developers aren't good at UI-design :D

  3. Steffen MüllerJune 12, 2009 at 10:36 PM

    Neither nor!

    UI is just a visual representation of content. Start with the content, with its structure, it's meaning to the user and to the author (the model). Then create the UI which makes content accessible to the user and the author (the view, first visual then programming aspects). After that, programming the logic is easy (the controller).

  4. Egbert van der HoutJune 12, 2009 at 10:47 PM

    We did the same last year while making an extension for a group of computernewbies. It worked great. We discussed everything with them while working with HTML/JSON based wireframes (we call this a 'click version') with nothing more than the look, no real logic nor real data. Building the PHP afterwards didn't cost much time after that. And making 'changes' to the 'application' was most times as easy as adding a CSS-property or changing some HTML. I can absolutely confirm it works great for small, single-use applications.

    We use the Yahoo (YUI) libraries b.t.w.