PHP is not Java

The fact that PHP is not Java is self-evident and does not need much emphasizing. Nevertheless, developers who come from a Java/OOP background sometimes treat PHP as if it were Java with dollar signs. For example, one finds not just generic design patterns such as singletons, factories, decorators, etc. in contemporary PHP applications, but also patterns directly taken from the JEE world, such as transfer objects, domain stores, filters, session facades, dispatchers. Even typical Java architectures involving separate business, service, persistence, presentation and integration tiers has been brought to the world of PHP application development. This trend began when PHP became a fully fledged OOP language with version 5. PHP developers seem to have looked to the Java world for inspiration ever since. Possibly it’s a new generation of graduates that was taught to think in Java, or maybe it’s just the overwhelming influence of the mainstream OOP body of thought. I can’t say for sure.

I like Java, but I don’t like PHP code that is written as if it were Java. PHP is great because it makes easy things easy. I believe that this simplicity is an asset, not a flaw. PHP provides a straightforward approach to web development, and I dare say that its success is founded on this principle. PHP gives you productivity, ease-of-use, a high level of abstraction, powerful well-tested libraries and backward compatibility. It’s a pragmatic language, not necessarily a beautiful one. PHP’s share-nothing approach may limit its use in specific areas such as concurrency and parallel processing, but it is ideally suited to the request life cycle model of the web, and it frees the programmer from a lot of potential headaches that come with concurrency. This share-nothing approach also implies that scripts are running in a virtual bubble. A malfunctioning or malicious script doesn’t bring down the entire virtual machine like on the Java platform. This property makes it perfect for shared hosting, and consequently, PHP hosting is ubiquitous and cheap.

PHP != Java

Now, let’s look at some Java-esque PHP code:

abstract class Observable {

  private $observers = array();

