2 December 2005 Web Technologies Web Application Frameworks Prof. Beat Signer, Maxim Van de Wynckel Department of Computer Science Vrije Universiteit Brussel beatsigner.com Department of Computer Science Vrije Universiteit Brussel beatsigner.com

Beat Signer - Department of Computer Science - [email protected] 2 October 8, 2024 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. [https://en.wikipedia.org/wiki/Web_application_framework]

Beat Signer - Department of Computer Science - [email protected] 3 October 8, 2024 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

Beat Signer - Department of Computer Science - [email protected] 4 October 8, 2024 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 into operations on the model (state modification) Model Controller View notifies modifies state selects view notifies gets state

Beat Signer - Department of Computer Science - [email protected] 5 October 8, 2024 Server-side MVC Frameworks ▪ Java ▪ Apache Struts 2 ▪ Spring ▪ PHP ▪ Yii ▪ Zend ▪ CakePHP ▪ Ruby ▪ Ruby on Rails ▪ Python ▪ Django ▪ Flask ▪ JavaScript ▪ Node.js + Express.js ▪ Deno ▪ .NET (C#, Visual Basic) ▪ ASP.NET MVC

Beat Signer - Department of Computer Science - [email protected] 6 October 8, 2024 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

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

Beat Signer - Department of Computer Science - [email protected] 8 October 8, 2024 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]

Beat Signer - Department of Computer Science - [email protected] 9 October 8, 2024 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 ▪ …

Beat Signer - Department of Computer Science - [email protected] 10 October 8, 2024 Video: Spring Demo

Beat Signer - Department of Computer Science - [email protected] 11 October 8, 2024 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 ▪ ...

Beat Signer - Department of Computer Science - [email protected] 12 October 8, 2024 Video: Yii Framework Demo

Beat Signer - Department of Computer Science - [email protected] 13 October 8, 2024 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, …) ▪ …

Beat Signer - Department of Computer Science - [email protected] 14 October 8, 2024 CakePHP ▪ Open source PHP web application framework ▪ MVC architectural pattern ▪ rapid prototyping via scaffolding ▪ authentication ▪ localisation ▪ session management ▪ caching ▪ validation ▪ …

Beat Signer - Department of Computer Science - [email protected] 15 October 8, 2024 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 ▪ ...

Beat Signer - Department of Computer Science - [email protected] 16 October 8, 2024 Django …

Beat Signer - Department of Computer Science - [email protected] 17 October 8, 2024 Video: Django Demo

Beat Signer - Department of Computer Science - [email protected] 18 October 8, 2024 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) ▪ ...

Beat Signer - Department of Computer Science - [email protected] 19 October 8, 2024 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

Beat Signer - Department of Computer Science - [email protected] 20 October 8, 2024 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”)

Beat Signer - Department of Computer Science - [email protected] 21 October 8, 2024 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, …)

Beat Signer - Department of Computer Science - [email protected] 22 October 8, 2024 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, …)

Beat Signer - Department of Computer Science - [email protected] 23 October 8, 2024 Demo: Node.js + Express + EJS

Beat Signer - Department of Computer Science - [email protected] 24 October 8, 2024 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

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

Beat Signer - Department of Computer Science - [email protected] 26 October 8, 2024 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 ▪ …

Beat Signer - Department of Computer Science - [email protected] 27 October 8, 2024 Specialised Frameworks and Toolkits ▪ Client-side web frameworks ▪ Angular.js ▪ Angular ▪ React ▪ Vue.js ▪ … ▪ Creating desktop applications ▪ NW.js ▪ Electron ▪ …

Beat Signer - Department of Computer Science - [email protected] 28 October 8, 2024 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

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

Beat Signer - Department of Computer Science - [email protected] 30 October 8, 2024 Angular @Component({ selector: 'my-images', providers : [ImageService], styles: [ ` div { background-color: blue;} `] template: ` ` }) ▪ 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

Beat Signer - Department of Computer Science - [email protected] 31 October 8, 2024 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

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

Beat Signer - Department of Computer Science - [email protected] 33 October 8, 2024 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, …

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

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

Beat Signer - Department of Computer Science - [email protected] 36 October 8, 2024 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

Beat Signer - Department of Computer Science - [email protected] 37 October 8, 2024 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 ▪ …

Beat Signer - Department of Computer Science - [email protected] 38 October 8, 2024 Electron ▪ Similar to NW.js (similar native APIs) ▪ Developed for GitHub's Atom editor, now widely used

Beat Signer - Department of Computer Science - [email protected] 39 October 8, 2024 Demo: Electron + Vue.js

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

Beat Signer - Department of Computer Science - [email protected] 41 October 8, 2024 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

Beat Signer - Department of Computer Science - [email protected] 42 October 8, 2024 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 = …)

Beat Signer - Department of Computer Science - [email protected] 43 October 8, 2024 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, ...

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

Beat Signer - Department of Computer Science - [email protected] 45 October 8, 2024 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

Beat Signer - Department of Computer Science - [email protected] 46 October 8, 2024 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

Beat Signer - Department of Computer Science - [email protected] 47 October 8, 2024 References ... ▪ Node.js ▪ https://rubyonrails.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

Beat Signer - Department of Computer Science - [email protected] 48 October 8, 2024 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

Beat Signer - Department of Computer Science - [email protected] 49 October 8, 2024 References ... ▪ NativeScript ▪ https://nativescript.org ▪ Meteor ▪ https://www.meteor.com ▪ Comparision of Web Application Frameworks ▪ https://www.meteor.com

2 December 2005 Next Lecture HTML5 and the Open Web Platform