NeSC Web 2.0 Workshop, March 2009, Edinburgh
Practical Web 2.0 – Session 1
Related Technologies and Building Mashups
Jiten Bhagat - jits@cs.man.ac.uk
Mark Borkum - m.i.borkum@soton.ac.uk
23rd March 2009
Overview
Related Technologies




Introduction
Cover some technologies
Examples of successful use of technologies
Building Mashups




Rationale
Principles
Google Gadgets
Finish

2
23rd March 2009
Related Technologies
3
“One of the key drivers of the development of Web
2.0 is the emergence of a new generation of Webrelated technologies and standards.This has been
underpinned by the powerful, though not particularly
new, idea of the Web as platform.”
JISC Technology and Standards Watch, Feb. 2007.
What is Web 2.0? Ideas, technologies and implications for education,
by Paul Anderson.
4
5
OR
6
HTTP
(over TCP/IP)
DOM
HTTP
(over TCP/IP)
Apache &
Mongrel
Rails
Ruby
7
Rails & Mongrel
& Apache
HTML / CSS /
JavaScript
Ruby & Rails
mySQL
All trademarks are the properties of their respective owners
8
Specifications


XHTML, CSS, DOM, Atom, RSS, …
Transport Layers


SOAP, REST, …
Platforms/Stacks


LAMP, WIMP, …
Server-side Scripting Languages


Perl, PHP, Python, ASP.NET, Ruby …
Frameworks


Ruby on Rails, Merb, Django, …
Client Software


Firefox, …
Tools


9
Firebug,YSlow, …
Technologies

Software Development

Software Platform

Software Tools

Hardware

Infrastructure

Standards/Specifications

Transport Protocols

Methodologies

Practices
10
23rd March 2009
11
Technologies
 Software
Development

Software Platforms

Software Tools

Hardware

Infrastructure

Standards/Specifications

Transport Protocols

Methodologies

Practices
12
23rd March 2009
Programming Languages
Client-side
Server-side
• HTML
• PHP
• Perl
• Python
• Ruby
• Boo
• Groovy
• Haskell
• Java
• C++
•C
• C#/ASP.NET
• SQL
•…
• CSS
• JavaScript
• Silverlight (JavaScript, C#, Ruby,
Python, …)
• Flash (ActionScript)
13
23rd March 2009
Choice
14
Support rich user facing interactions
15
A trend towards openness
16
Faster activation energy…
Quicker learning curves…
17
Less emphasis on developing
packaged software...
More emphasis on packaging
services...
18
Support the read/write web
19
Maximise potential for added value
20
Rapid development cycles
21
geekherocomic.com
http://www.geekherocomic.com/2009/02/21/agile-development-explained/
22
O’Reilly - What Is Web 2.0 (2005)

Relevant principles:





23
1. The Web As Platform
4. End of the Software Release Cycle
5. Lightweight Programming Models
6. Software Above the Level of a Single Device
7. Rich User Experiences
23rd March 2009
Web as a Platform

In the beginning:



Web browsers were ‘kingmakers’
Browsers like Netscape supported their own standards
User experience was determined by their choice of browser

Then something happened…

Characteristics were standardised




XHTML for mark-up
CSS for presentation
EMCAScript for client-side programming
DOM for inline manipulation of content

Web sites became database-backed applications

Value moved “up the stack” from the Web browsers to the
services being delivered
24
Web Site
Web Browser
Web Server
File System
Operating System
Application
Web Browser
Web Server
Database
Operating System
23rd March 2009
Asynchronous JavaScript And XML
Technique used to “do something”
without reloading the whole page
= Allows the developer to provide a
richer experience
25
23rd March 2009
Asynchronous JavaScript And XML

AJAX is a collection of technologies:






Presentation – XHTML and CSS
Data Interaction – DOM
Data Transfer – XML, JSON, Google Protocol Buffers …
Asynchronous Communication – XMLHttpRequest
Scripting Language – JavaScript,VBScript, …
Influences from desktop applications:



26
Dynamic
Responsive
Feedback
23rd March 2009
AJAX Interactions
23rd March 2009
AJAX is also…

Rich functionality purely at client side

Rich UI patterns

Small details that help users
28
23rd March 2009
Examples of AJAX
29
23rd March 2009
How Can I Implement AJAX in My Own
Website?

Many frameworks:







Prototype + Scriptaculous
jQuery
extJS
Dojo
MooTools
ASP.NET AJAX
Google Web Toolkit (GWT)

Ask your users what behaviours they expect

Don’t overdo it
30
23rd March 2009
JavaScript

Dialect of the ECMAScript standard

THE client-side scripting language in modern browsers

Unrelated to the JAVA programming language

Structured and imperative

Dynamic

Duck typing


“if it walks like a duck and quacks like a duck, then it must be a duck!”
Run-time evaluation

eval(“alert(\“But I’m just a string!\”)”) *

Functional

Lots of JavaScript in the next 2 sessions of this series…
* Not recommended for actual usage
31
23rd March 2009
Linux, Apache, MySQL, PHP/Perl/Python

LAMP – a very common
stack of software





On Linux *
To rapidly build dynamic
web applications
Free (as in beer)
Over years it has been very
easy to use
De facto
Web Server
Application Logic
Database
Operating System
* Windows and Mac equivalents available (ask in store)
32
23rd March 2009
PHP

High-level scripting language

