Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

Introduction to Design Patterns

Well done!

You have completed Introduction to Design Patterns!

Sign up for Treehouse Back to Library

Structural

1:56 with Craig Dennis

Let's explore the Structural design pattern category.

Structural Patterns on Source Making

Read more

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

    Related Discussions

    Have questions about this video? Start a discussion with the community and Treehouse staff.

    Sign up

    The structural category groups patterns that concern themselves with 0:00
    techniques for composing larger structures and classes and objects. 0:04
    So,without further ado, there's your old friend adapter. 0:07
    You'll see these names in classes so keep an eye out for them. 0:12
    Let's take a quick look at the ever popular lifesaver, Facade. 0:16
    >> Why don't we take a look at the Facade Pattern in JavaScript. 0:21
    Addy Osmani has published a really great look at design patterns in JavaScript. 0:24
    And I really like his facade patterns that he discussed here. 0:28
    There's a link to this in the teacher's notes. 0:32
    So this pattern lets you mask the complexity of APIs. 0:34
    So let's scroll down, he's got an awesome code sample here that really shows it off. 0:38
    So basically all this code is trying to do, poor JavaScript. 0:43
    Any front end that JavaScript code must run on, 0:49
    has to work in multiple browsers in them. 0:52
    All the browsers' APIs are a little bit different. 0:54
    So the facade pattern can provide 0:56
    one way to handle the differences between browsers, right. 0:59
    So all this code in this example is trying to do is add an event, 1:01
    right, when you click something or when something hovers or something like that. 1:06
    But the complexity of this code is masked under the covers. 1:10
    Which again it has to speak the different browser APIs. 1:14
    So this is the facade at work. 1:17
    Its job is to define a higher level interface that makes the subsystem 1:19
    easier to use, right? 1:24
    You just pass in the event, and it goes ahead and 1:25
    finds out what the browser can do and does the appropriate call. 1:27
    It's made a nice facade around all of those. 1:31
    So Addy goes on to talk about how sometimes those facades come at a cost. 1:35
    And this is a really great walk-through of the pattern itself. 1:39
    And I highly recommend reading through the rest of this document if you're 1:43
    using JavaScript, as he does an excellent job. 1:46
    Alright. 1:48
    So check the teacher's notes for more implementations of the facade pattern 1:49
    as well as other structural design patterns. 1:53

    You need to sign up for Treehouse in order to download course files.

    Sign up

      You need to sign up for Treehouse in order to set up Workspace

      Sign up