Web Technologies Web Application Frameworks Prof. Beat Signer Department Vrije beatsigner.com Universiteit of Computer Brussel Science 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 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 

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 ▪ ▪ Leads to a faster and more robust development process October 8, 2026 Beat Signer - Department of Computer Science - [email protected] 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 ▪ 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 

MVC Model 2 (Web MVC) View 5 1 Browser e.g. JSP Controller Servlet 3 2 October 8, 2026 4 Model POJOs Database Beat Signer - Department of Computer Science - [email protected] 5 

Web Application Frameworks ▪ JavaScript/TypeScript ▪ Java ▪ Node.js + Express.js ▪ Deno ▪ React ▪ Next.js ▪ Angular ▪ Vue.js ▪ Svelte Spring Boot ▪ ▪ PHP Laravel ▪ Yii ▪ ▪ Ruby ▪ Ruby on Rails ▪ Python ▪ Desktop Applications Django ▪ Flask ▪ ▪ ▪ .NET (C#, Visual Basic) ▪ October 8, 2026 Electron ▪ Native Mobile Apps ▪ NativeScript ASP.NET Core Beat Signer - Department of Computer Science - [email protected] 6 

Spring Boot ▪ Based on the Spring Framework for Java ▪ 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 

Video: Spring Boot in 2 Minutes October 8, 2026 Beat Signer - Department of Computer Science - [email protected] 8 

Laravel ▪ Open-source full-stack PHP web application framework ▪ follows MVC pattern ▪ Built-in Eloquent Object Relational Mapper (ORM) ▪ Server-side template engine (Blade templates) ▪ Various packages user authentication and authorisation (Socialite) ▪ payments (Cashier) ▪ text search (Scout) ▪ … ▪ October 8, 2026 Beat Signer - Department of Computer Science - [email protected] 9 

Video: Laravel in 100 Seconds October 8, 2026 Beat Signer - Department of Computer Science - [email protected] 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 ▪ layered caching ▪ ... ▪ October 8, 2026 Beat Signer - Department of Computer Science - [email protected] 11 

Video: Getting Started With Yii2 October 8, 2026 Beat Signer - Department of Computer Science - [email protected] 12 

Ruby on Rails (RoR) ▪ Open source full-stack 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 8, 2026 developer must run an external command to generate the code Beat Signer - Department of Computer Science - [email protected] 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”) ▪ October 8, 2026 Beat Signer - Department of Computer Science - [email protected] 14 

Video: Ruby on Rails in 100 Seconds October 8, 2026 Beat Signer - Department of Computer Science - [email protected] 15 

Django ▪ Open-source Python full-stack 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 8, 2026 Beat Signer - Department of Computer Science - [email protected] 16 

Flask ▪ Open-source Python backend 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 8, 2026 Beat Signer - Department of Computer Science - [email protected] 17 

Video: A Brief Introduction to Flask October 8, 2026 Beat Signer - Department of Computer Science - [email protected] 18 

Node.js ▪ Backend JavaScript runtime platform 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 8, 2026 Beat Signer - Department of Computer Science - [email protected] 19 

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 ▪ 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 

Video: Node.js Crash Course October 8, 2026 Beat Signer - Department of Computer Science - [email protected] 21 

Express.js ▪ Node.js-based backend web application framework ▪ Lightweight, minimalistic 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 

Deno ▪ Backend JavaScript runtime platform ▪ 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 8, 2026 Beat Signer - Department of Computer Science - [email protected] 23 

Video: Deno in 100 Seconds October 8, 2026 Beat Signer - Department of Computer Science - [email protected] 24 

React ▪ Frontend UI library ("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 8, 2026 Beat Signer - Department of Computer Science - [email protected] 25 

Video: React in 100 Seconds October 8, 2026 Beat Signer - Department of Computer Science - [email protected] 26 

Next.js ▪ Open source full-stack React-based framework ▪ Adds backend 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 

Video: Next.js in 100 Seconds October 8, 2026 Beat Signer - Department of Computer Science - [email protected] 28 

Angular ▪ Frontend TypeScript web application framework ▪ 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: ` ` }) October 8, 2026 Beat Signer - Department of Computer Science - [email protected] 29 

