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

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

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

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)

MVC: Model-View-Controller 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 In calculator: Using the memory as an example help to understand the Model

Advantages of MVC Separation of concerns Flexibility Reusability 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

MVC Interactions?!

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

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

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

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

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

Multilayer Architecture

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?

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?

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?

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

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

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

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”

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)

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?!

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

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

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

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

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 …

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

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

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

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

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 & Facelets similar to JSP but uses custom tags which can be converted to anything

Java EE Multi-tier Architecture

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, …

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

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

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

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

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, …

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

Why Servlet: Its Role in Java EE

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 service method of the class (abc.class) Multiple concurrent requests  Multiple threads running the service method The service method calls do??? method according to the type of requests E.g., doGet for GET method

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

The “Hello World” Example import java.io.*; import javax.servlet.*; import javax.servlet.http.*; public class HelloWorld extends HttpServlet { public void doGet(HttpServletRequest request, HttpServletResponse response) 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>"); }

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

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

JSP Invocation

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

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)

JSP Tag Examples JSP Comment: JSP Expression: JSP Scriptlet: <%-- 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 Use a figure to show the corresponding parts between JSP & Servlet

The Hello World Example <HTML> <BODY> Hello World! The time is now <%= new java.util.Date() %> </BODY> </HTML> Is converted to out.print("<HTML> <BODY> Hello World! The time is now "); out.print(new java.util.Date()); out.print("</BODY> </HTML>");

Summary Q8) How are complex/big web applications developed? We need architectures & design patterns to help us Q8.1) Design patterns & Architecture? MVC & Multi-layer are common approaches Q8.2) Deployment architecture? Multi-layer is typically deployed in multi-tier architecture Q8.3) What does Java EE provide? Servlet & JSP & Some other things (we didn’t see) Q8.4) Servlet? A java class that run to handle HTTP requests Q8.5) JSP? Embed version of the Servlet with specially tags for different purposes

References The “Core Servlet” Book www.j2eetutorials.50webs.com