ModWeb

1
ModWeb

• A collaborative web based system for tailoring
  end-user appearance and functions of web sites
• By Martin Frojd

2
Contents

• Motivation
• Web development
• Mod Web
• Technology used
• Technology motivation / evaluation
• The system
• Client
• Server
• Experience
• Conclusion

3
Webdev software engineering

• A new boom is happening web applications are
  very popular and cause a lot of buzz in the
  business
• E.g. Flickr, del.icio.us, Google Mail
• Buzzwords AJAX, XHTML, Web 2.0, social, tagging
• How well can web development follow the
  principles of software engineering?
• There is an apparent lack of this, but some
  changes can be seen
• Yahoos Design Patterns, aimed at various user
  interface problems to be solved with JavaScript,
  adds some of these practices.
• Using the Prototype JavaScript framework enables
  some OO features and cleaner code
• XHTML, Stylesheets and JavaScripts separates in
  similar way to Model, View, Controller

4
(No Transcript)
5
(Rapid) Web Development Frameworks

• A hot topic in web development today
• Create web applications fast using existing
  frameworks
• Interesting for enterprises that need
  applications fast, i.e. an intranet app or for
  shorter time-to-market
• Examples Ruby on Rails, CakePHP, Apache Cocoon,
  CherryPy, ASP .NET
• ModWeb was decided to use this and evaluate how
  rapid and useful it really is

6
AJAX

• Asynchronous JavaScript And XML
• Can send requests from JavaScript user interface
  without reloading, thereby fetching information
  as needed.
• Responsive UI
• Reduced total data sent?

7
Greasemonkey

• Popular extension to Mozilla Firefox
• Loads JavaScripts (called user scripts) that
  dictates changes on the current (X)HTML document
  through the Document Object Model (DOM)
• Ex document.body.style.background red
• Can add functionality in addition to changing
  appearance.
• Can for example
• Make sure that all URLs displayed in the browser
  are clickable links
• Improve the usability of a site you frequent
• Route around common and annoying website bugs

8
Motivation

• Greasemonkey is popular but requires the users to
  find, download and apply each and every script by
  themselves, and only for users of Firefox and
  Greasemonkey
• ModWeb offers the possibility of modifying web
  sites from any browser, collaboratively and
  on-the-fly with ease.
• By adding collaboration, people can rely on a
  few, skilled modders that make popular changes to
  popular web sites tailoring the Internet

9
Motivation, contd.

• ModWeb enhances the functionality of Greasemonkey
  user scripts by
• Fetching from server, so they are always updated
• Adding personalization to scripts by looking up
  details entered into the ModWeb account
• Works on any computer switch computer but the
  scripts are always online and fetchable with your
  settings
• Ex Add your name and address in any web form on
  sites using the modification

10
Technology used

• JavaScript, through
• Prototype, semi-OO-framework
• AJAX asynchronous requests from the clients
• JSON serializes JS objects for HTTP transfer
  between client and server
• PHP on Apache, through
• CakePHP a rapid development framework

11
Aspect oriented?

• Designing this application in an aspect oriented
  way was considered as an interesting challenge
• Aspect oriented programming would help a lot in
  most web applications to re-use code
• However, it was rejected due to the project
  overhead of introducing a new design and
  implementation method, as well as insufficient
  support at PHP (and non-existent in JS)

12
Technology evaluation

• To be able to give most functionality at the
  hands of the users, in any browser, a big part of
  ModWeb is the JavaScript
• JavaScript is not fully OO, and not fully
  separated from View (Model-View-Controller).
• I chose to rely on JavaScript to offer in-browser
  interface, cross-platform support, etc.
  JavaScript is also very popular and a hot topic
  in junction with AJAX.
• Alternatives are Java Applet, Flash and ActiveX.
  In a sense, they are all virtual machines, and I
  choose the least obtrusive and most widespread(JS)

13
Technology evaluation, contd.

• Originally JSP was supposed to be used. JSP was
  rejected because
• Not as widely supported as PHP
• PHP was used instead, because it is
• Very widely available at web hosts and popular
• Simple for simple tasks
• Fast set up of development environment
• JSON is used because it is native to JS
• Example "popup" "menuitem" "value" "New",
  "onclick" "CreateNewDoc()" ,

14
The System - ModWeb
15
Procedure

• Fetch JavaScript for user interface from server
  or cache
• Fetch list of available modifications to web site
  being browsed from server
• User applies or makes changes to selected
  modification
• a) Modification code is fetched from server and
  applied
• b) Changes to a site are saved to the server

16
Clients

• Clients are the applications that connect to the
  ModWeb server and presents the end-user interface
  (within the browser)
• Bookmarklet Works in most modern browsers. A
  link that, when clicked, activates the ModWeb
  interface for modifying the current site.
• Greasemonkey A Greasemonkey script can be
  installed to automatically give ModWeb
  functionality to any site.
• ModWeb Proxy The server acts as a proxy and
  delivers the site with ModWeb functionality
  added. The proxy is reached through
  http//modweb.org/ltsite urlgt

17
Example interface
18
Web site server front end

• The face of ModWeb and front end manager of the
  server and database
• Allows users to manage their accounts and mods,
  and also finding new mods and friends
• Has two distinct features the proxy mod client
  and the site editor, that enables creation of
  advanced mods without coding any scripts

19
Sitemap

• View
• View modded site at ModWeb
• Download Greasemonkey script
• Get bookmarklet
• Modify
• Create mod (WYSIWYG)
• Upload script
• Fetch from userscripts.org
• Apply existing script
• Write scripts
• Browse scripts
• (Debug script)
• Share
• Friends
• Explore users
• Explore scripts
• Share your scripts
• Settings
• User details

20
Server back end

• Administration of data through simple PHP script
• PHP scripts will server dynamic information from
  a MySQL database to calling JavaScripts
• Can handle many concurrent requests inherently
• SQL database modeled almost directly from the
  domain model

21
Domain model
22
Experiences

• Short development time but promising results
• UML is always causing trouble different
  guidelines from different authors and seemingly
  no tool that fulfills them all (tried Visio and
  Poseidon) ? inconsequent diagrams
• Web development still far from other development
  when it comes to Software Engineering

23
Conclusion

• Software engineering principles can be used in
  design, but has less relevance in the actual
  implementation of modern web applications
  (compared to standard applications)
• ModWeb nevertheless includes these practices
  together with a useful and realistic concept
  not a project for the projects sake