University of Pretoria etd – Vosloo, I (2006) Dissertation A web application user interface specification language based on statecharts by Iwan Vosloo September 2005 Submitted in partial fulfilment of the requirements for the degree Master of Science (Computer Science) in the Faculty of Engineering, Built Environment and Information Technology, University of Pretoria, Pretoria, South Africa University of Pretoria etd – Vosloo, I (2006) To Antoinette and Izak (in recognition of a debt impossible to settle in the currencies of this world) University of Pretoria etd – Vosloo, I (2006) A web application user interface specification language based on statecharts by Iwan Vosloo Abstract The Internet today has a phenomenal reach—right into the homes of a vast audience worldwide. Some organisations (and individuals) see this medium as a good opportunity for extending the reach of their computer systems. One popular approach used for such endeavours is to run an application on a server, using web technology for displaying its User Interface (UI) remotely. Developing such a web-based UI can be quite tedious—it is a concurrent, distributed program which has to run in a hostile environment. Furthermore, the platform on which it is implemented (the web) was not originally intended for such usage. A web framework is a collection of software components which provides its users with support for developing and executing web-based UIs. In part, web frameworks can be seen as being analogous to interpreters: given a specification of a UI using a specification technique dictated by the framework, server components of the framework can present the UI using web technology. Topics related to web frameworks are scarce in the academic literature, but abound in industry and open discussion forums. Similarly, the designers of web frameworks seldom found their work on existing theory in the literature. This study is an attempt to bridge this gap. It is focused on two aspects of web frameworks: the specification technique a framework mandates, and how such a specification can subsequently be used to present a UI via web technology. As part of this study, a survey was conducted of 80 open source web frameworks. Based on the survey, a partial overview of the domain of web frameworks is given, covering what is seen as being typically required of a web framework and covering specification techniques that are used by existing frameworks. Two taxonomies are proposed of the strategies web frameworks use for specifying two aspects of web UIs. Using the web as platform implies adherence to certain (intended) architectural constraints. Web framework designers often strain against these constraints. However, another point of view is to recognise that the success of the web platform is made possible precisely because of its intended architecture. (And the success of the web is surely the principal motivation for using it for remote UIs in the first place.) With the bias of this viewpoint, a specification technique is proposed for web-based UIs. This technique is based on the well-known formalism of statecharts, with semantics explicitly defined in terms of the intended architectural components and constraints of the web. The design of a web framework for presenting a UI so specified is also proposed (based on the theoretical background given, as well as two prototype implementations which have been developed). Keywords: user interfaces, web applications, web frameworks, statecharts. Degree: Magister Scientia Supervisor: Prof. D. G. Kourie Department of Computer Science University of Pretoria etd – Vosloo, I (2006) Acknowledgements I would like to thank my supervisor, Prof. Derrick Kourie, who tends to bring not only knowledge, but much-needed wisdom to the endeavours of his students. Thanks to Dr Andrew Boake for the carefully aimed, encouraging personal propaganda without which this study would never have started. I also thank Anton Malan who has had to weather the most horrible first drafts of this document and provided important advice and references, and Linda Weber for editing the final document. Several programmers on informal forums and mailing lists have also provided valuable input. Thank you all. vii University of Pretoria etd – Vosloo, I (2006) Contents Acknowledgements vii List of Figures xiii 1 Introduction 1 1.1 Background . 1 1.1.1 Web applications . 1 1.1.2 Web frameworks . 2 1.2 An alternative . 3 1.3 Topics of particular interest . 4 1.3.1 REST . 4 1.3.2 The MVC design pattern . 5 1.3.3 Page flow . 6 1.4 Overview and scope . 7 1.5 Related work in brief . 8 1.6 This study contextualised . 9 1.7 Summary . 11 2 Web framework overview 13 2.1 Requirements . 14 2.1.1 Presentation . 14 2.1.2 Forms handling . 14 2.1.3 Validation . 15 2.1.4 Event handling . 15 2.1.5 Page flow . 15 2.1.6 Session state . 16 2.1.7 Authentication . 16 2.1.8 Concurrency . 17 2.1.9 Back-end integration . 17 2.1.10 Resource usage . 17 2.1.11 Miscellaneous . 18 2.2 Strategies for view concerns . 18 2.2.1 Programming-language-centric approaches . 19 2.2.2 Plain code . 19 ix University of Pretoria etd – Vosloo, I (2006) Contents University of Pretoria etd – Vosloo, I (2006) 2.2.3 Markup in code . 20 2.2.4 Component libraries . 21 2.2.5 Markup-centric approaches . 21 2.2.6 Embedded code . 22 2.2.7 Control flow analogies . 23 2.2.8 Page composition . 23 2.2.9 Discussion . 25 2.3 Strategies for control concerns . 25 2.3.1 Static files . 27 2.3.2 Dynamic content . 27 2.3.3 Mixed concerns . 28 2.3.4 Executable templates . 28 2.3.5 Published code . 28 2.3.6 Published objects . 28 2.3.7 Separated concerns . 29 2.3.8 Phased-request . 30 2.3.9 Action-response . 30 2.3.10 Event-listener . 30 2.3.11 Page-flow-centric . 31 2.3.12 Rule-based . 32 2.3.13 FSM-based . 32 2.3.14 Algorithmic approaches . 33 2.3.15 AJAX . 34 2.3.16 Discussion . 35 2.3.17 Notes on implementation . 36 2.4 Summary . 37 3 Harel 39 3.1 UML statechart diagrams . 39 3.1.1 Basic model . 40 3.1.2 Events, guards and actions . 41 3.1.3 Further details . 43 3.2 REST . 43 3.2.1 Basic model . 44 3.2.2 REST constraints (or architectural decisions) . 44 3.2.3 Notes relating to web applications . 46 3.3 Harel specified . 47 3.3.1 Abstract syntax and semantics . 48 3.3.1.1 Basic model . 49 3.3.1.2 Notes . 52 3.3.1.3 Extending the basic model . 53 3.3.2 Comparison with UML statechart diagrams . 55 3.3.3 A concrete syntax based on UML . 57 3.3.4 Example . 60 x University of Pretoria etd – Vosloo, I (2006) University of Pretoria etd – Vosloo, I (2006) Contents 3.4 Summary . 62 4 The design and implementation of a web framework for Harel 63 4.1 Overview of related standards . 63 4.1.1 Resource identifiers . 63 4.1.1.1 URL basics . 64 4.1.1.2 Relative and absolute URI . 66 4.1.2 HTTP . 67 4.1.2.1 Background . 67 4.1.2.2 Overview . 68 4.1.3 State management in HTTP . 70 4.1.4 Authentication and security . 71 4.2 Current and recommended practices . 72 4.2.1 Session state . 73 4.2.2 Authentication and security . 75 4.2.3 The PRG pattern . 76 4.2.4 Dealing with optional extensions to the standards . 77 4.3 A framework for Harel . 77 4.3.1 Components and the scope of the discussion . 79 4.3.2 Core framework . 79 4.3.2.1 State of the UI . 79 4.3.2.2 The interpretation of requests . 80 4.3.2.3 Representing and indexing the Harel model . 80 4.3.2.4 Instances of locations and the call stack . 83 4.3.2.5 Extension module framework . 83 4.3.2.6 The request cycle and exceptions . ..