Web Applications

1. Web Applications Internet Engineering Spring 2014 Bahador Bakhshi CE & IT Department, Amirkabir University of Technology

2. Outline • MVC Design Pattern • Multilayer Design • Multitier Architecture • Introduction to Java EE • Servlet • JSP

3. Outline • MVC Design Pattern • Multilayer Design • Multitier Architecture • Introduction to Java EE • Servlet • JSP

4. Web Application Development • (Large) Applications cannot be developed in ad-hoc manner • We need design & architecture (SW engineering) • Concept separation, Component, Relations, … • There are so many architectural patterns • ETL, MFT, EAI, TDS, … • http://en.wikipedia.org/wiki/Architectural_pattern • Two common architectures in web applications • MVC • Multi-layer (Multi-tier)

5. MVC: Model-View-Controller • Model • Does all the computational work • All communication with the model is via methods • It is input/output free, contains data, system state • Controller (of states sequences) • Handles events/requests affecting model or view • User inputs/requests go to the controller • Available commands are determined by controller (based on model) • Tells the model what to do • View • Show the results from model or controller • Examples: Calculator, Email Client, Word Processor

6. Advantages of MVC • Separation of concerns • Computation is not intermixed with I/O •  Code is cleaner and easier to understand • Flexibility • The GUI (if one is used) can be completely revamped without touching the model in any way • Reusability • The same model used for different controller & view

7. MVC Interactions?!

8. MVC Interactions (cont’d) model controller updates model view queries model model signals changes view controller controller updates view event event is passed to the controller

9. MVC for (simple) Web Applications • Model • Database tables (persistent data) • Session information (current stat data) • Parts of processing • View • (X)HTML • CSS • Controller • Client-side scripting • Part of processing by server side scripting

10. MVC? • MVC works fine for desktop application • The origin is from graphical application development 1970s • Consider large & distributed web application, e.g., online transactions, e-banking, … • View  Model interactions?!! • View is in user’s browser • Model is in back-end server • User  Controller interaction? • User don’t have direct access to controller • Complicated processing on huge data • Model cannot both hold data & process it

11. Outline • MVC Design Pattern • Multilayer Design • Multitier Architecture • Introduction to Java EE • Servlet • JSP

12. Layering Approach • MVC Difficulties are due to triangular topology • Linearize the topology  Layering approach • Common layering in web applications • Presentation Layer • Business logic Layer • Data (management/resource) Layer • These layers are purely abstractions • Not correspond to physical distribution • All layers may or may not be on the same machine

13. Multilayer Architecture

14. Presentation Layer • User interface of the application • GUI • HTML based browser • Displays information (processing output) which are get from the business logic layer • Gets user’s requests and pass them (with required data) to the business logic layer • The user interface of web applications can be made up client side & server side codes • What is this layer in Gmail?

15. Business Logic Layer • The work that the application needs to do • Processing/Computing/Calculations • Receives requests from presentation layer • Fetches required data from data layer • Process the request & data • Output is sent back to the presentation layer • What does this layer do in Gmail?

16. Data Layer • Provides data access interface to business logic • Hide data storage details • Hide heterogeneity of underlining systems • Communicating with data store systems • Database server • Messaging system • What is this layer in Gmail?

17. Outline • MVC Design Pattern • Multilayer Design • Multitier Architecture • Introduction to Java EE • Servlet • JSP

18. Multilayer  Multi-tier • Should/Can all layers be implemented in a single physical machine (single tier)? • Yes, If application is (fairly) simple  • Web server, HTML, CSS, PHP, Processing, MySQL, … all on the same machine • No, If application is huge & complex  • Web server on machine 1 • Data base on machine 2

19. Multitier Architecture • Two-tier Architecture: • Two layers are physically separated from the third, forming two physically separated tiers • Three-tier Architecture: • The three abstract logical layers are separated into three physically distributed tiers • N-tire Architecture: • Each abstract logical layer is implemented using multiple physical tiers

20. Two-Tier 1: Fat client • Combining the presentation layer with the business logic layer in a physical tier • This separation can be seen as the traditional client-server architecture • Client = Process + View • Server = Data • This architecture effectively makes the client “fat” and the server “thin”

