Category Archives: Web Development

Building Real-Time Web Applications

We're definitely going HTML5

This is a hands-on workshop that will teach you how to build a Web application that incorporate real-time communication between the client application running on the browser and the back-end server.

We will start with an overview of technologies and tools available for building real-time Web apps, what’s involved, the basics, and the gotchas. Next, we will build, in real-time, a real-time chat application using the python (Tornado) + socket.io + Backbone stack. Why not Node.js, you might ask. Simple: it’s too easy, too popular, and and not super-stable or secure. But you’re welcome to use Node.js as the backend in your own apps!

Conditional Expressions in Python

Historically, python didn’t have a special operator for a conditional expressions. The (condition ? true-value : false-value) expression is concise and convenient, and has been missed for years by many python programmers, especially those coming from programming backgrounds that support the conditional expression such as C/C++, Java, Perl, PHP, and friends.

Starting with python 2.5, python programmers worldwide rejoice as now we can compress the the following if-else statement:

into the following one-line expression:

But what’s with the ugly syntax? Seriously? Why would the condition go in the middle whereas in all other languages the condition always go in the front?

The answer to the ugliness question is given in PEP 308:

The decision was checked by applying the new syntax to the modules in the standard library and seeing how the resulting code read. In many cases where a conditional expression is used, one value seems to be the ‘common case’ and one value is an ‘exceptional case’, used only on rarer occasions when the condition isn’t met.

Now, how many python programmers in the world are working on the python’s standard library? And the rest of us have to endure this ugliness … NO!

Not all hope is lost. Even without explicit support for a conditional expression, python’s awesomeness comes to the rescue:

Now that is just plain elegance and beauty. And guess what? It works even in python prior to 2.5 so you don’t need worry about your code breaking on legacy systems (that is, if you’re unfortunate enough to work with python prior to 2.6).

As Daniel pointed out in the comments, there is a gotcha to this elegance: the true_value must not evaluate to False. More specifically, the expression will always return the false_value if the true_value is one of:

  • None
  • False
  • zero of any numeric type, for example, 0, 0L, 0.0, 0j.
  • any empty sequence, for example, ”, (), [].
  • any empty mapping, for example, {}.
  • instances of user-defined classes, if the class defines a __nonzero__() or __len__() method, when that method returns the integer zero or bool value False.

Which syntax of the three options do you prefer? Why? Share your insights in the comments.

Backbone Marionette Filtered Collection Views

Backbone.Marionette is probably the best thing that ever happened to Backbone.

What is Backbone.js?

Backbone.js gives structure to web applications by providing models with key-value binding and custom events, collections with a rich API of enumerable functions, views with declarative event handling, and connects it all to your existing API over a RESTful JSON interface.

What is Backbone.Marionette?

Backbone.Marionette is a composite application library for Backbone.js that aims to simplify the construction of large scale JavaScript applications. It is a collection of common design and implementation patterns found in the applications that I (Derick Bailey) have been building with Backbone, and includes various pieces inspired by composite application architectures, such as Microsoft’s “Prism” framework.

The need for filtered collections

Let’s say I have a collection A that can be updated dynamically both client-side and server-side (items added, removed, resorted). Let’s ViewA be a CollectionView

ListView = new Marionette.CollectionView({collection: A});

Elements of A have an attribute is_starred. I’d like to provide a filter option in the UI that will cause ListView to show only starred elements of A. I know the general pattern of filtering A on the is_starred property to create a new collection AStarred and pass it to ListView. The problem is that when items are added or deleted to A, I also need them to be added/deleted to AStarred if they’re starred.

What’s a good approach to achieve this?

One approach is to create a custom collection StarredCollection that is initialized using A and listens on add/remove/reset events on A, and only adds/removes items that are starred, and then pass an instance of StarredCollection to ViewA.

Another approach is to create a custom view, StarredView, with wrappers around addItemView/removeItemView that only calls the corresponding methods in the CollectionView if the item passes a test. This could even be generalized to FilteredCollectionView where a filter is parameter, so one could filter on whatever.

I went with the second approach.

Here is how I did it.

First, patch Marionette’s CollectionView (I could’ve created a SortedCollectionView instead, but this was easier in my case).

Then, say I have CollectionView called ListView, and I want to create a filtered version of it:

Or, if I’m showing the ListView in a Layout’s regions, then I create StarredLayout:

But I also modified on the ListLayout.onRender to pass the filter to the list view before creating the ListView:

Warning: this breaks the handling of EmptyView which will be shown only when the original collection is empty, not when filtered collection is empty.

I hope others find this useful and suggest ways of improving it.

The Future of the Web: Mobile Apps to replace Web Apps

After a recent report by Mobile Crunch that the mobile location-based game Booyah has outgrown Foursquares and Gowalla reaching 1 million mobile users, combined with recent reports on the future of the Web at top conferences on the subject, and affirmed by recent trends in VC’s investing strategies in the IT sector, I have become convinced that the future of the Web is in mobile apps and not Web-based applications, sometimes referred to as “software as a service”.

