Web Application Frameworks

WEB APPLICATION FRAMEWORKS

 A web application framework is a software framework

that is designed to support the development of dynamic
web- sites, web applications, web services and web
resources. The framework aims to alleviate the
overhead associated with common activities performed
in web development.
 For example, many frameworks provide libraries for
database access, templating frameworks and
session management, and they often promote code
reuse.
▪ There exist dozens of web application frameworks!
[http://en.wikipedia.org/wiki/Web_application_framework]
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
▪ Lead to a faster and more robust development process
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
View
▪ notifies the controller about changes
selects view

▪ Controller Controller gets

▪ processes interactions with the view state notifies

▪ transforms view interactions into

operations on the model (state Model
modifies
state
modification)

4
ALL-INCLUSIVE MVC
FRAMEWORKS
▪ Java ▪ JavaScript
▪ Apache Struts 2 ▪ Node.js + Express.js
▪ Spring ▪ .NET (C#, Visual Basic)
▪ PHP ▪ ASP.NET MVC
▪ Yii
▪ Zend
▪ CakePHP
▪ Ruby
▪ Ruby on Rails
▪ Python
▪ Django
5
APACHE
STRUTS 2
▪ Free open source framework for creating enterprise-
ready Java-based web applications
▪ Action-based MVC Model 2 (Pull MVC) framework
combining Java Servlets and JSP technology
▪ model
- action (basic building blocks) from which the view can pull information via the
ValueStack
- 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
6
MVC MODEL 2 (MVC 2) IN
STRUTS 2
View
6 e.g. JSP

1 4
Browser Controller
Servlet 5
3

Model
2
POJOs
Database

7
APACHE STRUTS 2
ARCHITECTURE
▪ Receive request
▪ filter chain
 - interception of requests
and responses, e.g. XSLT
transformation

▪ Execute relevant Action

▪ invoke interceptors
▪ read/update data (model)
▪ Build response (view)
▪ often based on JSP
template
▪ interceptors in reverse
[http://struts.apache.org/2.1.6/docs/big-picture.html]
order 8
SPRING
FRAMEWORK
▪ Java application framework
▪ Various extensions for web applications
▪ Modules
▪ model-view-controller
▪ data access
▪ inversion of control container
▪ convention-over-configuration
▪ remote access framework
▪ transaction management
▪ authentication and authorisation
▪ …

9
YII
FRAMEWOR
K
▪ PHP framework for the development of Web 2.0
applications that offers a rich set of features
▪ 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
▪ ...

10
ZEN
D
▪ Open source PHP framework offering various features
▪ MVC architectural pattern
▪ loosely coupled components
▪ object orientation
▪ flexible caching
▪ Simple Cloud API
▪ features to deal with emails (POP3, IMAP4, …)
▪ …

11
CAKEP
HP
▪ Open source PHP web application framework
▪ MVC architectural pattern
▪ rapid prototyping via scaffolding
▪ authentication
▪ localisation
▪ session management
▪ caching
▪ validation
▪ …

12
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
▪ developer has to run an external command to generate the code
13
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)

▪ High modularity
▪ plug-ins can be added for desired server-side functionality
▪ use RubyGems package manager to easily add plug-ins (“gems”)

14
DJANGO
▪ Open source Python web application framework
▪ MVC architectural pattern
▪ don't repeat yourself (DRY)
▪ object-relational mapper
- mapping between model (Python classes) and a relational database
▪ integrated lightweight web server
▪ localisation
▪ caching
▪ ...

15
NODE.JS
▪ Server-side JavaScript
▪ low-level, comparable to functionality offered by Servlets
▪ handling post/get requests, database, sessions, …
▪ Write your entire app in one language
▪ however, server-side and client-side code still separated
▪ Built-in web server (no need for Apache, Tomcat, etc.)
▪ High modularity
▪ packages can be added for additional functionality (via npm)
▪ Other more powerful frameworks such as Express.js build
on top of Node.js
▪ HTTP utility methods (routing, sessions, ...)
▪ template engines (Jade or EJS)
16
ASP.NET MVC
▪ Web framework for .NET languages (C#, VB)
▪ MVC architectural pattern
▪ inversion of control container
▪ extensible and pluggable framework
- can use any existing .NET libraries in the form of DLL files
- core components such as view engine or URL routing modules can be
replaced
▪ can generate some of the client-side JavaScript for you
- form validation
- dynamic updates using Ajax
▪ localisation
▪ session management
▪ caching
▪ …
17
 SPECIALISED FRAMEWORKS AND
TOOLKITS
▪ Client-side web frameworks
▪ Backbone.js
▪ Ember.js
▪ Angular.js
▪ Creating browser-based RIAs
▪ Microsoft Silverlight
▪ Creating cross-platform RIAs
▪ Apache Flex
▪ Creating desktop applications
▪ NW.js
▪ Electron

18
BACKBONE.JS
▪ Cleanly separate data (Model) and user interface (View)
▪ you provide server-side interface to read/write models
▪ Backbone.js does the rest on the client side
▪ Model
▪ load and save models from server
▪ emit events when data changes
▪ View
▪ display models, capture user input and interactions
▪ listens for changes and update view if needed

19
EMBER.JS
▪ Client-side MVC
▪ Built for single-page web applications
▪ information is refreshed dynamically on demand
▪ no page refreshes required
▪ Comes with Ember Data, a data persistence library
▪ provides facilities for object-relational mapping (ORM)
▪ maps client-side models to server-side data
▪ usage is optional, you can also provide your own interface to the
server-side data
▪ Users can create custom HTML tags ("components")
▪ can also include logic relevant to the new tag’s function
- e.g. handle user input or deal with child elements placed in between the
custom tags
20
ANGULAR.JS
▪ Client-side "MVC"
▪ Two-way data binding between models and views
▪ Plain HTML as templates
▪ HTML is extended (e.g. via attributes) to map models to the
template, remains valid HTML
<div ng-controller="AlbumCtrl">
<ul>
<li ng-repeat="image in images">
<img ng-src="{{image.thumbnail}}" alt="{{image.description}}">
</li>
</ul>
</div>

▪ Users can create custom HTML tags ("directives")

▪ can also include logic relevant to the new tag’s function
21
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
▪ code-behind file containing the program logic

22
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

23
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)

24
APACHE FLEX ...
▪ Flex applications can also be deployed as mobile and
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>
HelloWorld.mxml

25
NW.JS
▪ Formerly node-webkit project
▪ Bundles your app for usage as desktop application
▪ Webkit + Node.js + Application Files (HTML, JS, CSS, …)
▪ Lets you call Node.js modules directly from DOM
▪ e.g. use filesystem module to read and write files
▪ Included API provides access to native UI features
▪ right-click context menu
▪ system tray icon
▪ notifications
▪ …

26
ELECTRON
▪ Similar to NW.js
▪ Developed for GitHub's Atom editor, now widely used

27
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
▪ Graphical interface for creating and managing content
▪ Suited for non-technical users since the underlying
technology is normally completely hidden
▪ Web CMS Examples
▪ Joomla, Drupal, Wordpress, ...
28
REFERENCES
▪ Struts 2 Quick Guide
▪ http://www.tutorialspoint.com/struts_2/struts_quick_guide.htm

▪ Apache Struts 2
▪ http://struts.apache.org

▪ Ian Roughley, Struts 2

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

▪ Spring Framework
▪ http://www.springsource.org

▪ Yii Framework
▪ http://www.yiiframework.com

29
REFERENCES ...
▪ Zend Framework
▪ http://framework.zend.com

▪ CakePHP
▪ http://cakephp.org

▪ Ruby on Rails
▪ http://rubyonrails.org

▪ Django
▪ https://www.djangoproject.com

▪ Node.js
▪ http://nodejs.org
▪ http://expressjs.com

30
REFERENCES ...
▪ ASP.NET MVC
▪ http://www.asp.net/mvc

▪ Backbone.js
▪ http://backbonejs.org

▪ Ember.js
▪ http://emberjs.com

▪ Angular.js
▪ https://angularjs.org

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

31
REFERENCES ...
▪ Apache Flex
▪ http://flex.apache.org

▪ NW.js
▪ http://nwjs.io

▪ Electron
▪ http://electron.atom.io

▪ Comparision of Web Application Frameworks

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

32