Understanding Architectures of Web Applications and Standards
Explore the underlying structures and behaviors of web applications as well as the standards and protocols that define their frameworks. Dive into the client-server principle, addressing client and host, DNS server visualization, app layer addition, and more.
Download Presentation
Please find below an Image/Link to download the presentation.
The content on the website is provided AS IS for your information and personal use only. It may not be sold, licensed, or shared on other websites without obtaining consent from the author. If you encounter any issues during the download, it is possible that the publisher has removed the file from their server.
You are allowed to download the files provided on this website for personal or commercial use, subject to the condition that they are used lawfully. All files are the property of their respective owners.
The content on the website is provided AS IS for your information and personal use only. It may not be sold, licensed, or shared on other websites without obtaining consent from the author.
E N D
Presentation Transcript
Architectures of Web Applications, underlying Standards and Protocols Prof. Dr.-Ing. Franz-Josef Behr The content is licensed under a Creative Commons-Lizenz CC BY-NC-SA.
Definition Die Architektur beschreibt die Struktur und das Verhalten einer Anwendung. Sie definiert den Rahmen, in welchem eine Anwendung aufgebaut ist. The architecture describes the structure and behavior of an application. It defines the framework in which an application is built. Kurata, D. (2002). Doing Web Development. Client-Side Techniques. New York City: Apress.
Architecture: The client-server principle Visualization Provision of Services Client "User Agent" HTTP Server Document root Static Documents HTTP HTTP Internet Web Tier HTTP client Mail Client PNG, JPG, XML / HTML / PNG, JPG, XML / HTML / Presentation Tier
Architecture: Addressing client and host DNS Server IP address IP address / Server Name Client "User Agent" HTTP Server Document root Static Documents HTTP HTTP Internet Web Tier HTTP client Mail Client PNG, JPG, XML / SVG PNG, JPG, XML / SVG Presentation Tier
Architecture DNS Server Visualization IP address IP address / Server Name Client "User Agent" HTTP Server Document root Static Documents HTTP HTTP Internet Web Tier HTTP client Mail Client PNG, JPG, XML / SVG PNG, JPG, XML / SVG CGI protocol Server side Programs Dynamic Generation of WMS /WFS responses Presentation Tier Business Logic Tier / "App Tier" Application Server
Architecture: Adding the "App Layer" DNS Server Visualization IP address IP address / Server Name Client "User Agent" HTTP Server Document root Static Documents HTTP HTTP Internet WebTier HTTP client Mail Client PNG, JPG, XML / SVG PNG, JPG, XML / SVG CGI protocol Server side Programs Dynamic Generation of WMS /WFS responses Presentation Tier Business Logic Tier / "App Tier" Application Server
Architecture: Adding the data layer DNS Server IP address IP address / Server Name Client "User Agent" HTTP Server Document root Static Documents HTTP HTTP Internet Web Tier HTTP client Mail Client PNG, JPG, XML / SVG PNG, JPG, XML / SVG CGI protocol Server side Programs Dynamic Generation of WMS /WFS responses Business Logic Tier / "App Tier" Presentation Tier Application Server SQL DBMS Data Tier
Architecture: Adding desktop GIS for local Data preparation DNS Server IP address IP address / Server Name / Host name Client "User Agent" HTTP Server Document root Static resources HTTP HTTP HTTP-Client HTTP-Client HTTP-Client 80 Internet 80 Communication Tier, Web Tier PNG, JPG, XML / SVG CGI protocol Presentation Tier Application Server Server side programs Dynamic Generation of resources Local System (GIS) App Tier, Business Logic Tier SQL Data collection, preparation, analysis DBMS Server Data Tier like Geodata
Architecture: Our fields of work (in IRD/CIV) DNS Server IP address IP address / Server Name / Host name Client "User Agent" HTTP Server Document root Static resources HTTP HTTP HTTP-Client HTTP-Client HTTP-Client HTML 80 Internet 80 CSS Communication Tier, Web Tier PNG, JPG, XML / SVG CGI protocol JavaS Presentation Tier cript Application Server Server side programs Dynamic Generation of resources Local System (GIS) App Tier, Business Logic Tier SQL Data collection, preparation, analysis DBMS Server Data Tier like Geodata
Protocols Prof. Dr.-Ing. Franz-Josef Behr
Definition A communication protocol is a system of rules that allows two or more entities of a communications system to transmit information. The protocol defines the rules, syntax, semantics and synchronization of communication and possible error recovery methods. Protocols may be implemented by hardware, software, or a combination of both https://en.wikipedia.org/wiki/Communication_protocol [2021-03-11]
The idea: Small but powerful standards It's not often in standardization that you can actually simplify something." Sir Tim Berners-Lee [1] Document format: (eXtensible) Hypertext Markup Language, (X)HTML Transfer protocol: Hypertext Transfer Protocol, HTTP Uniform identification schema: Uniform Resource Identifiers (URI) Information resources themselves Information resources must be identifiable (per name, per address / location) Identification schema (string!) must be expandable and complete. [1] http://xml.coverpages.org/xmlPapers2000Q4.html 12
Architecture: The protocols DNS Server Identification Transfer of Encoded Information IP address / Server Name / Host name URI RFC 1630 IP address Client "User Agent" Content-Type RFC 2045 Webserver HTTP RFC 2616 Document root Static resources HTTP HTTP HTTP-Client HTTP-Client HTTP-Client 80 Internet 80 Communication Tier, Web Tier PNG, JPG, XML / SVG XML w3.org/XML/ CGI protocol CGI RFC 3875 Presentation Tier Application Server Server side programs Dynamic Generation of resources Encoding Application Tier, Business Logic Tier Local GIS SQL SQL ISO/IEC 9075 Data preparation, analysis DBMS Server Data Tier Data update and retrieval
Architecture: Representational State Transfer REST-based Architecture DNS Server IP address / Server Name / Host name URI RFC 1630 IP address Client "User Agent" Content-Type RFC 2045 Webserver HTTP RFC 2616 Document root Static resources HTTP HTTP HTTP-Client HTTP-Client HTTP-Client 80 Internet 80 Communication Tier, Web Tier PNG, JPG, XML / SVG XML w3.org/XML/ CGI protocol CGI RFC 3875 Presentation Tier Application Server Server side programs Dynamic Generation of resources Application Tier, Business Logic Tier Local GIS SQL SQL ISO/IEC 9075 Data preparation, analysis DBMS Server Data Tier
Architecture: Asynchronous JavaScript and XML DNS Server IP address / Server Name / Host name URI RFC 1630 IP address Client "User Agent" Content-Type RFC 2045 Webserver HTTP RFC 2616 Document root Static resources HTTP HTTP HTTP-Client HTTP-Client HTTP-Client 80 Internet 80 Communication Tier, Web Tier PNG, JPG, XML / SVG XML w3.org/XML/ CGI protocol CGI RFC 3875 Presentation Tier Application Server Server side programs Dynamic Generation of resources Continous, repeated communication with Server App Application Tier, Business Logic Tier Local GIS SQL SQL ISO/IEC 9075 Data preparation, analysis DBMS Server Data Tier
Architecture: Some relevant OGC-Standards DNS Server IP address / Server Name / Host name URI RFC 1630 IP address Client "User Agent" Content-Type RFC 2045 Webserver HTTP RFC 2616 Document root Static resources HTTP HTTP HTTP-Client HTTP-Client HTTP-Client 80 Internet Geography Markup Language 80 Communication Tier, Web Tier PNG, JPG, XML / SVG XML w3.org/XML/ CGI protocol OGC-conformant services Web Map Service Web Feature Service Catalogue Service, Tile Service, CGI RFC 3875 Presentation Tier Application Server Server side programs Dynamic Generation of resources Application Tier, Business Logic Tier Local GIS SQL SQL ISO/IEC 9075 Data preparation, analysis DBMS Server Data Tier Simple Features
Definition Ein Netzwerk-Port ist eine Adresse, mit deren Hilfe sich UDP- oder TCP-Verbindungen eindeutig bestimmten Anwendungen zuordnen lassen. Zu einer Verbindung geh rt auf beiden Seiten jeweils ein Port. Ports k nnen eine fortlaufende Nummer im Bereich von 0 bis 65535 annehmen. A network port is an address that can be used to uniquely assign UDP or TCP connections to specific applications. A connection belongs to a port on both sides. Ports can have a consecutive number in the range from 0 to 65535. https://www.ip-insider.de/was-ist-ein-netzwerk-port-a-691212/[2021-03-11]
Ports defined by Internet Assigned Numbers Authority http://www.iana.org/ Internet Engineering Task Force http://www.ietf.org/ Client Server "User Agent" logical / virtual port logical / virtual port physical port physical port 80 80 Browser HTTP server 20/21 20/21 FTP FTP server DBMS server Desktop GIS
Definition Eine Firewall ist ein Sicherungssystem, das ein Rechnernetz oder einen einzelnen Computer vor unerw nschten Netzwerkzugriffen sch tzt. Das Softwaresystem berwacht den durch die Firewall laufenden Datenverkehr und entscheidet anhand festgelegter Regeln, ob bestimmte Netzwerkpakete durchgelassen werden oder nicht. A firewall is a network security system that monitors and controls incoming and outgoing network traffic based on predetermined security rules.[1] A firewall typically establishes a barrier between a trusted network and an untrusted network, such as the Internet https://en.wikipedia.org/wiki/Firewall_(computing) [2022-03-10]
Firewall Client Server "User Agent" logical / virtual port logical / virtual port physical port physical port 80 80 Browser HTTP server 20/21 20/21 FTP FTP server DBMS server Desktop GIS To see a real firewall (fire curtain): https://www.youtube.com/watch?v=4sKTFgOxCR0
Your Take-Away: Acronyms used HTTP Hypertext Transfer Protocol Mail POP3 Post Office Protocol SMTP Simple Mail Transfer Protocol FTP File Transfer Protocol Content Types describes the encoding / format of the resource transfered by HTTP (http://www.rfc-editor.org/rfc/rfc1521.txt) URI Uniform Resource Identifier (http://www.rfc-editor.org/rfc/rfc2396.txt) CGI Common Gateway Interface (http://www.rfc-editor.org/rfc/rfc3875.txt) DBMS Datebase Management System SQL Structured Query Language (manipulating / Querying databases) Port Related Protocols: See separate presentation
Example Prof. Dr.-Ing. Franz-Josef Behr
A (Geo-) Web Service Example: Contour Lines REST: Representational State Transfer DNS Server IP address / Server Name / Host name URI RFC 1630 2 IP address Transfer Client "User Agent" Content-Type RFC 2045 Webserver HTTP RFC 2616 Document root Static resources HTTP HTTP HTTP-Client HTTP-Client HTTP-Client 80 Internet 80 Communication Tier, Web Tier PNG, JPG, XML / SVG CGI protocol CGI RFC 3875 Presentation Tier Application Server Server side programs Dynamic Generation of resources Storage Persistance 3 Application Tier, Business Logic Tier Local GIS SQL SQL Data Collection / ISO/IEC 9075 1 Data preparation, analysis Preparation DBMS Server Geometries (contour lines) (Simple Features) Data Tier
A (Geo-) Web Service Example: Contour Lines by WMS DNS Server 1 URI RFC 1630 4 Request IP address IP address / Server Name / Host name Transfer Client "User Agent" http://geoweb.hft-stuttgart.de/service=wms&operation=getmap... Content-Type RFC 2045 Webserver HTTP RFC 2616 Document root Static resources HTTP HTTP HTTP-Client HTTP-Client HTTP-Client 80 Image/png Internet 80 Communication Tier, Web Tier Data rendering Web Map Service PNG, JPG, XML / SVG CGI RFC 3875 3 CGI protocol Presentation Tier Presentation Application Server 5 Server side programs Dynamic Generation of resources Data retrieval 2 Application Tier, Business Logic Tier Local GIS SQL SQL ISO/IEC 9075 Data preparation, analysis DBMS Server Geometries (contour lines) (Simple Features) Data Tier
A (Geo-) Web Service Example: Contour Lines by WFS DNS Server http://geoweb.hft-stuttgart.de/ol_with_contourlines2.html URI RFC 1630 IP address IP address / Server Name / Host name Client "User Agent" Content-Type RFC 2045 Webserver HTTP RFC 2616 Document root Static resources Web Feature Service HTTP text/xml HTTP HTTP-Client HTTP-Client HTTP-Client 80 Internet 80 Communication Tier, Web Tier PNG, JPG, XML / SVG <contour height="550.0"> <gml:lineStringProperty> <gml:LineString srsName="http://www.opengis.net/gml/srs/epsg.xml#4326"> CGI protocol CGI RFC 3875 Presentation Tier <gml:coordinates> 9510.0,4333.0 9536.4,4320.1 9555.5,4310.7 </gml:coordinates> </gml:LineString> </gml:lineStringProperty > </contour> Application Server Server side programs Dynamic Generation of resources Application Tier, Business Logic Tier Local GIS SQL SQL Data Presentation ISO/IEC 9075 Data preparation, analysis DBMS Server Geometries (contour lines) (Simple Features) Data Tier
Designing your own architecture Prof. Dr.-Ing. Franz-Josef Behr
Design principals Availability Verf gbarkeit (redundancy for key components, rapid recovery in the event of partial system failures, and graceful degradation when problems occur). http://www.aosabook.org/en/distsys.html [2019-10-26] Performance: affects user satisfaction, as well as search engine rankings Reliability - Zuverl ssigkeit: nachvollziehbare Antworten bei gleichen Anforderungen the behaviour is consistent over time Scalability - Skalierbarkeit: Wie kann eine h here Serverlast (mehr Abfragen ) abgefangen werden? Was geschieht, wenn die Daten wachsen? Manageability Handhabung, Wartung, Costs Kosten: Total cost of ownership
Scenario Volunteers collect the location of rare butterflies using their mobile. A small app allows taking a photo and to determine the location using the built-in GNSS sensor and send it through the cellular network to a server of an NGO. Later the locations of the butterflies are displayed on a map in the web browser for the public How can the location be transferred from the mobiles to the server (which protocol)? Where would you store the locational information? And where the photographs? (Short explanations!) Draw a diagram of the client-server architecture including the volunteers and the map display. Who is client, who is server? Draw a diagram of the client-server architecture including the volunteers and the map display. Who is client, who is server?
Zusammenfassung Take-away Prof. Dr.-Ing. Franz-Josef Behr
Summary: Evolution of Geospatial Systems Traditional GIS Distributed/OpenGIS centralized datastores distributed data providers monolithic software design modular software objects and services mainframe architecture client/server capability proprietary data formats shared data models import/export tools Open transfer standards product-oriented, mapping and inventory interoperability interactive, multi-functional Source: Kenn Gardels, UCB REGIS & Open Gis Consortium (2003): Open GIS
Summary / Keywords Client Presentation Tier Server Business Logic Tier Request / Response Data Tier HTTP Application Server CGI Resource SQL Content-Type DMBS Programming Languages HTTP Server Related OGC Standards REST AJAX
Further readings https://codecondo.com/12-best-skills-required-for-a-website-designer/ [2019-01-13] https://www.udemy.com/blog/best-programming-language/ S. Steiniger and A.J.S. Hunter (2012): The 2012 Free and Open Source GIS Software Map A Guide to facilitate Research, Development and Adoption. http://www.geo.uzh.ch/~sstein/manuscripts/fosgismap_sstein_v9_web.pdf Tim Sutton (2018): Deciding Between FOSSGIS and Proprietary Software in the Enterprise. In: Understanding the GIS Industry in 2018. https://www.gis-professional.com/magazines/gis- professional-february-2018.pdf
Explain! DNS Server IP address IP address / Server Name / Host name Client "User Agent" Webserver Document root Static resources HTTP-Client HTTP-Client HTTP-Client 80 Internet 80 Local GIS Data preparation, analysis
Packages Pre-configured Packages! LAMP = for Linux: Apache HTTP Server, Mysql DBMS, and PHP as programming launguage WAMP = for Windows: Apache HTTP Server, Mysql DBMS, and PHP as programming launguage XAMPP https://www.apachefriends.org/index.html
