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

1135dc242dcff3b90ae46fc586ff4da8?s=47 Beat Signer
October 15, 2020

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

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

1135dc242dcff3b90ae46fc586ff4da8?s=128

Beat Signer

October 15, 2020
Tweet

Transcript

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

    Signer & Maxim Van de Wynckel Department of Computer Science Vrije Universiteit Brussel beatsigner.com
  2. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 2

    October 16, 2020 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 - bsigner@vub.ac.be 3

    October 16, 2020 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 - bsigner@vub.ac.be 4

    October 16, 2020 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 - bsigner@vub.ac.be 5

    October 16, 2020 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 - bsigner@vub.ac.be 6

    October 16, 2020 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 - bsigner@vub.ac.be 7

    October 16, 2020 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 - bsigner@vub.ac.be 8

    October 16, 2020 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 - bsigner@vub.ac.be 9

    October 16, 2020 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 - bsigner@vub.ac.be 10

    October 16, 2020 DEMO: Spring Framework ▪ Based on ▪ https://spring.io/guides/gs/serving-web-content/
  11. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 11

    October 16, 2020 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 ▪ integration with the jQuery JavaScript library ▪ layered caching ▪ ...
  12. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 12

    October 16, 2020 DEMO: Yii Framework ▪ Based on ▪ https://www.yiiframework.com/doc/guide/2.0/en/start-hello
  13. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 13

    October 16, 2020 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, …) ▪ …
  14. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 14

    October 16, 2020 CakePHP ▪ Open source PHP web application framework ▪ MVC architectural pattern ▪ rapid prototyping via scaffolding ▪ authentication ▪ localisation ▪ session management ▪ caching ▪ validation ▪ …
  15. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 15

    October 16, 2020 DEMO: CakePHP ▪ Based on ▪ https://riptutorial.com/cakephp-3-0/example/23052/build-up-first-- hello-world---application-with-cakephp-3-x--controllers--- response--view--part-3-
  16. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 16

    October 16, 2020 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 ▪ ...
  17. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 17

    October 16, 2020 Django …
  18. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 18

    October 16, 2020 DEMO: Django ▪ Based on ▪ https://djangoforbeginners.com/hello-world/
  19. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 19

    October 16, 2020 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) ▪ ...
  20. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 20

    October 16, 2020 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
  21. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 21

    October 16, 2020 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”)
  22. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 22

    October 16, 2020 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, …)
  23. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 23

    October 16, 2020 Node.js Packages ▪ Express, EJS: web server and template engine ▪ customizable 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, …)
  24. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 24

    October 16, 2020 DEMO: Node.js + Express + EJS
  25. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 25

    October 16, 2020 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
  26. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 26

    October 16, 2020 DEMO: Deno ▪ Video ▪ https://www.youtube.com/watch?v=F0G9lZ7gecE
  27. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 27

    October 16, 2020 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 ▪ …
  28. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 28

    October 16, 2020 Specialised Frameworks and Toolkits ▪ Client-side web frameworks ▪ Angular.js ▪ Angular ▪ React ▪ Vue.js ▪ … ▪ Creating cross-platform RIAs ▪ Apache Flex ▪ Creating desktop applications ▪ NW.js ▪ Electron
  29. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 29

    October 16, 2020 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
  30. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 30

    October 16, 2020 AngularJS (LTS) ▪ Client-side "MVC" ▪ Two-way data binding between models and views ▪ The new Angular (Typescript) is preferred for new projects ▪ Users can define rich reusable UI components
  31. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 31

    October 16, 2020 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
  32. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 32

    October 16, 2020 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
  33. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 33

    October 16, 2020 DEMO: Angular ▪ Video ▪ https://www.youtube.com/watch?v=Ata9cSC2WpM
  34. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 34

    October 16, 2020 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, …
  35. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 35

    October 16, 2020 DEMO: Vue.js ▪ Optional video ▪ https://www.youtube.com/watch?v=nhBVL41-_Cw
  36. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 36

    October 16, 2020 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
  37. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 37

    October 16, 2020 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 ▪ …
  38. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 38

    October 16, 2020 Electron ▪ Similar to NW.js (similar native APIs) ▪ Developed for GitHub's Atom editor, now widely used
  39. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 39

    October 16, 2020 DEMO: Electron + Vue.js
  40. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 40

    October 16, 2020 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
  41. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 41

    October 16, 2020 Choosing a Client-side Framework ▪ Support and maintenance ▪ who maintains it? ▪ what 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 = …)
  42. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 42

    October 16, 2020 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, ...
  43. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 43

    October 16, 2020 Exercise 4 ▪ Java Servlets and Modern Web Application Frameworks
  44. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 44

    October 16, 2020 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 ▪ Yii Framework ▪ https://www.yiiframework.com
  45. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 45

    October 16, 2020 References ... ▪ Zend Framework ▪ https://framework.zend.com ▪ CakePHP ▪ https://cakephp.org ▪ Ruby on Rails ▪ https://rubyonrails.org ▪ Django ▪ https://www.djangoproject.com ▪ Flask ▪ https://flask.palletsprojects.com
  46. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 46

    October 16, 2020 References ... ▪ Node.js ▪ https://nodejs.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
  47. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 47

    October 16, 2020 References ... ▪ Angular ▪ https://angular.io ▪ Vue.js ▪ https://vuejs.org ▪ Ember.js ▪ https://emberjs.com ▪ NW.js ▪ https://nwjs.io ▪ Electron ▪ https://electron.atom.io ▪ Meteor ▪ https://www.meteor.com
  48. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 48

    October 16, 2020 References ... ▪ Comparision of Web Application Frameworks ▪ https://en.wikipedia.org/wiki/Comparison_of_web_frameworks
  49. 2 December 2005 Next Lecture CSS3 and Responsive Web Design