Introduction to Web Application Architectures Web Application Architectures 18 th March 2005 Bogdan L. Vrusias [email protected]

Introduction to Web Application Introduction to Web Application ArchitecturesArchitectures


Web Application Architectures

18th March 2005

Bogdan L. [email protected]

18th March 2005 Bogdan L. Vrusias © 2005 2


ContentsContents• Client-side Web application architectures

• Server-side Web application architectures

• n-tiered architectures.



Client-side ArchitectureClient-side Architecture• On a client-side architecture any possible processing for the Web

application is performed on the client's browser.

• The Web server only keeps the necessary files and downloads them to the the users side, when requested.

• This style of architecture is called thick client or fat client architecture.

• The client-side architecture can either be static, where the user can not change anything on the page, or interactive, where the page can react with the user's actions.

• The user can also interact with other types of client-side applications such as Java Applets, ActiveX, and Flash.

• All types of files and applications that interact with the user on the client-side are downloaded from the browser when the HTML page is downloaded.



Client-side Architecture ApplicationsClient-side Architecture Applications• Popular applications of the client-side architecture are:

– Static content: Basic information about a company or organisation, online catalogues, or personal Web pages.

– Interactive marketing: The user can interact with the contents of the page; for example filtering and sorting tables.

– E-learning: The user can access training courses, undertake interactive quizzes, or even learn how to cook.

– Simple games: Games such as soccer, chess, cards, and other have been developed for the client-side.



Client-side TechnologiesClient-side Technologies• Currently the most popular client-side technologies are:

– HTML

– CSS

– Java Applets

– JavaScript

– XML

– XSL

– VBScript

– ActiveX Controls

– Flash

– …



Client-side Technologies: VBScriptClient-side Technologies: VBScript• Microsoft Visual Basic Scripting Edition (VBScript) is a

scripting language like JavaScript.

• VBScript is used in the HTML document in the same way as JavaScript, but is not as well supported by the browsers as JavaScript.

• VBScript is used more on the server-side scripting to form Active Server Pages (ASP).



Client-side Technologies: ActiveX ControlsClient-side Technologies: ActiveX Controls• ActiveX controls are applet components developed by

Microsoft (therefore are only supported by Internet Explorer on Microsoft Windows systems).

• ActiveX controls are downloaded and installed on the client's computer and executed inside the browser.

• ActiveX provide advanced graphics manipulation and multimedia experience that HTML and JavaScript can not provide.

• ActiveX controls are built using Microsoft C++ or Microsoft Visual Basic.



Client-side Technologies: FlashClient-side Technologies: Flash• Flash has been developed by Macromedia to provide

impressive graphical display on a Web page.

• Flash requires the Macromedia Flash Player to be installed on the client's computer to be able to run.

• Flash is mainly used on front pages (welcome screens) of Web sites, or to provide demonstrations.

• Both Internet Explorer and Netscape support Flash.



Java Applets Vs OtherJava Applets Vs Other• Java Applets provide advanced graphics manipulation and

multimedia experience that HTML and JavaScript can not provide.

• Java Applets are built using Java, developed by Sun Microsystems.

• Java Applets are well supported by browsers and platforms, therefore are more popular than ActiveX controls.

• Java Applets require the Java Virtual Machine to be installed on the users computer to be able to run. The Applets themselves are not installed.

• ActiveX controls usually perform better that Java Applets.



Advantages of Client-side ArchitectureAdvantages of Client-side Architecture• Building client-side applications is relatively easier that

building server-side applications.

• Client-side processing offloads the Web server.

• You don't need extensive programming knowledge to build simple client-side Web applications.

• There are many easy to use visual tools that can build entire Web sites.

• The Web application can be tested instantly without the need of a Web server.

• It can be easily hosted by third-party Web hosting services, because there are no applications needed to be installed on the Web server.



Disadvantages of Client-side ArchitectureDisadvantages of Client-side Architecture• Event with the latest standardised versions (by W3C) of

client-side technologies, browsers from browsers still have differences on processing the Web page.

• A considerable of Web users still use old versions of browsers that do not support most of the new technologies.

• By using only client-side Web applications, data cannot be easily collected from the user (unless the user emails the data to the server).

• The client's computer may cause all sorts of problems by being very slow or not having all necessary software and plug-ins installed.

