1. Web Application Development Architecture, Process, Technologies Advanced Web-based Systems | Misbhauddin

2. 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 Advanced Web-based Systems | Misbhauddin Web Server HTTP Request HTTP Response Browser Resources

3. 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

4. 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? Advanced Web-based Systems | Misbhauddin HTML Pages

5. Static Web Scenario Advanced Web-based Systems | Misbhauddin 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.html http/1.1 Host: kfu.edu.sa HTTP/1,1 200O OK Date: Fri, 26 Dec 2014 19:15:14 Server: Apache/1.3.20 Connection: close ………..

6. 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

7. Application servers Execution environment supporting interlayer communication Advanced Web-based Systems | Misbhauddin Client / Visitor Three Layer Model Web Server Application Server Database Server Presentation Layer Application Layer Storage Layer

8. 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 Advanced Web-based Systems | Misbhauddin HTML PagesCGI Scripting

9. CGI Scenario Advanced Web-based Systems | Misbhauddin Web Server HTTP Request HTTP Response Client exec w/environ stdout CGI Program SQL Database print ‘ ’; print ‘ CGI Page ’; print ‘ ; print ‘ ’;

10. 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 Advanced Web-based Systems | Misbhauddin HTML PagesCGI ScriptingPHP-Like Lang.

11. PHP Scenario Advanced Web-based Systems | Misbhauddin Web Server HTTP Request HTTP Response Client exec w/environ html PHP Compiler 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]; ?> Test PHP Page Welcome Mr. ……. Presentation + Business Logic + Data (SQL) = All messed up

12. Web Technology Evolution RIA – Rich Internet Applications Desktop like web applications JavaScript ( and AJAX intensive apps) Advanced Web-based Systems | Misbhauddin HTML PagesCGI ScriptingPHP-Like Lang.RIA

13. RIA Scenario Advanced Web-based Systems | Misbhauddin Web Server XMLHTTP Request XML Response Browser QUERY_STRING XML Data Server-Side Technology SQL Database JavaScript Update (HTML) Presentation & Visualization Business Logic Data & Models

14. 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 Page Client Web Server Request Data Client Web Service

15. 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

16. Web Development Process Advanced Web-based Systems | Misbhauddin

17. 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

18. 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 Advanced Web-based Systems | Misbhauddin Req. Analysis Design Implementation Testing & Evaluation Maintenance & Evolution Offline prototype Online Web application Dismissal Business Req. Deployment

19. 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

20. Web Developers Front-End Developer / Designer Back-End Developer / Web Programmer Full Stack Developer

21. 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

22. 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.NET PYTHON C# JAVA PERL NODEJS PHP RUB Y

23. 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

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

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

26. 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)

27. 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

28. What is a Full Stack? Design Convert design to front-end code (PHP- HTML/CSS) User Interface (UI) User Experience (UX)

29. Engineering Web Applications © Springer 2009 Sven Casteleyn, Florian Daniel, Peter Dolog, Maristella Matera Reference