Skip to main content

Blog Post

Migrating Weather.com To Drupal: Flexible Widgets

In November, 2014 Weather.com launched on Drupal and became one of the highest trafficked websites in the world to launch on an open-source content management system (CMS). Mediacurrent and Acquia are excited to provide a blog post series that will share insight around how Weather.com was migrated to Drupal. Our team of experts will share best practices and what lessons we learned during the project.

In earlier blogs we touched on how developers on the Weather.com project simplified content delivery by creating a customized suite of modules called Presentation Framework. Today, we'll get into how Presentation Framework works with its truly original use of widgets.

First, let's talk about those widgets. When you look at Weather.com page on your desktop, you'll see your location, such as San Francisco or Austin, at the top of the page and a menu on the left. The forecast is in the middle, and there may be an ad on the right side. Each one of those information packets is delivered by a separate widget. Presentation Framework gives developers full access to the widgets used to assemble the actual page as well as the widgets that replace tokens inside the body of each article. These widgets are so versatile because they are reusable, exportable, independent and versioned, giving developers full control over the final page presentation.

Presentation Framework was created specifically because The Weather Channel's internal developers weren't Drupal experts and didn’t need to be. They were a team of front-end developers with experience primarily in Java and JavaScript. We wanted to leverage their strengths rather than forcing them to use Drupal in an uncomfortable and unfamiliar way. We built Presentation Framework as a system of pluggable modules that can be developed by the front-end team, and easily implemented by the editorial team. The overall result increased new feature velocity for the site and simplified the creation of new page layouts and compositions by using the Drupal Panels module.

It was easy for JavaScript developers to apply their knowledge because each Presentation Framework “module” was actually just a recipe of relevant files in a single folder. Each module was self contained and was packaged with all the metadata, template and any assets defined in JavaScript or CSS that was necessary to render it. For them to create a forecast widget, for example, all they had to do was generate the HTML for the fragment that appears in the widget, along with the JavaScript that communicates with Angular about how to fetch the data and render it.

The Presentation Framework gives Weather.com the flexibility to build responsive pages on the fly. Its widgets can display a YouTube video for a desktop user, an image with a link to the video for a mobile user, and just text with links to web services feeds on other kinds of devices. “Write once, use anywhere” is one of the long-standing content management dreams that Drupal has made possible.

Additional Resources

Migrating Weather.com To Drupal: Improved Page Load Times | Mediacurrent Blog Post
Migrating Weather.com To Drupal: Increased Content Portability  | Mediacurrent Blog Post
The Weather Channel | Mediacurrent Case Study 

Access icon Up arrow icon Drupal 8 icon Facebook icon - white Facebook icon - blue outline Facebook icon - yellow Hollow right arrow icon Hollow right arrow icon - white LinkedIn icon - white LinkedIn icon - hollow LinkedIn icon - blue outline LinkedIn icon - yellow Mediacurrent wordmark Quote icon Twitter icon - white Twitter icon - hollow Twitter icon - blue outline Twitter icon - yellow Youtube icon - white Youtube icon - yellow