Web sites and web applications are the foundation of the World Wide Web. Web 1.0, 2.0, and 3.0 describe the evolution of the web, with each stage bringing new capabilities and user experiences. Web browsers are the software applications used to access web pages and web applications, while hardware servers host web sites and web applications. Web servers are software programs running on hardware servers that serve web pages and web applications to users.

The client-server architecture is the underlying architecture of the web, where a client (such as a web browser) requests data from a server (such as a web server) and the server returns the requested data. 3-tier and multi-tier architectures refer to more complex systems, where the client, server, and database are separated into distinct components.

Service-Oriented Architecture (SOA) is a method for designing and building web-based systems, where each component is a self-contained "service" that communicates with other services through a common interface. This approach makes it easier to develop, maintain, and evolve large-scale web applications.

Topics covered:

  • Web Sites and Web Applications
  • Web 1.0, 2.0, 3.0
  • Web Browsers
  • Hardware Servers
  • Web Servers
  • Client-Server Architecture
  • 3-Tier / Multi-Tier Architectures
  • Service-Oriented Architecture (SOA)

Video (in Bulgarian)

Presentation Content

Web Page

  • Document or information resource that is suitable for the World Wide Web
  • Can be accessed through a web browser and displayed on a monitor or mobile device
  • This information is usually in HTML or XHTML format, and may provide navigation to other web pages via hypertext links
  • Web pages frequently refer to other resources such as style sheets (CSS), scripts (JavaScript) and images into their final presentation

Web Site

  • Collection of related web pages containing web resources (web pages, images, videos, CSS files, JS files or other digital assets)
  • Common navigation between web pages
  • A website is hosted on at least one web server
  • Accessible via a network (such as the Internet)
  • All publicly accessible websites collectively constitute the World Wide Web

Web Application

  • Next level web sites
  • High interactivity
  • High accessibility (Cloud)
  • AJAX, Silverlight, Flash, Flex, etc.
  • Applications are usually broken into logical chunks called “tiers”, where every tier is assigned a role
  • Desktop-like application in the web browser
  • Web applications on desktop (Windows 8)

Web Browsers

  • Program designed to enable users to access, _retrieve and view documents _ and other resources from the Web
  • Main responsibilities:
    • Bring information resources to the user (issuing requests to the web server and handling any results generated by the request)
    • Presenting web content (render HTML, CSS, JS)
    • Capable of executing applications within the same context as the document on view (Flash)

Layout Engines

  • Software component that displays the formatted content on the screen combining:
    • Marked up content (such as HTML, XML, image files, etc.)
    • Formatting information (such as CSS, XSL, etc.)
  • It “paints” on the content area of a window, which is displayed on a monitor or a printer
  • Typically embedded in web browsers, e-mail clients, on-line help systems or other applications that require the displaying (and editing) of web content
  • How Browsers Work

Layout Engines and Web Browsers

  • Trident-based
    • Internet Explorer, Netscape, Maxthon, etc.
  • Gecko-based
    • Firefox, Netscape, SeaMonkey, etc.
  • Blink-based
    • Chrome, Opera
  • WebKit-based
    • Safari, iOS, Maxthon, Chrome (up to v27), etc.
  • EdgeHTML (fork of Trident)
    • Spartan (the new IE)
    • Windows 10 and Windows 10 (Mobile)

User Agent Strings

  • Identify web browsers and their version
    • History of (in)compatibility attempts [link]
  • Can have some additional information like layout engine, user’s operating system, etc.
    • Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/41.0.2272.118 Safari/537.36
      • Mozilla/5.0 – a generic term which most modern browsers use (originally indicated Netscape)
      • _Windows NT _ 6.3 – Windows 8.1
      • WOW64 – Windows-On-Windows 64-bit
      • AppleWebKit /537.36Blink is a fork of WebKit
        • KHTML is the previous name of WebKit
      • Chrome/41.0.2272.118 – real browser version
      • Safari/537.36 – artifact against scripts sniffing

Hardware Servers

  • Physical computer (a hardware system) dedicated to running one or more such services
  • Servers are placed in collocation centers
    • Colocation facilities provide space, power, cooling, and physical security for the server
  • The server may be:
    • Database server
    • File server
    • Mail server
    • Print server
    • VPS servers

What Do the Web Servers Do?

  • All physical servers have hardware
  • The hardware is controlled by the operating system
  • Web servers are software products that use the operating system to handle web requests
    • Web servers serve Web content
  • These requests are redirected to other software products (ASP.NET, PHP, etc.), depending on the web server settings

Web Servers Market Share March 2015

  • Market share of the top million busiest sites
    • Apache
      • 49.35% (493,463)
    • nginx
      • 21.22% (212,151)
    • IIS (by Microsoft)
      • 12.21% (122,069)
    • GWS (by Google)
      • 2.44% (24,434)
  • Source

Client-Server Architecture

  • The client-server model consists of:
    • Server – a single machine or cluster of machines that provides web applications (or services) to multiple clients
      • Examples:
        • Web server running PHP scripts or ASP.NET pages
        • IIS based Web server
        • WCF based service
        • Services in the cloud
  • The client-server model consists of:
    • Clients – software applications that provide UI (front-end) to access the services at the server
      • Examples:
        • Web browsers
        • WPF applications
        • HTML5 applications
        • Silverlight applications
        • ASP.NET consuming services

Client-Server Model – Examples

  • Web server (Apache, IIS) – Web browser
  • FTP server (ftpd) – FTP client (FileZilla)
  • EMail server (qmail) – email client (Outlook)
  • SQL Server – SQL Server Management Studio
  • BitTorrent Tracker – Torrent client (μTorrent)
  • DNS server (bind) – DNS client (resolver)
  • DHCP server (wireless router firmware) – DHCP client (mobile phone /Android DHCP client/)
  • SMB server (Windows) – SMB client (Windows)

The 3-Tier Architecture

  • The 3-tier architecture consists of the following tiers (layers):
    • Front-end (client layer)
      • Client software – provides the UI of the system
    • Middle tier (business layer)
      • Server software – provides the core system logic
      • Implements the business processes / services
    • Back-end (data layer)
      • Manages the data of the system (database / cloud)

The 3-Tier Architecture Model

  • Data Tier (Back-End)
  • Middle Tier (Business Tier)
  • Client Tier (Front-End)

What is a Service?

  • In the real world a " service " is:
    • A piece of work performed by a service provider
    • Provides the client (consumer) some desired result by some input parameters
      • The requirements and the result are known
    • Easy to use
    • Always available
    • Has quality characteristics (price, execution time, constraints, etc.)

What is “Cloud”?

  • Cloud ≈ multiple hardware machines combine their computing power and resources
    • Share them between multiple applications
    • To save costs and use resources more efficiently
  • Public clouds
    • Provide computing resources on demand
      • Publicly in Internet
      • Paid or free of charge (to some limit)
    • Amazon AWS, Google App Engine, Microsoft Azure, Rackspace, PHPFog, Heroku, AppHarbor

Cloud Computing Models

  • Infrastructure as a Service (IaaS)
    • Virtual machines in the cloud on demand
    • Users install the OS and software they need
  • Platform as a Service (PaaS)
    • Platform, services and APIs for developers
    • E.g. Java + JBoss + JSF + JPA + MongoDB or JavaScript + Node.js + MongoDB + RabbitMQ
  • Software as a Service (SaaS)
    • Hosted application on demand (e.g. WordPress)