Web Developers

Download Report

Transcript Web Developers 

Web Application
Development
Architecture, Process, Technologies
Advanced Web-based Systems | Misbhauddin
Typical Web Application
HTTP Request
HTTP Response
Resources
Browser
Web Server
• Client-Server Architecture – Browser (Client) and the Web Server
(Server)
• Clients request resources available on the server through HTTP
• Typical resources are HTML pages
Advanced Web-based Systems | Misbhauddin
HTML
• 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
Advanced Web-based Systems | Misbhauddin
Web Technology Evolution
HTML Pages
• 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?
Advanced Web-based Systems | Misbhauddin
Static Web Scenario
get /ccsit/courses/web-based-systems.html
http/1.1
Host: kfu.edu.sa
http://kfu.edu.sa/ccsit/courses/web-based-systems.html
HTTP Request Message
HTTP Response Message
Client
HTTP/1,1 200O OK
Date: Fri, 26 Dec 2014 19:15:14
Server: Apache/1.3.20
Connection: close
<!DOCTYPE HTML Public …..>
<html>
………..
Advanced Web-based Systems | Misbhauddin
KFU Server
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
Advanced Web-based Systems | Misbhauddin
Application servers
• Execution environment supporting interlayer communication
Application Layer
Web Server
Client / Visitor
Application
Server
Presentation Layer
Three Layer Model
Database
Server
Advanced Web-based Systems | Misbhauddin
Storage Layer
Web Technology Evolution
HTML Pages
CGI Scripting
• 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
Advanced Web-based Systems | Misbhauddin
CGI Scenario
Web Server
HTTP Request
exec w/environ
CGI Program
HTTP Response
stdout
Client
SQL
print ‘<html>’;
print ‘<head>’;
print ‘<title>CGI Page</title>’;
print ‘</head>;
print ‘<body>’;
Database
Advanced Web-based Systems | Misbhauddin
Web Technology Evolution
HTML Pages
CGI Scripting
PHP-Like Lang.
• 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
Advanced Web-based Systems | Misbhauddin
PHP Scenario
Web Server
HTTP Request
HTTP Response
Client
<?php
$con = mysqli_connect($host,
$user, $pwd, $db);
Presentation
$query = “SELECT name FROM
+ user”;
$result = mysqli_query($con,$query);
Business Logic
$name = mysqli_fetch_array($result)[0];
?>
+
<html>
Data (SQL)
<head><title>Test PHP Page</title></head>
=
<body>
<h1>Welcome Mr.
echo $name;
All<?php
messed
up ?></h1>
…….
Advanced Web-based Systems | Misbhauddin
exec w/environ
PHP
Compiler
html
SQL
Database
Web Technology Evolution
HTML Pages
CGI Scripting
PHP-Like Lang.
• RIA – Rich Internet Applications
• Desktop like web applications
• JavaScript ( and AJAX intensive apps)
Advanced Web-based Systems | Misbhauddin
RIA
RIA Scenario
XMLHTTP Request
QUERY_STRING
Server-Side
Business
Technology
JavaScript
Logic
XML Response
Presentation
&
Update (HTML)
Visualization
XML
Data
Web Server
SQL
Data &
Models
Browser
Database
Advanced Web-based Systems | Misbhauddin
Web Services
• Web services allow an application to effortlessly integrate and reuse application
logic that runs on remote servers
Request
Request
Client
Client
HTML Page
Web
Server
Data
Web
Service
• 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”.
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
Advanced Web-based Systems | Misbhauddin
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…….
Advanced Web-based Systems | Misbhauddin
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
Dismissal
Implementation
Design
Business Req.
Deployment
Testing &
Evaluation
Offline prototype
Advanced Web-based Systems | Misbhauddin
Maintenance
& Evolution
Online Web application
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
Advanced Web-based Systems | Misbhauddin
Web Developers
Front-End Developer / Designer
Back-End Developer / Web Programmer
Full 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
JavaScript
CSS
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
C
#
J
A
V
A
P
Y
T
H
O
N
P
E
R
L
P
H
P
R
U
B
Y
N
O
D
E
J
S
Full Stack Developer
• Comfortable working with both back-end and frontend 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 (PHPHTML/CSS)
• User Interface (UI)
• User Experience (UX)
Reference
Sven Casteleyn, Florian Daniel, Peter Dolog, Maristella Matera
Engineering Web Applications
© Springer 2009