Design Patterns in Web Programming Nathan Wallace March 2000 Introduction About Me Why listen to me? What am I talking about? Disclaimer Design Patterns Common Problems Web Context Pattern Language Web Pattern Space Example Patterns Future Work Questions

Why listen to me? Accidentally in the wrong room Strong OO Background IBM Visual Age Synop Symphony Toolkit “Beautiful model” Introduction About Me Why listen to me? What am I talking about? Disclaimer Design Patterns Common Problems Web Context Pattern Language Web Pattern Space Example Patterns Future Work Questions

What am I talking about? Design Patterns Common Web Problems for Solving Design Patterns in a Web Context A Web Design Pattern Language Web Programming Design Pattern Space Example Patterns Future Work Introduction About Me Why listen to me? What am I talking about? Disclaimer Design Patterns Common Problems Web Context Pattern Language Web Pattern Space Example Patterns Future Work Questions

Disclaimer Two moments of clarity Good design patterns require: Introduction About Me Why listen to me? What am I talking about? Disclaimer Design Patterns Common Problems Web Context Pattern Language Web Pattern Space Example Patterns Future Work Questions 1. Years of experience 2.Collaboration 3.Continuing Refinement This is the first step

Design Patterns According to Christopher Alexander: “Each pattern describes a problem which occurs over and over again in our environment, and then describes the core of the solution to that problem, in such a way that you can use this solution a million times over, without ever doing it the same way twice” Introduction Design Patterns What are they? Why are they important? Where are they used? Why web patterns? How do we find patterns? Common Problems Web Context Pattern Language Web Pattern Space Example Patterns Future Work Questions

Design Patterns Formal description of problem and solution Should also explain Why? Introduction Design Patterns What are they? Why are they important? Where are they used? Why web patterns? How do we find patterns? Common Problems Web Context Pattern Language Web Pattern Space Example Patterns Future Work Questions

Why are they important? Captures expert knowledge Simple format that novices can use Helps us avoid “reinventing the wheel” Best solutions are often non-obvious Helps us learn about system structure Influences future design We have a means for comparing solutions Introduction Design Patterns What are they? Why are they important? Where are they used? Why web patterns? How do we find patterns? Common Problems Web Context Pattern Language Web Pattern Space Example Patterns Future Work Questions

Where are they used? Architecture Story telling Object Oriented Programming Introduction Design Patterns What are they? Why are they important? Where are they used? Why web patterns? How do we find patterns? Common Problems Web Context Pattern Language Web Pattern Space Example Patterns Future Work Questions

Why web patterns? Web applications are now common Web programming is maturing We have no common language Unique programming and UI problems Rapid development is more important now Introduction Design Patterns What are they? Why are they important? Where are they used? Why web patterns? How do we find patterns? Common Problems Web Context Pattern Language Web Pattern Space Example Patterns Future Work Questions

How do we find patterns? Sense of déjà vu in design We naturally reuse good code and structure Draw on experience and expertise Decide what we want them to be Introduction Design Patterns What are they? Why are they important? Where are they used? Why web patterns? How do we find patterns? Common Problems Web Context Pattern Language Web Pattern Space Example Patterns Future Work Questions

Building a web pattern language I felt I knew what the patterns should be Build a high level catalog of problems What aspects should the language capture? Introduction Design Patterns What are they? Why are they important? Where are they used? Why web patterns? How do we find patterns? Common Problems Web Context Pattern Language Web Pattern Space Example Patterns Future Work Questions

Finding web programming patterns On-going process Identify generic problems to solve Consider well known standard sites Introduction Design Patterns What are they? Why are they important? Where are they used? Why web patterns? How do we find patterns? Common Problems Web Context Pattern Language Web Pattern Space Example Patterns Future Work Questions

Admit our infancy Web programming is still very young The web itself is continually evolving Good design patterns take years to refine Standards are beginning to emerge A good time to start developing patterns Introduction Design Patterns Common Problems Admit our infancy Application levels Common Problems Web Context Pattern Language Web Pattern Space Example Patterns Future Work Questions

Application Levels Web applications are built over many levels: Introduction Design Patterns Common Problems Admit our infancy Application levels Common Problems Web Context Pattern Language Web Pattern Space Example Patterns Future Work Questions 1.User Interface 2.Human Computer Interaction 3.Information Design 4.Scripting 5.Code Libraries 6.Database Queries 7.Database Design

