Benefits of using the n-tiered approach for web applications

The concept of tiered architectures in application development is evolving from a 1- tier approach to an n-tiered approach. While all approaches have their benefits, the nature of web-based applications lend themselves to an n-tiered approach.

This article describes some basic tiered architectures and explains some of the benefits of adopting an n-tiered approach to web application development.

Before delving into explanations of the various tiered architecture, an important first step is to clarify what exactly "architecture" represents. In the context of this article, architecture refers to the blue print, or the underlying schematics used to map out or design a web application. The basic concept of a tiered architecture involves breaking up an application into logical chunks, or tiers, each of which is assigned general or specific roles. Tiers can be located on different machines or on the same machine where they are virtually or conceptually separate from one another. The more tiers used, the more specific each tier's role. How many tiers? A 1-tier architecture is the most basic setup because it involves a single tier on a single machine. Think of an application that runs on your PC: Everything you need to run the application (data storage, business logic, user interface, and so forth) is wrapped up together. An example of a 1-tiered application is a basic word processor or a desktop file utility program. Although the 1-tier approach is a simple design that's easy to distribute, it does not scale well. In addition, because you are limited to running the entire application (including the user interface) on single machine, a 1-tier architecture does not adequately address the needs of a web-based application. A 2-tier architecture is the basic terminal-to-server or browser-to-server relationship. You could have a "smart" client that performs most of the work talking to a "dumb" server; or, more commonly, a "dumb" client talking to a "smart" server. Sometimes you have both. In essence, the client handles the display, the server handles the database, and the business logic is contained on one or both of the two tiers. An example of a 2-tier approach is the basic web model where a web server serves pages to a web browser. Another example of a 2-tier approach is a specialized terminal-to-server application. Although the 2-tier approach increases scalability and separates the display and database layers, it does not truly separate the application into highly specialized, functional layers. Because of this lack of specialization, most applications quickly outgrow this model. A 3-tier architecture is the most common approach used for web applications today. In the typical example of this model, the web browser acts as the client, an application server (such as Macromedia ColdFusion) handles the business logic, and a separate tier (such as Oracle or MySQL database servers) handles database functions. Although the 3-tier approach increases scalability and introduces a separation of business logic from the display and database layers, it does not truly separate the application into specialized, functional layers. For prototype or simple web applications, a 3-tier architecture may be sufficient. However, with complex demands placed on web applications, a 3-tiered approach falls short in several key areas, including flexibility and scalability. These shortcomings occur mainly because the business logic tier is still too broad- it has too many functions grouped into one tier that could be separated out into a finer grained model.

This is where an n-tier architecture can provide a suitable structure for your application. The letter "n" stands for any number of tiers. Traditionally, it starts with a basic 3-tier model and expands on it to allow for greater performance, scalability, and a host of other benefits. The single most important benefit of an n-tiered architecture, compared to a 3-tier approach, is breaking up the business logic from the application-server level into a more fine-grained model. More details on this and other benefits of an n-tiered architecture are discussed below. Example of an n-tiered architecture This example shows a generic shopping-cart web application. The tiers used for this example include the client, presentation, business logic, integration, and data. The client tier represents how the user interacts with your sample application. Because this is a web-based application, the client will use a browser for this task. For a rich user experience, you might use Macromedia Flash MX. Additionally, the Macromedia Flash MX footprint is small and you can include auto-detection and auto-installation so that requiring it in your application is seamless to the user. The presentation tier represents the dynamic creation of display code (HTML) that is sent to the user's browser. This layer dynamically displays information, such as merchandise and the contents of your shopping cart. It communicates with the other tiers by way of outputting the results to the client tier (browser) and all other tiers by calling custom tags, calling database stored procedure, invoking ColdFusion components (CFCs), calling Enterprise JavaBeans (EJBs), calling web services, and so forth. This layer is the glue that holds the entire application together. It binds all of the tiers and ensures that the client sees what was requested in the browser. A typical tool for this tier is an application server, such as Macromedia ColdFusion or Macromedia JRun. As I mentioned before, you may want to use Macromedia Flash MX. The business logic tier represents the core functionality of your application. It performs low-level code and number crunching. In the shopping-cart example, business logic calculates sales tax and shipping costs and performs credit card authorizations. Pull this logic out of the presentation tier and place it into its own tier. Common tools you can use to encapsulate business logic include EJBs, web services, database stored procedures, CFCs, or very specialized JavaServer Pages (JSP) or ColdFusion custom tags or templates. The integration tier encapsulates the functionality required for an application to talk to the data tier, or sometimes the business logic tier, in an easy-to-use format. This way, a developer working on the presentation tier can focus on HTML and output, and simply call the custom tag, CFC, EJB, web service, and so forth, without knowing the low-level details of database interaction or object invocation. Furthermore, if you change database vendors you won't break any presentation tier code that may include vendor-specific functionality. Simply adjust your custom tag library and let the presentation-tier developers focus on presentation content. Some common tools you can use to build the integration tier are CFCs, web services, ColdFusion custom tags, or JSP custom tags. For example, in a shopping-cart application, you might have a simple custom tag that hides all of the complexities of querying a database to get detailed inventory information. The data tier is the final tier of your application. The most common solutions for this level are database servers such as Oracle, MySQL, and Microsoft SQL Server. Pulling your data into its own tier is one of the most important steps you can take to break up an application. Not only does it keep the data neutral (not tied into your application server or business logic, and so forth), but it has the added benefit of improved performance and scalability. As your data needs increase, you can move this tier to its own (or a more powerful) machine and eventually to its own cluster of machines. Applying an n-tiered architecture to a sample application The following example illustrates how all of the tiers would work together in the fictional shopping-cart application. This example focuses specifically on what takes place behind the scenes to calculate and display sales tax for an order. First, the presentation tier calls a business tier custom tag, EJB, CFC, and so forth that performs a series of calculations on the contents of the shopping cart to compute a total sales price. The business logic tier pulls up the appropriate tax rate from the database by working with the integration tier (a custom tag, CFC, and so forth). A simple call to the integration tier masks the complexities of talking to the data tier and retrieves the required tax rate so that the business logic can finish its task. Once the business logic tier calculates the sales tax, the presentation tier takes over and formats the results and passes it to the client tier (web browser) for display.

