web application development architecture, process, technologies advanced web-based systems |...

Advanced Web-based Systems | Misbhauddin

Web Application Development

Architecture, Process, Technologies

Typical Web Application

• Client-Server Architecture – Browser (Client) and the Web Server (Server)• Clients request resources available on the server through HTTP• Typical resources are HTML pages

Web Server

HTTP Request

HTTP Response

Browser Resources

• HTML – Hyper Text Markup Language• Hypertext – Text with Links (as opposed to Linear)• Markup – Instructions included with the information

• HTML markup language represents the static part of a web page• HTML is the only language understood by the browser• The browser constructs a DOM tree after receiving an HTML Page• DOM (Document Object Model)• independent model to represent HTML documents

Web Technology Evolution

• Web developers wrote every page by “hand”• Updating a site means editing the HTML• “Redesign” meant doing it from scratch again• No Scalability• How many pages?

HTML Pages

Static Web Scenario

KFU Server

HTTP Request Message

HTTP Response Message

Client

http://kfu.edu.sa/ccsit/courses/web-based-systems.html

get /ccsit/courses/web-based-systems.htmlhttp/1.1Host: kfu.edu.sa

HTTP/1,1 200O OKDate: Fri, 26 Dec 2014 19:15:14 Server: Apache/1.3.20Connection: close

<!DOCTYPE HTML Public …..><html>………..

Multi-tiered Web Architectures• Need for architectures that support dynamic content generation• Three Layers• Presentation Layer

• In-charge of processing requests coming from the client and constructing the HTML page• Application Logic Layer

• Intermediate layer• in charge of executing components realizing the application's business logic

• Resource Management Layer• Previously only known as Storage Layer• Represents the group of services offered by different systems• Access to database systems, transaction processing systems, enterprise information

systems or web services

Application servers• Execution environment supporting interlayer communication

Client / Visitor

Three Layer Model

Web ServerApplication

Server

DatabaseServer

Presentation Layer

Application Layer

Storage Layer

• CGI – Common Gateway Interface• Webpages were intended as resources• Rise of the Server-Side Technologies• Difficult to reuse code• Lots of boilerplate code

• High Learning Curve

HTML Pages CGI Scripting

CGI Scenario

Web Server

HTTP Request

HTTP ResponseClient

exec w/environ

stdout

CGI Program

Database

print ‘<html>’;print ‘<head>’;print ‘<title>CGI Page</title>’;print ‘</head>;print ‘<body>’;

• PHP – HyperText Pre-Processor• Very easy to learn• Server-side mixed with HTML

• No security mechanism provided• Bunch of HTML, Code and SQL …….. all together

HTML Pages CGI Scripting PHP-Like Lang.

PHP ScenarioWeb Server

HTTP Request

HTTP ResponseClient

exec w/environ

PHPCompiler

Database

SAME AS CGI

<?php $con = mysqli_connect($host, $user, $pwd, $db); $query = “SELECT name FROM user”; $result = mysqli_query($con,$query); $name = mysqli_fetch_array($result)[0];?><html><head><title>Test PHP Page</title></head><body> <h1>Welcome Mr. <?php echo $name; ?></h1>…….

Presentation+

Business Logic+

Data (SQL)=

All messed up

• RIA – Rich Internet Applications• Desktop like web applications• JavaScript ( and AJAX intensive apps)

HTML Pages CGI Scripting PHP-Like Lang. RIA

RIA Scenario

Web Server

XMLHTTP Request

XML Response

Browser

QUERY_STRING

XMLData

Server-Side Technology

Database

JavaScript

Update (HTML)

Presentation&

Visualization

BusinessLogic

Data &Models

Web Services• Web services allow an application to effortlessly integrate and reuse application

logic that runs on remote servers

• Web services typically return data (e.g., text, a list of products, pictures)• “Web services are self-describing, self-contained software modules that are

accessed via a network, such as the Internet, complete tasks, solve problems, or conduct transactions on behalf of a user or application”.

Request

HTML PageClientWeb

Server

Request

DataClientWeb

Service

Web Service (Types)• Web services support four types of operations:• Request-response operation: invokes the service and expects an answer back• One-way operation: invokes the service and does not expect any answer back• Solicit-response operation: is initiated by the service (e.g., the service calling

another service) and expects an answer back• Notification operation: is initiated by the service and does not expect any