Application Levels It’s nice to abstract the levels In reality problems exist across levels: Introduction Design Patterns Common Problems Admit our infancy Application levels Common Problems Web Context Pattern Language Web Pattern Space Example Patterns Future Work Questions 1.Optimizing database queries 2.Form processing So, our language must work across levels

Form Processing All web applications use forms The basic method is always the same: Introduction Design Patterns Common Problems Admit our infancy Application levels Common Problems Web Context Pattern Language Web Pattern Space Example Patterns Future Work Questions 1.Display a form to the user 2.Verify the data with error handling 3.Perform the required action on the data

Form Processing cont… Ways to implement the basic flow: Introduction Design Patterns Common Problems Admit our infancy Application levels Common Problems Web Context Pattern Language Web Pattern Space Example Patterns Future Work Questions 1.Single page, self-referring form 2.Multi-page form

Form Processing cont… Methods of error handling: Introduction Design Patterns Common Problems Admit our infancy Application levels Common Problems Web Context Pattern Language Web Pattern Space Example Patterns Future Work Questions 1.Display all input, highlighting errors 2.Only show invalid fields for re-entry 3.Report error, rely on back button 4.Report error, link to input page

Form Processing cont… Frontend application levels Requires interaction with the user Flow and information design are vital Should result in calls to the code library Forms are decoupled from the backend Introduction Design Patterns Common Problems Admit our infancy Application levels Common Problems Web Context Pattern Language Web Pattern Space Example Patterns Future Work Questions

Navigation Sites need a consistent look and feel Users need context and location Should be decoupled from content Introduction Design Patterns Common Problems Admit our infancy Application levels Common Problems Web Context Pattern Language Web Pattern Space Example Patterns Future Work Questions

Navigation cont… Standard types of navigation: Introduction Design Patterns Common Problems Admit our infancy Application levels Common Problems Web Context Pattern Language Web Pattern Space Example Patterns Future Work Questions 1.Single level hierarchy 2.Static multi-level hierarchy 3.Dynamic multi-level hierarchy

Navigation cont… Frontend application levels Should be decoupled like MVC model May require knowledge of context / location Introduction Design Patterns Common Problems Admit our infancy Application levels Common Problems Web Context Pattern Language Web Pattern Space Example Patterns Future Work Questions

Database Operations Fundamental problem in web applications Techniques: Introduction Design Patterns Common Problems Admit our infancy Application levels Common Problems Web Context Pattern Language Web Pattern Space Example Patterns Future Work Questions 1.Specific Functions 2.Database Abstraction layer

Database Operations cont… Many database operations work on rows Reuse code for new and editing records Dreaming of high level programming Different types of database interaction: Introduction Design Patterns Common Problems Admit our infancy Application levels Common Problems Web Context Pattern Language Web Pattern Space Example Patterns Future Work Questions 1.Logging 2.User Interactive 3.Under the hood 4.Content

Database Operations cont… Wrappers live in the database layers Higher level dreaming requires more levels Backend encapsulating queries into objects Introduction Design Patterns Common Problems Admit our infancy Application levels Common Problems Web Context Pattern Language Web Pattern Space Example Patterns Future Work Questions

Authentication Fundamental to tracking, sessions and users Formal definition of types: Introduction Design Patterns Common Problems Admit our infancy Application levels Common Problems Web Context Pattern Language Web Pattern Space Example Patterns Future Work Questions 1.None – no tracking at all 2.Session – anonymous tracking 3.Visitor – multi-visit anonymous tracking 4.User – known information

Authentication cont… Consider these levels as the same problem Generic system to work across levels Every request has an authentication level We can dream of building automated tools Introduction Design Patterns Common Problems Admit our infancy Application levels Common Problems Web Context Pattern Language Web Pattern Space Example Patterns Future Work Questions

Authentication cont… User level authentication is at all levels Other authentication is backend only Introduction Design Patterns Common Problems Admit our infancy Application levels Common Problems Web Context Pattern Language Web Pattern Space Example Patterns Future Work Questions

Error Handling Graceful degradation for users is vital Report errors to administrators Display appropriate error messages For example, database availability Introduction Design Patterns Common Problems Admit our infancy Application levels Common Problems Web Context Pattern Language Web Pattern Space Example Patterns Future Work Questions