Benefits of an n-tiered model Separating the responsibilities of an application into multiple tiers makes it easier to scale the application. For example, look again at the sample shopping-cart application. If you are on a limited budget, begin by running all the tiers on a single machine. As traffic increases and performance starts to suffer, separate each tier on its own machine and eventually cluster some or all of the tiers on multiple machines. An n-tiered architecture allows you to separate the workload better for developers. By breaking design into tiers, developers with different specialties can focus on a tier that best suits their skill set. You can let your graphic artists and Macromedia Flash experts focus on the presentation tier, while the Oracle database administrator focuses on the data tier and database-stored procedures. An n-tiered model also makes an application more readable and its components more reusable. By separating an application into tiers you make it much harder to fall into the trap of writing spaghetti code-which refers to huge line counts of code with a complex, tangled control structure and deeply nested if-then statements. Simply put, you can only place so much logic on a single template before readability and maintainability suffer. Also, it's easier to port a custom tag library, CFC, or EJB to a new application than directly by cutting and pasting logic from a messy template. Finally, an n-tiered approach makes your applications more robust by eliminating a single point of failure. For example, if you decide to change database vendors you won't have to hunt through every single template of your application to make the necessary changes. Simply replace the data tier and adjust the applicable portions of the integration tier to query the new database. You will not break the business logic or, more importantly, presentation tier code. Suppose your user interface requirements change. To take advantage of Macromedia Flash in the new user interface, simply replace the applicable portions of the presentation layer. No other tiers are broken or need to be modified based on the presentation layer changes. If you were still using a 3-tier architecture where your business logic is intermingled with your presentation logic, you would have to hunt and pick over most of your code in order to implement this type of a change. The concept of tiered architectures in application development has evolved from one tier to n tiers. While all approaches have their benefits, the nature of web-based applications lend themselves to an n-tiered approach. You can let specific parts of your team focus on their specialties and create highly scalable, reusable, and robust applications.

60 More Ajax & Javascript Solutions for Professional coding..

Mocha UI

Mocha is a web applications user interface library built on the Mootools javascript Framework.

The Mocha GUI components are made with

An Accessible Slider
“Recently we designed and developed an interface that required a slider control, which allows users to choose one or a range of values on a continuum. Values on a slider can represent anything from hours on a clock to the volume on a music player to a complex, proprietary data set. In its simplest form, the slider is displayed as an axis of values with a handle to drag and select a value, or two handles for selecting a range.”

FancyUpload
Swf meets Ajax. An upload widget that allows queued multiple-file upload including progress bars.

Coda Popup Bubbles
“When you move the mouse over the popup, this triggers a mouseout on the image used to trigger the popup being shown. I’ll explain (carefully) how to make sure the effect doesn’t fail in this situation.”

Facebook Style Input Box
The approach to re-create the autocomplete method of adding multiple recipients to messages used on Facebook. “I’d seen it in Facebook before, which has a really decent implementation of this concept (it work well, but it doesn’t respect any modern programming principles; basically, it’s a big tag soup with lots of inline Javascript)”