21. Two-Tier Fat Client Characteristics • Deployment costs are high • Many fat clients • Business logic migration or data base modification (changes in database driver, database type, …) costs are high • Changing the business logic layer involves recompiling and redeploying the client tier • Network performance suffers • Huge raw data transfer (query & response)

22. Two-Tier 2: Thin Client • Client (e.g., browser) • HTTP request • Mainly for presentation of information • Serving mainly static (D)HTML pages • Server (web server & DB server) • HTTP response • Server side programming: CGI & PHP, … • Data base server: MySql • The suitable architecture for web applications • How about complex computing on huge data?!

23. N-Tier Architecture • In N-tier deployments, presentation layer, business logic layer, and data layer are separated into respective physical tiers • 3 tier: client + server + data base • Presentation layer is implemented by parts in both client & server sides • E.g., dynamic web page using Ajax + PHP • 4 tier: Browser + Web server + Application Server + Database server • Complicated Bussing logic layer itself can be distributed multi-tier application  N-tier

24. HTML Client (browser) Typical Web Application N-tier Architecture Web Server Application Server Database Server

25. N-Tier Architecture Characteristics • Migration costs are low • Each tier can be upgraded independently, e.g. • Business logic application migration • Database switching • Web server switch • OS upgrade • Inter-Tier communication performance overhead • Server side maintenance costs are high

26. Multilayer/Multitier Implementation • Many common requirements in applications • Object creation & garbage collection, Transaction Logging and audit, Security, and much more • These are not implemented by neither OS nor Application developer • They are called middleware • Application servers provide middleware services • Application components live inside application servers

27. Application Servers • Existing technologies can be classified into three broad categories: • Java based platform (Java Enterprise Edition) • .NET Framework • Other web application development frameworks • PHP frameworks: Zend, … • Ruby on Rail • …

28. Outline • MVC Design Pattern • Multilayer Design • Multitier Architecture • Introduction to Java EE • Servlet • JSP

29. What is Java EE? • Java Platforms: • Java Card: Smart card version • Java ME (Micro Edition): Embedded systems, e.g. Mobile handheld • Java SE (Standard Edition): Desktop application development • Java EE (Enterprise Edition): Enterprise distributed application software development • Java EE add libraries to SE for fault-tolerant, distributed, multi-tier, … based components • Until java 5, it has been called J2EE

30. Java EE • Java EE provides technologies (libraries) for enterprise level web applications • Java EE technologies for web applications: • Servlet • JavaServerPages (JSP) • JavaServerFaces (JSF) • Enterprise Java Beans (EJB) • Many other facilities (via libraries & JVM) • Remote method invocation, Security, Database connectors, XML, …

31. Java EE Components: Business Logic • EJB: Enterprise version of Java Beans • Java classes that are designed to be reusable standalone software components • All data (properties) are private • Exposed by public getter & setter method • Public method to process the data • Enterprise version: automated (provided by container) concurrency, life-time management, security, transaction, … • Simplify developing complex application • Can be used everywhere, not necessarily web application

32. Java EE Components: Presentation • Client side • Client can use HTML, Java Applet, Java Application, … • Server side • Servlets are special classes to realize request-response model (get, post,… of HTTP) • External server side code • JSP is a developer-friendly wrapper over servlet classes • Embed server side code • Faces & Faceletssimilar to JSP but uses custom tags which can be converted to anything

33. Java EE Multi-tier Architecture

34. Java EE Containers • Requirements from different aspects • All java codes must run a virtual machine • To run Servlet & JSP we need something like PHP runtime environment • Application server (middleware) is need in business logic • These different terms are named container in Java EE terminology • The runtime support for Java EE application components • Provides a view of the underlying Java EE API • Security, Logging, Remote Method Invocation, …

35. Java EE Container Architecture Tomcat, JRun, … GlassFish, BEA, … Browser Web Container Applet Container EJB Container Java Servlets Applet EJBs JSP Application Client Container JSF App.Client JRE Databases and Other Resources

36. Outline • MVC Design Pattern • Multilayer Design • Multitier Architecture • Introduction to Java EE • Servlet • JSP

37. What is Servlet?! • A Java application that runs on the web server in response to HTTP requests (GET, …) • A normal java application + • Read/Write access to HTTP headers • Access to HTML Forms • Sessions, Cookies, … • Similar to CGI, output is sent to client • Servlet is used to generate dynamic content to return to browser: HTML, XML, … • Each servlet runs as separated thread inside servlet container