Video: Angular in 100 Seconds October 8, 2026 Beat Signer - Department of Computer Science - [email protected] 30 

Vue.js ▪ Open-source JavaScript frontend web application framework ▪ Combination 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 

Video: Vue.js in 100 Seconds October 8, 2026 Beat Signer - Department of Computer Science - [email protected] 32 

Video: Nuxt in 100 Seconds October 8, 2026 Beat Signer - Department of Computer Science - [email protected] 33 

Svelte ▪ Open-source JavaScript frontend web application framework ▪ Compile-time 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 

Video: Svelte in 100 Seconds October 8, 2026 Beat Signer - Department of Computer Science - [email protected] 35 

ASP.NET Core ▪ 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 8, 2026 Beat Signer - Department of Computer Science - [email protected] 36 

Electron ▪ Build desktop applications based on HTML, CSS and 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 

Video: Electron in 100 Seconds October 8, 2026 Beat Signer - Department of Computer Science - [email protected] 38 

NativeScript ▪ TypeScript + Vue, React, Angular or Svelte for mobile apps ▪ iOS and Android support ▪ Access to native APIs October 8, 2026 Beat Signer - Department of Computer Science - [email protected] 39 

Choosing a Web Application 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 (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 

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 ▪ October 8, 2026 Joomla, Drupal, WordPress, ... Beat Signer - Department of Computer Science - [email protected] 41 

Exercise 3 ▪ Modern Web Application Frameworks October 8, 2026 Beat Signer - Department of Computer Science - [email protected] 42 

References ▪ Spring Boot ▪ ▪ ▪ https://spring.io/projects/spring-boot https://www.youtube.com/watch?v=-ILh8pl5lj8 https://www.youtube.com/watch?v=gJrjgg1KVL4 ▪ Laravel ▪ ▪ https://laravel.com https://www.youtube.com/watch?v=rIfdg_Ot-LI ▪ Yii Framework ▪ ▪ October 8, 2026 https://www.yiiframework.com https://www.youtube.com/watch?v=JD5Y-lQNrPs Beat Signer - Department of Computer Science - [email protected] 43 

References ... ▪ Ruby on Rails ▪ ▪ https://rubyonrails.org https://www.youtube.com/watch?v=2DvrRadXwWY ▪ Django ▪ https://www.djangoproject.com ▪ Flask https://flask.palletsprojects.com ▪ https://www.youtube.com/watch?v=AgVqsmz-ZW4 ▪ ▪ Node.js https://nodejs.org ▪ https://www.youtube.com/watch?v=32M1al-Y6Ag ▪ October 8, 2026 Beat Signer - Department of Computer Science - [email protected] 44 

References ... ▪ Express.js ▪ https://expressjs.com ▪ Deno ▪ https://deno.land/ ▪ ASP.NET MVC ▪ https://www.asp.net/mvc ▪ React https://reactjs.org ▪ https://www.youtube.com/watch?v=Tn6-PIqc4UM ▪ October 8, 2026 Beat Signer - Department of Computer Science - [email protected] 45 

References ... ▪ Next.js ▪ https://nextjs.org ▪ https://www.youtube.com/watch?v=Sklc_fQBmcs ▪ Angular https://angular.io ▪ https://www.youtube.com/watch?v=Ata9cSC2WpM ▪ ▪ Vue.js https://vuejs.org ▪ https://www.youtube.com/watch?v=nhBVL41-_Cw ▪ ▪ Nuxt https://nuxt.com ▪ https://www.youtube.com/watch?v=dCxSsr5xuL8 ▪ October 8, 2026 Beat Signer - Department of Computer Science - [email protected] 46 

References ... ▪ Svelte ▪ ▪ https://svelte.dev https://www.youtube.com/watch?v=rv3Yq-B8qp4 ▪ Electron https://electron.atom.io ▪ https://www.youtube.com/watch?v=m3OjWNFREJo ▪ ▪ NativeScript ▪ https://nativescript.org ▪ Comparison of Web Application Frameworks ▪ October 8, 2026 https://en.wikipedia.org/wiki/Comparison_of_web_frameworks Beat Signer - Department of Computer Science - [email protected] 47 

Next Lecture HTML5 and the Open Web Platform 2 December 2005