Rich Text Editor
The Rich Text Editor is a UI control that replaces a standard HTML textarea. It allows for the rich formatting of text content, including common structural treatments like lists, formatting treatments like bold and italic text, and drag-and-drop inclusion and sizing of images. The Rich Text Editor’s Toolbar is extensible via a plugin architecture so that advanced implementations can achieve a high degree of customization. The tool is based upon Yahoo UI Library.

iCarousel
iCarousel is an open source (free) javascript tool for creating carousel like widgets.

Ext JS - JavaScript Library
An extensive JavaScript-Framework with numerous modules and components such as tables, trees, windows, layouts, forms, and tabs. All of them look as if they’ve been used in standard desktop-applications.

Moo Wheel
The purpose of this script is to provide a unique and elegant way to visualize data using Javascript and the -object. This type of visualization can be used to display connections between many different objects, be them people, places, things, or otherwise. The script is licensed under an MIT-style license.

Product Slider
This ‘product slider’ is similar to a straight forward gallery, except that there is a slider to navigate the items, i.e. the bit the user controls to view the items.

Taggify Tooltips
This post demonstrates how you can use Taggify widget to enhance your blog with the functionality to show popup tooltips for parts of your images.

Gettyone Search Options Menu
Learn how to implement a Gettyone-like search options menu which display a layer with some search options below the input search field, when an user click on the input field to searching for something.

Moo Canvas
Modern browser support the tag to allow 2D command-based drawing. This script provides the third dimension, allowing for browser drawing with pure JavaScript. To use, web developers only need to include a single script tag in their existing web pages.

Relay - Ajax Directory Manager
Relay is an Ajax-powered file management library. It has a multi-user access restriction, allowing the administrator to control user access to uploaded files. Features: drag-n-drop files and folders, dynamic loading file structure, upload progress bar, thumbnail view, including pdf and multiple users & accounts.

GlassBox
GlassBox is a compact Javascript User Interface (UI) library, which use Prototype and Script.aculo.us for some effects. With GlassBox you can build transparent border, colorful layouts and “Flash-like” effects. Take a look at the site itself: you can use the keyboard navigation: Keys 1-8 (display page), arrows left/right (previous/next page) and arrows up/down (Scroll content).

qGallery
qGallery is a Prototype-based gallery script which automatically takes care of the image processing, offers multipple viewing modes and comes with a number of transition effects.

Amberjack
Amberjack is a lightweight Open Source library, enabling you to create site tours. The JavaScript library is lightweight (~4K), stable, LGPL licensed, browser compatible, set up in 2 minutes & super-easy to customize.

GWT-Ext Widget Library
GWT-Ext is a powerful widget library that provides rich widgets like Grid with sort, paging and filtering, Tree’s with Drag & Drop support, highly customizable ComboBoxes, Tab Panels, Menus & Toolbars, Dialogs, Forms and a lot more right out of the box with a powerful and easy to use API. It uses GWT and Ext.

Flexigrid
Lightweight but rich data grid with resizable columns and a scrolling data to match the headers, plus an ability to connect to an xml based data source using Ajax to load the content.

cforms II
cforms is a plugin for WordPress, offering convenient deployment of multiple contact forms throughout your blog or even on the same page. The form submission utilizes AJAX, falls back, however, to a standard method in case AJAX/Javascript is not supported or disabled.

Masked Input Plugin
A masked input plugin for the jQuery javascript library. It allows a user to more easily enter fixed width input where you would like them to enter the data in a certain format (dates,phone numbers, etc). It has been tested on Internet Explorer 6/7, Firefox 1.5/2, Safari, and Opera.

Oversized Sliding Tabs
Sliding Tabs is a mootools 1.11 plugin which adds a pretty neat effect. It’s a clone of something seen on Panic Software’s Coda site, which in turn is very heavily inspired by a widget used in the iTunes Music Store. Similar jQuery solution.

Custom Checkbox with jQuery
This script provides you with the ability to customize the design of checkboxes in your web forms. You can use the default skin and the Safari skin which are provided with the package.

NicEdit
NicEdit is a Javascript/AJAX inline content editor to allow easy editing of web site content on the fly in the browser. It integrates into any site in seconds to make any element/div editable or convert standard textareas to rich text editing.

AJAX Instant Messenger
is a browser-based instant messaging client. It uses AJAX to create a near real-time IM environment that can be used in conjunction with community, intranet, and social websites. No refreshing of the page is ever needed for this "web application" to work, as everything is updated in real-time via JavaScript.

Mootools animated sidebar menu
This tutorial explains how to implement an animated menu using mootools. You can see how it works directly from mootools site.

LiveValidation
LiveValidation is a small open source javascript library built for giving users real-time validation information as they fill out forms. Not only that, but it serves as a sophisticated validation library for any validations you need to make elsewhere in your javascript, it is not just limited to form fields.

