Web Technologies

Web Application Frameworks

Prof. Beat Signer & Maxim Van de Wynckel

Department of Computer Science

Vrije Universiteit Brussel

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 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.
[https://en.wikipedia.org/wiki/Web_application_framework]

▪ There exist dozens of web application frameworks!

October 22, 2021 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, security & session management, database
access libraries (ORM) 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
October 22, 2021 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 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)

October 22, 2021 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 4

 Server-side MVC Frameworks
▪ Java ▪ JavaScript
▪ Apache Struts 2 ▪ Node.js + Express.js
▪ Spring ▪ Deno
▪ PHP ▪ .NET (C#, Visual Basic)
▪ Yii ▪ ASP.NET MVC
▪ Zend
▪ CakePHP
▪ Ruby
▪ Ruby on Rails
▪ Python
▪ Django
▪ Flask

October 22, 2021 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 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

October 22, 2021 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 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

October 22, 2021 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 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 order
▪ Send response
▪ again through filter chain
[https://struts.apache.org/core-developers/big-picture]

October 22, 2021 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 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
▪ …

October 22, 2021 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 9

 Video: Spring Demo

October 22, 2021 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 10

 Yii Framework
▪ PHP framework for the development of Web 2.0
applications that offers a rich set of features
▪ AJAX-enabled widgets (Asynchronous JavaScript and XML)
▪ 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
▪ ...

October 22, 2021 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 11

 Video: Yii Framework Demo

October 22, 2021 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 12

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

October 22, 2021 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 13

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

October 22, 2021 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 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
▪ ...

October 22, 2021 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 15

 Django …

October 22, 2021 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 16

 Video: Django Demo

October 22, 2021 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 17

 Flask
▪ Open source Python microframework
▪ MVC architectural pattern
▪ built-in development server and debugger
▪ integrated unit testing support
▪ RESTful request dispatching
▪ templating through Jinja2
▪ friendly Web Server Gateway Interface (WSGI) via Werkzeug
▪ support for secure cookies (client side sessions)
▪ ...

October 22, 2021 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 18

 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

October 22, 2021 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 19

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

October 22, 2021 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 20

 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
▪ SSR (Server Side Rendering) of client-side HTML is possible
▪ Built-in web server (no need for Apache, Tomcat, etc.)
▪ High modularity
▪ packages can be added for additional functionality (via npm)
▪ many available frameworks (Express, Passport, Sequelize,…)
▪ HTTP utility methods (routing, sessions, ...)
▪ template engines (Jade, EJS, …)

October 22, 2021 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 21

 Node.js Packages
▪ Express, EJS: web server and template engine
▪ customisable web server
▪ render templates similar to JSP
▪ Passport: session + authentication
▪ basic login, API login using Authorization header
▪ social media login (Google, Facebook, …)
▪ Sequelize: ORM database framework
▪ do not worry about SQL queries
▪ do not worry about basic security issues
▪ Many more + combinations
▪ combine PDFPhantom + EJS and you can create PDF documents
from EJS templates (invoices, …)

October 22, 2021 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 22

 Demo: Node.js + Express + EJS

October 22, 2021 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 23

 Deno
▪ Server-side JavaScript
▪ Created by Node.js founder
▪ Improved on ‘issues’ in Node.js
▪ secure runtime (i.e. explicit permission for network and file access)
▪ standard TypeScript support
▪ ES6 imports instead of npm packages

October 22, 2021 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 24

 Video: Deno in 100 Seconds

October 22, 2021 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 25

 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
▪ …
October 22, 2021 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 26
 Specialised Frameworks and Toolkits
▪ Client-side web frameworks
▪ Angular.js
▪ Angular
▪ React
▪ Vue.js
▪ …
▪ Creating cross-platform RIAs
▪ Apache Flex
▪ Creating desktop applications
▪ NW.js
▪ Electron

October 22, 2021 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 27

 React
▪ Client-side "MVC"
▪ Users can define rich reusable UI components
▪ small bundles of HTML, CSS and JS related to a UI component
▪ JSX files (Combination of JavaScript and HTML)
▪ React Native → React with native iOS or Android
components instead of HTML DOM

October 22, 2021 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 28

 Video: React in 100 Seconds

October 22, 2021 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 29

 AngularJS (LTS)
▪ Client-side "MVC"
▪ Two-way data binding between models and views
▪ The new Angular (TypeScript) is preferred for new
projects
▪ Users can define rich reusable UI components

October 22, 2021 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 30

 Angular
▪ Client-side "MVC"
▪ Two-way data binding between models and views
▪ Users can define rich reusable UI components
▪ small bundles of HTML, CSS and JS related to a UI component
@Component({
selector: 'my-images',
providers : [ImageService],
styles: [ ` div { background-color: blue;} `]
template: `
<div class='image_gallery'>
<div *ngFor="#i of images">
<img src="{{i.path}}" alt="i.description">
</div>
</div> `
})

October 22, 2021 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 31

 Angular
▪ Client-side "MVC"
▪ Two-way data binding between models and views
▪ Users can define rich reusable UI components
▪ small bundles of HTML, CSS and JS related to a UI component

October 22, 2021 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 32

 Video: Angular in 100 Seconds

October 22, 2021 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 33

 Vue.js
▪ Combination of React + Angular
▪ React + Angular: Component-based
▪ React + Angular: Animations and transitions
▪ React + Angular: SSR (Server-side rendering)
▪ React: JSX support + render functions
▪ Angular: Directives
▪ Angular: Two-way data binding
▪ Angular: Watchers
▪ Two-way data binding between models and views
▪ Users can define rich reusable UI components
▪ Many companies are using Vue
▪ Adobe, NASA, GitLab, Nintendo, …

October 22, 2021 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 34

 Video: Vue.js in 100 Seconds

October 22, 2021 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 35

 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
October 22, 2021 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 36
 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
▪ …

October 22, 2021 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 37

 Electron
▪ Similar to NW.js (similar native APIs)
▪ Developed for GitHub's Atom editor, now widely used

October 22, 2021 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 38

 Demo: Electron + Vue.js

October 22, 2021 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 39

 NativeScript
▪ TypeScript + Vue, React or Angular for mobile apps
▪ iOS and Android support
▪ Access to native APIs

October 22, 2021 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 40

 Meteor

▪ Full stack framework (server and client side)

▪ Integrates with many existing technologies
▪ MongoDB
▪ Vue, React, Angular
▪ NPM (Node.js), Cordova
▪ Large focus on getting data from server to client and
client to server without creating your own API endpoints
▪ Example: Used on BigBlueButton

October 22, 2021 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 41

 Choosing a Client-side Framework
▪ Support and maintenance
▪ who maintains it?
▪ which companies use it? ($$$)
▪ how regular is it updated?
▪ Learning curve & adoptability
▪ is it similar to another framework?
▪ is there a clear separation of concerns? *
▪ Performance
▪ framework size (bigger framework = more downloading = slower
loading)
▪ code size (more code = more downloading = …)

October 22, 2021 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 42

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

October 22, 2021 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 43

 Exercise 4
▪ Modern Web Application Frameworks

October 22, 2021 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 44

 References
▪ Struts 2 Quick Guide
▪ https://www.tutorialspoint.com/struts_2/struts_quick_guide.htm

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

▪ Ian Roughley, Struts 2

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

▪ Spring Framework
▪ https://spring.io
▪ https://www.youtube.com/watch?v=pdBGn7pm6T0

▪ Yii Framework
▪ https://www.yiiframework.com
▪ https://www.youtube.com/watch?v=dJ5bVCkcH9I

October 22, 2021 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 45

 References ...
▪ Zend Framework
▪ https://framework.zend.com

▪ CakePHP
▪ https://cakephp.org

▪ Django
▪ https://www.djangoproject.com
▪ https://www.youtube.com/watch?v=aWxdlA_fwDo

▪ Flask
▪ https://flask.palletsprojects.com

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

October 22, 2021 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 46

 References ...
▪ Node.js
▪ https://nodejs.org
▪ https://expressjs.com

▪ Deno
▪ https://deno.land/
▪ ASP.NET MVC
▪ https://www.asp.net/mvc

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

October 22, 2021 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 47

 References ...
▪ Angular
▪ https://angular.io
▪ https://www.youtube.com/watch?v=Ata9cSC2WpM
▪ Vue.js
▪ https://vuejs.org
▪ https://www.youtube.com/watch?v=nhBVL41-_Cw

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

▪ NW.js
▪ https://nwjs.io
▪ Electron
▪ https://electron.atom.io

October 22, 2021 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 48

 References ...
▪ NativeScript
▪ https://nativescript.org
▪ Meteor
▪ https://www.meteor.com

▪ Comparision of Web Application Frameworks

▪ https://en.wikipedia.org/wiki/Comparison_of_web_frameworks

October 22, 2021 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 49

Next Lecture
CSS3 and Responsive Web Design

2 December 2005