framework that is designed to support the development of web applications including web services, web resources and web APIs. […] Web frameworks aim to automate the overhead associated with common activities performed in web development. For example, many web 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 8, 2026 https://en.wikipedia.org/wiki/Comparison_of_web_frameworks Beat Signer - Department of Computer Science - [email protected] 2
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 ▪ ▪ Leads to a faster and more robust development process October 8, 2026 Beat Signer - Department of Computer Science - [email protected] 3
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 ▪ notifies selects view ▪ Controller processes interactions with the view ▪ transforms view interactions into operations on the model (state modification) Controller ▪ October 8, 2026 View modifies state Beat Signer - Department of Computer Science - [email protected] gets state notifies Model 4
▪ various extensions for web applications ▪ Convention over configuration ▪ Embedded web application server ▪ Integration with Spring modules model-view-controller ▪ data access ▪ transaction management ▪ authentication and authorisation ▪ transaction management ▪ authentication and authorisation ▪ … ▪ October 8, 2026 Beat Signer - Department of Computer Science - [email protected] 7
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 ▪ layered caching ▪ ... ▪ October 8, 2026 Beat Signer - Department of Computer Science - [email protected] 11
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 8, 2026 developer must run an external command to generate the code Beat Signer - Department of Computer Science - [email protected] 13
▪ 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 8, 2026 Beat Signer - Department of Computer Science - [email protected] 14
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 8, 2026 Beat Signer - Department of Computer Science - [email protected] 16
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 8, 2026 Beat Signer - Department of Computer Science - [email protected] 17
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 8, 2026 Beat Signer - Department of Computer Science - [email protected] 19
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 ▪ October 8, 2026 combine PDFPhantom + EJS and you can create PDF documents from EJS templates (invoices, …) Beat Signer - Department of Computer Science - [email protected] 20
and fast ▪ minimal core can be extended via Express middleware modules ▪ Templating engine for dynamic HTML rendering ▪ HTTP helpers chaching ▪ redirecting ▪ … ▪ October 8, 2026 Beat Signer - Department of Computer Science - [email protected] 22
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 8, 2026 Beat Signer - Department of Computer Science - [email protected] 23
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 8, 2026 Beat Signer - Department of Computer Science - [email protected] 25
functionality to React data fetching ▪ different rendering strategies (e.g. server-side rendering, static site generation, …) ▪ API routes and server functions ▪ SEO optimisation ▪ … ▪ October 8, 2026 Beat Signer - Department of Computer Science - [email protected] 27
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 8, 2026 Beat Signer - Department of Computer Science - [email protected] 29
of React + Angular React + Angular: Component-based, animations and transitions, and SSR (Server-side rendering) ▪ React: JSX support + render functions ▪ Angular: Directives, Two-way data binding and Watchers ▪ ▪ Users can define rich reusable UI components ▪ Many companies are using Vue ▪ Adobe, NASA, GitLab, Nintendo, … ▪ Nuxt is a full-stack framework for Vue.js October 8, 2026 Beat Signer - Department of Computer Science - [email protected] 31
optimisation ▪ generates specialised code directly manipulating the DOM for better client performance ▪ Component-based architecture ▪ SvelteKit extends Svelte to make it a full-stack web application framework October 8, 2026 Beat Signer - Department of Computer Science - [email protected] 34
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 8, 2026 Beat Signer - Department of Computer Science - [email protected] 36
JavaScript ▪ rendered based on Chromium browser and Node.js as backend ▪ Developed for GitHub's Atom editor, now widely used October 8, 2026 Beat Signer - Department of Computer Science - [email protected] 37
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 (for frontend) framework size (bigger framework = more downloading = slower loading) ▪ code size (more code = more downloading = …) ▪ October 8, 2026 Beat Signer - Department of Computer Science - [email protected] 40
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 ▪ October 8, 2026 Joomla, Drupal, WordPress, ... Beat Signer - Department of Computer Science - [email protected] 41
signer
yatabe
pawan_pharm
juanmartin2026
naochim2026
cbtlibrary
frievea
yoshimura_datam
3l4l5
kaityo256
camel_404
tammyeverts
addyosmani
lauravandoore
sarafernandez
katarinadahlin
bkeepers
eileencodes
keavy
ianozsvald
3n
honnibal
mkilby