Error Handling cont… Errors must be caught from any level Messages are displayed to the user Stretches across all application levels Introduction Design Patterns Common Problems Admit our infancy Application levels Common Problems Web Context Pattern Language Web Pattern Space Example Patterns Future Work Questions

E-commerce Builds on other solutions Decoupled from forms and authentication Application levels depend on independence Introduction Design Patterns Common Problems Admit our infancy Application levels Common Problems Web Context Pattern Language Web Pattern Space Example Patterns Future Work Questions

Choosing a Level of Abstraction Patterns are supposed to be generic Abstract from problems to find patterns The key is choosing a level of abstraction Web programming is a specific problem Hence we cannot abstract too far Introduction Design Patterns Common Problems Web Context Level of Abstraction Application Levels Pattern Language Web Pattern Space Example Patterns Future Work Questions

Choosing a Level of Abstraction cont… Object Oriented Level of Abstraction Our abstraction must describe web problems Are they still patterns? Introduction Design Patterns Common Problems Web Context Level of Abstraction Application Levels Pattern Language Web Pattern Space Example Patterns Future Work Questions

Application Levels Specific problem for the web context OO Patterns don’t know about app levels Could divide patterns by level Introduction Design Patterns Common Problems Web Context Level of Abstraction Application Levels Pattern Language Web Pattern Space Example Patterns Future Work Questions 1.HTML Patterns 2.OO Patterns for backend 3.User Interaction Patterns

Application Levels in Context We want web programming patterns Ignore levels when choosing patterns Create a multi-level pattern language Introduction Design Patterns Common Problems Web Context Level of Abstraction Application Levels Pattern Language Web Pattern Space Example Patterns Future Work Questions

Web Programming Pattern Language Build on existing pattern patterns A meta-pattern Modifying the language for OO in: Design Patterns: Elements of Reusable Object-Oriented Software Gamma et al. Introduction Design Patterns Common Problems Web Context Pattern Language Basis Requirements Definition Web Pattern Space Example Patterns Future Work Questions

Basic Requirements of a Pattern Language Short, descriptive name Problem description Present a solution Highlight consequences Introduction Design Patterns Common Problems Web Context Pattern Language Basis Requirements Definition Web Pattern Space Example Patterns Future Work Questions

Pattern Name and Classification Succinct description Becomes part of design vocabulary Classifications group similar patterns Introduction Design Patterns Common Problems Web Context Pattern Language Basis Requirements Definition Web Pattern Space Example Patterns Future Work Questions

Intent Short statement, including: Introduction Design Patterns Common Problems Web Context Pattern Language Basis Requirements Definition Web Pattern Space Example Patterns Future Work Questions 1.What does the design pattern do? 2.What is its rationale and intent? 3.What particular design issue or problem does it address?

Also Known As Other well-known names for the pattern Introduction Design Patterns Common Problems Web Context Pattern Language Basis Requirements Definition Web Pattern Space Example Patterns Future Work Questions

Motivation An example describing the function and use of the pattern. Introduction Design Patterns Common Problems Web Context Pattern Language Basis Requirements Definition Web Pattern Space Example Patterns Future Work Questions

Applicability Where should we use this pattern? How can we recognize these situations? Introduction Design Patterns Common Problems Web Context Pattern Language Basis Requirements Definition Web Pattern Space Example Patterns Future Work Questions

Sequence of Events Web programming specific field Execution sequence for the pattern High level steps, not implementation level For example: Introduction Design Patterns Common Problems Web Context Pattern Language Basis Requirements Definition Web Pattern Space Example Patterns Future Work Questions 1.HTTP Request Sequence 2.User Interaction Sequence

Participants Other patterns participating in this pattern The responsibilities of those patterns Introduction Design Patterns Common Problems Web Context Pattern Language Basis Requirements Definition Web Pattern Space Example Patterns Future Work Questions

Collaborations How the participants collaborate Introduction Design Patterns Common Problems Web Context Pattern Language Basis Requirements Definition Web Pattern Space Example Patterns Future Work Questions

Consequences How does the pattern support its objectives? What are the consequences of its use? What are the trade offs? Example, database utilization Introduction Design Patterns Common Problems Web Context Pattern Language Basis Requirements Definition Web Pattern Space Example Patterns Future Work Questions