In the last decade, we have witnessed a revolution in Web app design both in terms of the user experience and the richness of functionality. Arguable, the most successful and revolutionary Web app for consumers has been Gmail, and more recently Google Apps. Facebook is another great example of a Web app, with more social focus. All is good, and more Web apps are coming, but then what?

While the laptop is becoming a replacement to the desktop for many, smart phones such as iPhone and Blackberry are becoming a replacement for laptops. The new trend in mobile consumer usage, set by Apple’s iPhone and followed by RIM’s Blackberry and Google’s Android, is to access services and information through apps instead of mobile-friendly websites. Is your website optimized for mobile access? Big deal – new mobile browser can render most websites in a usable fashion. But who cares? If you don’t have an app to access your site then it’s simply boring. I believe boring is not the main reason though. It all boils down to the look and feel. Mobile apps provide a consistent look and feel with the rest of the mobile interface, a lot more so that a Web page does.

Based on these trends, I believe that the value of “software as a service” as being the future of desktop apps for consumers will slowly (or quickly?) diminish; while mobile apps will increase in sophistication and become the norm for accessing your email, social networks, documents, spreadsheets, organizer, etc.

Some may argue that the desktop, or the laptop, will still be ahead in software due to the limited screen size that mobile devices affords. Apple has negated that claim last month with the release of its iPad. QED.

WordPress Plugins Used by this Site

As of today, the following plugins are active on this site:

  1. Akismet: A popular anti-spam plugin the screens and blocks spammy comments
  2. All in One SEO Pack: it gives a great flexibility in editing meta tags for individual posts and pages, but I use it most of it’s out-of-the-box good templates for default meta-tag values.
  3. bib2html: With some in-house mods, this plugin powers the the publications page from a BibTeX file. Very convenient.
  4. Exec-PHP: I use this plugin to execute PHP code on the popular posts page.
  5. FeedBurner FeedSmith: provides RSS feed serving through FeedBurner.
  6. File Icons: the idea behind this plugin is neat, it automatically ads meaningful icons to links based on the extension of the destination file. I’m not too happy with it though. I feel it’s a bit clumsy at times. See it in action on the publications page.
  7. Google Analyticator: simple Google Analytics integration
  8. Google XML Sitemaps: very useful plugin that automatically generates a site map every time a new post is added. Highly configurable too.
  9. WordPress Popular Posts: a new addition to the site. It power the popular posts widget in the right column as well as the popular posts page. The popularity can be based on page views or comments.
  10. WP-ContactForm: I use a modified version of this plugin to power the contact page.
  11. WP-SpamFree: Another plugin to reduce comment spam. It shows the comment form through JavaScript, reducing automated comments.

Future of the Web: Mobile + Social + Linked

By now, it should be clear to everyone that the future of the Web is mobile devices, social networking, and linked data. Although this realization did not come to me until I attended the World Wide Web Conference (WWW2009) in Madrid, Spain, at the end of April. Several keynote speakers, tutorials/workshops, and dedicated tracks and sessions emphasized this fact. I’ll say a few word on each of the three pillars:

Mobile Web

As Sir Tim Burners-Lee said in his keynote presentation: “more people will have their first encounter with the Web through a mobile device than a laptop.” The World Wide Web Consortium (W3C) has task forces and standards to promote and standardize the mobile Web. They’ve been doing it for years, but only now that people are listening seriously because it is already happening.

What this means to the Web community is that Web sites should have a mobile version that conforms to standards and guidelines and works well on mobile devices.

Social Networking

It is a given that social networks are taking over the Web. But that’s not what “the future of the Web is social networking” means. Social networking on the Web refers to enabling the end users to interact with each other on your Web site. Without this interaction, your site will fail to deliver the expected value by the growing savvy Web population.

Linked Data

The Semantic Web is dubbed as Web 3.0. Many believe that a widespread of the Semantic Web is at least a decade away. Linked Data, on the hand, is already a reality. Linked data consists of the now-feasible subset of the Semantic Web. At the very basic level, it is RDF + URI: a common data representation format and standard for addressing and linking data items. The academic community emphasizes the important of Linked Open Data – making your proprietary databases accessible on the Web in the Linked Data format. This movement is new but strong. Many tools are being developed to facilitate the transition to Linked Data for the masses.

Summary

In short, as a Web site owner, if you want to survive on the Web for the years to come, you better ensure that your site is accessible from mobile devices, that you facilitate social interaction among your users, and that your data is open and linked, and linkable.

Thanks to Christopher Gutteridge for this wonderful tool to search and browse the WWW2009 proceedings.

WordPress Automatic Upgrade to 2.7.1 Fails on 1and1 Hosting

BannerI’ve been trying to upgrade to the latest WordPress (version 2.7.1) for a while without success. Every time I initiate the upgrade, whether through WordPress’ built-in automatic upgrade feature or using the automatic upgrade plugin, the process stalls when it reaches the step of downloading the latest zip file. After checking the the compatibility matrix I discovered that my hosting provider, 1and1, runs PHP4 by default, which incompatible with the upgrade script. This problem can be easily fixed by forcing PHP5. This can be achieved by adding the following line to your .htaccess file:

AddType x-mapp-php5 .php