Ecom21 Technical DevelopmentNote: This article was published in 2004. Although some of the descriptions of general web development are somewhat antiquated, the overall conceptual description of Ecom21 remains correct. State of Web Development Web development has set back the way modern development tools function by nearly 15 years. Developing a web application today is very much like developing a Windows application 15 years ago. Very little is visually designed, and what is, is disconnected and not integrated. Very little is componentized, and the developer is constantly working at the lowest possible level and dealing directly with raw API's. Only in recent times have web development tools made strides to close this gap. Such factors drastically increase development times, costs, and project complexity. These factors lead to systems that do not meet user expectations, cannot be modified to grow with updated technologies, do not match requirements, have over simplistic feature sets, and have high defect rates. As the system grows over time, they become more and more complex and become more difficult to maintain. Instead of growing an elegant system, each addition often becomes another level on a fragile house of cards. Ecom21’s design avoids these pitfalls by using development methods more common to windows applications than to typical websites. Types of Web Development Web development typically falls into one of two categories:
Ecom21 in its most basic form is NOT a website, but rather an application for the web. That said, most customer projects fall into a gray area as it is not always necessary for each page within a site to be grouped into the application. Ecom21 provides the hooks necessary so that static pages generated outside of the eCom21 application may interact with the application seamlessly, thus affording users a "best of all worlds" solution.
Technology There is very little difference between Ecom21 and a normal windows application. Using the Delphi IDE, developers need not deal with how individual HTML pages interact using HTTP, or developing massive amounts of Javascript to customize the client interface. Just as the standard IDE isolates developers from the Operating System API with VCL, JDK or the .net framework, The "VCL For The Web" isolates developers from the Web API of HTML, Javascript, CGI, and HTTP. Ecom21 contains controls that map themselves to HTML and Javascript equivalents, just as normal visual controls map themselves to Win API calls. By using these controls on forms, Ecom21 was designed as a fully functional weblication without ever writing (or requiring) a line of HTML or Javascript, or dealing with HTTP. Therefor customers save their development dollars for actual customization and branding only, vs the massive costs necessary in developing a truly integrated eCommerce application from scratch. "VCL For The Web" - An API for browsers In a typical eCommerce application the developer must constantly manage and interface to many differing low level protocols and standards including HTTP, Javascript and HTML. Adding database interaction only complicates matters further. In Ecom21, the developer need not deal with any of these. Standard IDE’s (.Net, VB, etc), and the Delphi VCL in particular, provides a higher level of abstraction for developers to use. Collectively we will refer to these as "class frameworks". Such class frameworks isolate the developer from the lower level operating system API's. However if there is something that the API does not implement, the developer can bypass the class frameworks and interface directly to the lower level raw operating system API's. By providing for this level of abstraction, the developer has a friendlier interface and gains much additional functionality. The technology used by Ecom21, Delphi’s "VCL For The Web," functions in a very similar manner, with HTTP, HTML, and Javascript playing the role of the low level API's. The internal class framework sits between HTTP, HTML, and Javascript and provides the developer with a high level abstracted interface with additional functionality. However the developer can also bypass the low level class framework when necessary if something additional is required. The original goal was to make it nearly unneeded for the developers to resort to HTTP, HTML, or Javascript, but allow the developer access to such when desired. This approach provides for both ease of use, and maximum flexibility at minimum costs. The Power of Templates and the Translucent Box Ecom21 achieves its "magic", by putting things in a "translucent box". You may be familiar with the term black box. But black boxes are typically completely closed, which is not an accurate representation of how Ecom21 works. Ecom21 is more like a translucent box, in which things are contained, but the inner workings can still be seen and influenced. By putting things into this "box", Ecom21 can tightly integrate differing and often opposing aspects of web development and expose them to the developer in easy to use methods. While this approach does put some restrictions on access to low level control, this does not mean that application mode is not flexible. You can completely customize the user interface of Ecom21 by emitting raw HTML, using style sheets, using templates, or even creating custom components for reusability and ease of use. Templates are a feature that allow your developers to develop, and your web artists to control the look and feel of an application. Templates separate the presentation layer from the implementation layer and also provide for other customizations. In using HTML templates, Ecom21 allows for complete flexibility in the outward appearance and design. The following image is a screenshot the the Ecom21 Demo Application "Order Completion" screen within the Delphi IDE. This is what the screen looks like at design time before HTML templates are applied.Now here is a snippet of HTML from the "Order Completion" screens template. Notice that the components from the screenshot above are placed within standard HTML text by including the component names in {% Finally, here is the same screen in your browser after the HTML template that was created for the demo application has been applied. The use of templates is the key element which allows Ecom21 to integrate seamlessly with any existing website. |