The Visual WebGui Windows Over Web (WOW) Revolution for Web Development

Taking the World by Storm with Simplifying Complex Development

Just a decade and a half ago, the process of building a simple Windows – based application could have been described as a nightmare. This very same task that today we take for granted—was anything but trivial before the introduction of Visual Basic.

With Visual Basic (VB), developers could for the first time implement Windows applications in an intuitive, graphical environment by dragging controls onto a form. By enabling both professional and casual developers to maximize their productivity, Visual Basic ushered in a renaissance of Windows-based application development.

Visual Basic community has grown to a majority share of the total worldwide developer population in a very short time.

How did it happen? Simplicity, simplicity simplicity! The simplified development of Windows applications was fundamental components in the realization of Microsoft's vision for Windows-based computing. From this rather inauspicious beginning came an equally unfathomable outcome: an impact on the computing industry so profound that it forever changed the face of software development and created an explosion in the Windows applications market.  A decade and a half later, it seems so obvious—but at the time, when only a small, select group of developers were even capable of building Windows applications, Visual Basic represented a monumental shift in application design and a great leap of faith for the development community.

Then the .NET languages were introduced with the Windows Forms development paradigm according to which developers were empowered with even further levels of control and productivity. Through first-class object-oriented constructs, such as inheritance, structured exception handling, and parameterized constructors, .NET programming became more elegant, simplified, and maintainable.

The Web and Cloud Era

The web revolution is here and now. Web had become very quickly the platform of choice for all kind of applications. The demand for web applications is ever growing and cloud computing is expected to bring along another jump in demand and usage of web. Ajax and RIA solutions which are web enhancement methodologies have added complexity to a much complicated as is, web development. There are a handful of solutions that target Ajax development but none has really brought with it the Visual Basic kind of simplification that had revolutionized the software industry. Web and now cloud is complex to develop with multi languages, require mastering of diversified skills, time consuming and risky. Much like what the desktop development used to be back before the Visual Basic revolution.

The Visual WebGui WOW Revolution

With Visual WebGui enablement of the well known VB6 (or WinForms) development paradigm for web and cloud, with obvious updated additional capabilities, there is not much that should be added. Visual WebGui enables VB6-like drag & drop, object oriented, WYSIWYG development methodologies but adds extension and customization capabilities. It offers the basic Window look and feel but also enables customization and web 2.0 kind of user interface designing. It is interesting to note Mr. Ballmer Microsoft CEO in last TechEd Australia on the user interface of choice: "Users will come to expect web-ready interfaces that are both familiar and as responsive as their desktop counterparts. People expect consistency in interfaces," he said.

Visual WebGui is extending VB6 development simplicity into the up dated web and cloud user interface. It is transforming web development much like Visual Basic did with desktop. Its penetration can only be compared to that of VB back in the days. Since its introduction only couple of years ago, Visual WebGui had been adopted by hundreds of thousands of developers who had built more than 35,000 Visual WebGui applications to date.  

Explore the WOW for developers >

Drill Down for Developers

The New Enhanced VB-like Development Experience vs. Traditional Ajax

Introduction

The following  is targeted towards traditional web developers and more specifically ASP.NET developers who would like to learn a way to focus their development efforts on algorithms, requirements and business logics using a new, VB6-like highly productive, boosted web development paradigm which provides maximal flexibility, interoperability and interactivity with any other web applications, controls set and architectures.

Visual WebGui – is the product that represents the new VB-like WOW approach suggested by this document.

ASP.NET – is referred to, in this document, as a point of comparison, although, any other traditional web development paradigm could be chosen (JSP, PHP etc). In other words, this document compares a more generic approach commonly known as today’s default web development approach with the Visual WebGui’s WOW approach.

Developer Considerations

We will dive into the following developer perspectives:

1. Development languages & environment
2. Required skills
3. Development effort and ease
4. API quality and convenience
5. Ability to use common and proven design patterns
6. Debugging & testing efforts needed
7. Technologies contemporariness

Choosing an Infrastructure

In addition, we will highlight some major issues to examine before you go about choosing a platform to base your next line-of-business or data centric application on. The following subjects will be briefly discussed in this document:

