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
Different frameworks emerged to support the need for rich interfaces; I covered many of them in one of my previous articles and Script.aculo.us library in some detail in the last article. All of the Web 2.0 frameworks rely on the latest browsers to provide the foundation, and make heavy use of the JavaScript, XML, and CSS standards. Script.aculo.us is a solid, server-agnostic JavaScript library based on the "Prototype" toolkit. Besides a lot of time-saving and cross-browser compatible code, it comes with several advanced widgets and Ajax-enabled controls. If you need an introduction to the framework, please see my previous article. There are only a few advanced widgets that come with the library, and if you are interested in a robust widget library, Script.aculo.us may not be for you. But those widgets that are available are stable and require only a short learning curve.
The advanced widgets are:
- Drag and Drop
- Auto-completing AJAX text fields
- Sortable elements with/AJAX callbacks
- Slider
The widgets are easy to create. For instance, a sortable list can be defined in HTML and manipulated in the JavaScript via API calls:
<ul id="somelist">
<li>Web 2.0</li>
<li>With</li>
<li>Ajax</li>
<li>is a lot of fun</li>
</ul>
<script type="text/javascript" language="javascript">
Sortable.create('somelist')
</script>
Or, if you want to add any effects on drag, you can specify them as optional params:
<script type="text/javascript" language="javascript">
Sortable.create('examplelist',{ghosting:true,constraint:false})
</script>
Similarly, another advanced widget—custom Slider control—is defined in HTML with a Div tag, and controlled via JavaScript:
<div id="slider1"
style="width:200px;background-color:#aaa;height:5px;">
<div id="handle1" style="width:5px;height:10px;
background-color:#f00;cursor:move;"> </div>
</div>
<div id="debug1" style="padding-top: 5px;"></div>
<hr>
<div id=" slider2" style="background-color : #CCCCCC;
width : 200px; height : 5px;">
<div id="handle2" style="width:10px;height:5px;
background-color:#f00;cursor:move;"> </div></div>
</div>
<div id="barreSortie2" style="background-color: #DCDCDC;
width: 0px; height: 7px; border: #232323 1px dashed;
margin-top: 10px;"></div>
<div id="debug2" style="padding-top: 5px;"></div>
<script type="text/javascript" language="javascript">
// <![CDATA[
new Control.Slider('handle1', slider1,{
onSlide:function(v){$('debug1').innerHTML='slide: '+v},
onChange:function(v){$('debug1').innerHTML='changed! '+v}});
// Slider with predefined notches
new Control.Slider('handle2', slider2,{range:$R(0,200),
values:[0,50,100,150,200],
onSlide:function(v){$('debug2').innerHTML='slide:
'+v; $('barreSortie2').style.width=(v*3)+'px';},
onChange:function(v){$('debug2').innerHTML='changed! '+v}});
// ]]>
</script>
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.
IE 7
Firefox 2.0