  public function addObserver(Observer & $observer) {
         array_push($this->observers, $observer);

  public function notifyObservers() {
         for ($i = 0; $i < count($this->observers); $i++) {
                 $widget = $this->observers[$i];

class DataSource extends Observable {

  private $names;
  private $prices;
  private $years;

  function __construct() {
         $this->names = array();
         $this->prices = array();
         $this->years = array();

  public function addRecord($name, $price, $year) {
         array_push($this->names, $name);
         array_push($this->prices, $price);
         array_push($this->years, $year);

  public function getData() {
         return array($this->names, $this->prices, $this->years);

This is an attempt at the observer pattern taken straight from a popular PHP5 textbook. It is obvious that the implementation doesn’t do anything useful. Since the code is meant for illustration, this is forgiveable. The principal flaw is that in PHP, the observer pattern is for the birds. There are two reasons. First, the observer pattern is fundamentally a Java crutch that compensates for the lack of function arguments in Java. If you find yourself writing an observer in PHP, it might have escaped you that PHP supports function parameters and that you can implement the same functionality more concisely with a simple callback function. The second reason goes somewhat deeper into software design considerations. The observer pattern is typically used in an event-driven design, for example for maintaining the state of GUI widgets or in an event dispatcher for container objects. Such designs are rarely ever useful in PHP, because all PHP objects live in the request scope by default. This means that after the request cycle is completed, the objects -including infrastructure objects such as observers, are deallocated.

The fact that PHP objects don’t survive requests has another important implication: the amount of objects in an application is proportional to CPU consumption, because all objects have to be rebuilt at every request, and unlike in Java, there is no class loader that takes care of these things for you. Therefore, incorporating plenty of Java-esque OOP designs into PHP applications has an adverse impact on performance and scalability. Given that the performance of interpreted PHP is already a magnitude below that of JVM bytecode, you can quickly run into scalability issues with an application that serves a large user base. Putting objects into session scope is no solution, because PHP sessions are serialised/deserialised upon each request. The performance penalty of this operation is likely to be worse than explicit object construction.

The solution to the PHP scalability problem lies in using sensible caching, which is of course what every heavy traffic application does. Products such as memcache and APC provide in-memory data stores for objects. Caching, however, bumps up the complexity of persistence logic in your application considerably. It’s not a plug-and-play solution and it doesn’t provide access to shared data. On a personal note, if I was at the point where I had to consider PHP caching, I would probably already regret not having used a JVM based language in the first place. But let’s get back to the topic. Java developers are used to manipulate data with special purpose data structures called collections. PHP developers, on the other hand, generally use only one bread-and-butter data structure: the associative array. This data structure is an ordered map with either integer or string keys. It’s values can be of any type, and of course, arrays can contain mixed value types. Associative arrays can be used to mimic any collection type, such as lists, maps, queues, stacks, etc., even recursive structures such as trees, because array values can be arrays themselves. So there is no need for special purpose collections and this obviously makes things really simple. As a Java programmer, one should probably resist the temptation to define special purpose collections on top of associative arrays. Why? – It’s not the PHP way.

This statement may require some explanation. You might ask: what keeps you from inserting an element at the head or in the middle of a queue if you use associative arrays? Well, technically nothing. The issue is not about what can be done, but what should be done. It’s has to do with the PHP philosophy. PHP is NOT about enforcing programming by contract. It is a dynamic language, that treats data very loosely. This approach has its benefits and its dangers. If you don’t like it, it may be better to use a statically typed language. What I am saying here is, that it is generally wiser to leverage the strengths of a programming language to the greatest degree possible, rather than trying to compensate for its weaknesses. Dynamic languages have much to offer, but forcing a programming by contract approach onto PHP is painful. Consider the following example:

function recordVote($ballotId, $vote, DateTime $timestamp)
   if (!is_int($ballotId))
    throw new InvalidArgumentException(
      "ballotId must be an integer");
  if (!is_string($vote))
    throw new InvalidArgumentException(
      "vote must be a string");
  return $something;

This method is doing type checking the hard way. Version 5 of the language introduced a partial type checking syntax called type hinting. Unfortunately, this works only for objects, such as the $timestamp parameter in the above code snippet. The introduction of PHP type hinting did not only dissolve the dynamic paradigm of the PHP language, but it’s implementation is also pitifully inconsistent, because it does not provide for the checking of scalar types, such as int or string. In practice, it often the wrong scalar arguments that cause bugs which are difficult to detect. Wrong object arguments are detected easily in 90% of all cases when references to non-existing methods or properties are invoked. The recordVote() method tries to compensate for the former lack by explicitly checking the arguments using is_int() and is_string(). This produces explicit error messages at run time, but the approach is painful and entails some serious trade-offs.

Most importantly, the caller is now forced to pass specific types which require type casts in all places where the method is called. These casts are easily forgotten and therefore can cause bugs themselves. Did I mention they are also cumbersome to insert? Secondly, the method loses the capacity of implicit overloading, which means that its reusability is seriously curtailed. For example, if I wanted the method to accept timestamps in other formats, I would have to either add additional methods with different names and signatures, or create an adapter. Adding different methods for the same task results in code duplication. Creating an adapter makes the code harder to understand. Both solutions increase verbosity and reduce clarity. A more elegant and more PHP-like solution to this problem would be to replace syntactic checks by semantic checks, make the method signature more dynamic, which gives caller a richer yet still exact API with mixed type parameters:

function recordVote($ballotId, $vote, $timestamp)
  if (!is_numeric($ballotId))
    throw new InvalidArgumentException(
      "ballotId must be numeric");
  $ballotId = (int) $ballotId;
  if (empty($vote))
    throw new InvalidArgumentException(
      "vote must not be empty");
  $vote = (string) $vote;
  if ($timestamp instanceof DateTime)
    $timestamp = doSomething($timestamp);
  else if (is_string($timestamp))
    $timestamp = doSomethingElse($timestamp);
  else throw new InvalidArgumentException(
    "timestamp not valid");
  return $something;

Selector Subtleties

If you have no idea what the title of this blog entry means, chances are that you are not a web developer. Fee free to skip to the next article in this case. We are going to discuss CSS selectors and how they may be used to streamline web development. Traditionally, CSS selectors are used to create logical groups of visual styles which are applied to HTML elements. You could think of selectors as patterns that are matched against a set of tags in a web document. We are considering both CSS 2.1 and CSS 3 selector syntax and functionality, while keeping in mind that the latter is not fully supported by all current browsers. Notably, the Internet Explorer took 10 years from the publication of the CSS 2 specifications in 1998 until the release of IE8 in 2008 with full support for CSS 2.

A proper understanding of selector pattern matching has become more important with the advent of jQuery, the most widely used Javascript library today, that employs CSS selector syntax for DOM element addressing, traversal, and manipulation. Once you have worked with jQuery and its powerful "query by selector" engine, using the conventional DOM document methods, such as getElementById(), feels a bit like operating an unwieldy steam engine. You would not want to go back. It also brings CSS syntax to the world of scripting. Using jQuery effectively, however, requires a fairly good command of some of the more complex CSS selector expressions, understanding the new CSS 3 selectors, and learning a few selector expressions specific to jQuery. But let's start at the beginning with the three most simple and most commonly used CSS selectors:

a { color: orange; }
#orange { color: orange; }
.orange { color: orange; }

The first is a type selector. It assigns the colour orange to the text colour of all anchor tags (links). The second is an id selector. It assigns the colour orange to the HTML element with the id "orange". The third is a class selector. It assigns the colour orange to all elements which have an "orange" class attribute. These three are the bread-and-butter selectors that probably make up 90% of all selectors in CSS style sheets. Tag selectors are typically used for global style settings that apply to a large number of web pages, for example to set the font type for a website. The id selector is typically used in combination with specific layout elements, such as containers or form fields. The class selector is typically used to style elements repetitively in the same manner. These selectors can be combined. For example: { color: orange; }

This will set only anchor tags with the CSS class orange to orange text colour. Other anchor tags and other types of tags with the CSS class "orange" set are not affected. Combining multiple selectors in order to match document structure is an important skill that -if mastered- allows you to create efficient and maintainable style sheets. Incidentally, it also makes a good recruiting question for web developer candidates. Can you tell the difference between the following three combinations? { color: orange; }
.footer .orange { color: orange; }
.footer, .orange { color: orange; }

The first selector matches elements that have two class attributes named "footer" and "orange". The second selector matches elements with the class "orange" that are descendants of an element with the class "footer". The third matches all elements with either the class "footer" or the class "orange". In other words, these selectors express three different types of relationships: logical and (written together), descendant (separated by blanks), and logical or (separated by comma). In geek speak, these are called combinators. There are a few more combinator thingies, although the following are lesser known and used:

#footer > .orange { color: orange; }
#footer + .orange { color: orange; }
#footer ~ .orange { color: orange; }

The angle bracket denotes child relationship. The first example matches all elements with the class "orange" that are children (=immediate descendants) of the element with the id "footer". The plus sign means adjacent sibling. Line 2 matches elements with the class "orange" that are immediately preceded by an element with the id "footer". The tilde denotes a general sibling combinator. The third example matches all elements with the "orange" class that are siblings of the element with the id "footer". These combinators are sometimes handy for formatting lists. The next group of selectors we are going to take a look are attribute selectors. They match elements by attributes and are equally useful for processing HTML and XML documents:

div[class] { color: orange; }
div[class="orange"] { color: orange; }
div[class~="orange"] { color: orange; }
div[class^="orange"] { color: orange; }
div[class$="orange"] { color: orange; }
div[class*="orange"] { color: orange; }

Line 1 selects all div elements that have a class attribute. Line 2 selects all div elements whose class attribute is set to "orange". Another good test question: how is this different from the class selector .orange? Answer: It only selects those elements where the class attribute exactly matches the word "orange". For example, the element <div class="orange fruit"> is not matched. This one is matched by the selector in line 3, however, because ~= matches all div elements where the class attribute contains a whitespace-separated list of words, one of which is "orange". The latter is functionally equivalent to the class selector .orange. Line 4 matches div elements whose class attribute begins with "orange", line 5 matches div elements whose class attribute ends with "orange", and line 6 matches div elements whose class attribute contains the string "orange", such as <div class="all-orange-fruits">.

We go on to the so-called pseudo classes and pseudo elements that provide useful matching techniques for dynamic manipulation in response to user interaction:

div:hover { color: orange; }
input:focus { color: red; }
input:enabled { color: green }
input:disabled { color: grey }
input:checked { color: blue }

Line 1 matches a div element during the time the mouse  pointer is on it (the "rollover" effect). Line 2 matches a form input element that has the focus (the time during which data can be manipulated with the element). Line 3 matches all enabled input elements and line 4 matches all disabled input elements. Line 5 matches a checked form element, such as a radio button or a checkbox. Question: how can you match an unchecked element? The answer is: you need an additional selector. Unchecked elements can be matched by combining the :checked selector with the :not selector, which -strictly speaking- operates like a combinator:

input:not(:checked) { color: yellow; }

You can of course put any valid CSS selector or selector combination into the parentheses of the :not() selector to create more specific and more complex expressions. Finally, there are a number of pseudo class selectors that relate to the DOM tree structure which may be useful for manipulating DOM (in combination with jQuery, for example). The three following lines  match the first, last, and third children of all div elements, respectively:

div:first-child { color: pink }
div:last-child { color: silver }
div:nth-child(3) { color: purple }

Although we have not enumerated all CSS selectors here, the ones we have covered are probably the the most useful and most often used ones. For a complete reference, see the W3C specification for CSS selectors.

To inline or not to inline

As every web developer knows, there are three ways to apply CSS styles to a document. One can use a separate style sheet in connection with the <link> tag, one can embed style definition block(s) directly in the HTML document, or one can inline CSS using the style attribute with single HTML tags. These three approaches represent different (descending) levels of separation. The last method, inline CSS, is somewhat peculiar, because it appears to defeat the principle that CSS is founded upon, namely the separation of content of presentation. After all, writing something like <span style=”font-style: bold”>something</span> ist just another -more cumbersome- way of writing <b>something<b>.

Hence, the question arises: why use inline CSS at all? The naive understanding is that only external style sheets are “good” and that inline CSS and embedded CSS styles are “bad”. It may not be a bad idea to reflect on the criticism and ask the obvious counter question: why did the designers of CSS provide for the possibility of inline styles if it was evil to begin with? Are CSS inline styles the equivalent of the infamous “goto” command?

The truth is that, despite the overarching goal of high level of abstraction and presentation separation, there are some legitimate uses for inline styles. To be precise, there are two such cases. First, inline CSS is appropriate when the default styling, as specified by one or more style sheets, needs to be overridden in specific instances. Second, inline CSS is appropriate for micro-styling issues that relate to specific HTML structure of a document. The first use case is easy to understand. For example, you have all your links defined to be blue and non-underlined using the appropriate definitions in a style sheet. There is one point, however, where you want the link to be green rather than blue. Use an inline style in this case.

The other case requires some explanation, and to be frank, some experience in web design as well. What I have called micro-styling issues are layout issues related to the specific sequence of HTML, text, and images in a given document. These are instance-specific issues that don’t repeat. The vast majority -probably over 90%- of these issues concern spacing and text flow. A typical example would be to adjust the vertical and horizontal spacing between adjacent elements using the float, margin, and padding styles. A somewhat less typical example would be setting the width of columns or text paragraphs in specific instances, or make the corners of an outlined box rounded using CSS 3 styles.

In summary, inline CSS is appropriate wherever styling is specific to the document. This could be the case if default styles must be overridden or if custom layouts require micro-styling. However, if you find yourself repeating the same style tags in many different places, there is something going wrong. As soon as a you see a pattern emerge, refactor! Withstand the copy-paste coding temptation. It is easy to generate code that way, but very hard to maintain. Create classes or appropriate selectors instead and move the definitions to an external style sheet.

Let’s look at a typical border case. Say, we use tables to contain form elements in our web application in order to arrange form controls and labels into columns and rows. Typical micro-styling issues, such as managing white space between specific columns can be solved with inline CSS. If we find that certain spacing definitions repeat, for example if we want all form rows to have a five pixel bottom padding, then this situation would call for a CSS style sheet definition.

The quintessence is: the DRY principle also applies to CSS. While the overall goals of CSS are separation of content and presentation, abstraction, and ease of maintenance, and while the use of inline CSS generally counters these goals, inline CSS is appropriate for the mentioned purposes. It takes a bit of experience to know when it’s OK to break the rules and when it is not.

The mighty paper UI


I went shopping last weekend, and since my capacity for remembering things is slowly degrading (sigh) I often make a shopping list when I have to buy more than 500 items. Okay, maybe that's a bit exaggerated. I mean 50 items. Alright, alright, still exaggerated. I begin to consider a shopping list when I have more than 5 items to buy and I definitely make one if there are more than 10. So, I'm on my way with my shopping list, which -befitting my rank as a software engineer- was stored on my smart phone. Just a few years ago, this might have been considered geeky or eccentric, but nowadays smart phones are so common that it hardly catches anyone's eye. I frequently take notes on my phone, for the simple reason that I have it always with me, and it's often closer than a notepad or a diary.

So there I was in the supermarket, having to check the contents of the shopping cart against my list. No problem, of course. Take phone out pocket and switch the display on to show the main screen (2 sec). Tap on main screen to show launcher window (1 sec). Drag launcher window contents with finger to scroll to memo pad application (1 sec). Open memo pad application (1 sec). Locate shopping list on application menu and tap on it (1 sec). Mind you, that's an optimistic estimation, because something might run more sluggishly than usual. For example, the phone might have discovered a Wifi hotspot and thinks it's a great idea to tell me about it. But I don't want Wifi. Now, six seconds doesn't sound too bad, until I noticed the guy next to me. He had a shopping list, too, one written on paper. He took it out of his shirt pocket in less than a second. Swish. Just like that. Han Dynasty technology beating the smart phone.

That's when I realised, there are situations when you can't trump a paper based UI.

HTML5 Shaping Up

HTML 5It's been a while since I last wrote about the upcoming HTML5 standard -two years to be precise- and a lot has happened since then. Not only has the W3C (World Wide Web Consortium ) draft moved closer to the finishing line, but quite a bit of the HTML5 package is already implemented and ready for deployment in modern browsers. Regarding the completeness of HTML5 support, Google Chrome is currently leading the pack, followed closely by Firefox, Opera and Safari. Even Microsoft seems to have discovered the advantage of standards compliance, as its upcoming IE9 includes support for several new HTML5 features. If you are a web developer and haven't delved into the details of HTML5 yet, now is the time.

As many web developers spend more time coding server side languages than coding HTML, they might think about HTML programming as a secondary skill. However, this contains the misconception that the new HTML5 standard is just about angle bracket tags. – It is not . – HTML is the heart wood of web programming and the upcoming HTML5 standard is the most comprehensive update that web developers have seen since the days of Mosaic. In this article, I am going to summarise some important points about HTML5 that every web developer should understand before moving on to the technical details.

HTML5 is not just about markup. Although the new HTML5 standard contains new tag definitions and deprecates old ones, the package goes far beyond markup definition. It does not just define new tags with new functionality, but it also defines the accompanying APIs in unprecedented detail. It contains diverse features for audio and video playback, 3D imaging, drag-and-drop, new form elements, a canvas element for 2D drawing, offline database storage, document editing, geolocation, microdata for semantic markup embedding, and CSS3, the next level of the cascading style sheets standard.

HTML5 is not going to be released with a drum-roll. The HTML5 specifications have been developed by the Web Hypertext Application Technology Working Group (WHATWG) of the W3C since 2004. The first public working draft was published in 2008. The specifications are considered an ongoing work and are expected to reach candidate recommendation stage within the next two years. In the meantime, the parts of the specification which are considered stable are being implemented by browser developers. Thus HTML5 is expected to reach the market in gradual steps over a number of years.

HTML5 is not all-or-nothing. Indeed, there was never an all-or-nothing scenario, even with prior versions of the HTML standard. Browser detection software typically doesn't test for HTML version support, but for individual features, such as support for a certain DOM level, API constructs, or specific feature implementations. Because HTML5 is a bundle of (largely independent) features and APIs, it will be no different with HTML5. For example, geolocation does not rely in any way on 3D imaging, the canvas does nor rely on drag-and-drop, and so on. Application developers can make use of these features without having to worry about HTML5 support on a whole.

HTML5 is designed with backwards compatibility. Upgrading your web pages to HTML5 might be as easy as replacing the HTML4 doctype tag with the HTML5 doctype. Chances are that all tags in a typical page -if they weren't already deprecated in HTML4- will still work in HTML5. Furthermore, the new standard enhances rather than replaces existing functionality. For example, the <input> tags in an HTML5 form may use the new input types for email, date, and numeric data entry. On older browsers without support for HTML5 tags, these are rendered as regular text input fields. The HTML5 form validation functionality, designed to simplify routine Javascript data validation, is also designed to be degradable in older browsers.

HTML5 is already here. Since the market introduction of HTML5 occurs incrementally,  many features are already available in up-to-date web browsers. For instance, semantic markup, canvas, and basic audio and video playback are already supported by the latest browser versions. One can safely assume that the upcoming Firefox 4 and IE 9 releases will put even more HTML5 features at the developer's disposal. Go to to check your browser and find out which new features it already supports. See for an interactive presentation, as well as in-depth tutorials and code examples of the new HTML5 features. Finally, a list of websites that already makes use of HTML5 (and ideas what it may be used for) can be found at