design patterns - scott grannemanfiles.granneman.com/presentations/webdev/design-patterns.pdf ·...
TRANSCRIPT
![Page 1: Design Patterns - Scott Grannemanfiles.granneman.com/presentations/webdev/Design-Patterns.pdf · 2019-07-22 · Design Pattern “a formal way of documenting a solution to a design](https://reader036.vdocuments.site/reader036/viewer/2022081323/5f086aee7e708231d421e91f/html5/thumbnails/1.jpg)
Design PatternsOr, Why Reinvent the Wheel?
© 2013 R. Scott GrannemanLast updated 2019-07-22
You are free to use this work, with certain restrictions. For full licensing information, please see the last slide/page.
R. Scott Granneman r Jans Carton
1.6
![Page 2: Design Patterns - Scott Grannemanfiles.granneman.com/presentations/webdev/Design-Patterns.pdf · 2019-07-22 · Design Pattern “a formal way of documenting a solution to a design](https://reader036.vdocuments.site/reader036/viewer/2022081323/5f086aee7e708231d421e91f/html5/thumbnails/2.jpg)
Notes & URLs for this presentation can be found…
» underneath the link to this slide show on granneman.com
» at files.granneman.com/presentations/webdev/Design-Patterns.txt
![Page 3: Design Patterns - Scott Grannemanfiles.granneman.com/presentations/webdev/Design-Patterns.pdf · 2019-07-22 · Design Pattern “a formal way of documenting a solution to a design](https://reader036.vdocuments.site/reader036/viewer/2022081323/5f086aee7e708231d421e91f/html5/thumbnails/3.jpg)
Architecture
![Page 4: Design Patterns - Scott Grannemanfiles.granneman.com/presentations/webdev/Design-Patterns.pdf · 2019-07-22 · Design Pattern “a formal way of documenting a solution to a design](https://reader036.vdocuments.site/reader036/viewer/2022081323/5f086aee7e708231d421e91f/html5/thumbnails/4.jpg)
![Page 5: Design Patterns - Scott Grannemanfiles.granneman.com/presentations/webdev/Design-Patterns.pdf · 2019-07-22 · Design Pattern “a formal way of documenting a solution to a design](https://reader036.vdocuments.site/reader036/viewer/2022081323/5f086aee7e708231d421e91f/html5/thumbnails/5.jpg)
1977
![Page 6: Design Patterns - Scott Grannemanfiles.granneman.com/presentations/webdev/Design-Patterns.pdf · 2019-07-22 · Design Pattern “a formal way of documenting a solution to a design](https://reader036.vdocuments.site/reader036/viewer/2022081323/5f086aee7e708231d421e91f/html5/thumbnails/6.jpg)
Design Pattern
“a formal way of documenting a solution to a design problem in a particular field of expertise.” —Wikipedia
![Page 7: Design Patterns - Scott Grannemanfiles.granneman.com/presentations/webdev/Design-Patterns.pdf · 2019-07-22 · Design Pattern “a formal way of documenting a solution to a design](https://reader036.vdocuments.site/reader036/viewer/2022081323/5f086aee7e708231d421e91f/html5/thumbnails/7.jpg)
“Each pattern describes a problem that occurs over and over again in our environment, and then describes the core of the solution to that problem” —Christopher Alexander
![Page 8: Design Patterns - Scott Grannemanfiles.granneman.com/presentations/webdev/Design-Patterns.pdf · 2019-07-22 · Design Pattern “a formal way of documenting a solution to a design](https://reader036.vdocuments.site/reader036/viewer/2022081323/5f086aee7e708231d421e91f/html5/thumbnails/8.jpg)
![Page 9: Design Patterns - Scott Grannemanfiles.granneman.com/presentations/webdev/Design-Patterns.pdf · 2019-07-22 · Design Pattern “a formal way of documenting a solution to a design](https://reader036.vdocuments.site/reader036/viewer/2022081323/5f086aee7e708231d421e91f/html5/thumbnails/9.jpg)
Pattern Language
“An organized collection of design patterns that relate to a particular field” —Wikipedia
![Page 10: Design Patterns - Scott Grannemanfiles.granneman.com/presentations/webdev/Design-Patterns.pdf · 2019-07-22 · Design Pattern “a formal way of documenting a solution to a design](https://reader036.vdocuments.site/reader036/viewer/2022081323/5f086aee7e708231d421e91f/html5/thumbnails/10.jpg)
Why?
Re-use successful solutions
Think about what’s done & why
Easier to encapsulate & transfer knowledge & experience
![Page 11: Design Patterns - Scott Grannemanfiles.granneman.com/presentations/webdev/Design-Patterns.pdf · 2019-07-22 · Design Pattern “a formal way of documenting a solution to a design](https://reader036.vdocuments.site/reader036/viewer/2022081323/5f086aee7e708231d421e91f/html5/thumbnails/11.jpg)
Pattern 127 from A Pattern Language: Intimacy Gradient
“Unless the spaces in a building are arranged in a sequence which corresponds to their degrees of privateness, the visits made by strangers, friends, guests, clients, family, will always be a little awkward.”
![Page 12: Design Patterns - Scott Grannemanfiles.granneman.com/presentations/webdev/Design-Patterns.pdf · 2019-07-22 · Design Pattern “a formal way of documenting a solution to a design](https://reader036.vdocuments.site/reader036/viewer/2022081323/5f086aee7e708231d421e91f/html5/thumbnails/12.jpg)
“In a small shop the sequence might be: shop entrance, customer milling space, browsing area, sales counter, behind the counter, private place for workers.”
![Page 13: Design Patterns - Scott Grannemanfiles.granneman.com/presentations/webdev/Design-Patterns.pdf · 2019-07-22 · Design Pattern “a formal way of documenting a solution to a design](https://reader036.vdocuments.site/reader036/viewer/2022081323/5f086aee7e708231d421e91f/html5/thumbnails/13.jpg)
“In a house: gate, outdoor porch, entrance, sitting wall, common space and kitchen, private garden, bed alcoves.”
![Page 14: Design Patterns - Scott Grannemanfiles.granneman.com/presentations/webdev/Design-Patterns.pdf · 2019-07-22 · Design Pattern “a formal way of documenting a solution to a design](https://reader036.vdocuments.site/reader036/viewer/2022081323/5f086aee7e708231d421e91f/html5/thumbnails/14.jpg)
“Therefore: Lay out the spaces of a building so that they create a sequence which begins with the entrance and the most public parts of the building, then leads into the slightly more private areas, and finally to the most private domains.”
![Page 15: Design Patterns - Scott Grannemanfiles.granneman.com/presentations/webdev/Design-Patterns.pdf · 2019-07-22 · Design Pattern “a formal way of documenting a solution to a design](https://reader036.vdocuments.site/reader036/viewer/2022081323/5f086aee7e708231d421e91f/html5/thumbnails/15.jpg)
![Page 16: Design Patterns - Scott Grannemanfiles.granneman.com/presentations/webdev/Design-Patterns.pdf · 2019-07-22 · Design Pattern “a formal way of documenting a solution to a design](https://reader036.vdocuments.site/reader036/viewer/2022081323/5f086aee7e708231d421e91f/html5/thumbnails/16.jpg)
![Page 17: Design Patterns - Scott Grannemanfiles.granneman.com/presentations/webdev/Design-Patterns.pdf · 2019-07-22 · Design Pattern “a formal way of documenting a solution to a design](https://reader036.vdocuments.site/reader036/viewer/2022081323/5f086aee7e708231d421e91f/html5/thumbnails/17.jpg)
Computer Science
![Page 18: Design Patterns - Scott Grannemanfiles.granneman.com/presentations/webdev/Design-Patterns.pdf · 2019-07-22 · Design Pattern “a formal way of documenting a solution to a design](https://reader036.vdocuments.site/reader036/viewer/2022081323/5f086aee7e708231d421e91f/html5/thumbnails/18.jpg)
1995
![Page 19: Design Patterns - Scott Grannemanfiles.granneman.com/presentations/webdev/Design-Patterns.pdf · 2019-07-22 · Design Pattern “a formal way of documenting a solution to a design](https://reader036.vdocuments.site/reader036/viewer/2022081323/5f086aee7e708231d421e91f/html5/thumbnails/19.jpg)
1998
![Page 20: Design Patterns - Scott Grannemanfiles.granneman.com/presentations/webdev/Design-Patterns.pdf · 2019-07-22 · Design Pattern “a formal way of documenting a solution to a design](https://reader036.vdocuments.site/reader036/viewer/2022081323/5f086aee7e708231d421e91f/html5/thumbnails/20.jpg)
![Page 21: Design Patterns - Scott Grannemanfiles.granneman.com/presentations/webdev/Design-Patterns.pdf · 2019-07-22 · Design Pattern “a formal way of documenting a solution to a design](https://reader036.vdocuments.site/reader036/viewer/2022081323/5f086aee7e708231d421e91f/html5/thumbnails/21.jpg)
![Page 22: Design Patterns - Scott Grannemanfiles.granneman.com/presentations/webdev/Design-Patterns.pdf · 2019-07-22 · Design Pattern “a formal way of documenting a solution to a design](https://reader036.vdocuments.site/reader036/viewer/2022081323/5f086aee7e708231d421e91f/html5/thumbnails/22.jpg)
Web Development
![Page 23: Design Patterns - Scott Grannemanfiles.granneman.com/presentations/webdev/Design-Patterns.pdf · 2019-07-22 · Design Pattern “a formal way of documenting a solution to a design](https://reader036.vdocuments.site/reader036/viewer/2022081323/5f086aee7e708231d421e91f/html5/thumbnails/23.jpg)
![Page 24: Design Patterns - Scott Grannemanfiles.granneman.com/presentations/webdev/Design-Patterns.pdf · 2019-07-22 · Design Pattern “a formal way of documenting a solution to a design](https://reader036.vdocuments.site/reader036/viewer/2022081323/5f086aee7e708231d421e91f/html5/thumbnails/24.jpg)
developer.yahoo.com/ypatterns/
![Page 25: Design Patterns - Scott Grannemanfiles.granneman.com/presentations/webdev/Design-Patterns.pdf · 2019-07-22 · Design Pattern “a formal way of documenting a solution to a design](https://reader036.vdocuments.site/reader036/viewer/2022081323/5f086aee7e708231d421e91f/html5/thumbnails/25.jpg)
![Page 26: Design Patterns - Scott Grannemanfiles.granneman.com/presentations/webdev/Design-Patterns.pdf · 2019-07-22 · Design Pattern “a formal way of documenting a solution to a design](https://reader036.vdocuments.site/reader036/viewer/2022081323/5f086aee7e708231d421e91f/html5/thumbnails/26.jpg)
ui-patterns.com
![Page 27: Design Patterns - Scott Grannemanfiles.granneman.com/presentations/webdev/Design-Patterns.pdf · 2019-07-22 · Design Pattern “a formal way of documenting a solution to a design](https://reader036.vdocuments.site/reader036/viewer/2022081323/5f086aee7e708231d421e91f/html5/thumbnails/27.jpg)
![Page 28: Design Patterns - Scott Grannemanfiles.granneman.com/presentations/webdev/Design-Patterns.pdf · 2019-07-22 · Design Pattern “a formal way of documenting a solution to a design](https://reader036.vdocuments.site/reader036/viewer/2022081323/5f086aee7e708231d421e91f/html5/thumbnails/28.jpg)
www.welie.com/patterns/
![Page 29: Design Patterns - Scott Grannemanfiles.granneman.com/presentations/webdev/Design-Patterns.pdf · 2019-07-22 · Design Pattern “a formal way of documenting a solution to a design](https://reader036.vdocuments.site/reader036/viewer/2022081323/5f086aee7e708231d421e91f/html5/thumbnails/29.jpg)
![Page 30: Design Patterns - Scott Grannemanfiles.granneman.com/presentations/webdev/Design-Patterns.pdf · 2019-07-22 · Design Pattern “a formal way of documenting a solution to a design](https://reader036.vdocuments.site/reader036/viewer/2022081323/5f086aee7e708231d421e91f/html5/thumbnails/30.jpg)
patterntap.com
![Page 31: Design Patterns - Scott Grannemanfiles.granneman.com/presentations/webdev/Design-Patterns.pdf · 2019-07-22 · Design Pattern “a formal way of documenting a solution to a design](https://reader036.vdocuments.site/reader036/viewer/2022081323/5f086aee7e708231d421e91f/html5/thumbnails/31.jpg)
![Page 32: Design Patterns - Scott Grannemanfiles.granneman.com/presentations/webdev/Design-Patterns.pdf · 2019-07-22 · Design Pattern “a formal way of documenting a solution to a design](https://reader036.vdocuments.site/reader036/viewer/2022081323/5f086aee7e708231d421e91f/html5/thumbnails/32.jpg)
bradfrost.github.io/this-is-responsive/patterns.html
![Page 33: Design Patterns - Scott Grannemanfiles.granneman.com/presentations/webdev/Design-Patterns.pdf · 2019-07-22 · Design Pattern “a formal way of documenting a solution to a design](https://reader036.vdocuments.site/reader036/viewer/2022081323/5f086aee7e708231d421e91f/html5/thumbnails/33.jpg)
![Page 34: Design Patterns - Scott Grannemanfiles.granneman.com/presentations/webdev/Design-Patterns.pdf · 2019-07-22 · Design Pattern “a formal way of documenting a solution to a design](https://reader036.vdocuments.site/reader036/viewer/2022081323/5f086aee7e708231d421e91f/html5/thumbnails/34.jpg)
getbootstrap.com/components/
![Page 35: Design Patterns - Scott Grannemanfiles.granneman.com/presentations/webdev/Design-Patterns.pdf · 2019-07-22 · Design Pattern “a formal way of documenting a solution to a design](https://reader036.vdocuments.site/reader036/viewer/2022081323/5f086aee7e708231d421e91f/html5/thumbnails/35.jpg)
![Page 36: Design Patterns - Scott Grannemanfiles.granneman.com/presentations/webdev/Design-Patterns.pdf · 2019-07-22 · Design Pattern “a formal way of documenting a solution to a design](https://reader036.vdocuments.site/reader036/viewer/2022081323/5f086aee7e708231d421e91f/html5/thumbnails/36.jpg)
getbootstrap.com/javascript/
![Page 37: Design Patterns - Scott Grannemanfiles.granneman.com/presentations/webdev/Design-Patterns.pdf · 2019-07-22 · Design Pattern “a formal way of documenting a solution to a design](https://reader036.vdocuments.site/reader036/viewer/2022081323/5f086aee7e708231d421e91f/html5/thumbnails/37.jpg)
![Page 38: Design Patterns - Scott Grannemanfiles.granneman.com/presentations/webdev/Design-Patterns.pdf · 2019-07-22 · Design Pattern “a formal way of documenting a solution to a design](https://reader036.vdocuments.site/reader036/viewer/2022081323/5f086aee7e708231d421e91f/html5/thumbnails/38.jpg)
bootsnipp.com
![Page 39: Design Patterns - Scott Grannemanfiles.granneman.com/presentations/webdev/Design-Patterns.pdf · 2019-07-22 · Design Pattern “a formal way of documenting a solution to a design](https://reader036.vdocuments.site/reader036/viewer/2022081323/5f086aee7e708231d421e91f/html5/thumbnails/39.jpg)
![Page 40: Design Patterns - Scott Grannemanfiles.granneman.com/presentations/webdev/Design-Patterns.pdf · 2019-07-22 · Design Pattern “a formal way of documenting a solution to a design](https://reader036.vdocuments.site/reader036/viewer/2022081323/5f086aee7e708231d421e91f/html5/thumbnails/40.jpg)
codepen.io/websanity/
![Page 41: Design Patterns - Scott Grannemanfiles.granneman.com/presentations/webdev/Design-Patterns.pdf · 2019-07-22 · Design Pattern “a formal way of documenting a solution to a design](https://reader036.vdocuments.site/reader036/viewer/2022081323/5f086aee7e708231d421e91f/html5/thumbnails/41.jpg)
![Page 42: Design Patterns - Scott Grannemanfiles.granneman.com/presentations/webdev/Design-Patterns.pdf · 2019-07-22 · Design Pattern “a formal way of documenting a solution to a design](https://reader036.vdocuments.site/reader036/viewer/2022081323/5f086aee7e708231d421e91f/html5/thumbnails/42.jpg)
codepen.io/search?q=bootstrap
![Page 43: Design Patterns - Scott Grannemanfiles.granneman.com/presentations/webdev/Design-Patterns.pdf · 2019-07-22 · Design Pattern “a formal way of documenting a solution to a design](https://reader036.vdocuments.site/reader036/viewer/2022081323/5f086aee7e708231d421e91f/html5/thumbnails/43.jpg)
Thank you!
[email protected] www.granneman.com ChainsawOnATireSwing.com @scottgranneman
[email protected] websanity.com
![Page 44: Design Patterns - Scott Grannemanfiles.granneman.com/presentations/webdev/Design-Patterns.pdf · 2019-07-22 · Design Pattern “a formal way of documenting a solution to a design](https://reader036.vdocuments.site/reader036/viewer/2022081323/5f086aee7e708231d421e91f/html5/thumbnails/44.jpg)
Design PatternsOr, Why Reinvent the Wheel?
© 2013 R. Scott GrannemanLast updated 2019-07-22
You are free to use this work, with certain restrictions. For full licensing information, please see the last slide/page.
R. Scott Granneman r Jans Carton
1.6
![Page 45: Design Patterns - Scott Grannemanfiles.granneman.com/presentations/webdev/Design-Patterns.pdf · 2019-07-22 · Design Pattern “a formal way of documenting a solution to a design](https://reader036.vdocuments.site/reader036/viewer/2022081323/5f086aee7e708231d421e91f/html5/thumbnails/45.jpg)
Changelog
2019-07-22 1.6: Changed theme to Granneman 1.5;
![Page 46: Design Patterns - Scott Grannemanfiles.granneman.com/presentations/webdev/Design-Patterns.pdf · 2019-07-22 · Design Pattern “a formal way of documenting a solution to a design](https://reader036.vdocuments.site/reader036/viewer/2022081323/5f086aee7e708231d421e91f/html5/thumbnails/46.jpg)
Changelog
2016-01-21 1.5: Added revolving door as a design pattern 2015-06-08 1.4: Changed theme to Georgia Pro 2015-01-16 1.3: Added Bootstrap at CodePen; added website example of intimacy gradient 2015-01-15 1.2: Added more Bootstrap sites 2014-08-09 1.1: Moved to new theme
![Page 47: Design Patterns - Scott Grannemanfiles.granneman.com/presentations/webdev/Design-Patterns.pdf · 2019-07-22 · Design Pattern “a formal way of documenting a solution to a design](https://reader036.vdocuments.site/reader036/viewer/2022081323/5f086aee7e708231d421e91f/html5/thumbnails/47.jpg)
Licensing of this work
This work is licensed under the Creative Commons Attribution-ShareAlike 4.0 International License.
To view a copy of this license, visit http://creativecommons.org/licenses/by-sa/4.0/.
You are free to:
» Share — copy and redistribute the material in any medium or format » Adapt — remix, transform, and build upon the material for any purpose, even commercially
Under the following terms:
Attribution. You must give appropriate credit, provide a link to the license, and indicate if changes were made. You may do so in any reasonable manner, but not in any way that suggests the licensor endorses you or your use. Give credit to:
Scott Granneman • www.granneman.com • [email protected]
Share Alike. If you remix, transform, or build upon the material, you must distribute your contributions under the same license as the original.
No additional restrictions. You may not apply legal terms or technological measures that legally restrict others from doing anything the license permits.
Questions? Email [email protected]