An Investigation of Architectural Styles for Prototyping Infrastructures

An Investigation of Architectural Styles for Prototyping Infrastructures: Lessons Not Learned From DENIM Jennifer Petrie CMPT 856 Presentation April 20, 2004

Introduction l Analyze DENIM’s architecture • Is it a good design to follow? • Can I extend it? l Investigate architectural styles which will help in achieving a well-designed architecture

DENIM: An Existing Prototyping Tool l Key features: • Informal sketching • Design at different levels of refinement • Zooming between levels • Non-traditional interaction [1] techniques (gestures, pie menus) • Run mode [1] Denim: finding a tighter fit between tools and practice for web site design. In Proceedings of the Conference on Human factors in computing systems, ACM Press, pp. 510– 517.

SATIN: Toolkit for Informal Pen-based Applications l DENIM is built on top of SATIN l Provides DENIM with support for these features: • Informal sketching and gestures • Zooming between views • Pen-based widgets (ex. pie menus)

Development Details of DENIM & SATIN l Implemented in Java l Metrics: DENIM SATIN TOTAL Source files 119 184 303 Source LOC 11, 000 20, 000 31, 000 Total LOC 30, 000 58, 000 88, 000 Classes 222 240 462 Packages 13 21 34

Concrete Architecture of DENIM (Excluding SATIN). action annotations command awtevent interpreters dialogs component library event lib io view toolbox

Concrete Architecture of SATIN. command event graph image graphics objects interpreter recognizer library regression remote stroke view util widgets watch

Concrete Architecture of DENIM & SATIN. action command awtevent annotations interpreters dialogs component event lib io view toolbox . graph command event image graphics objects interpreter regression recognizer remote stroke view util widgets watch

Architecture of DENIM & SATIN l Poorly designed concrete architecture • Poorly compartmentalized • Very specific to this application • Not easily maintainable • Ultimately, not very reusable

A New Infrastructure for Supporting Prototyping l Many features similar to DENIM/SATIN • Informal sketching, gesture-based commands, pie menus, zooming l Supporting composition of low- through highfidelity prototypes l Connecting into application functionality and data l Mapping UI design to software design artifacts

An Architecture for the New Prototyping Infrastructure l Wanted to extend DENIM/SATIN since share many key features l Not feasible given DENIM/SATIN’s architecture l Want new architecture to be reusable and extendable (component-based)

Relevant Architectural Styles l Dataflow Systems • Pipe-and-Filter l Call-and-return systems • Data Abstraction (OO) • Hierarchical Layers l Independent components • Event-based, Implicit Invocation • Chiron-2

Pipe-and-Filter Style Data Flow [2] Computation l Benefits: easy to understand, supports reuse, maintenance, extension, concurrent tasks l Applies to my infrastructure: processing pen strokes, executing application functionality tied into prototypes [2] Garlan and Shaw. An Introduction to Software Architecture. Advances in Software Engineering and Knowledge Engineering, Volume 1 World Scientific Publishing Company, 1993.

Data Abstraction (OO) Style call() Object call() call () [2] Object l Benefits: supports maintainability, reuse l Applies to my infrastructure: abstract strokes, abstract interface component, tying in abstract levels of prototype functionality and data [2] Garlan and Shaw. An Introduction to Software Architecture. Advances in Software Engineering and Knowledge Engineering, Volume 1 World Scientific Publishing Company, 1993.

Hierarchical Layers Style [2] User interface Higher-level utilities Core library l Benefits: supports extension, reuse l Applies to my infrastructure: input event layer – processing layer – presentation layer [2] Garlan and Shaw. An Introduction to Software Architecture. Advances in Software Engineering and Knowledge Engineering, Volume 1 World Scientific Publishing Company, 1993.

Event-Based, Implicit Invocation Style l Implicit invocation – when an event occurs, invoke all procedures that registered for that event l Benefits: supports reuse, substitutability l Applies to my infrastructure: stroke input as an event, implicitly invoke prototype application functionality upon user events [2] Garlan and Shaw. An Introduction to Software Architecture. Advances in Software Engineering and Knowledge Engineering, Volume 1 World Scientific Publishing Company, 1993. [2]

Chiron-2 (C 2) Style [3] Notifications Component Requests Communication Link … Connector [3] Taylor, Medvidovic, et al. A Component- and Message-Based Architectural Style for GUI Software. Proceedings of the 17 th International Conference on Software Engineering. ACM Press, 1995.

Chiron-2 (C 2) Style l Benefits: supports component-level reuse, substitution at runtime, can be used in distributed, concurrent environment l Applies to my infrastructure: running prototype’s underlying functionality or database as separate processes

Conclusion l DENIM (& SATIN) are poorly designed and cannot be easily extended l Have to come up with my own architecture • • • Reuse, extensibility is key Reviewed literature on relevant styles that support reuse A heterogeneous architecture that draws from these relevant styles

Questions ?