1. Infrastructure standards
2. Variety of data controls
3. Binding to data
4. Extensibility/Customizability & look & feel
5. Integration/Interoperability
6. Performance considerations
7. Security factors
8. Scalability

Developer Considerations

This section explores some major developer’s considerations when choosing a development platform to base the next project on.

Development Languages & Environment

You will probably choose your development language according to your existing skills and the skills that are most common on your organization.

Visual WebGui developers can choose any .NET language to develop applications with (i.e. C#, VB .NET etc). The Visual WebGui SDK is fully integrated into all of the Visual Studio versions (figure 1).

Visual WebGui adds user interfaces to simplify the application’s configuration (figure 2).

Using ASP.NET without Visual WebGui require manual, xml based configuration (figure 3).

Required Skills

If you have used ASP.NET as well as any other traditional web development paradigms, you already know that any application development task will require additional client side UI/styling languages and concepts: JavaScript & DHTML, CSS, Silverlight, Flex/Flash, Java Applets, and ActiveX etc. (figure 4 and 5).

Fig. 4: ASP.NET MVC Application	Fig. 5: Silverlight MVC Application

Visual WebGui abstracts away from traditional web development complexities and provides single layered .NET server development platform. 

Free Downloads >       

Development effort and ease

Plain ASP.NET development provides a generic environment for web sites development, however, when it comes to applications development, and mainly data-centric, line of business ones, the concepts of pages, post-backs, individual HttpXml requests and multi-layered client languages are forcing you to handle more infrastructural questions then application behavior questions.

Visual WebGui offers you to upgrade your data-centric and line of business applications development experience to the level of Forms, Events, Dialogs, Event driven Inter-controls communications and intuitive object oriented behaviors. 

Let’s take a look at a simple task as opening a data bound modal dialog window, a very common task especially for line of business web applications:

Standard Web Client Code

function PopupWindow(url) {
var ie=document.all;
if (ie)
{
        window.showModalDialog(url,”Window”,”status:no; help:no;
                               dialogWidth:1200px; dialogHeight:768px”);
}
else {
      var mywindow =window.open( url, “Popupwindow”,
                             “location=1,status=no,scrollbars=1,width=1200px,
                               height=768px,resizable=1,toolbar=0″ )
                              mywindow.focus();
       }
}

Visual WebGui C# Server Code

    LogonForm objLogonForm = new LogonForm(<…params…>);
    objLogonForm.ShowDialog();

Quick review of the codes above:

• In the JavaScript sample, the URL points to a complete context detached URL.
• There is a great deal of work still to be done on client side and maybe even server side in order to send arguments to this dialog and handle them.
• Visual WebGui refers to a completely bound dialog that can accept any number or sort of parameters and can further interact with the other dialogs and controls using plain object oriented and server events.
• Security wise, sending parameters over using client scripting, automatically creates additional client vulnerabilities.

Visual WebGui provides you with the complete power to fully control your applications’ logics, algorithms and data without using multilayered web development languages. All with a single layered object oriented, event driven code and a Form Designer (figure 6).

Graphic-designer-ready tools complement the development process with the ability to easily provide creative look & feel apps (figure 7).

• No CSS documents (although you can still control them)
• No HTML Hell (although you can still customize them)
• No Cross Browsers Incompatibilities

To be emphasized, although Visual WebGui abstracts away from client scripting and resources, you still have an organized access to those files and you can still override the entire scripting, CSS or HTMLs if needed. So being a web developer can help you provide even better applications (figure 8).

View the WOW development experience demo >

API quality and convenience

Visual WebGui presents a well known API derived from desktop development APIs, however much extending it to the web.

ASP.NET including 3rd party components vendors offer verity of API and most of them are thorough, on the other hand there is no guideline or standard by which you always know how to interface with those controls and you can never know if you will be able to accomplish future tasks using common controls.

With Visual WebGui, not only you have a large set of controls, all fully featured and with AJAX native behavior, you can always easily extend those controls or customize them according to your needs.

Visual WebGui API is event driven; this means that your entire development will concentrate on handling events and performing the application logics.

For example, let’s explore the simple task of handling a click event of a tree node located on the left hand of the application and filling up a list located on the right hand.

Standard web approach:

• Locate the right way to handle the client event of clicking a tree-node.
• Make sure that you know how to read the required data from the selected tree-node.
• Option 1
• Send the values over to the server using free style HttpXml or ASP.NET AJAX
• Option 2
• Locate the way to affect the list control’s mechanism and force it to perform server update call with parameters
• Grab the values on the server side and retrieve whatever data required to fill the list
• Send back the data or an inner HTML form to the client.
• Capture the callback on the client side with the data from the server
• Perform the local update of the list as needed

Visual WebGui WOW Approach:

• Attach the AfterSelect event of the tree view.
• Write event handler code to retrieve the data and at the same time fill it into the list using plain C# (as shown below).

private void treeView1_AfterSelect(object s,TreeViewEventArgs e)
{
   //Populate ListView 
   while (objDataReader.Read())
   {
      for (int i = 0; i < objDataReader.FieldCount; i++)
      {
         ListViewItem objItem = new ListViewItem();
         objItem.Text = objDataReader.GetName(i).ToString();
         objItem.SubItems.Add(objDataReader[i].ToString());
         listView1.Items.Add(objItem);
      }
  }
}

* The entire action will be performed once on the server and
then reflected back to the client at runtime.

Quick review of the codes above:

• Inefficiently long development process as opposed to a well defined events API usage.
• Imagine having more than one control to update as a result of the tree-node click event; then you would have to perform 2 requests/response roundtrips. It’s easy to discover that Visual WebGui is also much more efficient at runtime since it goes back to the server once with no further client processing, then returns back once and updates the whole UI changes in this one roundtrip and with no post-backs.

Ability to Use Common and Proven Design Patterns

Web architecture separates almost completely between the client and the server creating a decoupled architecture on which the developer should find ways to bridge and cover.

It is most common that well defined design patterns are much more complex to achieve on top of the traditional web architecture; for example:

• Data Validations: What kinds of validations should exist on the client side and what validations should be tested on the server? Maybe both?
• MVC: Where do we actually split between the client side’s role and the server side role? In addition, in case we have got some logics on the client side, does this mean that we should also have parts of the controllers’ mechanism on the client? (figure 9, 10)

  Fig. 9: Server based MVC	Fig. 10: Mixed client/server MVC

• Observer/Command: Which kinds of events should be raised to the server in order to bubble the events between the listeners?
• Service locator: Where should we keep the service locator code? On the client side on the server side? Maybe both?

A single layered development environment, in which you write your entire code at a single coding language and handle it as an optimized event driven infrastructure on top of a complex, multilayered  environment will make your life much easier in trying to apply quality design patterns.

Debugging & testing efforts needed

Traditional web debugging requires:

• Server code debugging (using Visual Studio)
• Client-server communications debugging (figures 12-13 using Visual Studio and client development tools)
• Client scripting language debugging (figures 12-14 using client development tools)
• HTML and CSS actual rendering (figure 14 using client development tools)

 

 

Visual WebGui debugging means debugging an object oriented C# code only (figure 15)

 

Technologies contemporariness  

Assuming you are done with the development process, ending up with the work-of-art application on top of the traditional web development paradigms then your customers are pretty much locked into consuming the app. through DHTML browsers.

In addition, developing DHTML 4 and certain CSS standards means you will need to invest an additional large amount of time in order to upgrade your application to newer standards.

With Visual WebGui, you can use any .NET version (currently 2.0 or 3.5) on the server, while the client is completely agnostic. Visual WebGui provides alternatives for any standard DHTML clients with no installation supporting any browser as well as Silverlight enriched browsers with no additional development effort.

Visual WebGui will continue to maintain the contemporariness of both server and client technologies keeping you updated with the cutting edge technologies at all times and with minimal to non effort (figure 16).

 

Choosing an Infrastructure

The following short explanation summarizes the major considerations of choosing an application development infrastructure that will ensure the customer’s satisfaction and the quality of the product.

Infrastructure Standards

In order to fit most of the customers’ current infrastructures, we should make sure that we base our solution on a well known existing and proven infrastructures.

Visual WebGui is based on ASP.NET the deployment using XCOPY simple deployment.

Visual WebGui communication layer is based on plain XMLs over HTTP and supports any plain web browser Silverlight or any device with no specific installation!

Variety of data controls

In order to make sure that you are able to deliver any sort of UI needs and any common way possible way of presenting/updating and interacting within the application and more specifically its data, you will probably want to examine the out-of-the-box verity of data controls.

Visual WebGui contains a set of above 50 controls out-of-the-box and a set of complementing libraries with about 20 more additional controls, supplying you the complete suite for any common interaction and manipulate (figure 17).

In case you need more, you can either import in any ASP.NET based 3rd party control, create your own or customize one of the existing once (see Extensibility/Customizability & look & feel). 

Binding to Data

Complete Data-binding options make it easy to concentrate on the business logics of the application as opposed to struggling with various techniques for binding your UI to data (figure 18).

 

Extensibility/Customizability & look & feel

Visual WebGui’s extensibility & customization options are served as productive driven tools to the developer. The mechanisms required to apply design changes and runtime abilities are wrapped into an optimized engine (figure 19).

Except for the WYSIWYG forms designer, Visual WebGui provides a visually simple solution to edit, re-create and customize Visual WebGui controls. In addition, an automatic tool for migration of 3rd party controls is also enabled immediately widening the available verity of controls with all the kinds of ASP.NET based controls by any of the existing providers.

 

As for branding and UI customizations, you have the complete power to customize & brand the application using a point & click designer to change the look & feel completely according to the customers’ requirements.

Integration/Interoperability

Based on a generic desktop compliant API and enjoying the fact that its ASP.NET based web under the hoods, Visual WebGui offers a very wide solution. Starting from stand alone applications development through mash-ups and ending-up in highly interactive and data centric add-ons.

Visual WebGui offers the ASP.NET FormBox control which enables ASP.NET based applications to contain Visual WebGui applications. Figure 20 show a large testing central application by SAP (called SNAP), which combines Visual WebGui with ASP.NET.  The data centric and interactive part in the middle is Visual WebGui and the surrounding “frame” is ASP.NET.

 

The opposite option is a Visual WebGui application being able to contain an ASP.NET application. This option is provided in the form of a control named AspPageBox in Visual WebGui (Figure 21).

Performance Considerations

Although Visual WebGui is a server centric architecture it optimizes the communication and the balance between client and server responsibilities and provides low latency and excellent performance. In highlights level, the following factors are producing this outcome:

• Low CPU usage on the server side low negotiation establishment time due to the existence of valid context at all times.
• Highly optimized communication protocol based on compressed deltas metadata and minimal commands.
• Leveraging the client machine power to minimize communication and throughput.

The effectiveness of the protocol is shown in the following graphs (figures 22-23) based on external testing performed by a performance specialist Microsoft MVP Mr. Wiktor Zychlah.

 

Read the complete article...

Security Factors

Visual WebGui Empty and static client with no ability to change logics is the preferred approach for enterprise business applications data security.

It is not that traditional web 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 avoiding them by-design.

Read the complete article...  

Scalability

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 24. This fact makes Visual WebGui an optimized solution for the cloud architecture as well as on-premise or standard hosting deployments.

(read the complete article...)
 

Windows to Web or Cloud Migration

Introduction

In order to discuss the migration process of legacy desktop applications to the web, we should first agree on 3 different types of desktop applications:

1. WinForms based desktop application (C#/VB.NET).
   The UI layer is coded using .NET languages – the business can be .NET, COM+ or any other interop.
2. VB 6.0 based applications.
3. The UI layer is coded with VB 6.0.
4. Smart client or other desktop technologies (C++ MFC/ATL, Delphi, Java etc).
   Any other smart client technology based applications.

This document describes the migration process of WinForms based desktop applications to the web using Visual WebGui.

WinForms Based Desktop Applications

Background

Normally, without Visual WebGui the migration process of a WinForms desktop application to the web will require a full re-engineering of the UI layer to fit the web architecture and capabilities.

If we take WinForms migration to ASP.NET for example using any AJAX 3rd party controls in order to provide a rich UI experience, we will have to consider:

1. Entirely new API.
2. Entirely new update approach.
3. Entirely new look & feel – or work hard to customize the UI to look the same.
4. Lighten the amount of data transferred to the client and presented at any given time to avoid severe latency.
5. Compromise on features list due to the web limitations.
6. Handling security holes created as a result of opening services consumed by client side AJAX and transferring business logics to the client.

Visual WebGui SDK is fully integrated with Visual Studio and provides the exact same API and set of tools/capabilities which are provided out-of-the-box with WinForms 1.0 and 2.0. This fact enables the native capability of simply copying any existing WinForms source code to a VWG project and providing a fully functional equivalent web application.

The Process

Migration to Web/Cloud video demo >

The basic 3 steps of migration:

1. Open a new Visual WebGui application.
2. Copy the code from your WinForms project into this new web application.
3. Replace any reference to WinForms API namespace (“System.Windows.Forms”) within the code to Visual WebGui API reference (“Gizmox.WebGUI.Forms”).

Any standard WinForms application which is using the 58 WinForms out-of-the-box controls will then compile and execute as a plain web application.

The outcome of this short process is an ASP.NET based solution in terms of deployment and runtime and has the following properties:

1. Deployment is copy & paste equivalent to an ASP.NET web site.
2. Server infrastructure requires an IIS and .NET CLR only.
3. The application can be consumed from any plain browser - no installation is made on the client.
4. Minor static and cached footprint on the client ~200kb of plain JS and HTML code due to the Empty Client concept.
5. Support  for multiple presentation layers with the same code base (DHTML/Silverlight or Smart Client)
6. Maintain a single layer of code – no need to write or maintain JavaScript, HTML and services
7. Highly secured due to the Empty Client concept.

Considerations & Exceptions

There are 3 major setbacks you might have on the process which you can quantify in advance and estimate the amount of work that has to be done in order to migrate your application:

1. Minor differences between the VWG API and WinForms which are mainly caused by architecture differences.
2. The amount of 3rd party controls that are used in your application.

   This section describes a situation of using some non-WinForms out-of-the-box controls (for example Infragistics or DevExpress controls etc). In those cases you can select the most suitable solution from the following 3 options:

   • Choose a similar control from the WinForms out-of-the-box, adjust your code to use it and then perform the migration process.
   • Select an equivalent 3rd party ASP.NET control (Infragistics, Telerik, DevExpress etc.) which provides the same functionality, wrap it by a click of a button in VWG and adjust your code to use it.
   • Write your own VWG custom control which will perfectly suit your needs and then adjust your code after the migration process to use this control.
3. Adjustments of a single user desktop application to a multiuser web environment. This section summarizes some of the major issues of transforming a single user application to a multiuser application sharing the same CPU, Memory space and other resources.
   • Thread safety – since a WinForms application can contain static members which are accessible to a single user, you should now consider one of the following:
     • Replacing those static members to a synchronized multi-thread safe data structures.
     • Lock critical read/write sections to protect concurrent multi user access.
     • Remove the statics and find instance or DB based solutions.
   • Memory load – in a desktop application, there might be places when the original consideration of the amount of memory in use was based on the assumption that the executing machine is local. Therefore, many items are loaded to memory simultaneously without limitation.

     Now, on a shared memory environment, when the server does the heavy lifting, the amount of memory consumed by each user will set the number of concurrent users that can be served by each server.

     The following steps are recommended:

     • Consider loading items to memory on demand (keep only the headers and the identifiers in memory).
     • Remove any large objects read to memory – for example, don’t save binary objects to memory, instead write the binary to the response stream directly to the client.
     • Prefer DB based paging on entire prefaces and memory based paging. Visual WebGui provides mechanisms to enable it easily.

Summary

Migration of any WinForms application to the web using Visual WebGui has the following advantages:

1. In 3 simple steps you will be able to get very close to a working web application.
2. The effort you have to make in order to accomplish a fully functional web application is measurable.
3. The application can keep using the existing BL and DL layers, and only the UI is either migrated automatically or adjusted.

Free Downloads >