WHITEPAPER Reference Architectures for Portal-based Rich Internet Applications

Transcription

1 Authr: Sven Rieger Created n: Versin: 1.0 Rich Internet (RIAs) are HTML5-based applicatins with a desktp-like lk&feel which run inside a web brwser. The Micrsft Office applicatins Wrd, Excel, PwerPint and OneNte accessible via utlk.cm (as Office 365) are well-knwn examples. RIAs make yu think yu were using a desktp applicatin. As they are delivered by way f a web brwser, they als run n mbile devices such as tablets r smartphnes. This high degree f flexibility is quite an advantage, fr instance fr engineering systems r visualizatins. The applicatins are prvided n a web server r, in case f hybrid applicatins, n the crrespnding platfrms. In a hybrid applicatin, the HTML5 applicatin runs inside a natively implemented framewrk, which barely can be differentiated if at all frm a desktp applicatin r native app. Platfrm-independence is anther majr benefit f HTML5-based implementatins. As all cmmn platfrms supprt HTML and JavaScript, the applicatin can run n varius platfrms withut any prting effrt. Platfrm-dependent implementatins are required nly fr calling platfrm-specific functins, fr example t access hardware units such as a camera, Bluetth r similar. If an applicatin f this kind cnsists f several mdules like e.g. visualizatin and reprting, it is apprpriate t use a prtal-based apprach. The basic idea behind it is that the applicatin is made up f a framewrk called the prtal, int which the mdules are integrated. Figure 1 shws an example UI. Upn lgging n, the user can select frm a chice f different applicatin mdules. Figure 1: Rich Internet Applicatin (RIA) Realized Using M&M Cmpnents 1 / 8

2 use use use Data Exchange WHITEPAPER Structure Prtal-based applicatins basically have the same structure. Therefre, it makes sense t define a reference architecture fr them. Figure 2 shws the structure f the crrespnding M&M reference architecture. Usually, such an applicatin is split int the Rich Internet Applicatin (RIA) and the server. The HTML5-based RIA runs inside the client brwser and delivers the UI fr the prtal applicatin. The server prvides the crrespnding interfaces fr access t data surces like the database. Rich Internet Applicatin (RIA) Custm Applicatin M&M Cmpnents Server Cmmunicatin Qxd Server Server Interface Business Lgic Data Access Lgic Database Service Interface Other Surce Figure 2: Rich Internet Applicatin Reference Architecture Overview 2 / 8

3 HTML5 Rich Internet Applicatin What des the architecture n the client side lk like? The architecture described here is based n the Qxd framewrk develped by 1&1. Qxd is as JavaScript framewrk fr building Rich Internet. In additin t a library fr the graphi cal user interface (GUI) Qxd als prvides a framewrk fr bject-riented JavaScript prgramming. Custm Applicatin Prtal Mdule 1 Presentatin Business Lgic Cmmunicatin Mdule n Presentatin Business Lgic Cmmunicatin Server Cmmunicatin Figure 3: Custm Applicatin Basic Structure Figure 3 shws the basic structure f an individual prtal-based applicatin. Instead f the knwn data access layer the Server Cmmunicatin layer cnnects t the server and encapsulates the cmmunicatin infrastructure. The central Cmmunicatin layer is used by all mdules. The mdules are independent f each ther. Each mdule has its wn thin Cmmunicatin layer cmmunicating with the server via the Server Cmmunicatin layer. In rder that the applicatin has the same lk&feel as a desktp applicatin, it is necessary t minimize remte access t the server. Fr this reasn, the individual mdules have a business lgic layer, which hsts the entire business lgic and can run n the client side as well. Inside the Presentatin layer the MVC pattern is deplyed. 3 / 8

4 M&M Cmpnents Applicatin Prtal Mdule 1... Mdule n M&M Cmpnents mm.prtal mm.cre mm.ui Figure 4: Prtal Structure with M&M Cmpnents M&M Cmpnents were develped using Qxd. They are intended t make repeatedly used cmpnents available in a library. M&M Cmpnents cmprise bth infrastructure cmpnents fr creating prtal-based applicatins and UI cmpnents such as a ribbn, tl windws r an SVG cmpnent. The latter can be used, fr example, fr prcess visualizatin. Figure 4 shws a prtal applicatin design based n M&M Cmpnents. The gray-clred cmpnents are specific t each prtal applicatin. They are based n the M&M Cmpnents' basic implementatin which determines the basic structure. The mm.prtal package prvides a basic framewrk fr prtal-based applicatins, independent f the graphical representatin. Hw the prtal and the mdules are displayed depends n the implementatin f the mdule and prtal renderers. General basic functins such as server cmmunicatin are prvided by the mm.cre pack age. Server The server prvides the data and functins requiring central prcessing, amng them access t a central database r t ther cmmnly used resurces. The server architecture and design differ frm ne applicatin t anther. This is especially due t the fact that data prvided by the server may cme frm different data surces. Figure 2 shws what the architecture f such a server may lk like. The Server Interface is the interface f the server t the HTML5 RIA. The Business Lgic and Data Access Lgic are subrdinated t it. As can be seen in Figure 2, the data may cme, fr example, frm a database, a service r any ther data surce. It is als pssible that a server receives data frm several data surces and merges them at runtime. This is part f the Server Business Lgic, which shuld nt be 4 / 8

