Moblin.org Showcase: CCK, Views, OG and More on Drupal 6

Moblin is a global open source project to develop a Linux-based stack for embedded devices ranging from mobile phones to netbooks to in-vehicle entertainment/navigation systems. With support from Intel and other embedded systems engineering companies, there are hundreds of engineers around the world helping to create an open tool set for the next generation of smart devices.

Intel announced the 2.0 iteration of Moblin to the public at OSCON 2008. Moblin is already being used to build Ubuntu's Mobile Internet Device (MID) distribution, and the first Moblin-based devices will be hitting shelves this holiday season. In short: very cool.

Naturally, a good open source project needs a good home for its developers, and that means Drupal!

"Drupal was a clear winner when we went looking for a solution to build the Moblin.org web site. As open source developers we valued the modular framework Drupal provides and the active community of users. Since we were already using it as an internal tool, it was an obvious choice."
— Michael Shaver, Intel

Chapter Three helped rebuild moblin.org, replacing the original custom PHP-based informational site (still available at v1.moblin.org) with a true developer community/portal built on Drupal 6. We did the engineering and architecture, while Intel provided design expertise as well as overall site requirements. The objectives were:

• Visually refresh the site in preparation for a renewed push for the Moblin platform 2.0
• Expand the scope of available content by taking advantage of a world-class CMS (a.k.a. Drupal)
• Allow for self-starting developer communities to form around specific Moblin software projects
• Integrate with the existing development stack, including Bugzilla and Git

