Front End Design Patterns

As front-end developers, we’re constantly refining two interfaces simultaneously: one for visitors who load the website, the other for developers who have to tackle the code in the future. Yet we tend to assign the role of “user” to the first group, often forgetting that the code we write must work for developers in a similar way. We shouldn’t forget that developers are users, too.

Frontend design involves creating the HTML, CSS, and presentational JavaScript code that makes up a user interface. Coding design patterns are about establishing a set of relationships between elements. By codifying these relationships as a set of principles instead of a single, stand-alone template, we make it possible for other developers to extend our work while remaining faithful to its core ideas.

A design pattern is a reusable software solution to a specific type of problem that occurs frequently when developing software. Over the many years of practicing software development, experts have figured out ways of solving similar problems. These solutions have been encapsulated into design patterns. So:

• patterns are proven solutions to software development problems
• patterns are scalable as they usually are structured and have rules that you should follow
• patterns are reusable for similar problems

In this session we will look at modular front end design in our themes from the visitor’s and the developer’s perspective. We'll look at a few patterns that you can start using today like creational, structural, and behavioral patterns.

The great thing about design patterns is that someone has already applied it successfully in the past. There is lots of open-source code that implement various patterns. As developers, we need to be aware of what patterns available and when we should apply them. I hope this presentation will help you take one more step towards answering these questions.

This presentation will be geared toward developers that have attempted to theme a drupal site in the past, or at the very least attempted to adjust an existing theme.