Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Web Application Frameworks - Lecture 4 - Web Technologies (1019888BNR)

Beat Signer
October 14, 2023

Web Application Frameworks - Lecture 4 - Web Technologies (1019888BNR)

This lecture forms part of the course Web Technologies given at the Vrije Universiteit Brussel.

Beat Signer

October 14, 2023
Tweet

More Decks by Beat Signer

Other Decks in Education

Transcript

  1. 2 December 2005 Web Technologies Web Application Frameworks Prof.Beat Signer,

    Maxim Van de Wynckel & Yoshi Malaise Department of Computer Science Vrije Universiteit Brussel beatsigner.com
  2. Beat Signer - Department of Computer Science - [email protected] 2

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

    October 10, 2023 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
  4. Beat Signer - Department of Computer Science - [email protected] 4

    October 10, 2023 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
  5. Beat Signer - Department of Computer Science - [email protected] 5

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

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

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

    October 10, 2023 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]
  9. Beat Signer - Department of Computer Science - [email protected] 9

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

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

    October 10, 2023 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, …) ▪ …
  12. Beat Signer - Department of Computer Science - [email protected] 14

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

    October 10, 2023 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 ▪ ...
  14. Beat Signer - Department of Computer Science - [email protected] 18

    October 10, 2023 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) ▪ ...
  15. Beat Signer - Department of Computer Science - [email protected] 19

    October 10, 2023 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
  16. Beat Signer - Department of Computer Science - [email protected] 20

    October 10, 2023 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”)
  17. Beat Signer - Department of Computer Science - [email protected] 21

    October 10, 2023 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, …)
  18. Beat Signer - Department of Computer Science - [email protected] 22

    October 10, 2023 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, …)
  19. Beat Signer - Department of Computer Science - [email protected] 23

    October 10, 2023 Demo: Node.js + Express + EJS
  20. Beat Signer - Department of Computer Science - [email protected] 24

    October 10, 2023 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
  21. Beat Signer - Department of Computer Science - [email protected] 25

    October 10, 2023 Video: Deno in 100 Seconds
  22. Beat Signer - Department of Computer Science - [email protected] 26

    October 10, 2023 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 ▪ …
  23. Beat Signer - Department of Computer Science - [email protected] 27

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

    October 10, 2023 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
  25. Beat Signer - Department of Computer Science - [email protected] 29

    October 10, 2023 Video: React in 100 Seconds
  26. Beat Signer - Department of Computer Science - [email protected] 30

    October 10, 2023 Angular @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> ` }) ▪ 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
  27. Beat Signer - Department of Computer Science - [email protected] 31

    October 10, 2023 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
  28. Beat Signer - Department of Computer Science - [email protected] 32

    October 10, 2023 Video: Angular in 100 Seconds
  29. Beat Signer - Department of Computer Science - [email protected] 33

    October 10, 2023 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, …
  30. Beat Signer - Department of Computer Science - [email protected] 34

    October 10, 2023 Video: Vue.js in 100 Seconds
  31. Beat Signer - Department of Computer Science - [email protected] 35

    October 10, 2023 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
  32. Beat Signer - Department of Computer Science - [email protected] 36

    October 10, 2023 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 ▪ …
  33. Beat Signer - Department of Computer Science - [email protected] 37

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

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

    October 10, 2023 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
  36. Beat Signer - Department of Computer Science - [email protected] 41

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

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

    October 10, 2023 Exercise 3 ▪ Modern Web Application Frameworks
  39. Beat Signer - Department of Computer Science - [email protected] 44

    October 10, 2023 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
  40. Beat Signer - Department of Computer Science - [email protected] 45

    October 10, 2023 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
  41. Beat Signer - Department of Computer Science - [email protected] 46

    October 10, 2023 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
  42. Beat Signer - Department of Computer Science - [email protected] 47

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

    October 10, 2023 References ... ▪ NativeScript ▪ https://nativescript.org ▪ Meteor ▪ https://www.meteor.com ▪ Comparision of Web Application Frameworks ▪ https://www.meteor.com