We began work in mid July and worked very closely with Michael Shaver (Intel's designer) in defining the information architecture and functionality. We then built out the site on Drupal 6 with a mix of A-list contrib modules and custom development, migrating users and some content over from an existing "internal" Drupal site. The new moblin.org launched successfully in September 2008 and is backed by a best-practice three-phase (dev/test/live) SVN environment, and hosted on a Rackspace server running nginex.

Collaborative Development

From the outset this project was understood as a collaborative effort. Michael brought an initial set of wire-frame designs to the table, and we worked together in an iterative process to take these through to completion.

"Because Drupal is so well structured, we are able to easily make modifications to the information architecture and design without going completely back to the drawing boards."

—Michael Shaver, Intel

The process was for Chapter Three's experts to handle the Drupal configuration, insuring that the utilization of Nodes, Taxonomy, Menus, Blocks, Views2 and Organic Groups was consistent and elegant. Once the critical architecture was configured, we could all make minor adjustments as needed. Chapter Three remained the "owner" of the Drupal setup, resolved critical issues, etc.

In turn, Michael took the lead on creating the CSS and markup, using template tpl.php files to lay down structural XHTML and quickly prototype pages. Our engineers worked primarily in template.php, creating theme overrides as needed, and developing pre-process functions to insure that the right tpl.php template files were being used and that correct variables were being fed to them.

We iterated several times to close in on the precise design and functionality that would be needed for the Moblin developer communities, working together to create the user interface and experience. In particular, we developed a custom OG Group Status block on the front-end and customized the node add/edit forms for new project groups, project documentation and project releases.

Towards the end we were able to focus on driving through our respective areas of responsibility, with Chapter Three focusing on pure development tasks such as Bugzilla integration, and Michael adding great graphic flourishes to the theme. Finally we came together for fine-tuning and cross-browser testing.

Drupal 6

"Even though Drupal 6.x had been officially released for some time, we had to decide if it was ready to use for the site. In the end, enough of the major contrib modules were ready and the new features in core made the decision pretty easy. We feel we are now positioned well to take advantage of this release and to make upgrading to Drupal 7 that much easier."

— Michael Shaver, Intel

Moblin.org is the first client site Chapter Three built and launched on Drupal 6. We made the leap to the next generation for a few reasons.

First of all, as a global project, Moblin.org's long-term requirements include strong support for internationalization. This alone was enough to tip the scales in favor of the new version with i18n in core.

Secondly, while it was a non-ideal situation, we felt we could implement the more complex site layouts without Panels, which at the time was not ready for production deployment.

Finally, the other powerhouse modules we regularly depends on -- Views and Content Construction Kit (CCK) of course, as well as Organic Groups (OG) -- were all in strong Beta or RC state, and our initial due-diligence indicated they were more than stable enough for the needs of the site.

This proved to be a good decision. The improved architecture of Drupal 6, particularly the advances within the theme layer, were very advantageous. While there was a learning curve involved -- especially in upgrading Menu Trails to use the new menu system -- it was well worth it.

The ability to utilize pre-process functions was key in cleanly and effectively dividing our labor on the site, and the core improvements in usability in Drupal 6 paid dividends across the board.

Going forward, unless there's a specific requirement or client request, we plan on using Drupal 6 for all our work. We're also looking forward to launching our first client site on Acquia Drupal in December.

Module List

Although not all these modules have fully been implemented on the site, here is a run-down of what we used or will be using:

• Content Construction Kit (CCK): A cornerstone of the site: we also implemented the Date, Filefield and Link modules for additional field types.
• Organic groups: Another cornerstone of the site: the projects are all run as groups.
• Views: Views drives most of the directory/list pages. We also use Views Rotator to offer a nice showcase on the homepage.
• Menu Trails: Updated for Drupal 6 with this project, enhances usability by allowing you to classify individual nodes as falling "under" a primary menu item and keeping the navigation trail in an active state.
• Drupal Administration Menu: Easy access to admin areas for increased site-owner usability.
• LoginToboggan: Another well-known and loved usability-booster.
• Pathauto: A must-have for setting up human (and SEO) friendly urls. We also implemented Pathredirect to handle legacy urls from their previous site.
• BUEditor: Implemented in favor of more complex "WYWISYG" solutions; we also implemented a couple custom buttons to help w/common editorial tasks.
• IMCE: Along w/BUEditor, this rounds out the textarea-editing toolset. For users familiar with the concepts of a filesystem, IMCE offers a simple way for them to re-use existing uploads and image assets.
• CAPTCHA: Must-have for any site with open registration.
• Code Filter: Good for sites where code-is-content (e.g. people will post example source, etc).
• Devel: Don't build sites without it! :)
• Fivestar: Along with the Voting API back-end, to allow for ratings.
• Google Analytics: Worth it for the server-side caching of Google's js alone, but the automatic segmentation by role can provide excellent intelligence on site use.
• ImageAPI and ImageCache: allow for the dynamic resizing of uploaded images.
• Path Redirect
• Mailman Manager: along with User mailman register, provides integration w/existing Mailman listservs.
• Job queue: Because sometimes you've got more to do than cron.php can handle.

Custom Development

Custom development for Moblin broke into several key categories.

First of all, under the auspices of this project we updated and expanded the MenuTrails module for Druapl 6, adding key improvements around menu display and breadcrumbs. This work was immediately released into Drupal CVS even before the site launched, creating a feel-good moment for everyone.

To make editing easier, we built custom buttons for the BUeditor, which we agreed upon as an alternative to the hassles which very often result from "WYWIWYG" editors. We created a number of jQuery-enhanced pop-ups to help editors quickly and easily link to other content within a specific developer community. Look for some future documentation on how easy this is in the near future.

As almost always happens, we created a general-purpose moblin.module to handle site-specific tweaks using form_alter and node API, as well as setting up some custom menu callbacks.

Finally, there's obviously a custom theme in place. Michael Shaver did a great job here, owning the CSS and markup, and driving the creative ideas. We supported as needed w/preprocess functions and other code-centric functions as needed.

Hosting/Development Environment

The site is hosted on a single server at the moment, tuned by experts at Intel and using nginex as its webserver. Thanks to a lean theme, Drupal's JS and CSS aggregation, and a well-tuned back-end, pageloads are snappy.

One of our key objectives for the project was not just to launch a great site, but also to give the Moblin team a solid platform for future innovation. As any Drupal regular knows, there's no telling what a community will really need until that community really exists, and so we wanted to be sure there was both a clean Drupal foundation and a solid process for managing future development.

To that end, we implemented two additional subdomains for the site to act as development and staging environments. These were distinct codebases w/their own distinct database backends. They are maintained via SVN with dev being on the trunk (equivalent to CVS head) and staging being on a test branch.

We then created three shell scripts that future maintainers could use to safely and consistently manage the codebase:

• code_merge: will accept a specific directory as an argument and merge this from trunk to test. If successful, the staging checkout of the test branch will be updated so that testing can begin.
• code_push: quickly backs up the current live codebase and database, does a fresh SVN export of test, and rsyncs that against the live codebase. Rsync minimizes file activity in the live area, and the back-up dir provides an at-the-ready "undo" recourse in case a mistake is made.
• db_sync: allows easy synchronization of databases; by default pulling a sql dump from live and overwriting staging. Our experiences is that keeping a staging environment going with an up-to-date snapshot of live configuration and content is invaluable for future development. It makes sql backups first, and will rsync the drupal-maintained /files directory as well.

With these three scripts and instances in place, all the pieces are there for rapid/Agile development, where dev and staging environments say closely in-sync with the real live website. This is the only way to insure continuity once a community site is live and receiving new nodes, comments and user signups on a daily basis, and having it all maintained through scripts which do it "right" every time means you don't have to be a sysadmin expert to be a part of the development effort.

In Conclusion

This was an excellent project all around. Everyone had a fun working on it, and we all got a chance to learn something.

"Working with Chapter Three was great! They understood the development workflow perfectly and accommodated our needs to handle the theming and IA of the site. Add to this the short timeline and last minute changes they put up with. One area that Chapter Three really helped was setting up the development environment for us. This has proved invaluable to managing the site and pushing new features."

—Michael Shaver, Intel

It was really a pleasure and an honor to work with high-caliber partners on a site that will hopefully help drive open-source innovation in a vital space for years to come.