Mashups put a new face on the Web

One of the more popular trends to fall under the Web 2.0 umbrella is the creation of Web applications called mashups. Mashups draw upon existing Web applications or data sources and combine these resources to create a new application. I examine the technologies behind mashups, the architecture of mashups, and provide examples of mashups in action.

Don’t reinvent the wheel
The Web is overflowing with sites that seemingly fulfill every need. Developers recognized the existence of these resources and decided to reuse and extend them as opposed to mimicking their functionality. The result of reusing and extending such resources is known as the mashup concept.

Mashups are applications that combine data from multiple resources or services to create a new application. Developers can use various technologies when assembling their own mashups. The following list provides an overview of these technologies:

• XML: The backbone of most mashup sites is XML. Data is often retrieved via XML feeds and incorporated in the application by manipulating the XML. With that said, XML-related technologies like XSLT and XPath are often used to process XML.
• Web services: The Web services concept includes numerous technologies like SOAP, XML, and WSDL to deliver data to a client. Mashups can retrieve and send data using Web service calls via the variety of publicly accessible Web services available today.
• RSS/Atom: XML-based content syndication standards provide an easy way to push data to users that subscribe to the feed.
• Screen scraping: The old-fashioned approach to pulling data from other sites via simply retrieving or scraping data from a Web page is still used today when other approaches are not available.
• AJAX: This Web application model brings together various technologies, most notably JavaScript and XML, to enable the asynchronous loading and displaying of data. It enhances the user experience by smoothing the process of sending and receiving data to/from servers.

The basic idea is to use these technologies to interact with Web services or APIs and content providers.

Mashup architecture
The general architecture of a mashup application has three levels or tiers. The services or data sources used in the mashup constitute the first level. This may include one or more resources depending on the application requirements, and one common data source is the actual user base that enters data directly in the application (think Blogger).

The next tier is the actual mashup application that brings together these resources into a hybrid. It may include its own functionality or simply present the data sources. The final piece of the puzzle is the user client used to access the site. Client-side scripting may be utilized to enhance the user experience.

The crux of a mashup application is the first step in encompassing the data sources. The Web provides a wealth of possibilities with the following list providing a small sample:

• Amazon E-commerce Service: Provides access to Amazon’s massive product data as well as e-commerce functions. You can use this service to build your own e-commerce application.
• Blogger: Blogging is one of the more popular Web 2.0 applications. You can use the Blogger data API to view and update Blogger-based data.
• del.icio.us: This popular social bookmarking site exposes its functionality via a public API.
• Flickr: The photo-sharing service allows you to easily utilize publicly available Flickr data.
• Google: The mother of all Web search engines provides a number of APIs for utilizing its services including, but not limited to, Google Calendar, Google Maps, Google Search, and so forth.

In action
It is often surprising and enlightening to see what other developers are doing with existing Web services and data. Here are a few examples of existing mashup sites:

In action
It is often surprising and enlightening to see what other developers are doing with existing Web services and data. Here are a few examples of existing mashup sites:

• Weather Bonk: This useful site (especially if you are traveling) is a mashup using services from Google, NASA, Yahoo!, Microsoft, WeatherBug, and more to offer a comprehensive weather site.
• Global Incident Map: Stay informed about the latest terrorism threats as they happen with this site, which utilizes the Google Maps API.
• Babelplex Google AJAX Bilingual Search: The Google AJAX Search API is used to allow a bilingual search of the Web and Wikipedia.
• Flickr Sudoku: A mashup of a popular online sudoku player and Flickr. While it isn’t entirely useful, it offers a great demonstration of combining services.

The ProgrammableWeb site provides information on a countless number of such sites.

Promoting reuse
The mashup concept seems to follow along the community aspect so tightly integrated with the Web. That is, services and data are shared (sometimes not freely) so developers can extend functionality as opposed to spending time duplicating what is already available. I find it quite inspiring to see what other developers are doing with existing data and services.

Are you embracing the mashup concept? If so, share your experiences with the community in the article discussion.