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 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
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
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
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.
Thursday, September 4, 2008
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.”
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
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.
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.
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.
Modern browser support the
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.
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.
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.
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.
Masked Input Plugin
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.
AJAX Instant Messenger
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.
Creating a table with dynamically highlighted columns
There is a number of impressive things happening within this small area.
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 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.
Style Your Website’s Search Field with JS/CSS
The sliding Date-Picker
Prototype UI. Carousel are great to display a large set of data like images.
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.
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
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.”
Bullet Proof Corners plugin for jQuery using Canvas/VML
Lightview was built to change the way you overlay content on a website. Works on all modern browsers
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.
New unobtrusive dynamic flickr badge
A compact Flickr-Badge for presentation of Flickr-images with a navigation option.