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

    View full-size slide

  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]

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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]

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  12. Beat Signer - Department of Computer Science - [email protected] 12
    October 10, 2023
    Video: Yii Framework Demo

    View full-size slide

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

    View full-size slide

  14. 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
    ▪ …

    View full-size slide

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

    View full-size slide

  16. Beat Signer - Department of Computer Science - [email protected] 16
    October 10, 2023
    Django …

    View full-size slide

  17. Beat Signer - Department of Computer Science - [email protected] 17
    October 10, 2023
    Video: Django Demo

    View full-size slide

  18. 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)
    ▪ ...

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  21. 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, …)

    View full-size slide

  22. 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, …)

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  26. 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
    ▪ …

    View full-size slide

  27. 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
    ▪ …

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  30. 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: `




    `
    })
    ▪ 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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  36. 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
    ▪ …

    View full-size slide

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

    View full-size slide

  38. Beat Signer - Department of Computer Science - [email protected] 38
    October 10, 2023
    Demo: Electron + Vue.js

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  41. 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 = …)

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  49. 2 December 2005
    Next Lecture
    HTML5 and the Open Web Platform

    View full-size slide