Mainly used for producing dynamic web pages

Originally created in 1995 by Rasmus Lerdorf

Originally stood for “Personal Home Pages”

Free and available for most platforms

Drupal (CMS) is powered by PHP

Widely regarded as a poor man’s Perl
33
23rd March 2009
Perl

High-level, interpreted and dynamic language

Originally developed in 1987 by Larry Wall

Powerful text processing capabilities

Very clean language for reading from the command line


Guaranteed control over what goes out
Known for its flexibility and adaptability
34
23rd March 2009
Python

High-level and multi-paradigm programming language
emphasising code readability

Developed by Guido van Rossum in the late 1980s

Concise


Does what you think it will do
Powerful web application framework: Django
35
23rd March 2009
Ruby

Object-oriented, multi-paradigm, dynamic, high-level and
elegant language

Originally developed in 1993 by Yukihiro "Matz"
Matsumoto

Designed for productivity and fun

Emphasise more the human needs of software
development

Concise


Does what you think it will do
Powerful meta-programming capabilities
36
23rd March 2009
Ruby on Rails

Web application framework for Ruby

Released by David Heinemeier Hansson on July 2004

Model View Controller (MVC) architecture

Principles



Powerful base libraries






Convention over configuration
Do not repeat yourself
ActiveRecord,
ActiveResource,
ActionController,
ActionView,
ActiveSupport
Model
Controller
View
(Ultra) rapid development!
37
23rd March 2009
My First Ruby on Rails Application


Install Fedora 10
Install mySQL, Ruby, RubyGems:


Install basic Ruby Gems needed:


gem install rake rails mysql mongrel
Create a Rails application:



yum install mysql-server ruby ruby-devel ruby-mysql
rubygems *
rails ~/my_first_rails_app
cd ~/my_first_rails_app
Start your Rails application:


ruby script/server
In web browser… http://localhost:3000/
* You might need to install other dependent components
38
23rd March 2009
39

Microblogging service

Ruby on Rails, Erlang, MySQL, Mongrel Memcached, etc

600 requests per second

Over 16GB of Memcached

Recently:

“moved to a messaging model, asynchronous process, 3 levels of
cache, and moved their middleware to a mixture C and Scala/JVM.”
Source: http://highscalability.com/scaling-twitter-making-twitter-10000-percent-faster
40
23rd March 2009

Video sharing site

Linux, Apache, MySQL, Python, lighttpd (for videos), etc.

Delivery of over 100 million videos per day
Source: http://highscalability.com/youtube-architecture
41
23rd March 2009

Image sharing site

Linux, Apache, MySQL, PHP, Perl, Java, Squid, Memcached,
etc.

More than 4 billion queries per day

Over 400,000 photos being added every day

Dedicated servers for static content
Source: http://highscalability.com/flickr-architecture
42
23rd March 2009

Built on:
 Linux
 Apache
 Ruby on Rails

User driven
 In house, down the street, local, national and
international users.
 myExperiment has over 1600 registered users

Perpetual betas
43
23rd March 2009
Rich Internet Applications

Silverlight, Flash, JavaFX

Plugins within the browser

Go beyond current web standards

Offer much richer user interaction, multimedia and
functionality

But requires additional installation by users

Deserves a 50 minutes presentation on their own!
45
23rd March 2009
Future Tech

Newer programming languages (eg: Scala) and web
frameworks (eg: Lift)

Vastly scalable distributed data stores

Web OSes

Pervasive and richer Virtual Worlds

More new standards (HTML5, CSS3, etc)

46
Highly informed from existing technologies
23rd March 2009
xkcd.com
http://xkcd.com/171/
47

Technology is only the enabler

Still need to focus on user requirements and build usable
interfaces

Keep It Simple Stupid (KISS)
48
Building Mashups
49
Mashups
Combine data and functionality from
different sources into a new set of
single tools and services
= adding value
50
23rd March 2009
Mashups

Term originally used in the music industry




Data is key




Music made up of other released song(s) and samples
Usually produced by other artists
Remixes
Open APIs
Public web services
Etc
Doesn’t (usually) require a programming degree! *
* We’ll prove this to you 
51
23rd March 2009
Rationale

Web 2.0 is about…




52
… the web as a platform, right?
… lightweight programming models, right?
… rich and customised user experiences, right?
… data, right?
23rd March 2009
Principles

Reusability

Remixability

Loose coupling

“Hackability”

Add value *

Must be useful *
* Too obvious?
53
23rd March 2009
Asynchronous JavaScript And XML

AJAX is a collection of technologies





54
Presentation – XHTML and CSS
Data Interaction – DOM
Data Transfer – XML, JSON, Google Protocol Buffers …
Asynchronous Communication – XMLHttpRequest
Scripting Language – JavaScript,VBScript, …
23rd March 2009
Google Gadgets

Exemplar mashup platform

Used in the iGoogle personalised homepage application

55
Building mashups within a mashup
23rd March 2009
Google Gadgets – What Can It Do For You?
Thomas Foster
3rd Year CS Student
56
23rd March 2009
T’was Better To Have Coded Than Not
Coded At All
If you are interested, please join
us for the Session 2 (after lunch)
and the Workshop (on Friday),
where you can get your hands
dirty with code…
57
23rd March 2009
THANK YOU
Please join us for Session 2 (after lunch) and the Workshop (Friday)
58