• The only way the user can access data from the server is if the data is stored as an XML file.



Server-side ArchitectureServer-side Architecture• You can build entire Web application using server-side

technology only.

• When building server-side Web applications you can support any browser on any platform and you don't have to worry about the browsers differences.

• A server-side Web application performs all processing on the server and returns, to the user, HTML pages as the result.

• Because all processing is performed on the server and the user just displays the information without performing any logic or processing, the architecture is called thin client.



Server-side Architecture ApplicationsServer-side Architecture Applications• Data collection: The user submits information to the server where is

then processed and stored.

• Order processing: The user places an order and submits it to the server where his order is processed.

• Dynamically generated catalogues: Based on user's request the server dynamically generates an HTML page based on a catalogue.

• Dynamically generated status information: The server provides the user with an HTML page based the status of a process.

• Online bill payment: The user has the ability to pay bills without other human intervention.

• Data maintenance pages: The server provides the user tools to maintain his data, which is stored on a database.



Server-side TechnologiesServer-side Technologies• HyperText Markup Language (HTML)

• Cascading Style Sheets (CSS)

• Common Gateway Interface (CGI)

• C/C++

• Java

• Visual Basic

• Perl

• Active Server Pages (ASP)

• ASP .NET

• PHP Hypertext Processor (use to be known as Personal Home Page)

• JavaServer Pages (JSP)



Advantages of Server-side ArchitectureAdvantages of Server-side Architecture• Access to databases

• No browser compatibility issues.

• XML and XSL can be processed on the server side without warring about browser features.

• Processing can be done fast (as long as the Web server is a state of the art machine).



Disadvantages of Server-side ArchitectureDisadvantages of Server-side Architecture• No client-side reactivity.

• Software applications (such as Internet Information Server or Apache) is required to execute server side components.

• The server may get overloaded with requests.

• Some times you need huge masses of data space to be able store user information.



Combined ArchitectureCombined Architecture• Combining the client and server side architectures can

result in a very powerful Web application, as you can get the best from both.

• This type of architecture provides client-side processing for validation and interactivity and server-side processing for data entrance and dynamic creation of Web pages from databases.



Advantages of Combined ArchitectureAdvantages of Combined Architecture• Data can be validated before passed to the Web server.

• The validated data can be submitted and stored directly to a database.

• Data can be obtained from the database and dynamically create Web pages for presentation.

• Necessary scripts or client-side applications can be generated to the Web page and downloaded to the user.

• XML, XSL can be processed on the server before downloaded to the client's computer.



Disadvantages of Combined ArchitectureDisadvantages of Combined Architecture• You need to be familiar with a wide range of client and

server side languages, technologies, and techniques.

• Before you generate client side scripts on the server, you still need to know about differences on the Web browsers.



nn-Tiered Architecture-Tiered Architecture• A tier is a logically separated and encapsulated set of

processes.

• There are three basic parts:– The user interface tier (representation layer).

– The data tier (server-side component), which is the database data processed by the Web application.

– The middle tier (middle-tier component), which processes complex business processing (usually place on a separate server called the application server).



Middle-Tier TechnologiesMiddle-Tier Technologies• The middle-tier application development is a separated and

encapsulated set of processes usually related to business applications.

• The applications in the middle-tier are build as components which are accessed from the server-side components (data tier).

• Popular technologies for building middle-tier components are: the Component Object Model (COM) with C++ and VB, and the JavaBeans with Java

• The middle tier components are usually place on a separate server called the application server.



Advantages of Advantages of nn-Tiered Architecture-Tiered Architecture• The architecture and processing is more modular, which

means that is easier to maintain and update.

• Is component based therefore you can build or buy third parity components that just plug into your application.

• The applications are usually compiled, therefore you gain performance.

• Components are reusable and can be used on other applications or by other organisations.

• You can control the load balancing of your application by splitting the functionality into tiers.



Disadvantages of Disadvantages of nn-Tiered Architecture-Tiered Architecture

• n-tier applications requite lots of design to ensure integrity between the tiers.

• It can become very expensive as it requires more development time and more physical resources.

• More and more technologies to learn…



ClosingClosing

• Questions???

• Remarks???

• Comments!!!

• Evaluation!

Documents

Introduction to Web Application Architectures Web Application Architectures 18 th March 2005 Bogdan L. Vrusias [email protected]