Implementation Notes on implementation: Introduction Design Patterns Common Problems Web Context Pattern Language Basis Requirements Definition Web Pattern Space Example Patterns Future Work Questions 1.Pitfalls 2.Hints 3.Techniques 4.Language Specific Issues 5.Environment Specific Issues

Sample Code Code fragments for common languages Introduction Design Patterns Common Problems Web Context Pattern Language Basis Requirements Definition Web Pattern Space Example Patterns Future Work Questions

Related Patterns What design patterns are closely related? What are the important differences? What patterns should this one be used with? Introduction Design Patterns Common Problems Web Context Pattern Language Basis Requirements Definition Web Pattern Space Example Patterns Future Work Questions

Introduction Design Patterns Common Problems Web Context Pattern Language Web Pattern Space Introduction Space Example Patterns Future Work Questions 1.Organize patterns 2.Understand our catalogue 3.Quickly find related patterns Web Programming Design Pattern Space Helps us: Preliminary definition only

Introduction Design Patterns Common Problems Web Context Pattern Language Web Pattern Space Introduction Space Example Patterns Future Work Questions Preliminary Web Pattern Space Behavioral describe an application task Structural describe an event sequence

Introduction Design Patterns Common Problems Web Context Pattern Language Web Pattern Space Example Patterns Filter Behavioral Patterns Structural Patterns Future Work Questions Example Patterns - Filter Classification Behavioral Intent Provide a mechanism for conditionally executing code at the start or end of each page request.

Introduction Design Patterns Common Problems Web Context Pattern Language Web Pattern Space Example Patterns Filter Behavioral Patterns Structural Patterns Future Work Questions Example Patterns – Filter cont… Motivation Having the ability to conditionally run functions as part of a web page is a very powerful tool for web programmers. It gives us the flexibility to add and configure logging functions, authentication checks and so on. Filters control the registration and execution of these functions.

Introduction Design Patterns Common Problems Web Context Pattern Language Web Pattern Space Example Patterns Filter Behavioral Patterns Structural Patterns Future Work Questions Example Patterns – Filter cont… Applicability Check notes for details

Introduction Design Patterns Common Problems Web Context Pattern Language Web Pattern Space Example Patterns Filter Behavioral Patterns Structural Patterns Future Work Questions Example Patterns – Filter cont… Sequence of Events Client requests page Register filters Check conditions on all post_auth filters and run if met Run page script Check conditions on all trace filters and run if met

Introduction Design Patterns Common Problems Web Context Pattern Language Web Pattern Space Example Patterns Filter Behavioral Patterns Structural Patterns Future Work Questions Example Patterns – Filter cont… Participants None

Introduction Design Patterns Common Problems Web Context Pattern Language Web Pattern Space Example Patterns Filter Behavioral Patterns Structural Patterns Future Work Questions Example Patterns – Filter cont… Collaborations The developer may register and run a number of post_auth and / or trace filters. The return values of these filter functions influence the continuing execution of the filters. See the Implementation section below for more information.

Introduction Design Patterns Common Problems Web Context Pattern Language Web Pattern Space Example Patterns Filter Behavioral Patterns Structural Patterns Future Work Questions Example Patterns – Filter cont… Consequences Configuring conditional code execution is easy. Adding a new logging function or authentication filter is just a filter registration function call away. Be careful of filter side effects. Filters can stop the rest of a page from completing execution or stop other filters from running. You need to pay special attention to the order that filters are registered and their likely return values.

Introduction Design Patterns Common Problems Web Context Pattern Language Web Pattern Space Example Patterns Filter Behavioral Patterns Structural Patterns Future Work Questions Example Patterns – Filter cont… Implementation See notes Sample Code See notes

Introduction Design Patterns Common Problems Web Context Pattern Language Web Pattern Space Example Patterns Filter Behavioral Patterns Structural Patterns Future Work Questions Behavioral Patterns Data Entry Data Edit Data Maintenance Authentication Error Handling

Introduction Design Patterns Common Problems Web Context Pattern Language Web Pattern Space Example Patterns Filter Behavioral Patterns Structural Patterns Future Work Questions Structural Patterns Self-referring page Multi-page form

Introduction Design Patterns Common Problems Web Context Pattern Language Web Pattern Space Example Patterns Future Work Questions Future Work Improve Pattern Language Work on Web Pattern Space Discuss and build the Catalogue

Introduction Design Patterns Common Problems Web Context Pattern Language Web Pattern Space Example Patterns Future Work Questions