Creating a table with dynamically highlighted columns
There is a number of impressive things happening within this small area.

Tablecloth
Tablecloth is lightweight, easy to use, unobtrusive way to add style and behaviour to your html table elements. By simply adding 2 lines of code to your html page you will have styled and active tables that your visitors will love :) Try to mouseover or click on a table below.

Unobtrusive Table Actions Script
An attempt at writing an unobtrusive (and fast) script that adds commonly required "actions" to data tables. Can Zebra stripe the table. And supports row hover, column hover and cell hover effects

FancyForm
FancyForm is a powerful checkbox replacement script used to provide the ultimate flexibility in changing the appearance and function of HTML form elements. It’s easy to use and degrades gracefully on all older, non-supporting browsers.

Starbox
Starbox allows you to easily create all kinds of rating boxes using just one PNG image. The library is build on top of the Prototype javascript framework. For some extra effects you can add Scriptaculous as well. Check the demos below to see what Starbox is all about and read on for more information on how to customize your own Starboxes.

Style Your Website’s Search Field with JS/CSS
Continuing to provide unobtrusive solutions, CSSG is happy to present SearchField. It serves as a way to style your search field and add behavior without any additional JavaScript or modifications in your markup. It features plug & play onfocus and onblur behaviors and auto suggestion like you’ve never seen before.

The sliding Date-Picker
Due to the development of Qash.nl, a Dutch personal finance website full of cool javascript features, it’s somewhat quiet around here. But to keep you satisfied, we present the sliding date-picker. This element enables you to pick dates with a simple slider bar. By dragging the bar over the time-line, the dates change instantly.

Carousel
Prototype UI. Carousel are great to display a large set of data like images.

minishowcase
minishowcase is a small and simple php/javascript online photo gallery, powered by AJAX that allows you to easily show your images online, without complex databases or coding, allowing to have an up-and-running gallery in a few minutes.

Timeline
Timeline is a DHTML-based AJAXy widget for visualizing time-based events. It is like Google Maps for time-based information. Below is a live example that you can play with. Pan the timeline by dragging it horizontally.

Displaying source code with Ajax
The script fires off an Ajax request, gets the document the link points to, replaces the special characters and adds line numbers.

mooSlideBox 3
The mooSlideBox v3 is a small and slim ajax based extension or replacement of the common "lightbox" that can be found on nearly every page. This lightbox clone works in IE 6/7, Opera and Firefox.

Accessible News Slider
Accessible News Slider is a JavaScript plugin built for the jQuery library. It meets the accessibility requirements as outlined by WCAG 1.0.

jsProgressBarHandler (Dynamic Unobtrusive Javascript Progress/Percentage Bar)
jsProgressBarHandler is a Javascript based Percentage Bar / Progress Bar, inspired upon JS-code by WebAppers and CSS-code by Bare Naked App. Next to a structural rewrite of the WebAppers code, this javascript progress bar can easily be extended and tweaked just by setting a few parameters.

CNN Style Scrolling Ticker with the Marquee Toolkit Control
Besides scrolling the items from right to left, the liScroll plugin supports two additional features

mooSocialize - ajax based social bookmark widget
Enough of having to submit interesting articles by hand to your favorite social networks and newsgroups? Then this is for you. Based on ajax, this small widget allows to integrate many many bookmarks for every post on your blog, website etc.

CheckBoxList hover extender
“We created an AJAX Control Toolkit Extender that asynchronously calls a web service method (or a page method) to obtain the information displayed in the popup control, when the user hovers over an item.”

Cornerz
Bullet Proof Corners plugin for jQuery using Canvas/VML

Lightview
Lightview was built to change the way you overlay content on a website. Works on all modern browsers

lightWindow
Another script you can use to integrate lightboxes and online-galleries in your web-pages. This lightweight script supports 5 different types of Media: Pages, Inline Content, Media (movies, SWF, etc), images (galleries, single), External Websites (via IFrame). Photo: Patrick Cheatham.

DatePicker using Prototype and Scriptaculous
An unobtrusive and flexible date picker widget which uses Prototype and Scriptaculous libraries. 52 More Calendars and Date Picker Designs.

ModalBox
ModalBox is a JavaScript technique for creating modern modal dialogs or even wizards (sequences of dialogs) without using conventional pop-ups and page reloads.

Accordion v2.0
A lightweight accordion that is built with Scriptaculous, has vertical, horizontal and nested styles and works properly in every browser.

New unobtrusive dynamic flickr badge
A compact Flickr-Badge for presentation of Flickr-images with a navigation option.

13 Awesome Javascript CSS Menus
13 “fresh” JavaScript+CSS-based navigation menus in a brief overview. Among other things Slashdot Menu and Sexy Sliding Menu displayed below.