5 cnfunded with the Client Business Lgic. The Server Business Lgic is intended fr cnditining the data s that they cmply with the cmmunicatin interface t the client. Basically, the server technlgy base can be selected as required. Whether the server is implemented as a part f an existing applicatin r as a stand-alne applicatin must be decided individually fr each case. Hwever, it is imprtant that a server capable f delivering the necessary data t the HTML5 applicatin is available. In an already realized prject the server has been implemented n a Micrsft.Net framewrk using C#. In this apprach, the server is a kind f middleware cllecting and cnditining data frm ther data surces and prviding them t the RIA. An architecture similar t that shwn in Figure 2 has been used fr this. Embedded device as server It is als pssible t use an embedded device e.g. a field device (sensr) as the server. In this case, a web server, which delivers the HTML page and the JavaScript files, must be available in the device. The applicatin itself runs in the client brwser. In rder t allw displaying the embedded device's current data, the embedded device must als prvide an interface t the HTML5 applicatin t access the data. Client-server cmmunicatin It must be taken int accunt fr client-server cmmunicatin that it was riginally nt intended t make calls frm the server t the client. Hwever, this is essential fr RIAs, as a client must be able t respnd t data changes frm the server. Current prcess values that are t be displayed by the client are an example. Varius technlgies are available: WebSckets, Server Sent Events and Lng Plling. The Micrsft SignalR library cmbines this chice f technlgies and selects the apprpriate technlgy supprted by the respective brwser. On the client side SignalR ffers the crrespnding JavaScript implementatin, whereas a C# library is available fr the server side. Fr the client side cmmunicatin yu shuld additinally take int accunt that the number f simultaneusly pen links in the brwser is limited. In this architecture the limitatin prblem is slved by using the central Cmmunicatin layer. Only ne link is pened and can be used by all mdules. Basis fr hybrid apps As already discussed abve, there is n majr difference between an HTML5 -based applicatin and a cnventinal desktp applicatin frm the user's pint f view. A small, platfrm-specific frame applicatin makes the HTML5 applicatin lk like a native applicatin. In a Windws envirnment such an applicatin will use Chrmium. A native app fr mbile devices can be built using Crdva. As cmpared t applicatins running in the brwser, a native frame applicatin prvides ne majr benefit: access t a hardware unit like a camera is pssible. Bth Crdva and Chrmium ffer the crrespnding functins and can als be enhanced with wn functins. 5 / 8

6 Summary and cnclusin The reference architecture described in this paper prvides a basic framewrk architecture fr prtal-based Rich Internet (RIAs). When develping a new RIA, this basic framewrk must be filled with applicatin-specific functin blcks such as access t data surces. The functin blck design and implementatin, hwever, are nt prvided by the reference architecture. Nevertheless, the reference architecture facilitates the building prcess as it defines the frame. The apprach t prvide the lgical structures withut actually defining the graphical user interface makes the architecture quite flexible. The display f the graphical user interface is defined by implementing renderers fr the prtal and fr the mdules. SignalR facilitates cmmunicatin between HTML5 applicatins and Micrsft.NET based servers. Hw back calls frm the server t the HTML5 applicatins are executed is selected by SignalR n the basis f the envirnment given at runtime. An HTML5 applicatin can als be deplyed as a native applicatin using Chrmium r Crdva. This ffers the pprtunity t access the crrespnding hardware unit, e.g. a camera. Own functins that can be called frm the JavaScript side are als pssible. Technlgies used Technlgy / Cmpnent Qxd SignalR Chrmium Crdva URL Benefits and limitatins Benefits Limitatins Deplyment n desktps r mbile devices and inside web brwsers Familiar desktp lk&feel n the basis f platfrm independent web technlgies M&M Cmpnents prvide basic framewrk and cmpnents. Access t hardware interfaces nly pssible when using apprpriate wrappers. Brwser incmpatibility prblems (minimized by Qxd) 6 / 8

7 Use cases Prtal-based applicatins with desktp lk&feel with multiple runtime envirnments (desktp, mbile devices and web brwsers) Fr example prcess visualizatin, field device parameterizatin and diagnstics, engineering systems, plant reprting r similar. 7 / 8

8 M&M Cmpany Prfile M&M Sftware stands fr innvatin, cmpetency and quality. Being mre than 25 years in business, M&M has gained the reputatin as a reliable partner fr many renwned custmers wrldwide. Our vast industry knw-hw is reflected in a wide range f innvative and unique sftware slutins that we have develped fr and tgether with ur custmers in the factry - and prcess autmatin, maritime technlgy, mechanical eng ineering, building autmatin and energy technlgy. M&M is the cmpetent service prvider fr all matters cncerning sftware prducts in the industrial autmatin. Our service prtfli includes Management & Technlgy Cnsulting, Sftware Develpment, Quality Assurance, IT Operatins & Services and Sftware Maintenance & Supprt. We mainly fcus n slutins fr Human Machine Interfaces (HMI), device integratin, engineering systems and web applicatins. The cmpany s headquarter is in St. Gergen in Germany s Black Frest regin. Our subsidiary in Suzhu near Shanghai/China was established in There we d nt nly serve the upcming markets in Asia, but als ffer ffshre develpment services t ur custmers in Eurpe and America in prven M&M quality t significant price advantages. At the end f 2012 M&M established its subsidiary in Hanver. This lcatin enables us t serve ur custmers in the nrth f Germany even better. M&M Sftware GmbH +49(0)7724/ Industriestr. 5 Fax +49(0)7724/ St. Gergen inf@mm-sftware.cm GERMANY Internet: 8 / 8 Registered Office: St.Gergen, Germany Registry Curt: Freiburg HRB Directrs: Erwin Mueller, Klaus Huebschle, Andreas Berngen