NeSC Web 2.0 Workshop, March 2009, Edinburgh
Overview
Related Technologies
`
`
`
Practical Web 2.0 – Session 1
Related Technologies and Building Mashups
`
Building Mashups
`
`
`
Jiten Bhagat - jits@cs.man.ac.uk
`
Mark Borkum - m.i.borkum@soton.ac.uk
Rationale
Principles
Google Gadgets
Finish
`
23rd March 2009
Introduction
Cover some technologies
Examples of successful use of technologies
2
23rd March 2009
“One of the key drivers of the development of
Web 2.0 is the emergence of a new
generation of Web-related technologies and
standards. This has been underpinned by
the powerful, though not particularly new,
idea of the Web as platform.”
Related Technologies
JISC Technology and Standards Watch, Feb. 2007.
What is Web 2.0? Ideas, technologies and implications for
education,
by Paul Anderson.
3
4
OR
5
6
All trademarks are the properties of their respective owners
7
8
Specifications
`
`
`
Transport Layers
`
Software Development
SOAP, REST, …
`
Software Platform
`
Software Tools
`
Hardware
`
Infrastructure
`
Standards/Specifications
`
Transport Protocols
`
Methodologies
`
Practices
`
Platforms/Stacks
`
`
LAMP, WIMP, …
Server-side Scripting Languages
`
`
Perl, PHP, Python, ASP.NET, Ruby …
Frameworks
`
`
Ruby on Rails, Merb, Django, …
Client Software
`
`
Firefox, …
Tools
`
Technologies
XHTML, CSS, DOM, Atom, RSS, …
`
Firebug, YSlow, …
9
10
23rd March 2009
Technologies
` Software
11
Development
`
Software Platforms
`
Software Tools
`
Hardware
`
Infrastructure
`
Standards/Specifications
`
Transport Protocols
`
Methodologies
`
Practices
12
23rd March 2009
Programming Languages
Choice
13
23rd March 2009
14
Support rich user facing interactions
15
17
A trend towards openness
16
Faster activation
energy…
Less emphasis on
developing packaged
software...
Quicker learning
curves…
More emphasis on
packaging services...
18
Support the read/write web
Maximise potential for added value
19
20
Rapid development cycles
geekherocomic.com
http://www.geekherocomic.com/2009/02/21/agile-development-explained/
21
22
O’Reilly - What Is Web 2.0 (2005)
Web as a Platform
`
`
Relevant principles:
`
`
`
`
`
In the beginning:
`
`
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
`
`
Then something happened…
`
Characteristics were standardised
`
`
`
`
23
23rd March 2009
Web browsers were ‘kingmakers’
Browsers like Netscape supported their own standards
User experience was determined by their choice of browser
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
23rd March 2009
Asynchronous JavaScript And XML
Asynchronous JavaScript And XML
`
AJAX is a collection of technologies:
`
`
Technique used to “do something”
without reloading the whole page
= Allows the developer to provide
a richer experience
`
`
`
`
Influences from desktop applications:
`
`
`
25
23rd March 2009
AJAX Interactions
Dynamic
Responsive
Feedback
26
23rd March 2009
AJAX is also…
`
Rich functionality purely at client side
`
Rich UI patterns
`
Small details that help users
23rd March 2009
28
23rd March 2009
How Can I Implement AJAX in My Own
Website?
Examples of AJAX
`
Many frameworks:
`
`
`
`
`
`
`
29
Presentation – XHTML and CSS
Data Interaction – DOM
Data Transfer – XML, JSON, Google Protocol Buffers …
Asynchronous Communication – XMLHttpRequest
Scripting Language – JavaScript, VBScript, …
23rd March 2009
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
Linux, Apache, MySQL, PHP/Perl/Python
`
`
Dialect of the ECMAScript standard
`
THE client-side scripting language in modern browsers
`
Unrelated to the JAVA programming language
`
Structured and imperative
`
Dynamic
`
`
`
`
`
`
“if it walks like a duck and quacks like a duck, then it must be a
duck!”
`
Run-time evaluation
`
`
`
Duck typing
`
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
eval(“alert(\“But I’m just a string!\”)”) *
Functional
Lots of JavaScript* Not
in recommended
the next for
2 actual
sessions
of this series…
usage
31
* Windows and Mac equivalents available (ask in store)
23rd March 2009
PHP
32
23rd March 2009
Perl
`
High-level, interpreted and dynamic language
Mainly used for producing dynamic web pages
`
Originally developed in 1987 by Larry Wall
`
Originally created in 1995 by Rasmus Lerdorf
`
Powerful text processing capabilities
`
Originally stood for “Personal Home Pages”
`
`
Free and available for most platforms
Very clean language for reading from the command
line
`
Drupal (CMS) is powered by PHP
`
High-level scripting language
`
`
`
`
Widely regarded as a poor man’s Perl
33
23rd March 2009
Python
Guaranteed control over what goes out
Known for its flexibility and adaptability
34
23rd March 2009
Ruby
`
High-level and multi-paradigm programming
language emphasising code readability
`
Object-oriented, multi-paradigm, dynamic, high-level
and elegant language
`
Developed by Guido van Rossum in the late 1980s
`
Originally developed in 1993 by Yukihiro "Matz"
Matsumoto
`
Concise
`
Designed for productivity and fun
`
Emphasise more the human needs of software
development
`
Concise
`
`
Does what you think it will do
Powerful web application framework: Django
`
`
35
23rd March 2009
Does what you think it will do
Powerful meta-programming capabilities
36
23rd March 2009
Ruby on Rails
My First Ruby on Rails Application
`
Web application framework for Ruby
`
`
Released by David Heinemeier Hansson on July 2004
`
`
Model View Controller (MVC) architecture
`
Principles
`
`
`
`
`
`
`
`
`
`
Convention over configuration
Do not repeat yourself
`
`
gem install rake rails mysql mongrel
Create a Rails application:
`
ActiveRecord,
ActiveResource,
ActionController,
ActionView,
ActiveSupport
yum install mysql‐server ruby ruby‐devel ruby‐mysql rubygems *
Install basic Ruby Gems needed:
`
`
Powerful base libraries
`
Install Fedora 10
Install mySQL, Ruby, RubyGems:
rails ~/my_first_rails_app
cd ~/my_first_rails_app
Start your Rails application:
`
`
ruby script/server
In web browser… http://localhost:3000/
(Ultra) rapid development!
* You might need to install other dependent components
37
23rd March 2009
38
23rd March 2009
`
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
39
40
23rd March 2009
`
Video sharing site
`
Image sharing site
`
Linux, Apache, MySQL, Python, lighttpd (for
videos), etc.
`
Linux, Apache, MySQL, PHP, Perl, Java, Squid,
Memcached, etc.
`
Delivery of over 100 million videos per day
`
More than 4 billion queries per day
`
Over 400,000 photos being added every day
`
Dedicated servers for static content
Source: http://highscalability.com/youtube-architecture
41
Source: http://highscalability.com/flickr-architecture
23rd March 2009
42
23rd March 2009
Rich Internet Applications
`
`
`
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
`
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!
Perpetual betas
43
23rd March 2009
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)
`
Highly informed from existing technologies
xkcd.com
http://xkcd.com/171/
46
23rd March 2009
`
Technology is only the enabler
`
Still need to focus on user requirements and build
usable interfaces
`
Keep It Simple Stupid (KISS)
47
Building Mashups
48
49
Mashups
Mashups
Term originally used in the music industry
`
`
Combine data and functionality
from different sources into a new
set of single tools and services
`
`
Music made up of other released song(s) and samples
Usually produced by other artists
Remixes
Data is key
`
`
= adding value
`
`
Open APIs
Public web services
Etc
Doesn’t (usually) require a programming degree! *
`
* We’ll prove this to you ☺
50
23rd March 2009
Rationale
`
`
`
`
23rd March 2009
Principles
Web 2.0 is about…
`
51
… the web as a platform, right?
… lightweight programming models, right?
… rich and customised user experiences, right?
… data, right?
`
Reusability
`
Remixability
`
Loose coupling
`
“Hackability”
`
Add value *
`
Must be useful *
* Too obvious?
52
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
53
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?
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…
Thomas Foster
3rd Year CS
Student
56
23rd March 2009
THANK YOU
Please join us for Session 2 (after lunch) and the Workshop
(Friday)
58
57
23rd March 2009