answer back

• Request-Response and Solicit Response implement a Synchronous Communication Pattern

• One-way and Notification implement an Asynchronous Pattern

Web Development Process

Software Development Process• Software development process is organized into some basic activities

• Requirements engineering: aims at understanding the problem• Design: aims at planning a solution to the problem• Implementation: translates the plan into running application code• Testing and evaluation: aims at identifying coding errors or inconsistencies between

the collected requirements and their implementation• Deployment: brings the solution to the customers• Maintenance: aims at monitoring a running system and keeping it healthy• and running• Evolution: aims at improving the developed solution over time, providing new input

to the development process in the form of new requirements

• Different Process Models• Waterfall Model; Spiral Model, Rational Unified Model…….

Web-Specific Software Development Processes• Special instance of generic software application development• Specialized model that is suited only for web application dev.• Online Evolution Model• Five activities

Req. Analysis Design Implementation

Testing & Evaluation

Maintenance & Evolution

Offline prototypeOnline Web application

Dismissal

Business Req.Deployment

Web-Specific Actors• Includes all actors as required by traditional software development• Requirement Analyst• Architect {Data, Application}• Developer• Administrator

• Includes two more specialized actors• Graphic Designers (Front-End Developers)• Webmasters

Web Developers

Front-End Developer / DesignerBack-End Developer / Web ProgrammerFull Stack Developer

Front-End Developer• Focuses on look and feel of a website• Uses HTML, CSS, and JavaScript• Is competent in color scheming, graphic design, and information flow• Creates a great user experience• Is right-brained: Strong intuition, creativity, & imagination

HTML CSS

JavaScript

Back-End Developer• Creates the inner workings of a website• Is competent in programming languages (PHP, .NET, Python, C, Ruby)• Is left-brained: logic, linear thinking, technical• Hands-on coding experience is required

. N E T

P Y T H O N

J A V A

P E R L

N O D E J S

R U B Y

Full Stack Developer• Comfortable working with both back-end and front-

end technologies.• Work with • Databases• PHP/Python/.Net/Ruby/Java• HTML• CSS• JavaScript • and everything in between

What is a Full Stack?• System Administration• Shell Scripting (Linux)• Cloud Computing (Amazon, Rackspace)• Search Engine Integration (ElasticSearch, Sphinx)• Caching• Monitoring

What is a Full Stack?• Web Development Tools• Version Control (Git, Mercurial) • Virtualization (VirtualBox, Vagrant, Docker)

What is a Full Stack?• Back-end Technologies• Web Servers (Apache, Nginx)• Programming Languages (PHP, NodeJS, Ruby)• Databases (MySQL, PostgreSQL, MongoDB,

Redis) – General (SQL, JSON, XML)

What is a Full Stack?• Front-end Technologies• HTML / HTML5 Semantic Web• CSS / CSS3: LESS, SASS, Media Queries• JavaScript: JQuery, AngularJS, …• Browser Compatibility• Responsive Design• AJAX, JSON, XML, WebSocket

What is a Full Stack?• Design• Convert design to front-end code (PHP-

HTML/CSS)• User Interface (UI)• User Experience (UX)

Sven Casteleyn, Florian Daniel, Peter Dolog, Maristella Matera

Reference

web application development architecture, process, technologies advanced web-based systems |...

web page html

web server server clients

database systems

bunch of html

html redesign

multitiered web architectures

enterprise information

transaction processing

Documents

1 architecture web introduction cours 1 : architecture web...

web analytics architecture

pattern oriented architecture for web based architecture

basic web architecture

basic web architecture 1. data driven web architecture 2

portfolio web architecture

web architecture v3

610.web architecture

web publishing architecture

>> php: js integration & emails. function validate() { }...

web services xml-rpc, soap, rest advanced web-based systems...

architecture web design

introduction to web architecture - · pdf file– basics of...

>> introduction to javascript. pop-up boxes in js web-based...

web wide architecture

web architecture 253 - github...

web tech & architecture

2. web architecture

persuasion architecture - translating persuasion...

data on the web exchange, formats and state advanced...