Did you know that more than one-third of small businesses still have no website? This news is almost as incomprehensible as the fact that a strawberry is not a berry, but a banana is one, and that an oyster can change its gender back and forth four times a year. 

On a more serious note, online presence has an array of benefits. Let’s name a few:

• effective advertising and promotion
• easy access to new customers
• greater communication with customers
• market expansion
• quicker recruiting process

If your business still doesn’t have a website because it seems too expensive and complicated to get, here’s good news for you: experienced software development teams know how to craft a robust web solution within a given timeframe and budget.

Further, you’ll get a web architecture 101: learn about its origin types and models.

Web architecture definition

According to Technopedia, “Website architecture is the planning and design of the technical, functional, and visual components of a website – before it is designed, developed, and deployed. It is used by website designers and developers as a means to design and develop a website.”

Origin of web architecture

The earliest computing models were inconvenient. Every application had to be separately installed on every user’s PC. Furthermore, the components of each application were tightly bound to the definite operating system and computer architecture.

The world wide web (www) was realized in the 1990s so that people and machines could communicate with each other within a certain space (network). At first, the web consisted predominantly of static websites based on HTML. Later, JavaScript and CSS enabled dynamic websites.

Types of web architecture design

There are three types of web architecture: 

• Server-side HTML web application
• JS generation widgets (AJAX)
• Service-oriented single-page web apps (Web 2.0, HTML5 apps)

Type 1: server-side HTML web application

Another name for this application is Web 1.0 since it was the first to appear. This is the most widespread web application architecture where the server generates HTML content and sends it to the client as a full-fledged HTML-page. 

Advantages

Linkability is the highest among the three types due to the fact that by default one URL receives particular HTML-content on the server.

SEO. The content is known beforehand, so SEO is easily implemented.

Development speed. Engineers can choose any server language and framework for particular needs.

Testability.  Software testers don’t need special tools, which support JavaScript interpretation, to test the front-end as the content is static.

Disadvantages

Usability. The user has to wait until the whole page reloads, responding to trivial actions. The architecture is not applicable in mobile development, since the limitations of mobile internet and huge amounts of transferred data. There are no means to send instant data updates or make changes in real-time.

Performance is relatively low because a big amount of data must be transferred, containing HTML, design, and business data. Therefore, it’s necessary to generate data for the whole page at once.

Offline work. Available if a browser supports HTML5 specifications. If not, the user will see only a cached page.

Conversion into a mobile application. In most cases, it’s impossible.

Type 2: Widget web application

The difference from the first type is that the page displayed in the browser consists of widgets (functionally independent units). Data is uploaded from the server to these widgets through the AJAX query.

Advantages

Separated functionality of widgets. A particular widget is in charge of a part of the page, so partial changes will not affect the whole page.

Performance. The time and resources spent on the generation of HTML content are minor.

Disadvantages

Responsiveness. It’s higher than in the first type, but since a page is a set of widgets, the choice of UI templates in this way of web application development is limited by the chosen UI framework.

Linkability. Here, you need special tools and mechanisms, such as Hash-Bang.

SEO. Also, special mechanisms are required. For example, you can predefine the list of promoted pages and make static URLs for them.

Development speed. Software engineers need to know server-side technologies, as well as use JavaScript frameworks on the client side.

Testability. Testing engineers will need to test separately the server side, the client code, and the web service which returns the data to update widgets.

Offline work. Updating or caching the data displayed on the widget has to be implemented additionally. 

Type 3: single-page web application (Web 2.0, HTML5 app)

With this type of web architecture, you download a single page only once. There’s a JavaScript layer on the client side that communicates with web services on the server.  Using the data from web services, a web page makes real-time updates to itself. 

Advantages

Responsiveness. The volume of data transferred for updates is minimal.

Performance. The server only has to give the JavaScript application to the browser. 

Conversion into a mobile application.  With the help of special platforms like PhoneGap, such websites become mobile applications.

Offline work.  This is a full-fledged application that can work offline.  It’s possible to save separate data, using any storage (even the local one), and switch data storage and management to the offline mode.

Disadvantages

Linkability. Here, you’ll also need special tools and mechanisms, as with the second type.

SEO. It is hard to promote the solution unless the entire app is promoted directly. You’ll need special tools to do it for a part of the application.

Development speed. The architecture is relatively new, so there aren’t many time-tested tools, frameworks, and approaches. 

Testability.  Engineers will need to test web services and the client JavaScript code.

Security.  The app logic is shifted to the exposed client side which can be relatively easily modified by an intruder.

Modern web architecture models

There are three web architecture models:

• 1+1 (web server + database)
• Multiple web servers + one database
• Multiple web servers + multiple databases

1+1 (web server + database)

This model uses a single server as well as a single database that’s why a web app built on such a model will go down as soon as the server goes down. It isn’t much reliable and is mostly used for running test projects.

Multiple web servers + one database

Here, the web server doesn’t store any data. It gets information from a client, processes it, and writes it to the database, which is managed outside of the server. 

At least 2 web servers are required for this model to avoid failure. All requests made will be redirected automatically to the new server if the first one goes down. However, if the database crashes the web app will follow to do the same.

Multiple web servers + multiple databases

It is the most efficient model as neither the web servers nor the databases have a single point of failure. There are two options for this type of model: to store identical data in all the employed databases or distribute it evenly among them. When the scale is large (more than 5 web servers or databases), load balancers are installed. 

Attributes of the right web architecture

A web application gives out maximum performance when the following factors are taken into consideration: 

• ability to scale up or down easily (scalable web architecture)
• simplicity of usage
• fast response time
• automated deployments
• error logging
• no single point of failure
• support of the latest standards and technologies
• utilization of strengthened security measures

On a final note

It may seem difficult for a business owner to get a handle on all the web architecture types and models. The good news is that you don’t have to do it, as long as the company providing you with software development services does. The right model and type of web architecture majorly determine the robustness, responsiveness, and security of your solution. So before launching the development project with a contractor, take a closer look at your business needs and evaluate all possible options.