Client empowered web architecture – will refer to those solutions were most of the application executes on the client, i.e. Classic AJAX, Flex/Flash, Classic Silverlight, Java Applets.
Server empowered web architecture - in this article we will refer to Visual WebGui innovation server architecture were the application actually executes on the server and the client is responsible to render the UI and communicate with the server.
Before diving into the comparison, we should first agree on those basic scenarios as the main theme of the targeted application:
Consumer
- Movies and animations
- Gaming
- Editors (Textual, Graphics etc.)
Enterprise/business
- Data intensive
- Mixed (data with one of the first three).
The main aspects which will be discussed in this document are:
- Runtime aspects
- Design time aspects (Development cycle considerations)
- Presentation freedom
Executive Summary
Conclusions Summary
The following short explanations summarize the major incentives leading to the recommended paradigm client vs. server empowered which are further elaborated in the following sections in this document:
UI look & feel
Both server and client empowered solutions can support any kind of UI look & feel using Silverlight or rich AJAX.
Performance CPU usage & network bandwidth
Client empowered applications support the highest performance in applications that data interactions are less common than pure UI/animations/media interactions.
Security
Gaming, animations, and, most of the editors are not security critical applications so that client solutions are valid for those, however, server empowered solutions and more specifically Visual WebGui is much more secured by design.
Client footprint effectiveness
Client footprint is the parameter representing the download weight as a function of the application’s complexity. When client UI interactions, animations, and media are more common, and the software updates frequency is relatively low, then client solutions tend to be more efficient regardless their weight. However, in any other case the small & static footprint of Visual WebGui server empowered paradigm is much more efficient and reasonable.
Scalability
Client empowered solutions are virtually more scalable as they reduce mass responsibilities from the server. However, when the intensiveness of data interactions is higher than UI changes or heavy animations and media, Visual WebGui server empowered paradigm provides the best scalable and redundant solution.
Desktop environment virtualization
Full virtualization of the desktop environment i.e. Registry and File system is enabled within Visual WebGui server as a complementary service, providing full virtualization of desktop environment for web/cloud applications.
Development ease
Media, streaming and animations based applications, require the flexibility of Silverlight and Flash client based applications, the set of tools offered in this family of development tools is more graphic designer oriented and adapted. Visual WebGui server empowered paradigm with single layered object oriented code, desktop like form designer, point & click customization, and data designed set of controls, developer gains great advantage when developing data/business centric application. It simplifies and cuts about 90% of this kind of apps development time.
Maintenance
Maintaining single layered object oriented code is preferable in all cases than any kind of multiple layers and technologies. Even Silverlight which enables Dot.Net in the client requires the establishment of application .NET client & XAML infrastructures and .NET server code as data infrastructures in different layers.
Customizations
The same tools are available for web UI (DHTML/Silverlight) customization whether the architecture is client empowered or server empowered. However, customizing data controls and business functional UI is enhanced and boosted with the Visual WebGui server empowered paradigm point & click controls designer.
Presentation freedom
Sharing WPF/Silverlight XAMLs, code & resources may result in some level of presentation freedom (enabling the use of the same application from multiple devices and media). Though, the complete decoupling of Visual WebGui server empowered paradigm code from the presentation layer provides full capabilities to choose any device as an alternative presentation layer (plain browsers, Silverlight, Flash, mobile devices, smart clients etc).
| |
Scenario 1:
Movies and Animations |
Scenario 2:
Gaming |
Scenario 3:
Editors |
Scenario 4:
Data intensive |
Scenario 5:
Mixed |
| UI look & feel |
Both |
Both |
Both |
Both |
Both |
Performance
CPU usage & network bandwidth |
Client |
Client |
Client |
Server |
Server |
| Security |
Agnostic |
Agnostic |
Agnostic |
Server |
Server |
| Client footprint effectiveness |
Client |
Client |
Client |
Server |
Server |
| Scalability |
Client |
Client |
Client |
Server |
Both |
Desktop
Environment Virtualization |
Server |
Agnostic |
Server |
Server |
Server |
| Development Ease |
Client |
Client |
Both |
Server |
Server |
| Maintenance |
Client |
Client |
Both |
Server |
Server |
| Customizations |
Client |
Client |
Both |
Server |
Server |
| Presentation Freedom |
WPF/
Silverlight
or
Server |
WPF/
Silverlight
or
Server |
WPF/
Silverlight
or
Server |
Server |
Server |
Legend:
- Client – better/easily achieved with client empowered paradigm.
- Server – better/easily achieved with Visual WebGui server empowered paradigm.
- Both – can be achieved with both paradigms, depends on the exact scenario.
- Agnostic – irrelevant for this scenario in most of the cases.
Runtime Aspects
The most influential factor when selecting web/multi-user application architecture would probably be the runtime behaviors and considerations.
The following runtime parameters summary will be explained and elaborated within this section of the document bellow (first 6 parameters of the above table):
| |
Scenario 1:
Movies and Animations |
Scenario 2:
Gaming |
Scenario 3:
Editors |
Scenario 4:
Data intensive |
Scenario 5:
Mixed |
| UI look & feel |
Both |
Both |
Both |
Both |
Both |
Performance
CPU usage & network bandwidth |
Client |
Client |
Client |
Server |
Server |
| Security |
Agnostic |
Agnostic |
Agnostic |
Server |
Server |
| Client footprint effectiveness |
Client |
Client |
Client |
Server |
Server |
| Scalability |
Client |
Client |
Client |
Server |
Both |
Desktop
Environment Virtualization |
Server |
Agnostic |
Server |
Server |
Server |
Legend:
- Client – better/easily achieved with client empowered paradigm.
- Server – better/easily achieved with Visual WebGui server empowered paradigm.
- Both – can be achieved with both paradigms, depends on the exact scenario.
- Agnostic – irrelevant for this scenario in most of the cases.
UI Look & feel
With client empowered solutions (AJAX, Silverlight, Flex/Flash etc) and server empowered solutions (especially when it comes to Visual WebGui server empowered paradigm), the tools for customizing the UI and creating the desired look & feel are the same.
For example; having a Tree-View shown as a creative IT like control with animations and exciting looks can be achieved using JavaScript in client centric AJAX and in Silverlight with Microsoft Expression Blend StudioTM. The same works for a presentation-layer in Visual WebGui’s server empowered solution.
Performance, CPU usage and network usage
There is no clear cut that would indicate which paradigm performs best but when approaching to choose a which paradigm (server/client) would work best it is very important to understand the application’s most common scenarios.
Examining the most common scenarios of the application can teach us what would be the best architectural solution.
Roughly:
If most of the events on the most common scenarios of the application are causing data to refresh or to bring new data in, then an optimized Visual WebGui server empowered architecture will perform best, otherwise client empowered is probably better.
The scenarios are illustrated in the following figures #1 and #2:
Fig. 1
Fig. 2
Figure #1
above shows that client events are eventually causing server request, the request is UI level request (i.e. button id=5 was clicked). Then the UI logic is immediately executed on the optimized state. No need to recreate the entire environment, create and dispose objects and then execute. In addition, since the data is not wrapped (as in web services) with SOAP envelopes and extra overhead, the messages containing UI deltas only are relatively short. Furthermore, the request never brings non-visible data.
Figure #2
above shows that client queries are sent to the server, and then a stateless server identifies the caller, and then raises the environment and any credentials mechanism required to perform the call. After all the objects are allocated in memory, the query is executed and a wrapped response is returned to the client, the client parses that response and then the UI engine/logic executes any additional manipulation on the data before it’s shown on the screen. Furthermore, the request may bring non-visible data as a side-effect of creating generic applicative data based applications.
In any other case, such as with gaming, interactive media, online graphic editors, and less data intensive apps, client empowered architecture makes more sense due to the immediacy of response without further roundtrips to the server.
Conclusion:
Enterprise business and data centric applications will perform best using Visual WebGui optimized server empowered architecture. CPU usage is low due to much less allocations and disposals of objects at each call, bandwidth is lower as data is not wrapped with all sorts of headers and contains almost only data and UI deltas and at the end of each call, the data is ready to be screened directly to the user, no need for further manipulation.
Cloud applications consumers benefit from low server CPU usage and low bandwidth in terms of costs, availability and responsiveness.
Security
There are 3 different securable parts in an online applications and web applications more specifically:
- Server farm security
- Communication layer security
- Client end security
#1 is almost immediately given according to the amounts of money the organization would like to invest in securing the web farms (firewalls and such) – will not be discussed in this document.
#2 is thoroughly done by HTTPS and lower level WCF or identical approaches – will not be discussed in this document.
#3 is the most problematic in this respect since we never know who actually seats behind the browser…
Client end security
When our main goal is to secure the client, we would want to:
- Keep only the data that is present on the current user’s views on the client machine, with minimal or no hidden applicative data.
- Avoid keeping business logics and UI logics on the client machine to prevent overriding restrictions and changing the logics or understanding internal business rules.
- Prevent client code from being able to change the application’s logics and bypass security validations.
It is obvious at this point that an empty, static well defined client will do the job of reducing our risks to the minimum.
Visual WebGui security model based on the ‘Empty Client’ paradigm, is just that (Server Empowered paradigm):
- The data kept on the client is purely what’s shown and there are never hidden or non visible pieces of information on the client.
- Business logics & UI logics are executed by the server and are not sent to the client.
- The client is well defined; it can either send events to the server or render UI. It can never change the application logics which is kept and executed by the server exclusively.
The following diagram (Figure #3) illustrates the entire flow steps of the Visual WebGui’s communications protocol and runtime, the important thing to notice in this diagram is that no step can cause client vulnerability (a detailed explanation can be found here)
Fig. 3
Conclusion:
Empty and static client with no ability to change logics is the preferred approach for enterprise business applications data security.
It is not that client empowered paradigms are not securable; however, the effort that is required to support such information safety level is significantly bigger.
In addition, encryptions/decryptions and obfuscations at runtime are costly and might affect performance so it is highly preferred.
Client empowered paradigm suits less data driven scenarios, such as gaming and editing or high interactive UIs with much less information vulnerability. Those solutions can be safely secured as well with the appropriate time, effort & planning.
Client footprint effectiveness
Client empowered solutions tend to enlarge the client downloaded packages. There are several ways to avoid this large initial download weight, such as packages splitting and modeling.
The concept with client empowered solutions is to have local execution of pretty much everything except for data retrievals and all sorts of authentications which require interaction with the server. This paradigm requires full download of the bits that assemble most of the business logics and UI logics in order to enable partially offline interactive application which consumes only data from the server.
Now imagine a very large application, with hundreds of windows and screens, thousands of controls and interactions between controls and a large set of business logics. Having this kind of an application immediately affects the size of the download when it comes to client empowered solutions.
Apart from the initial download, any update that is done on this large application’s logics requires complete downloading of the application or at least the module again.
On the other hand, if we have an application with a well defined logics which does not require updates or requires updates rarely, client empowered solutions are still valid, at least from this angle.
Furthermore, having large client footprint immediately affects the ability to consume the application from some mobile devices that are limited in CPU, memory and storage and will not be usable when it comes to downloading updates every once in a while in low bandwidth and high latency network types (i.e. mobile phones or satellite networks).
Visual WebGui ‘Empty Client’ paradigm relies on a tiny ~250kb constant, plain and cached kernel (assembled of CSS, XSLT & JavaScript in the DHTML presentation layer or .NET Silverlight client code on the Silverlight presentation layer).
Conclusion:
Client empowered optimized scenarios are: low complexity data applications, gaming, editors, and graphic designers, animation studios and heavily animated and locally interactive applications.
Server empowered optimized scenario would be any complex application that is consumed progressively (only partial application functionality & richness at once) which can benefit from having “streaming like” architecture and constant low footprint.
calability and redundancy
Apparently, client empowered solutions tend to release responsibilities from the server and virtually creates a costless scalability. This fact is true when the amount of data consumed by the application is relatively small than the amount of user interaction that cause UI dynamism as opposed to data retrievals and refreshes.
The server side services of a client empowered solution are mostly stateless so that it’s easily scalable and redundant when there is a need for a web farm of more than one physical server.
At this point we should separate between classic server based solutions and a Visual WebGui server empowered solution.
Classic server based
Will require a solid state on the server and in many cases result is session stickiness enforcing solutions as opposed to fully dynamic call based scalable and redundant solution.
Visual WebGui
Due to the unique optimizations of the state memory and persistence model (memory serialization), Visual WebGui based solutions are fully scalable using a floating session and the average penalty for having a centralized persistent state is ~15ms per call. A schematic diagram is shown in Figure #4 bellow. This fact makes Visual WebGui optimized for cloud architecture as well.
Fig. 4
Important Consideration
The latency and overhead caused by stateless requests for data can change the balance completely when a highly data intensive application is considered. Stateless calls often cause a large number of objects allocations and disposals a fact that raises the CPU usage dramatically and affects the number of concurrent users per CPU.
Given the fact that Visual WebGui solves the server centric scalability dilemma, heavy data interactive applications are more scalable and economical (in terms of # of concurrent users per server) with Visual WebGui’s server empowered solution.
Desktop Environment Virtualization
Client empowered solutions have hard time migrating applications from desktop to the web or cloud due to security restrictions, lack of local registry and file system.
Server empowered solutions can provide virtual environment on a scalable server farm serving the applications end users as if they were using a desktop application and moving their entire environment to the web/cloud.
API
Visual WebGui provides an internal virtualization solution for the registry and file system supporting the same WIN32 like API of Registry and File system using DB persistent model (which can be dynamically changed to other storage solutions).
Capabilities
This virtualization capability of server empowered solutions is highly important for desktop application migration, as most of the rich apps are using the surrounding environment to apply configurations and maintain output files.
Sharing and collaboration
Furthermore, this functionality works naturally within the web/cloud, is seamlessly scalable and enables sharing resources between users as well as maintaining collaboration security restrictions as needed.
Figure #5 shows a raw web UI for virtual resources management (i.e. registry, file-system, event-log etc) which can be available to users but mostly for administrators to enable centralized control of the virtual resources of all users.
Fig. 5
Conclusion:
Visual WebGui virtualization architecture can maintain the entire desktop environment on web/cloud deployments.
Design-Time Aspects
When approaching the development/design of web/cloud application, development ease and productivity are very important and sometimes crucial go/no-go factors.
The following design/development time parameters summary will be explained and elaborated within this section of the document bellow (the last three parameters on the initial table of this document):
| |
Scenario 1:
Movies and Animations |
Scenario 2:
Gaming |
Scenario 3:
Editors |
Scenario 4:
Data intensive |
Scenario 5:
Mixed |
| Development Ease |
Both |
Both |
Server |
Server |
Server |
| Maintenance |
Both |
Both |
Both |
Server |
Server |
| Customization |
Both |
Both |
Both |
Server |
Server |
Development Ease
Media, movies, animation and gaming graphics are mostly using client development tools anyhow, so that the development easy would be quite the same with both. However, in the task of developing functional business and data UIs with a large number of interactions, the most productive development paradigm would be the best of breed desktop methodology and forms designer.
AJAX development orchestrates multi layered DHTML client code with .NET/Java server code:
- CSS – for applications styling
- HTML – for UI Layout
- JavaScript – for client behaviors
- Multi browses and multi standards environment
- .NET server code (i.e. ASP.NET) as backend business code and/or data retrievals
Flex development orchestrates declarative XML with ActionScript:
- Declarative XML
- ActionScript
- .NET/Java server code – mainly for data retrievals or server based business logics.
Silverlight development orchestrates XAML and multi layered code:
- XAML editing – for UI rendering
- .NET client code – for application logics
- .NET server code – mainly for data retrievals or server based business logics.
Visual WebGui Development provides:
- Form WYSIWYG designer (shown in figure #6)
- Single layered server .NET code (event handler code shown in the snippet bellow).
Fig. 6
Button click event handler code snippet:
private void button1_Click(object sender, EventArgs e)
{
//Some event handling code
}
Maintenance
Maintenance set of considerations are quite equivalent to the development process itself; however a very important factor of maintenance is the ability to recruit professional personnel who will be able to maintain the system (as the development paradigm was already chosen). Both the client technologies and the well know desktop API are common enough to find well trained developers.
With Visual WebGui, all the maintainers need is basic .NET object oriented skills and they are ready to maintain any Visual WebGui application, no matter how complex.
Customizations
Client empowered solutions are highly customizable and the flexibility is unlimited. With AJAX development, skilled web developer can customize CSS, HTML and JavaScript and manipulate the client UI in the highest level (as illustrated in figure #7).
Fig. 7
Flex/Silverlight applications require Declarative XML/XAML skills as a single layered descriptive language to replace the old web’s multi-layered layout and styling methods of the web and further enhance their capabilities with richness, animations capabilities and media power (as illustrated in figure #8).
Fig. 8
Visual WebGui’s point & click designer of abstracts away from most of the multi layered hassle and visualizes UI customizations and editing to a very standard and well define way. Instead of having to deal with multiple files, standards, browsers and languages, Visual WebGui provides a single hierarchical view which describes the entire set of styling definitions of the application (as illustrated if figure #9 and #10).
Fig. 9
Fig. 10
Furthermore, this tool provides access to each of the controls and client infrastructures separately i.e. CSS, XSLT, XAML and JavaScript, in case there is a need to go deeper and use core web skills to achieve the required customization’s effect (as illustrated in figure #11).
Fig. 11
Presentation freedom
One of the important objectives of having applications deployed on the web/cloud is the ability to consume the same application from any device. The common devices today are: desktop & laptop computers, web browsers (with or without Silverlight or Flash plug-in) and all sorts of mobile devices.
With the ability to share resources between WPF and Silverlight, we can achieve some such flexibility by sharing some resources between the desktop WPF application and the Silverlight web applications.
Visual WebGui server architecture completely decouples the application and UI logics from the presentation layer (as illustrated in figure #12).
Patent Pending - Decoupled Architecture
Fig. 12