38. The Servlet Model HTTP Get/Post Browser Java Enabled Web Server Servlet container Servlet Servlet HTML XML Resources JavaBeans Database

39. Why Servlet: Servlets vs. CGI Scripts • Servlets do what CGI scripts do; so, why should I learn/use it? Because, it is better approach • More efficient • No new process per request (as CGI), with servlets, servlet is loaded at first time, container stays running and handles each request with a lightweight Java thread • More Convenient • Servlets have an extensive infrastructure for automatically parsing and decoding HTML form data, reading and setting HTTP headers, handling cookies, tracking sessions, …

40. Why Servlet: Servlets vs. CGI Scripts • More Portable • Servlets are written in the Java programming language and follow a standard API. Servlets are supported directly or by a plugin on virtually every major web server • More Secure • CGI programs are often executed by general-purpose operating system shells, however, servlets run in container which impose more security enforcement (sand boxing) • More powerful • It is java & its container provide mechanisms to use other java application, e.g. EJB  multi-layer architecture

41. Why Servlet: Its Role in Java EE

42. How does Servlet Work? Assumption: servlet is already loaded in RAM • There is a mapping between URL & Servlet classes, e.g. /1/2/3  abc.class • The “web.xml” file (we see later) • When there is a request for URL (/1/2/3/), container calls servicemethod of the class (abc.class) • Multiple concurrent requests  Multiple threads running the servicemethod • The service method calls do??? method according to the type of requests • E.g., doGetfor GET method

43. How does Servlet Work? (cont’d) • The method accesses to the request information • HTTP headers, form data, cookies, sessions, … • Through objects which are passed to the method by container • The method processes the request • Normal java application, DB access, using EJB, … • The method generates output • Setting response headers, setting cookies, updating session, printing HTML to output stream, … • Using the objects which are provided by container

44. The “Hello World” Example import java.io.*; import javax.servlet.*; import javax.servlet.http.*; public class HelloWorld extends HttpServlet{ public void doGet(HttpServletRequestrequest, HttpServletResponseresponse) throws IOException, ServletException{ response.setContentType("text/html"); PrintWriter out = response.getWriter(); out.println("<html>"); out.println("<body>"); out.println("<h1>Hello World!</h1>"); out.println("</body>"); out.println("</html>"); } }

45. Outline • MVC Design Pattern • Multilayer Design • Multitier Architecture • Introduction to Java EE • Servlet • JSP

46. JavaServer Pages (JSP) • JSP technology is an extension of servlet • Simplify web application development by java • We have not to create whole HTML by println • JSPs are easier to develop than servlets • It is the embed version of servlet in HTML • Contains static HTML elements + JSP tags in .jsp file • Java code inside the tags creates dynamic content • Very similar to PHP, but using Java codes • When JSP runs, a servlet is created • It runs on the same container that runs Servlets

47. JSP Invocation

48. JSP Advantages • In comparison to Servlet • Only dynamic part are java coded, not whole HTML • Separation between HTML (Presentation) & Bussing logic • Develop java code & include them in HTML by JSP tags • Automatic recompilation of modified pages • As powerful as servlet (it becomes servlet finally!) • In comparison to interpreted scripts (PHP) • JSP is compiled & kept in memory Better performance • Converted to Servlet (a complete Java program)  More complex logic implementation

49. What is New in JSP? • JSP = HTML + tag + Java  Servlet • We already know HTML+ Java + Servlet • So, what do we want to learn about JSP? • Tags!!! • Okay, we know it <% %> (or something like that) • JSP is finished! There is nothing to learn (  or  ? ) • But, wait!! A servlet is composed of some sections • imports, variable & method declaration, doGet, … • How do we specify which tag in JSP is which part of the servlet class?! • Yes! Tags!!! • Different tags for different purposes • We want to learn! ( :P)

50. JSP Tag Examples • JSP Comment: • <%--Blah --%> • Developer comment that is not sent to the client • JSP Expression: • <%= Java Value %> • Expression that is evaluated and sent to the client each time the page is requested • JSP Scriptlet: • <% code%> • The code is inserted into the servlet's _jspService