Nested Web Application Components Framework A Comparison to Competing Software Component Models
Svebor Prstačić and Mario Žagar Faculty of Electrical Engineering and Computing, University of Zagreb, Unska 3, Zagreb, Croatia
Keywords: Componentization, Framework, Component Nesting, Web Content Management System, Web Application, Comparison, Component based Software Engineering.
Abstract: There are many approaches and component models for Web application component development, of varying complexity, for different platforms using different technologies. All of which have a common problem – constrained component reusability. In this article, we summarize common software component reusability shortcomings of the most popular frameworks and component models they provide, and compare against the solution our own approach “framework as a component” provides to improve reusability.
1 INTRODUCTION tectural units – that provide a specific functionality to users, ie. a reusable forum application, built from In software engineering, there is no shortage of many classes, class libraries, user interface tem- component models. Almost every development plates, functions etc. Each such component can be framework, complex application or system defines thought of as a Web application in itself, and our, its own component model and provides ways to im- previously introduced, framework (Prstačić et al., plement components. Unfortunately, this makes 2011) focuses on improving such components' reuse. component implementation simple, and component We defined a component model such that com- portability and reuse difficult. Components, once ponents can nest, even recursively, and be more easi- implemented, exist only inside a single framework ly reused even within other applications built using that defines them (Wallace, 2010). As a conse- different frameworks. Our testbed implementation is quence, similar or identical functionality is imple- done in PHP, but the model can be applied to other mented over and over again using many different technologies as well. frameworks because none of the existing frame- The framework in question is designed to be works focus on or try to provide inter-framework simple to reuse and integrate into an arbitrary Web interoperability. application, as a component. Such an application we Reusable components are inherently abstract, and call the host application, ie. a blog application could harder to engineer, so making complex components be easily extended to provide commenting function- reusable is very hard. As a result, most components ality for blog posts, and to enable attaching photo forgo reusability for ease of maintenance and im- galleries to blog posts. The same same commenting plementation (Schmidt, 1999). This makes reuse of component could be simply reused to provide com- components, even across applications that are creat- menting functionality for the photo gallery compo- ed using the same framework complex or even im- nent. possible. When such integration of the framework and the Component based software engineering defines host application is achieved, all the components im- two component model types: models that define plemented for our framework become reusable in the components as objects in object-oriented program- host application, which considerably improves those ming, and the more complex components that con- components' reusability. Because of this property, stitute of multiple classes or other code constructs we call our framework the extensions framework and (Lau and Wang, 2007; Broy et al., 1998). These, components built for it extensions. more complex components, can be defined as archi- In this paper we identify accepted component prop- erties defined in the literature, that contribute to
Prstaciˇ c´ S. and Žagar M.. 149 Nested Web Application Components Framework - A Comparison to Competing Software Component Models. DOI: 10.5220/0004421401490156 In Proceedings of the 8th International Conference on Evaluation of Novel Approaches to Software Engineering (ENASE-2013), pages 149-156 ISBN: 978-989-8565-62-4 Copyright c 2013 SCITEPRESS (Science and Technology Publications, Lda.) ENASE2013-8thInternationalConferenceonEvaluationofNovelSoftwareApproachestoSoftwareEngineering
components' reusability, and compare our own re- classes. Reuse of such components is easiest to sults in this area, to some of the most popular com- achieve, but functionality that such components pro- ponent models and approaches to component reuse vide is minimal compared to an architectural unit that they provide. type of components. To enable component reusability in other appli- cations or frameworks, software adapters (Bishop, 2 SOFTWARE COMPONENT 2007) can be employed. Software adapters translate required interfaces of one component to provided MODELS interfaces of another component. This is obviously inefficient and potentially very complex and has led One of the pervasive needs of software development to implementation of very simmilar components for is increase of speed and reliability of both software various frameworks. development process, and the software created. Ben- efits that component-based software development 2.1 Nested Framework Component (CBD) promises through reuse of well tested com- Model ponents, with well documented and defined func- tionality, it should be possible to create new soft- Our framework makes runtime and design-time as- ware, combining and connecting existing software sembly of components possible, which is discussed components instead of implementing the same func- further in section 4. It makes assembly of nested tionality over and over again. Unfortunately, current components possible, ie. a forum component that component models fail to deliver on promises of extends the functionality of that same forum compo- CBD (Lau and Wang, 2007; Bose, 2011). This is nent. This makes possible the creation of a forum to evident in many very similar components that have debate a single forum post or topic, which is dubi- been implemented over and over again for most ously useful in itself, but in some cases could be, ie. popular frameworks in existence – a simple Google using a commenting application nesting to enable query for a word “forum” in addition to the frame- comment replies, while the component itself pro- work name of choice will always yield results. vides only the simple, basic functionality. This is because software components are always To achieve this, it provides both abstract classes built for a specific framework or application that and objects as base building blocks for component uses a component model, which defines what a development. Use of these building blocks, for ex- software component is, how it can be constructed, ample, provides simple access to host application's composed or assembled and finally deployed (Wal- execution context (Prstačić et al., 2011) with rele- lace, 2010; Lau and Wang, 2007; Crnković et al., vant data commonly found in Web applications 2011). Depending on the framework, components (Prstačić et al., 2012) – user session, current user can vary in possible complexity and functionality. data, current user permissions etc., are all translated If a component is built for a specific application, by the framework and provided to extensions in a it can be thought of as an architectural unit, and such form that they can use. Integration of the framework a component can span through many layers of the into the host application involves implementation of application, consisting of many classes and other abstract classes that are essential to providing this code or binary constructs. Components built for a translated execution context. specific application are easy to reuse, but only inside Once implemented, components can be used to other instances of the same application. extend existing applications, that were built using a Similarly, components built for a specific different framework, with minimal effort. This is framework are also architectural units, or even ap- possible because our framework is designed and plications themselves. When reuse of such compo- built as a component that is ready to be integrated nents is intended inside another application, that into arbitrary Web applications that we call host ap- uses the same framework, required programming plications. When this integration is achieved, reusing effort can be significant. The more complex the any component of the framework is possible using a component, the harder reuse is. Although reuse can single line of code, as discussed further in section be complex, it is significantly less complex than 4.2. reusing architectural unit type components built for a specific application, inside another application. Thirdly, in object oriented programming, the most simple components are classes, or libraries of
150 NestedWebApplicationComponentsFramework-AComparisontoCompetingSoftwareComponentModels
3 POPULAR COMPONENT 3.1.1 ASP.NET MVC 3 MODELS PROVIDED ASP.NET MVC 3 (Prstačić et al., 2011; MSDN, BY THIRD PARTY 2003) is the newest component model available in FRAMEWORKS ASP.NET. It provides an alternative way to define Web application components: a “Razor” template There are many component models in existence, and engine, which strongly resembles Smarty (Prstačić et frameworks built to provide component based Web al., 2012; Smarty, 2012) for PHP, both in syntax and application development. Each defines what a com- the way it is used. Razor also provides “HTML ponent is, and even a superficial analysis shows that helpers” which are a way to provide functionality many of the frameworks define components in a that Smarty plugins (Prstačić et al., 2012) provide. similar way and use the same design patterns. For Consequently, various components can be nested example, separation of user interface definition and inside each other so that they combine various views design from user input handling and application log- of various models. For each reuse case however, one ic functionality using the model-view-controller has to know what parameters a component expects, (MVC) pattern (MSDN, 2003), localization support, or in other words, a component can define an arbi- database access – all are common and mandatory in trary required interface. This provides flexibility a Web application framework (Walker, 2012; Grails, when developing components, but also has adverse 2012; Django, 2012; Symfony, 2012; Joomla, 2012). side effects to component reuse.. For example, reus- Still, what defines a component in one framework ing components might have to do the work of pre- doesn't in another. paring data that a reused component expects, or a In the following sections we introduce some of reused component could be implemented in a way to the most popular Web application frameworks' com- integrate with a specific reusing component, making ponent models and compare them at the higher level. the reused component hardly reusable for other arbi- trary components. 3.1 ASP.NET 3.2 Groovy on Grails ASP.NET provides a few different component mod- Groovy on grails is a modern and versatile Web ap- els to build Web application components, one of plication framework that provides Web development them is Web forms and ASP pages, that are a para- using a dynamic language (Groovy) and runs on a digm to separate application presentation from ap- Java virtual machine. This combination provides plication logic similarly to MVC (MSDN, 2011), easy use of all the power of Java and Java compo- (Alpaev, 2011), and make Web application develop- nents, and flexibility of Groovy. Groovy provides a ment similar to the event based desktop Windows MVC pattern for development and a strong Object- programming. relational mapping (ORM) database access layer. ASP.NET and Web forms provide a fast and sim- Classes that define data entities are called domain ple way to reuse components of varying complexity: classes, and controllers are called domain control- data access, user interface components, common lers. Groovy on grails defines its own template lan- application logic and combinations of those. How- guage to define views. ever, the is no way to easily integrate architectural Domain classes, controllers and views can be unit type of components. For example, a more com- packed as plug-ins, which makes them easily porta- plex application, such as .NET Nuke CMS, provides ble to other Groovy on grails applications or pro- its own array of interfaces to create architectural unit jects. Integration of plug-ins consists of configura- type of application components (Walker, 2012). tion editing – what controller should be invoked for Components for such applications are not easily which URL, but interactions between components reusable inside other applications, regardless being have to be implemented individually. So, again, re- built with the same underlying framework. Addi- using an architectural unit component requires pro- tionally, more problems can arise if a component is gramming, and more than just a few lines of code, built using another component model than the appli- especially if different components' data has to refer- cation uses, for example ASP.NET MVC (explained ence each other. in the following section). Integrating such a compo- nent would require additional programming work to 3.3 Django Framework both the application in which we want to reuse it, and the component. Django is a Python Web development framework
151 ENASE2013-8thInternationalConferenceonEvaluationofNovelSoftwareApproachestoSoftwareEngineering
that aims to provide great component reuse capa- 3.5 Common Component Reuse bilities (Django, 2012). In theory, each component Failings developed using Django is an application that can be easily reused alongside other applications – thus Consider a web application that provides news arti- forming a greater whole application. Django pro- cle publishing through one of its components. Such a vides a very flexible and powerful ORM. When a component would define a database model to store developer creates a model – Python class, the articles, a few classes to handle the data, user inter- framework is capable of creating the database sche- faces and a controller to handle user actions. If we ma, and even provide the administrator's user inter- were to add commenting functionalities, we have a face to manipulate data that the model represents. few options, and this applies to all the component But reusability of all the Django applications models of the previously mentioned frameworks. strongly depends on their implementation. The de- The first option is to create a commenting com- veloper has to balance between creating applications ponent that integrates tightly with the news compo- that are big and monolithic or too small to provide a nent – at the database level, comments reference a unique functionality. Only those well balanced can specific news article, and at the presentation level – be easily reused. the news component simply invokes rendering of the For example, a reusable application should pro- comments component for each article. This solution vide signals for other applications' models and injec- is simple, but greatly hinders the commenting com- tion points in its views. This introduces complexity ponent since it is practically implemented as a part because there exists no convention in which the re- of the news component. usable applications communicate inside the frame- The second option is to create a generic com- work, and this communication depends on imple- ments component that has a mechanism to provide mentation of each of the components and relies al- comments for more than just the news component. most completely on the experience and effort of the The commenting component can thus provide a set developer. Even then, models often have to be ex- of required interfaces and handle the data abstraction tended with properties that include references to itself. This is inefficient because it involves imple- models of the reusable applications (Altman, 2011; menting functionalities as a part of the component Django, 2012), which decreases reuse inefficiency. that should be a part of the framework. Additionally, reusability is further hindered by the fact that the 3.4 PHP Symfony Framework component will only function inside a specific framework or application that it was built for. Our In Symfony (Symfony, 2012) components that pro- framework offers a solution to these problems, spec- vide some reusable application functionality are ified in the following section. called bundles. Each bundle is actually a separate application that can be executed by the Symfony framework. Symfony also uses a MVC pattern as its 4 THE EXTENSIONS architectural pattern for bundles, so each bundle consists of models which are called entities, control- FRAMEWORK, lers and static files. COMPONENT MODEL Other artifacts that can be packaged into a bundle are static files like view templates, configuration To compare how our framework and component files, CSS and JavaScript files. So, reuse of a bundle model improve component reusability to competing consists of installing its files, and writing a few lines approaches introduced in the previous chapter, we of configuration that tell the framework to use it. found the following criteria to evaluate component Interaction between various bundles or their MVC reusability (Broy et al., 1998; Jeffrey, 1994) to be components can be achieved only if the components most applicable: themselves provide communication interfaces, In existence of visual tools for component de- many cases, the entities (models) also have to be sign-time assembly, modified to reference each other across bundles, which again introduces a level of inefficiency in existence of run-time visual component component (bundle) reuse. composition tools, components are portable between frame- works using the same programming lan- guage,
152 NestedWebApplicationComponentsFramework-AComparisontoCompetingSoftwareComponentModels
components are cross-platform or cross programming language, functional completeness of a component, cohesion and low coupling, In the following sections we explain the tech- nical intricacies of our approach and compare it ac- cording to applicable criteria. 4.1 Component Nesting and Communi- cation Figure 1: Usual way frameworks interface components.
Using all the mentioned Web application frame- implementation in our framework has to be done works, nesting of components is possible, but the according to only two simple rules: frameworks don't support it directly, it has to be spe- components (extensions) must be used cifically implemented for each component pair to through the IHookData interface of the make it possible. If a component wants to use an- framework. other, it has to manage each used component explic- extensions will always be provided a itly through a custom set of interfaces that the child IHhook, which is extensions' required inter- exposes. Additionally, integration points can be im- face (Prstačić et al., 2011) plemented on different layers, and all these choices are a subject to developer's whim. This introduces Pondering the basis of component integration, complexity in the way components interact, which we can conclude that these rules make it simpler and has to be handled separately for each pair of interact- predictable. Components have to exchange data in ing components and forces a component developer order to provide a unified user experience or provide to implement component interoperability rather than a unified functionality. For all the previously men- focus on developing a single component. tioned frameworks, prerequisites are that a compo- This also causes components' cohesion, a level in nent communicates with the framework, and always, which components work together to offer a compo- communication between components is left to be site functionality to be lower, and coupling, meaning defined and implemented by the component's devel- interdependence between components higher, which oper. also makes probability of failure of the system high- er if just one of the components fails (Eder, 1994). Components, in general, are built to interface with the framework using predefined required inter- face(s) (Figure 1). These interface are defined by the framework and provide data necessary for compo- nent execution, but also provide a way for a compo- Figure 2: Extensions framework component interface. nent to return execution results on framework re- quest. Also, from Figure 1 we can see that a compo- Our framework, through enforcement of the two nent can define a set of provided interfaces. This is mentioned rules, provides component reuse and fine, but those interfaces are not defined by any of nesting. This both makes functional completeness the frameworks, so components that connect through easier to provide and also lowers coupling because them are implemented in a specific way. Obviously, components only communicate with the framework. this is a problem and this approach introduces com- Implicitly, it increases cohesion – if a component plexity in both integration and future component communicates and works efficiently with one other maintenance. component, it will also work and communicate with To solve this, our framework acts as a mediator another that communicates using the same interfac- between components. Every component that wants es. to interface with another can achieve this through framework's IHookData interface (Figure 2), that is 4.2 Technical Properties translated into an IHook interface. In this way, the framework as a component effec- There are four main properties that the component tively delegates interfaces between the two compo- model defined for our framework provides: nents. As a consequence, component reuse and
153 ENASE2013-8thInternationalConferenceonEvaluationofNovelSoftwareApproachestoSoftwareEngineering
nested and composite components can be defined achieves extension reuse: by the user on run time, as well as developers on {v2ext _name="Comments" design time _id="comments_`$mod_prefix`" components don't have to reference other compo- _content_name="news_article" nents' data directly, and they don't have to handle _content_id=$news.news_id the abstraction themselves _handler="portlet_news"}
the framework provides a way for components to The v2ext plug-in is an encapsulation of the notify child components of parents' data changes IHookData interface. The extension must contextu- user interfaces assembly, such as form nesting, is alize all the data it saves so that it can provide mean- handled by the framework ingful functionality and present expected data component reuse and integration can be trivially throughout different instances. This contextualiza- implemented in the higher layers of component tion is implicitly done by the framework, which pro- architecture, such as the presentation layer vides a hook – the only data an extension ever refer- In the following sections we explain these differ- ences. All the required data to create a hook are pro- ences in more detail. We will also compare the bene- vided by the component that uses the v2ext plug-in: fits of the component model used in our framework, as opposed to competing models. _name – a name of the extension main con- Let's once again consider the example introduced troller class; in section 3.5. To use the commenting functionality _id – a unique identifier of the extension for the news component, we should have to write a for the parent component trivial one line of code. Ideally, this one line should _content_name – name of the content type make reuse of additional components possible. As- that the parent component wants the exten- suming the integration of the framework as a com- sion to hook onto ponent into the host application is achieved as fur- ther explained in (Prstačić et al., 2012), the host ap- _content_id – the id representing a single plication provides the execution context to the ex- data entity, ie. a news article tensions framework through the integration interfac- _handler – the handler class for the content es (II), while the component of the host application type defined by the _content_name argu- requests execution of a specific extensions frame- ment. This is optional and ie. used when the work component through component interface (CI), framework wants to access a URL of a spe- called the IHookData. Data provided by the host cific article. application component through CI and the host ap- Since there are no relational data connections be- plication execution context through II is combined tween components, the framework provides an event by the framework to provide the computed execution driven mechanism to handle data changes. The host context for the Extension (Figure 3). application, or an extension can raise a data change In our case, extending the news article with event, giving it the same context it would when cre- commenting capabilities can be achieved with one ating a hook. Consequently, if such a hook exists, simple line of code. The following is an example the framework will notify all the hooked compo- usage of our framework's Smarty plug-in v2ext that nents that are expected to perform required actions with their own data. Parent component Execution context 4.3 User Defined Component Hook data Structure CI II
Unique id (hook) Integration layer The usual way Web application components can be reused and made to interact, inside their native frameworks, is by writing a few lines of configura-
Computed execution context tion and program code. This is true for all the com- peting mentioned frameworks. More flexibility is provided by content management systems (CMS) Extension Extensions that often enable users to arrange components, con- framework tent and their locations in the application on runtime. But if a user wants to extend functionality of a com- Figure 3: Component and framework interfaces.
154 NestedWebApplicationComponentsFramework-AComparisontoCompetingSoftwareComponentModels
ponent with an arbitrary component on runtime, tightly coupled components, for example, acting on even a CMS will fall short. data changes takes longer when dispatching events, Our framework solves this by providing empty than letting the database act on relational rules and hooks. Extension developers can define these hooks data triggers, but the value provided is greater. in the desired places of an extension's view, and the Our framework doesn't provide any kind of com- user can choose which extension should run at these ponent definition language which would enable pro- places. gramming language translation of components, so in A hook can be defined as easily as we initiated the current state, it is only usable for PHP host ap- execution of a specific extension in the example plications. Although PHP works on all major operat- from the previous section, using the v2ext plug-in. ing systems and Web servers which makes it cross- The difference is, we can omit the _name and _id platform, this is a hindrance. parameters: In comparison to other solutions, it does satisfy {v2ext most of the criteria: _content_name="news_article" it provides run-time visual component _content_id=$news.news_id composition _handler="portlet_news"} components are portable between frame- works using the same programming lan- 4.4 Presentation Layer Integration and guage and since PHP is cross-platform, it Component Reuse also inherits cross-platform capabilities it does provide ways to create functionally What defines Web applications from functionalities' complete and independent a components point of view, are the graphical user interfaces. So, and through these properties it does in- we wanted to make combining and constructing crease cohesion and makes low coupling of functionality of multiple components at the presenta- components possible tion layer possible. Extending applications in this way makes a lot of sense, but also, creates some It does not provide design-time visual composi- issues that have to be solved. In such composition, tion tools and isn't cross language, although it could data that one component is displaying should be be easily implemented to work for other program- used as a reference for some functionality or data ming languages. provided by another component. Our framework, in contrast to other mentioned is Our framework solves this by simplifying com- a software component by itself, an adapter between ponent and data interaction by forcing each exten- components built on top of it (extensions), and also sion to define two main user interface states of a between extensions and the host application. It is a component. The default state and a state in which an component that is easily used and whose rendering extension is displaying a user interface to edit data. output can be easily obtained. This property of our We found this simplification good enough for most framework is what makes it unique, and what makes test cases. For example, if we' re editing an article in reuse of many components possible with the effort a content management application, and that article of integrating only one. has a photo gallery extension hooked onto it, we can Our future work will include analysis and appli- request the gallery extension to also enter edit mode cation of software complexity metrics to measure and provide controls to manipulate the images and component reusability efficiency increase that our the gallery, which cascades to gallery's child exten- extensions framework provides. sions. This doesn't imply extensions cannot provide multitude of states that can be invoked by the parent component, but for now, only the default and edit ACKNOWLEDGEMENTS states are handled by the framework. This work is supported in part by the Croatian Min- istry of Science, Education and Sports, under the 5 CONCLUSIONS research project “Software Engineering in Ubiqui- tous Computing”, project number 036-0361959- To be able to provide functional completeness of 1965. components, we had to forgo some performance and data consistency that comes inherently with more
155 ENASE2013-8thInternationalConferenceonEvaluationofNovelSoftwareApproachestoSoftwareEngineering
REFERENCES Smarty, 2012. Smarty documentation, accessed 20 De- cember 2012,
156