Web 2.0 can be thought of as two concurrent and unrelated things: advances in technology and a new business model for web companies.
This article will examine the Web 2.0 movement and what it means for the end clients, what Web 2.0 means for the web UI, and which technologies enable the new features. In particular, it will talk about the new companies that joined the movement, and look at some of the technology that powers Web 2.0.
It will also discuss what it means to code in “web2.0 style” with some more advanced features of the Script.aculo.us framework and explore the Dojo toolkit.
The New Social Platforms
During late 2000, when the Internet bubble burst, many web startup companies folded. There were many reasons this happened: weak or non.existing business models, solutions to fabricated problems, under-funding, poor management, poorly executed web sites, or too much competition. But, whatever the reasons and whatever the number of failures, two interesting facts emerged from that first wave of the web (or e-commerce) companies. The first fact was that very little was needed to start a web-based company, and the second was that a company needed a lot of customers to be profitable in an unexplored online market environment. As an example, the most successful online companies with viable revenues that survived when the bubble burst were Ask.com, About.com, Paypal, Google, eBay, and Yahoo! All provided online services to millions of customers.
Predictably, the entrepreneurial spark that ignited the first wave of web companies has not disappeared, and a new wave is already here*. So, what is different this time around? The first difference is that it is now even easier to set up a web company because web technologies have improved tremendously since early 2000. The second difference is funding or Venture Capital (VC), and the third is new social platforms approach.
* This article was written in January 2007.
During the original bubble, the first wave of companies relied on startup capital from the VCs to get past the initial losses phase. In many cases, it was also a huge problem because a VC firm would insist on a large stake in the company and on placing their people on the board of directors if company went public or on retaining managerial positions to influence decision making. These people also could eventually take over and liquidate the company at the first sign of problems.
The current approach of the Web 2.0 companies is different. Because of advances in technology, companies need very little startup capital, so the entrepreneurs can even go without the VCs. Eventually, the company would still need money for expansion, and that can come from other creative sources, such as the founders of other successful web companies, or selling itself to a larger company. For instance, YouTube received funding from eBay founders and was later bought out by Google. Del.isio.us was sold to Yahoo!, and PayPal was bought by eBay.
Barring the new funding strategy, there is another huge difference in the Web 2.0 approach to the web business model. The Web 2.0 sites use a lot of the latest technology, such as AJAX, to provide a rich user experience and they tend to represent social platforms in some way. The social platform is not a new concept, but the way some companies implement it online, is new and sometimes unique.
Basically, the social platform can be summarized as the ability for the web users to change web content. Done as a group task, the results can be very tantalizing and addictive. For example, Wiki is now the most popular platform for encyclopedic information edited and updated by the web users. YouTube lets users upload their own videos, MySpace.com* and FaceBook let people share collective content such as pictures, blogs, music and general info. Del.isious and Reddit let users collectively “tag” content online and share it via the tags. Digg.com lets users post and collectively rate news articles on the web, and bubble up the most social articles to the top**. There are many other examples, but the idea of a social platform is prevalent in all of these new Web 2.0 sites. As a side effect, the advertisement for the social platform site is done via friends connecting to friends on the site or simply by talking about it.
* At the time MySpace was bought by New Corp., it had 80 million users.
** Digg.com currently generates more traffic to the site than The New York Times.
The New Web 2.0 Development
Since the early days of the web, desktop applications or native OS programs have always exceeded web applications in terms of the robustness of the client interfaces. New features in the UI would often appear and become conventions on the desktop, and only after some time would be replicated on the web. But, the rise of the modern technologies have shifted the tide in favor of the web, and even though there is no clearly defined competition for GUI features, it is a safe bet to say that anything achievable on the desktop can be replicated on the web and, in some cases, even improved. Some new UI conventions may now even become a de facto way to use on the web, before migrating to the desktop. The web, being the new media for running applications, has in some way dictated ways to develop applications and the standards for the UI.
For example, mapping applications on the desktop had had always the ability to drag (or scroll) a viewable area effortlessly almost from the inception. However, on the web, early versions of mapping sites relied on lengthy page refreshes, and odd arrows on the sides of the tiny map areas to scroll the content. Only recently, with the use of Ajax, Google popularized a dragable mapping application on the web.
The ability to instantaneously update a viewable UI, without lengthy refreshes, separated desktop applications from web applications, but technologies such as AJAX or Macromedia Flash bridged that gap and made it possible to achieve the same on the web.
From the development perspective, joining the Web 2.0 movement, either for a startup or for projects in established corporations, means using the latest web conventions to provide a very rich user experience with the same thin web browser client. Web 2.0 developers think about web applications not in terms of page hierarchies that the user needs to navigate, but in terms of the islands of information that the user can interact with on a small number of screens. And, because the screen real estate is limited, novel ways to represent data, such as “tag clouds” and Portlets also came about. Different widgets emerged as reusable components on the web, such as selection Calendars, custom sortable and dragable Tables, custom Selection boxes and Scrolls, Rich Text Editors, Charting and other Effect widgets.
What Does Web 2.0 Mean for Users?
For a web user, Web 2.0 can mean many good things. The new, rich interfaces will make interacting with web sites easier and more exciting. The new social platforms, if used correctly, may become useful tools for collaboration, knowledge sharing, and education.*
The user’s content will be easily accessible from any computer with an Internet connection. For example, bookmarks will be stored as tags on some social bookmark site, and the user will not have to worry about the hassle of moving them to a new computer or losing them if a PC crashes. Similarly, pictures, documents and other files will be centrally stored on some picture sharing site and document site respectively.
Of course, competition among Web 2.0 companies will create better social web services, and produce new profitable companies.
* Adults still have the responsibility to educate children about dangers of posting content on MySpace.
The Advanced Script.aculo.us Framework
The advanced widgets are:
- Drag and Drop
- Auto-completing AJAX text fields
- Sortable elements with/AJAX callbacks
Or, if you want to add any effects on drag, you can specify them as optional params:
Note the callback function hooks, onSlide and onChange. You can assign any functions to call when the slide action is performed; for example, an asynchronous call to the server to get more data for the scroll area, without a page refresh.
There are also third party add-ons to Script.aculo.us. For example, Tooltip.js (http://tooltip.crtx.org/) is an implementation of some fancy tool-tips using the Script.aculo.us framework.
Dojo has a lot of similarities with Script.aculo.us in the way it is installed and used, but that is about all. It has a very different collection of pre-packaged widgets and different way to use them. The framework has very good intentions and an ambitious launch, but poor execution. As of the time of this writing, its version is 0.4.3, and it is not yet ready for production use. However, it does try to deliver the most useful features, widgets, and Web 2.0 styles to the web development. For example, it comes with a large library of controls, such as in-line editing, fisheye, exploding tooltips, dynamic trees, sortable tables, and so forth, but most of them are poorly documented, and require a lot of looking thorough a lot of code.
Note: The Editor widget is now deprecated.
Here is the Rich Text Editor screen:
The rich text editor, for instance, seems to have been upgraded to version 2 somewhere between Dojo 0.4.1 and 0.4.3, but most of the examples are for the original editor widget, and even the new one is rather buggy. On a positive note, the editor widget is the most ambitions, in terms of features and functionality, among any other AJAX framework. When all of the bugs are fixed, it can be a great addition to any site.
Most of the widgets are simply called with a CSS type or a custom type, such as this:
<textarea dojoType="Editor" items="bold;italic;underline;strikethrough;|;createLink;"> </textarea>
<div dojoType="Editor" items="textGroup"> some content </div>
<div class="dojo-Editor"> some content </div>
The fisheye widget is a lot of fun to use. It is similar to the Apple OS interface.
Some of the demos on the site have bugs, and may require some tinkering to get them to work correctly on you site.
Here are some more widgets included with Dojo: the tree and the buttons.
There is a lot of documentation online, some of it old or difficult to navigate, but overall if someone wants to implement compelling Web 2.0 features on the site, using this free toolkit, and is not discouraged by fixing some bugs, Dojo may be a good fit.
In this article, I have talked about Web 2.0, what it means for developers, for users, and for new companies. I have also described fundamental definitions of Web 2.0 and two of the frameworks for the “Web 2.0 style” development. It will be very interesting to see the evolution of the online social platforms, and the new uses for AJAX and Web 2.0 frameworks. For instance, the creators of Wikipedia are working on the social search, where web users will rate the results. And maybe there is a Web 3.0 on the horizon, as well.
- Dojo: http://dojotoolkit.org
- Dojo manual: http://manual.dojotoolkit.org/WikiHome
- Script.aculo.us: http://script.aculo.us
- Script.aculo.us documentation wiki
- Unofficial Prototype documentation by Sergio Pereira
- Amy Hoy’s Cheat Sheet
- Jonathan Snook’s Prototype Dissected
About the Author
Vlad Kofman is working on enterprise-scale projects for major Wall Street firms. He has also worked on defense contracts for the U.S. government. His main interests are object-oriented programming methodologies, UI, and design patterns.