web application frameworks - web technologies (1019888bnr)

2 December 2005

Web TechnologiesWeb Application Frameworks

Prof. Beat Signer

Department of Computer Science

Vrije Universiteit Brussel

http://www.beatsigner.com

http://www.beatsigner.com/

Beat Signer - Department of Computer Science - [email protected] 2October 21, 2016

Web Application Frameworks

There exist dozens of 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.[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


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

Controller processes interactions with the view

transforms view interactions intooperations on the model (statemodification)

Model

Controller

View

notifies

modifies

state

selects view

notifies

gets

state


All-Inclusive MVC Frameworks

Java Apache Struts 2

Spring

PHP Yii

Zend

CakePHP

Ruby Ruby on Rails

Python Django

JavaScript Node.js + Express.js

.NET (C#, Visual Basic) ASP.NET MVC


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


MVC Model 2 (MVC 2) in Struts 2

Model

POJOs

Database

Controller

Servlet

View

e.g. JSP

Browser

1

2

3

4

5

6


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 order

Send response

again through filter chain[http://struts.apache.org/2.1.6/docs/big-picture.html]


DEMO: Struts 2 Form Validation


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

…


Yii Framework

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

...


Zend

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, …)

…


CakePHP

Open source PHP web application framework MVC architectural pattern

rapid prototyping via scaffolding

authentication

localisation

session management

caching

validation

…


DEMO: CakePHP


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


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


DEMO: Ruby on Rails


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

...


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)


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

…


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


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


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


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

Users can create custom HTML tags ("directives") can also include logic relevant to the new tag’s function

<div ng-controller="AlbumCtrl"><ul><li ng-repeat="image in images"><img ng-src="{{image.thumbnail}}" alt="{{image.description}}">

</li></ul>

</div>


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


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


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)


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


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

…


DEMO: NW.js


Electron

Similar to NW.js

Developed for GitHub's Atom editor, now widely used


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, ...


Exercise 4

Java Servlets and Modern Web Application

Frameworks


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

http://www.tutorialspoint.com/struts_2/struts_quick_guide.htm

http://struts.apache.org/

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

http://www.springsource.org/

http://www.yiiframework.com/


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

http://framework.zend.com/

http://cakephp.org/

http://rubyonrails.org/

https://www.djangoproject.com/

https://www.djangoproject.com/

http://expressjs.com/


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/

http://www.asp.net/mvc

http://backbonejs.org/

http://emberjs.com/

https://angularjs.org/

http://www.microsoft.com/silverlight/

http://silverlight.net/learn/videos/silverlight-videos/net-ria-services-intro/


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

http://flex.apache.org/

http://nwjs.io/

http://electron.atom.io/

http://en.wikipedia.org/wiki/Comparison_of_web_application_frameworks

2 December 2005

Next LectureCSS3 and Responsive Web Design

web application frameworks - web technologies (1019888bnr)

Education