User interface design

As an example of the use of the SOLID design principles, let's build an application that uses a complex UI design, and see how these principles can help us break up our code into smaller, manageable modules, separated by interfaces.

In this section, we will build an Angular 2 application that will provide a left-to-right panel style page layout. We will use Bootstrap to provide a little styling, and some CSS-based transitions to slide panels in from the left or right. This will provide the user with a slightly different browsing experience to the common up-down scrolling design that most websites utilize.

Conceptual design

Let's take a look at what this left-to-right design will look like conceptually:

Conceptual view of the ...

Get Mastering TypeScript - Second Edition now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.