Lecture 05 web_applicationframeworks

Web Information Systems
Web Application Frameworks
Prof. Beat Signer
Department of Computer Science
Vrije Universiteit Brussel

http://www.beatsigner.com
2 December 2005

Web Application Frameworks
A web application framework is a software framework that
is designed to support the development of dynamic websites, web applications and web services and web
resoucres. The framework aims to alleviate the overhead
associated with common activities performed in web
development. For example, many frameworks provide
libraries for database access, template frameworks and
session management, and they often promote code reuse.
[http://en.wikipedia.org/wiki/Web_application_framework]

 There exist dozens of web application frameworks!
October 25, 2013

Beat Signer - Department of Computer Science - bsigner@vub.ac.be

2

Web Application Frameworks ...
 A web application framework offers libraries and
tools to deal with web application issues


template libraries, session management, database access
libraries etc.

 Some frameworks also offer an abstraction from the
underlying enabling technologies


e.g. automatic creation of Java Servlets

 Many frameworks follow the Model-View-Controller
(MVC) design pattern



no mix of application logic and view (e.g. not like in JSP)
increases modularity and reusability

 Leads to a faster and more robust development process
October 25, 2013


3

Model-View-Controller (MVC)
 Model




data (state) and business logic
multiple views can be defined for a single model
when the state of a model changes, its views are notified

 View



renders the data of the model
notifies the controller about changes



October 25, 2013

View

selects view

 Controller


notifies

Controller

processes interactions with the view
transforms view interactions into
operations on the model (state
modification)

modifies
state


gets
state

notifies

Model

4

Apache Struts 2
 Free open source framework for creating enterpriseready Java-based web applications

 Action-based MVC 2 (Pull MVC) framework combining
Java Servlets and JSP technology


model
- action (basic building blocks) takes role of the model instead of the controller
(MVC 2) and the view can pull information from the action
- action represented by POJO (Plain Old Java Object) following the JavaBean
paradigm and optional helper classes



view
- template-based approach often based on JavaServer Pages (JSP) in
combination with tag libraries (collection of custom tags)



controller
- based on Java Servlet filter in combination with interceptors

October 25, 2013


5

MVC Model 2 (MVC 2) in Struts 2
View
6

1
Browser

e.g. JSP

Controller

4

Servlet
3

2

5

Model
POJOs
Database

October 25, 2013


6

Apache Struts 2 Architecture
 Servlet request


standard filter chain
- interception of requests and
responses
- reusable modular units
- e.g. XSLT transformation



FilterDispatcher consults
controller (ActionMapper)

 ActionProxy is called if
action has to be executed


consult Configuration-

Manager
 create ActionInvocation
[http://struts.apache.org/2.1.6/docs/big-picture.html]

October 25, 2013


7

Apache Struts 2 Architecture ...



invoke any interceptors
(controller) before Action
Action class updates the
model

 ActionInvocation does
a lookup for the Result



based on Action result code
mappings in struts.xml

 Result execution (view)



often based on JSP template
interceptors in reverse order

 Send response
[http://struts.apache.org/2.1.6/docs/big-picture.html]

October 25, 2013



filter chain


8

Apache Struts 2
 ValueStack



temporary objects, Action objects, ...
access from JSP via Object Graph Navigational Language (OGNL)

 Multiple view alternatives


JSP, XSLT, Velocity, ...

 Simplifies web development






convention over configuration
intelligent default values reduce the size of configuration files
fosters modularity and loose coupling (dependency injection)
standard development process for Struts 2 web applications

 Requires no changes to the servlet container

October 25, 2013

regular servlet application

9

Apache Struts 2 web.xml
<web-app id="WebApp1" version="2.4" xmlns="http://java.sun.com/xml/ns/j2ee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee
http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">
<filter>
<filter-name>struts</filter-name>
<filter-class>org.apache.struts2.dispatcher.FilterDispatcher</filter-class>
<init-param>
<param-name>actionPackages</param-name>
<param-value>be.ac.vub.wise</param-value>
</init-param>
</filter>

<filter-mapping>
<filter-name>struts</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
<taglib>
<taglib-uri>/WEB-INF/struts-bean.tld</taglib-uri>
<taglib-location>/WEB-INF/struts-bean.tld</taglib-location>
</taglib>
...
</web-app>

October 25, 2013


10

Tag Libraries
 Introduced to encapsulate reusable Java objects in JSP


provide access to methods on objects

 Apache Struts 2 offers four different libraries


HTML
- e.g. buttons, form fields, ...



Template
- tags that are useful for creating dynamic JSP templates



Bean
- e.g. definitions, parameters, ...



Logic
- e.g. comparisons, ...

October 25, 2013


11

Apache Struts 2 Hello World Example
<%@ taglib prefix="s" uri="/struts-tags" %>
<html>
<head>
<title>Hello World</title>
</head>
<body>
<h1><s:property value="message"/></h1>
<p>Time: <b><s:property value="currentTime" /></b></p>
</body>
</html>

October 25, 2013


HelloWorld.jsp

12

Apache Struts 2 Hello World Example ...
package be.ac.vub.wise;
import com.opensymphony.xwork2.ActionSupport;
import java.util.Date;
public class HelloWorldImpl extends ActionSupport {
public static final String MESSAGE = "Hello World!";
public static final String SUCCESS = "success";
private String message;
public String execute() throws Exception {
setMessage(MESSAGE);
return SUCCESS;
}

public void setMessage(String message){
this.message = message;
}
public String getMessage() {
return message;
}
public String getCurrentTime(){
return new Date().toString();
}
}

October 25, 2013

HelloWorldImpl.java

13

Apache Struts 2 Hello World Example ...
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE struts PUBLIC "-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"
"http://struts.apache.org/dtds/struts-2.0.dtd">
<struts>
<constant name="struts.enable.DynamicMethodInvocation" value="false"/>
<constant name="struts.devMode" value="true"/>
<package name="be.ac.vub.wise" namespace="/wise" extends="struts-default">
<action name="HelloWorld" class="be.ac.vub.wise.HelloWorldImpl">
<result>/pages/HelloWorld.jsp</result>
</action>
...
</package>
...
</struts>

struts.xml

 Execute the Hello World example by sending request to


October 25, 2013

http://localhost:8080/wise/HelloWorld.action


14

Spring Framework
 Java application framework
 Various extensions for web applications
 Modules










October 25, 2013

model-view-controller
data access
inversion of control container
convention-over-configuration
remote access framework
transaction management
authentication and authorisation
…


15

Apache Flex
 Software development kit for cross-platform
Rich Internet Applications (RIAs) based on Adobe Flash

 Main components



Adobe Flash Player runtime environment
Flex SDK (free)
- compiler and debugger, the Flex framework and user interface components



Adobe Flash Builder (commercial)
- Eclipse plug-in with MXML compiler and debugger

 Separation of user interface and data


user interface described in MXML markup language in
combination with ActionScript
- compiled into flash executable (SWF flash movie)

- better cross-browser compatibility than AJAX
October 25, 2013


16

Apache Flex ...
 Flex framework offers various actions


e.g. HTTPRequest component

 Flex applications can also be deployed as desktop
applications via Adobe AIR (Adobe Integrated Runtime)
<?xml version="1.0" encoding="UTF-8" ?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="horizontal">
<mx:Script>
<![CDATA[
import mx.controls.Alert;
private function sayHello():void {
Alert.show("Hello " + user.text);
}
]]>
</mx:Script>
<mx:Label fontSize="12" text="Name: " />
<mx:TextInput id="user" />
<mx:Button label="Go" click="sayHello()" />
</mx:Application>

October 25, 2013

HelloWorld.mxml


17

Microsoft Silverlight
 Microsoft's platform for Rich Internet Applications


competitor to Adobe Flash

 Runtime requires a browser plug-in



Internet Explorer, Firefox, Safari and Google Chrome
Silverlight Core Common Language Runtime (CoreCLR)

 A Silverlight application consists of


CreateSilverlight.js and Silverlight.js
- initialise the browser plug-in



user interface described in the Extensible Application Markup
Language (XAML)
- XAML files are not compiled  indexable by search engines



October 25, 2013

code-behind file containing the program logic

18

Microsoft Silverlight ...
 Programming based on a subset of the .NET Framework
 Silverlight introduces a set of features including


LocalConnection API
- asynchronous messaging between multiple applications on the same machine



out-of-browser experiences
- locally installed application that runs out-of-the-browser (OOB apps)
- cross-platform with Windows/Mac



microphone and Web cam support

 Two types of Silverlight web requests


WebClient class
- OpenReadAsync (for streaming), DownloadStringAsync as well as uploads



WebRequest
- register an asynchronous callback handler (based on HttpWebRequest)

October 25, 2013


19

Moonlight
 Moonlight is an open source implementation of
Silverlight (mainly for Linux) that is developed as
part of the Mono project


October 25, 2013

development was abandoned in December 2011


20

OpenLaszlo
 Open source RIA platform
 Two main components


LZX programming language
- XML and JavaScript
- similar to MXML and XAML



OpenLaszlo Server

 The Open Laszlo Server compiles LZX applications into
different possible runtime components




October 25, 2013

Java Servlets
binary SWF files
DHTML (HTML, DOM, JavaScript and CSS)


21

Ruby on Rails (RoR)
 Open source web application framework
 Combination of


dynamic, reflective, object-oriented programming language Ruby
- combination of Perl-inspired syntax with "Smalltalk features"



web application framework Rails

 Based on MVC architectural pattern


structure of a webpage separated from its functionality via the
unobtrusive JavaScript technique

 The scaffolding feature offered by Rails can
automatically generate some of the models and views
that are required for a website

October 25, 2013

developer has to run an external command to generate the code

22

Ruby on Rails (RoR) ...
 Ruby on Rails Philosophy


Don't Repeat Yourself (DRY)
- information should not be stored redundantly (e.g. do not store information in
configuration files if the data can be automatically derived by the system)



Convention over Configuration (CoC)
- programmer only has to specify unconventional application settings
- naming conventions to automatically map classes to database tables (e.g. by
default a 'Sale' model class is mapped to the 'sales' database table)

October 25, 2013


23

Video: Ruby on Rails

http://media.rubyonrails.org/video/rails_blog_2.mov
October 25, 2013


24

Yii Framework
 PHP framework for the development of Web 2.0
applications that offers a rich set of features











October 25, 2013

AJAX-enabled widgets
web service integration
authentication and authorisation
flexible presentation via skins and themes
Data Access Objects (DAO) interface to transparently access
different database management systems
integration with the jQuery JavaScript library
layered caching
...


25

Zend
 Open source PHP framework offering various features









October 25, 2013

MVC architectural pattern
loosely coupled components
object orientation
flexible caching
Simple Cloud API
features to deal with emails (POP3, IMAP4, …)
…


26

CakePHP
 Open source PHP web application framework










October 25, 2013

rapid prototyping via scaffolding
authentication
localisation
session management
caching
validation
…


27

Node.js
 Server-side JavaScript


handling post/get requests, database, sessions, …

 Write your entire app in one language
 Built-in web server (no need for Apache, Tomcat, etc.)
 High modularity


plug-ins can be added for desired server-side functionality

 Other more powerful frameworks such as Express.js
build on top of Node.js

October 25, 2013


28

Django
 Open source Python web application framework









October 25, 2013

don't repeat yourself (DRY)
object-relational mapper
integrated lightweight web server
localisation
caching
...


29

Web Content Management Systems
 Content management systems that focus on web content
 Main functionality


data storage and publishing, user management (including access
rights), versioning, workflows

 Offline (create static webpages), online (create
webpages on the fly) and hybrid systems

 Often some kind of server-side caching
 Suited for non-technical users since the underlying
technology is normally completely hidden

 Web CMS Examples

October 25, 2013

Joomla, Drupal, ...

30

Exercise 5
 Web Application Frameworks


October 25, 2013

implementation of a Struts 2 application


31

References
 Struts 2 Quick Guide


http://www.tutorialspoint.com/struts_2/struts_quick_g
uide.htm

 Apache Struts 2


http://struts.apache.org/2.x/

 Ian Roughley, Struts 2


http://refcardz.dzone.com/refcardz/struts2

 Spring Framework


http://www.springsource.org

 Apache Flex


October 25, 2013

http://flex.org


32

References ...
 Microsoft Silverlight
http://www.microsoft.com/silverlight/
 http://silverlight.net/learn/videos/silverlightvideos/net-ria-services-intro/


 Open Laszlo


http://www.openlaszlo.org

 Ruby on Rails Video: Creating a Weblog in 15 Minutes


http://www.youtube.com/watch?v=tUH1hewXnC0

 Yii Framework


http://www.yiiframework.com

 Zend Framework

October 25, 2013

http://framework.zend.com

33

References ...
 CakePHP


http://cakephp.org

 Node.js


http://nodejs.org

 Django


https://www.djangoproject.com

 Comparision of Web Application Frameworks


October 25, 2013

http://en.wikipedia.org/wiki/Comparison_of_web_
application_frameworks


34

Next Lecture
Web 2.0 Basics

2 December 2005

Lecture 05 web_applicationframeworks

Recommended

More Related Content

What's hot (18)

Viewers also liked (15)

Similar to Lecture 05 web_applicationframeworks (20)

Recently uploaded (20)

Lecture 05 web_applicationframeworks