Such as "''Web Application'''' Front End Architecture'''' Web 2.0& #39;'&'' HTML5 apps'' have recently become fashionable. Unfortunately, these terms are often used in misleading contexts, regardless of the Web. The completeness of the implementation and use of the application architecture. Today, we will try to understand more about the types of web application architectures based on the latest network trends and key issues that are critical to software owners.
We will outline three main types of Web architectures and discuss their strengths and weaknesses from three perspectives: software owners, software contractors [developers], and end users. There can be other types, but they basically boil down to these three subtypes.
First, we define a web application: it is a client-server application - there is a browser [client] and a web server. The logic of the web application is distributed between the server and the client, and is the channel for information exchange. The data is mainly stored on the server. Further details depend on the architecture: different architectures allocate logic in different ways. It can be placed on the server or on the client.
It is almost impossible to reluctantly evaluate these completely different architectures. But we will try to use some evaluation criteria:
User:
from
Response / availability. Update the data on the page and switch between pages [response time]. This quality of the user interface lies in the richness and intuitiveness of its use.
from
Linkability. Ability to save bookmarks and links to various parts of the site.
from
Work offline. Speak for yourself.
Developer:
from
Speed of development. Add new features, refactoring, parallelization developers, layout designers, etc. between the development process.
from
performance. The maximum response speed of the server, the minimum computing power consumption.
from
Scalability. Ability to increase computing power or disk space as the amount of information and/or number of users increases. If an allocated scalable system is used, data consistency, availability, and partition tolerance [CAP theorem] must be provided. It's also worth noting that when the software owner's request increases the number of functions/screens of the client application, it depends on the framework and implementation rather than the type of Web architecture.
from
Testability. The possibility and simplicity of automated unit testing.
Software owner:
from
Functional scalability. Add features in the shortest amount of time and budget.
from
Search Engine Optimization. The user must be able to find the application through any search engine.
from
stand by. Application infrastructure costs - hardware, network infrastructure, maintenance staff.
from
Safety. Software owners must ensure that both business and user information are secure. As a primary security standard, we consider the possibility of changes in client application behavior and all associated risks. The standard risk of the comparison architecture is the same. We don't consider the security of the server - client '. Channels, because all of these architectures are usually exposed to intrusions - this channel can be the same.
from
Conversion: Website - Mobile or desktop app. You can publish your app on the mobile market or create a desktop app with minimal additional cost.
Some of these criteria may seem inaccurate, but the purpose of the article is not to show what is good and what is bad. This is a detailed review showing possible options.
Let's outline three main types of web applications based on the roles that the server and client browsers perform.
Type 1: Server-side HTML
The most extensive architecture. The server generates the HTML content and sends it as a complete HTML page to the client. Sometimes this architecture is called "#39;' Web 1.0'' because it is the first person to appear and currently dominate the network.
Responsiveness / Availability: 1/5. The least desirable value of these architectures. This is because a lot of data is transferred between the server and the client. Users must wait until the entire page is dependent on responding to trivial operations, for example, when only a portion of the page needs to be reloaded. The UI template on the client is directly dependent on the framework of the application on the server. Due to the limitations of the mobile Internet and massive data transmission, this architecture is strictly applicable to mobile network segments. Instant data updates or changes cannot be sent in real time. If we consider the possibility of real-time updates by generating off-the-shelf content blocks and client updates [via AJAX, WebSockets] on the server side and part of the page design change, we will go beyond this building.
Linkability: 5/5. The highest of the three because it is the easiest to achieve. This is because by default, a URL receives specific HTML content on the server.
SEO: 5/5. Quite easy to implement, similar to previous standards - the content is known in advance.
from
Development speed: 5/5. This is the oldest architecture, so you can choose any server language and framework for your specific needs.
Scalability: 4/5. If we look at the generation of HTML, then load balancing is needed in the case of increased load. Extending the database is much more complicated, but the tasks of the three architectures are the same.
Performance: 3/5. Responsive to responsiveness and scalability in terms of flow, speed, etc. Performance is relatively low because of the large amount of data that must be transferred, including HTML, design, and business data. Therefore, it is necessary to generate data for the entire page [not just the changed business data] and all accompanying information [such as design].
Testability: 4/5. The positive thing is that there is no need for special tools to support JavaScript interpretation to test the front end, the content is static.
Security: 4/5. The application behavior logic is on the server side. However, the data is publicly transmitted and therefore may require protected channels [this is basically a story of any architecture involving the server]. All security features are on the server side.
Convert: Website - Mobile or Desktop App: 0/5. In most cases, this is simply not possible. There are very few exceptions [more of exotics]: for example, if the server is implemented on node.js and there is no large database; or if a third-party web service is used for data collection [however, it is a more complicated one] Architectural variants]. That can wrap the application with node-webkit or similar.
Working offline: 2/5. Use the manifest implementation on the server, which is entered into the HTML5 specification. If the browser supports such a specification, all pages of the application will be cached: if the connection is closed, the user will see the cached page.
Type 2: JS Generation Widget [AJAX]
The first type of evolutionary architecture. The difference is that the page displayed in the browser consists of widgets [functional independent units]. Data is uploaded to these widgets via the server's AJAX query: either as a full HTML block or as JSON and will be converted [via JavaScript templates/bindings] to page content. The option to upload HTML blocks precludes the need to use JavaScript-MV * -frameworks on the client; in this case, something simpler can be used - for example, jQuery. By reducing interaction, we have increased development speeds to make features cheaper and more reliable.
The most important advantage is that updates from the server only reach the portion of the page requested by the client. The widgets are also functionally separated. A particular widget is responsible for a portion of the page; changes in the component do not affect the entire page.
Responsiveness/availability: 3/5. The amount of data transferred by a portion of the page is less than the amount of data transferred across the page, which is why the responsiveness is higher. However, due to the set of widgets, the UI templates that are applicable in the web application are limited by the selected UI framework. A cold start [first full load] of such a page takes longer. Content that is fully generated and cached on the server can be immediately displayed on the client; it takes time to get the data for the widget and is typically used for templating. On the first visit, the site will not load quickly, but it will be more enjoyable than a site based on the first type of architecture. Also worth mentioning is the implementation of '''part'' loading [as it did on yahoo.com].
Linkability: 2/5. Special tools and mechanisms are needed here. Usually, the Hash-Bang mechanism is applied.
from
SEO: 2/5. These tasks have special mechanisms. For example, to promote a website based on the architecture, you can predefine a list of elevated pages and make static URLs for them without parameters and modifiers.
Development speed: 3/5. Not only do you need to understand server-side technology, you also need to use a JavaScript framework on the client side. It also needs to implement web services on the server side.
Performance: 4/5. The time and resources spent on generating HTML content is reliable compared to the time it takes for the application to retrieve data from the database and the processing prior to templating. Using the extension type of this architecture [when data is transferred as JSON] will reduce the traffic between the client and the server, but will add an abstraction level to the application: retrieve from
Orignal From: 3 web application architectures
No comments:
Post a Comment