Today's Web browsers provide a platform for the development of complex, richly interactive user interfaces. But, with this complexity come additional challenges for Web developers. The complicated behavioural relationships between user interface components are often stateful, and are difficult to describe, encode and maintain using conventional programming techniques with ECMAScript, the general-purpose scripting language embedded in all Web browsers. Furthermore, user interfaces must be performant, reacting to user input quickly; if the system responds too slowly, the result is a visible UI "lag," degrading the user's experience. Statecharts, a visual modelling language created in the 1980's for developing safety-critical embedded systems, can provide solutions to these problems, as it is well-suited to describing the reactive, timed, state-based behaviour that often comprises the essential complexity of a Web user interface. The contributions of this thesis are then twofold. First, in order to use Statecharts effectively, an interpreter is required to execute the Statecharts models. Therefore, the primary contribution of this thesis is the design, description, implementation and empirical evaluation of the Statecharts Interpretation and Optimization eNgine (SCION), a Statecharts interpreter implemented in ECMAScript that can run in all Web browsers, as well as other ECMAScript environments such as Node.js and Rhino. This thesis first describes a syntax and semantics for SCION which aims to be maximally intuitive for Web developers. Next, test-driven development is used to verify the correct implementation of this semantics. Finally, SCION is optimized and rigorously evaluated to maximize performance and minimize memory usage when run in various Web browser environments. While SCION began as a research project toward the completion of this master thesis, it has grown into an established open source software project, and is currently being used for real work in production environments by several organizations. The secondary contribution of this thesis is the introduction of a new Statecharts-based design pattern called Stateful Command Syntax, which can be used to guide Web user interface development with Statecharts. This design pattern can be applied to a wide class of Web user interfaces, specifically those whose behaviour comprises a command syntax that varies depending on high-level application state. Its use is illustrated through detailed case studies of two highly interactive, but very different applications. / Les navigateurs web modernes permettent la création d'interfaces utilisateur particulièrement élaborées et interactives. Mais cela engendre également des difficultés additionnelles pour les développeurs web. Les relations qui existent entre les différentes composantes des interfaces utilisateur sont souvent complexes et difficiles à élaborer, encoder et entretenir en utilisant les techniques de programmation conventionnelles qu'offre ECAMScript, un langage que l'on retrouve dans tous les navigateurs. Or, les interfaces doivent être assez performantes pour répondre rapidement aux actions effectuées par l'utilisateur, car un système trop lent engendre un décalage qui nuit à l'expérience d'utilisation. Statecharts, un langage de modélisation visuelle créé dans les années 80 pour assurer la sécurité des systèmes embarqués, peut offrir des solutions à ces défis : il sait répondre aux impératifs de réactivité, de programmation dans le temps et de comportement fondé sur l'état qui représentent en somme ce qui est le plus difficile avec les interfaces utilisateur sur le web. L'apport de ce mémoire est double. Tout d'abord, l'exécution des modèles Statecharts nécessite un interprète. La première contribution de cet article consiste donc en le design, l'élaboration, l'implémentation et l'évaluation empirique du Statecharts Interpretation and Optimization eNgine (SCION), un interprète en ECMAScript qui peut être exécuté dans tous les navigateurs web ainsi que dans d'autres environnements ECMAScript, comme Node.js et Rhino. SCION est doté d'une syntaxe et d'une sémantique qui se veut la plus intuitive possible pour les développeurs web. De nombreux tests sont ensuite effectués pour en assurer le bon fonctionnement. Enfin, SCION est rigoureusement optimisé afin de maximiser la performance et de minimiser l'utilisation de la mémoire vive dans différents navigateurs web. Bien que SCION ait débuté comme un projet de recherche personnel en vue de l'obtention du diplôme de maîtrise, il est devenu un logiciel libre bien établi et utilisé par plusieurs organisations dans des environnements de travail. La deuxième contribution de ce mémoire est la présentation d'un nouveau patron de conception créé à partir de Statecharts nommé Stateful Command Syntax, qui peut être utilisé pour guider la création d'interfaces utilisateur sur le web. Ce patron de conception peut être employé sur une grande variété d'interfaces, notamment celles dont le comportement inclut une syntaxe de commande qui varie selon le degré d'abstraction de l'application. Son utilisation est illustrée à travers quelques études de cas ainsi que deux logiciels très différents mais hautement interactifs.
| Identifer | oai:union.ndltd.org:LACETR/oai:collectionscanada.gc.ca:QMM.116899 |
| Date | January 2013 |
| Creators | Beard, Jacob |
| Contributors | Hans Louis Vangheluwe (Internal/Supervisor) |
| Publisher | McGill University |
| Source Sets | Library and Archives Canada ETDs Repository / Centre d'archives des thèses électroniques de Bibliothèque et Archives Canada |
| Language | English |
| Detected Language | French |
| Type | Electronic Thesis or Dissertation |
| Format | application/pdf |
| Coverage | Master of Science (School of Computer Science) |
| Rights | All items in eScholarship@McGill are protected by copyright with all rights reserved unless otherwise indicated. |
| Relation | Electronically-submitted theses. |
Page generated in 0.0019 seconds