![Page 1: Web Application Development Architecture, Process, Technologies Advanced Web-based Systems | Misbhauddin](https://reader031.vdocument.in/reader031/viewer/2022032723/56649f555503460f94c7950e/html5/thumbnails/1.jpg)
Advanced Web-based Systems | Misbhauddin
Web Application Development
Architecture, Process, Technologies
![Page 2: Web Application Development Architecture, Process, Technologies Advanced Web-based Systems | Misbhauddin](https://reader031.vdocument.in/reader031/viewer/2022032723/56649f555503460f94c7950e/html5/thumbnails/2.jpg)
Advanced Web-based Systems | Misbhauddin
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
![Page 3: Web Application Development Architecture, Process, Technologies Advanced Web-based Systems | Misbhauddin](https://reader031.vdocument.in/reader031/viewer/2022032723/56649f555503460f94c7950e/html5/thumbnails/3.jpg)
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
![Page 4: Web Application Development Architecture, Process, Technologies Advanced Web-based Systems | Misbhauddin](https://reader031.vdocument.in/reader031/viewer/2022032723/56649f555503460f94c7950e/html5/thumbnails/4.jpg)
Advanced Web-based Systems | Misbhauddin
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
![Page 5: Web Application Development Architecture, Process, Technologies Advanced Web-based Systems | Misbhauddin](https://reader031.vdocument.in/reader031/viewer/2022032723/56649f555503460f94c7950e/html5/thumbnails/5.jpg)
Advanced Web-based Systems | Misbhauddin
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>………..
![Page 6: Web Application Development Architecture, Process, Technologies Advanced Web-based Systems | Misbhauddin](https://reader031.vdocument.in/reader031/viewer/2022032723/56649f555503460f94c7950e/html5/thumbnails/6.jpg)
Advanced Web-based Systems | Misbhauddin
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
![Page 7: Web Application Development Architecture, Process, Technologies Advanced Web-based Systems | Misbhauddin](https://reader031.vdocument.in/reader031/viewer/2022032723/56649f555503460f94c7950e/html5/thumbnails/7.jpg)
Advanced Web-based Systems | Misbhauddin
Application servers• Execution environment supporting interlayer communication
Client / Visitor
Three Layer Model
Web ServerApplication
Server
DatabaseServer
Presentation Layer
Application Layer
Storage Layer
![Page 8: Web Application Development Architecture, Process, Technologies Advanced Web-based Systems | Misbhauddin](https://reader031.vdocument.in/reader031/viewer/2022032723/56649f555503460f94c7950e/html5/thumbnails/8.jpg)
Advanced Web-based Systems | Misbhauddin
Web Technology Evolution
• 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
![Page 9: Web Application Development Architecture, Process, Technologies Advanced Web-based Systems | Misbhauddin](https://reader031.vdocument.in/reader031/viewer/2022032723/56649f555503460f94c7950e/html5/thumbnails/9.jpg)
Advanced Web-based Systems | Misbhauddin
CGI Scenario
Web Server
HTTP Request
HTTP ResponseClient
exec w/environ
stdout
CGI Program
SQL
Database
print ‘<html>’;print ‘<head>’;print ‘<title>CGI Page</title>’;print ‘</head>;print ‘<body>’;
![Page 10: Web Application Development Architecture, Process, Technologies Advanced Web-based Systems | Misbhauddin](https://reader031.vdocument.in/reader031/viewer/2022032723/56649f555503460f94c7950e/html5/thumbnails/10.jpg)
Advanced Web-based Systems | Misbhauddin
Web Technology Evolution
• 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.
![Page 11: Web Application Development Architecture, Process, Technologies Advanced Web-based Systems | Misbhauddin](https://reader031.vdocument.in/reader031/viewer/2022032723/56649f555503460f94c7950e/html5/thumbnails/11.jpg)
Advanced Web-based Systems | Misbhauddin
PHP ScenarioWeb Server
HTTP Request
HTTP ResponseClient
exec w/environ
html
PHPCompiler
SQL
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
![Page 12: Web Application Development Architecture, Process, Technologies Advanced Web-based Systems | Misbhauddin](https://reader031.vdocument.in/reader031/viewer/2022032723/56649f555503460f94c7950e/html5/thumbnails/12.jpg)
Advanced Web-based Systems | Misbhauddin
Web Technology Evolution
• RIA – Rich Internet Applications• Desktop like web applications• JavaScript ( and AJAX intensive apps)
HTML Pages CGI Scripting PHP-Like Lang. RIA
![Page 13: Web Application Development Architecture, Process, Technologies Advanced Web-based Systems | Misbhauddin](https://reader031.vdocument.in/reader031/viewer/2022032723/56649f555503460f94c7950e/html5/thumbnails/13.jpg)
RIA Scenario
Advanced Web-based Systems | Misbhauddin
Web Server
XMLHTTP Request
XML Response
Browser
QUERY_STRING
XMLData
Server-Side Technology
SQL
Database
JavaScript
Update (HTML)
Presentation&
Visualization
BusinessLogic
Data &Models
![Page 14: Web Application Development Architecture, Process, Technologies Advanced Web-based Systems | Misbhauddin](https://reader031.vdocument.in/reader031/viewer/2022032723/56649f555503460f94c7950e/html5/thumbnails/14.jpg)
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
![Page 15: Web Application Development Architecture, Process, Technologies Advanced Web-based Systems | Misbhauddin](https://reader031.vdocument.in/reader031/viewer/2022032723/56649f555503460f94c7950e/html5/thumbnails/15.jpg)
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
![Page 16: Web Application Development Architecture, Process, Technologies Advanced Web-based Systems | Misbhauddin](https://reader031.vdocument.in/reader031/viewer/2022032723/56649f555503460f94c7950e/html5/thumbnails/16.jpg)
Advanced Web-based Systems | Misbhauddin
Web Development Process
![Page 17: Web Application Development Architecture, Process, Technologies Advanced Web-based Systems | Misbhauddin](https://reader031.vdocument.in/reader031/viewer/2022032723/56649f555503460f94c7950e/html5/thumbnails/17.jpg)
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…….
![Page 18: Web Application Development Architecture, Process, Technologies Advanced Web-based Systems | Misbhauddin](https://reader031.vdocument.in/reader031/viewer/2022032723/56649f555503460f94c7950e/html5/thumbnails/18.jpg)
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 Design Implementation
Testing & Evaluation
Maintenance & Evolution
Offline prototypeOnline Web application
Dismissal
Business Req.Deployment
![Page 19: Web Application Development Architecture, Process, Technologies Advanced Web-based Systems | Misbhauddin](https://reader031.vdocument.in/reader031/viewer/2022032723/56649f555503460f94c7950e/html5/thumbnails/19.jpg)
Advanced Web-based Systems | Misbhauddin
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
![Page 20: Web Application Development Architecture, Process, Technologies Advanced Web-based Systems | Misbhauddin](https://reader031.vdocument.in/reader031/viewer/2022032723/56649f555503460f94c7950e/html5/thumbnails/20.jpg)
Web Developers
Front-End Developer / DesignerBack-End Developer / Web ProgrammerFull Stack Developer
![Page 21: Web Application Development Architecture, Process, Technologies Advanced Web-based Systems | Misbhauddin](https://reader031.vdocument.in/reader031/viewer/2022032723/56649f555503460f94c7950e/html5/thumbnails/21.jpg)
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
![Page 22: Web Application Development Architecture, Process, Technologies Advanced Web-based Systems | Misbhauddin](https://reader031.vdocument.in/reader031/viewer/2022032723/56649f555503460f94c7950e/html5/thumbnails/22.jpg)
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
C #
J A V A
P E R L
N O D E J S
P H P
R U B Y
![Page 23: Web Application Development Architecture, Process, Technologies Advanced Web-based Systems | Misbhauddin](https://reader031.vdocument.in/reader031/viewer/2022032723/56649f555503460f94c7950e/html5/thumbnails/23.jpg)
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
![Page 24: Web Application Development Architecture, Process, Technologies Advanced Web-based Systems | Misbhauddin](https://reader031.vdocument.in/reader031/viewer/2022032723/56649f555503460f94c7950e/html5/thumbnails/24.jpg)
What is a Full Stack?• System Administration• Shell Scripting (Linux)• Cloud Computing (Amazon, Rackspace)• Search Engine Integration (ElasticSearch, Sphinx)• Caching• Monitoring
![Page 25: Web Application Development Architecture, Process, Technologies Advanced Web-based Systems | Misbhauddin](https://reader031.vdocument.in/reader031/viewer/2022032723/56649f555503460f94c7950e/html5/thumbnails/25.jpg)
What is a Full Stack?• Web Development Tools• Version Control (Git, Mercurial) • Virtualization (VirtualBox, Vagrant, Docker)
![Page 26: Web Application Development Architecture, Process, Technologies Advanced Web-based Systems | Misbhauddin](https://reader031.vdocument.in/reader031/viewer/2022032723/56649f555503460f94c7950e/html5/thumbnails/26.jpg)
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)
![Page 27: Web Application Development Architecture, Process, Technologies Advanced Web-based Systems | Misbhauddin](https://reader031.vdocument.in/reader031/viewer/2022032723/56649f555503460f94c7950e/html5/thumbnails/27.jpg)
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
![Page 28: Web Application Development Architecture, Process, Technologies Advanced Web-based Systems | Misbhauddin](https://reader031.vdocument.in/reader031/viewer/2022032723/56649f555503460f94c7950e/html5/thumbnails/28.jpg)
What is a Full Stack?• Design• Convert design to front-end code (PHP-
HTML/CSS)• User Interface (UI)• User Experience (UX)
![Page 29: Web Application Development Architecture, Process, Technologies Advanced Web-based Systems | Misbhauddin](https://reader031.vdocument.in/reader031/viewer/2022032723/56649f555503460f94c7950e/html5/thumbnails/29.jpg)
Engineering Web Applications© Springer 2009
Sven Casteleyn, Florian Daniel, Peter Dolog, Maristella Matera
Reference