diff --git a/components/faq-list/index.js b/components/faq-list/index.js index 7d2a5063a..7614b3ed3 100644 --- a/components/faq-list/index.js +++ b/components/faq-list/index.js @@ -1,7 +1,7 @@ import { FaqContainer, FaqItem } from './style'; const FaqList = () => ( - +

What is roadmap.sh?

diff --git a/components/featured-content/index.js b/components/featured-content/index.js index 6b2b179d8..88a80197b 100644 --- a/components/featured-content/index.js +++ b/components/featured-content/index.js @@ -4,7 +4,7 @@ import FeaturedGuides from './guides'; import FeaturedRoadmaps from './roadmaps'; const FeaturedContent = (props) => ( - + diff --git a/components/mdx-components/a.js b/components/mdx-components/a.js new file mode 100644 index 000000000..673ccd88e --- /dev/null +++ b/components/mdx-components/a.js @@ -0,0 +1,15 @@ +import styled from 'styled-components'; + +const Link = styled.a` + font-weight: 600; +`; + +const EnrichedLink = props => { + return ( + + { props.children } + + ); +}; + +export default EnrichedLink; \ No newline at end of file diff --git a/components/mdx-components/blockquote.js b/components/mdx-components/blockquote.js index 2ec1b53fa..d53cfd27c 100644 --- a/components/mdx-components/blockquote.js +++ b/components/mdx-components/blockquote.js @@ -1,12 +1,14 @@ import styled from 'styled-components'; -export const BlockQuote = styled.blockquote` - background: transparent; +const BlockQuote = styled.blockquote` padding: 16px 20px; - border-left: 5px solid currentColor; position: relative; + background: #e8e8e8; + border-radius: 5px; p { margin: 0; } -`; \ No newline at end of file +`; + +export default BlockQuote; \ No newline at end of file diff --git a/components/mdx-components/heading.js b/components/mdx-components/heading.js index 69d5ab055..236fbec99 100644 --- a/components/mdx-components/heading.js +++ b/components/mdx-components/heading.js @@ -6,7 +6,8 @@ const linkify = (Component) => { const text = props.children; const id = text.toLowerCase && text .toLowerCase() - .replace(/\s/g, '-') + .replace(/[^\x00-\x7F]/g, '') + .replace(/\s+/g, '-') .replace(/[?!]/g, ''); return ( diff --git a/components/mdx-components/index.js b/components/mdx-components/index.js index 69e4a646c..80779bc37 100644 --- a/components/mdx-components/index.js +++ b/components/mdx-components/index.js @@ -1,16 +1,18 @@ import P from './p'; import { Headings } from './heading'; import { Pre } from './pre'; -import { BlockQuote } from './blockquote'; +import BlockQuote from './blockquote'; import { Table } from './table'; import { IFrame } from './iframe'; import { Img } from './img'; +import EnrichedLink from './a'; const MdxComponents = { p: P, ...Headings, pre: Pre, blockquote: BlockQuote, + a: EnrichedLink, table: Table, iframe: IFrame, img: Img, diff --git a/components/mdx-components/p.js b/components/mdx-components/p.js index 1d1b95611..8837eac3d 100644 --- a/components/mdx-components/p.js +++ b/components/mdx-components/p.js @@ -4,11 +4,10 @@ const P = styled.p` color: inherit; font-size: 16px; font-weight: 400; - line-height: 1.6; + line-height: 27px; margin: 16px 0; img + em { - display: block; text-align: center; color: #666666; font-style: normal; diff --git a/components/page-footer/index.js b/components/page-footer/index.js index 8f94486a3..c383f9ee5 100644 --- a/components/page-footer/index.js +++ b/components/page-footer/index.js @@ -2,7 +2,7 @@ import Link from 'next/link'; import { FooterWrap } from './style.js' const PageFooter = () => ( - +
diff --git a/data/guides/design-patterns-for-humans.md b/data/guides/design-patterns-for-humans.md index 5f3a049b0..c2c252de7 100644 --- a/data/guides/design-patterns-for-humans.md +++ b/data/guides/design-patterns-for-humans.md @@ -1,19 +1,101 @@ -## Markdown UI Check +Design patterns are solutions to recurring problems; **guidelines on how to tackle certain problems**. They are not classes, packages or libraries that you can plug into your application and wait for the magic to happen. These are, rather, guidelines on how to tackle certain problems in certain situations. -Smart people who use advanced applications and are experts in finance or mechanical engineering, but who have never tried development, look over my shoulder when I’m coding and go to pieces. In their heads, coding is a mystical art, and to misquote Arthur C. Clarke’s famous adage, it is sufficiently advanced to be indistinguishable from magic. I type incantations into this black screen (if, then, while, do, else, class, border) and a website appears. I’ve summoned it with those magic words. I might as well be Harry Potter saying “NPMicus Compilate!” and waving around a wand. +> Design patterns are solutions to recurring problems; guidelines on how to tackle certain problems -Recently, a colleague came across some garbled nonsense output on a computer screen. I forget what it was now. Maybe a base64 encoded string, a load of hex, or a memory address to an error somewhere. Whatever it was, it was a page full of nonsense characters. +Wikipedia describes them as > In software engineering, a software design pattern is a general reusable solution to a commonly occurring problem within a given context in software design. It is not a finished design that can be transformed directly into source or machine code. It is a description or template for how to solve a problem that can be used in many different situations. -This was a short summary of this item to see how does it fit into the UI. +## Be Careful -## Let's add some code +Developers, mostly beginners, make the mistake of over-thinking and forcing the design patterns which results in a horrible un-maintainable mess. The rule of thumb is to keep the codebase as simple as possible, once you start developing, you will start to see the patterns repeating in the codebase in which case you can go ahead and implement the relevant design patterns. -Now we need to format the code and see how it shows up in the UI when we have it. +- Design patterns are not a silver bullet to all your problems. +- Do not try to force them; bad things are supposed to happen, if done so. +- Keep in mind that design patterns are solutions **to** problems, not solutions **finding** problems; so don't overthink. +- If used in a correct place in a correct manner, they can prove to be a savior; or else they can result in a horrible mess of a code. -One of the coolest [things](https://google.com) about React Native is that if you use it together with tools like CodePush or AppHub you can update your app instantly and avoid those painful 1-week app store submissions. That also means that you can push a hotfix on the fly, but the question is: how do you know if your app is crashing? (Unfortunately not all projects have a QA team) +> Also note that the code samples below are in PHP-7, however this shouldn't stop you because the concepts are same anyways. +## Types of Design Patterns + +This guide is about Gang of Four (GoF) design patterns, which refers to the four authors of [the book which introduced these design patterns](https://en.wikipedia.org/wiki/Design_Patterns). There are three types of design patterns: + +* [Creational](#creational-design-patterns) +* [Structural](#structural-design-patterns) +* [Behavioral](#behavioral-design-patterns) + +## Creational Design Patterns + +In plain words +> Creational patterns are focused towards how to instantiate an object or group of related objects. + +Wikipedia says +> In software engineering, creational design patterns are design patterns that deal with object creation mechanisms, trying to create objects in a manner suitable to the situation. The basic form of object creation could result in design problems or added complexity to the design. Creational design patterns solve this problem by somehow controlling this object creation. + +There are 6 types of Creational patterns + + * [Simple Factory](#-simple-factory) + * [Factory Method](#-factory-method) + * [Abstract Factory](#-abstract-factory) + * [Builder](#-builder) + * [Prototype](#-prototype) + * [Singleton](#-singleton) + +🏠 Simple Factory +-------------- +Real world example +> Consider, you are building a house and you need doors. You can either put on your carpenter clothes, bring some wood, glue, nails and all the tools required to build the door and start building it in your house or you can simply call the factory and get the built door delivered to you so that you don't need to learn anything about the door making or to deal with the mess that comes with making it. + +In plain words +> Simple factory simply generates an instance for client without exposing any instantiation logic to the client + +Wikipedia says +> In object-oriented programming (OOP), a factory is an object for creating other objects – formally a factory is a function or method that returns objects of a varying prototype or class from some method call, which is assumed to be "new". + +**Programmatic Example** + +First of all we have a door interface and the implementation +```php +interface Door +{ + public function getWidth(): float; + public function getHeight(): float; +} + +class WoodenDoor implements Door +{ + protected $width; + protected $height; + + public function __construct(float $width, float $height) + { + $this->width = $width; + $this->height = $height; + } + + public function getWidth(): float + { + return $this->width; + } + + public function getHeight(): float + { + return $this->height; + } +} +``` +Then we have our door factory that makes the door and returns it +```php +class DoorFactory +{ + public static function makeDoor($width, $height): Door + { + return new WoodenDoor($width, $height); + } +} +``` +And then it can be used as ```php // Make me a door of 100x200 $door = DoorFactory::makeDoor(100, 200); @@ -25,353 +107,2163 @@ echo 'Height: ' . $door->getHeight(); $door2 = DoorFactory::makeDoor(50, 100); ``` -Serverful apps need to run consistently, watching for requests. Then, when requested, the app handles the request itself. In serverful monolith style apps, routing is commonly handled by a single file. Let's look at an Express.js example to illustrate this: +**When to Use?** + +When creating an object is not just a few assignments and involves some logic, it makes sense to put it in a dedicated factory instead of repeating the same code everywhere. + +🏭 Factory Method +-------------- + +Real world example +> Consider the case of a hiring manager. It is impossible for one person to interview for each of the positions. Based on the job opening, she has to decide and delegate the interview steps to different people. + +In plain words +> It provides a way to delegate the instantiation logic to child classes. + +Wikipedia says +> In class-based programming, the factory method pattern is a creational pattern that uses factory methods to deal with the problem of creating objects without having to specify the exact class of the object that will be created. This is done by creating objects by calling a factory method—either specified in an interface and implemented by child classes, or implemented in a base class and optionally overridden by derived classes—rather than by calling a constructor. + + **Programmatic Example** + +Taking our hiring manager example above. First of all we have an interviewer interface and some implementations for it + +```php +interface Interviewer +{ + public function askQuestions(); +} + +class Developer implements Interviewer +{ + public function askQuestions() + { + echo 'Asking about design patterns!'; + } +} + +class CommunityExecutive implements Interviewer +{ + public function askQuestions() + { + echo 'Asking about community building'; + } +} +``` + +Now let us create our `HiringManager` - +```php +abstract class HiringManager +{ -Serverful apps need to run consistently, watching for requests. Then, when requested, the app handles the request itself. In serverful monolith style apps, routing is commonly handled by a single file. Let's look at an Express.js example to illustrate this: + // Factory method + abstract protected function makeInterviewer(): Interviewer; -![](https://endler.dev/2019/tinysearch/bloomfilter.svg) -*A picture taken from endler.dev* + public function takeInterview() + { + $interviewer = $this->makeInterviewer(); + $interviewer->askQuestions(); + } +} -Our team runs a number of typical services for monitoring and performance analysis: API endpoints for metrics written in Go, Prometheus exporters, log parsers like Logstash or Gollum, and databases like InfluxDB or Elasticsearch. Each of these services run in their own container. We needed a simple system to keep those jobs running. +``` +Now any child can extend it and provide the required interviewer +```php +class DevelopmentManager extends HiringManager +{ + protected function makeInterviewer(): Interviewer + { + return new Developer(); + } +} + +class MarketingManager extends HiringManager +{ + protected function makeInterviewer(): Interviewer + { + return new CommunityExecutive(); + } +} +``` +and then it can be used as +```php +$devManager = new DevelopmentManager(); +$devManager->takeInterview(); // Output: Asking about design patterns -We started with a list of requirements for container orchestration: +$marketingManager = new MarketingManager(); +$marketingManager->takeInterview(); // Output: Asking about community building. +``` -* Run a fleet of services across many machines. -* Provide an overview of running services. -* Allow for communication between services. -* Restart them automatically when they die. -* Be manageable by a small team. +**When to use?** -## Credits +Useful when there is some generic processing in a class but the required sub-class is dynamically decided at runtime. Or putting it in other words, when the client doesn't know what exact sub-class it might need. -Thanks to my awesome colleagues Esteban Barrios, Jorge-Luis Betancourt, Simon Brüggen, Arne Claus, Inga Feick, Wolfgang Gassler, Barnabas Kutassy, Perry Manuk, Patrick Pokatilo, and Jakub Sacha for reviewing drafts of this article. +🔨 Abstract Factory +---------------- +Real world example +> Extending our door example from Simple Factory. Based on your needs you might get a wooden door from a wooden door shop, iron door from an iron shop or a PVC door from the relevant shop. Plus you might need a guy with different kind of specialities to fit the door, for example a carpenter for wooden door, welder for iron door etc. As you can see there is a dependency between the doors now, wooden door needs carpenter, iron door needs a welder etc. +In plain words +> A factory of factories; a factory that groups the individual but related/dependent factories together without specifying their concrete classes. -# H1 -## H2 -### H3 -#### H4 -##### H5 -###### H6 +Wikipedia says +> The abstract factory pattern provides a way to encapsulate a group of individual factories that have a common theme without specifying their concrete classes -Alternatively, for H1 and H2, an underline-ish style: +**Programmatic Example** -```markdown -Alt-H1 -====== +Translating the door example above. First of all we have our `Door` interface and some implementation for it -Alt-H2 ------- +```php +interface Door +{ + public function getDescription(); +} + +class WoodenDoor implements Door +{ + public function getDescription() + { + echo 'I am a wooden door'; + } +} + +class IronDoor implements Door +{ + public function getDescription() + { + echo 'I am an iron door'; + } +} +``` +Then we have some fitting experts for each door type + +```php +interface DoorFittingExpert +{ + public function getDescription(); +} + +class Welder implements DoorFittingExpert +{ + public function getDescription() + { + echo 'I can only fit iron doors'; + } +} + +class Carpenter implements DoorFittingExpert +{ + public function getDescription() + { + echo 'I can only fit wooden doors'; + } +} ``` -Alt-H1 -====== -Alt-H2 +Now we have our abstract factory that would let us make family of related objects i.e. wooden door factory would create a wooden door and wooden door fitting expert and iron door factory would create an iron door and iron door fitting expert +```php +interface DoorFactory +{ + public function makeDoor(): Door; + public function makeFittingExpert(): DoorFittingExpert; +} + +// Wooden factory to return carpenter and wooden door +class WoodenDoorFactory implements DoorFactory +{ + public function makeDoor(): Door + { + return new WoodenDoor(); + } + + public function makeFittingExpert(): DoorFittingExpert + { + return new Carpenter(); + } +} + +// Iron door factory to get iron door and the relevant fitting expert +class IronDoorFactory implements DoorFactory +{ + public function makeDoor(): Door + { + return new IronDoor(); + } + + public function makeFittingExpert(): DoorFittingExpert + { + return new Welder(); + } +} +``` +And then it can be used as +```php +$woodenFactory = new WoodenDoorFactory(); + +$door = $woodenFactory->makeDoor(); +$expert = $woodenFactory->makeFittingExpert(); + +$door->getDescription(); // Output: I am a wooden door +$expert->getDescription(); // Output: I can only fit wooden doors + +// Same for Iron Factory +$ironFactory = new IronDoorFactory(); + +$door = $ironFactory->makeDoor(); +$expert = $ironFactory->makeFittingExpert(); + +$door->getDescription(); // Output: I am an iron door +$expert->getDescription(); // Output: I can only fit iron doors +``` + +As you can see the wooden door factory has encapsulated the `carpenter` and the `wooden door` also iron door factory has encapsulated the `iron door` and `welder`. And thus it had helped us make sure that for each of the created door, we do not get a wrong fitting expert. + +**When to use?** + +When there are interrelated dependencies with not-that-simple creation logic involved + +## 👷 Builder +Real world example +> Imagine you are at Hardee's and you order a specific deal, lets say, "Big Hardee" and they hand it over to you without *any questions*; this is the example of simple factory. But there are cases when the creation logic might involve more steps. For example you want a customized Subway deal, you have several options in how your burger is made e.g what bread do you want? what types of sauces would you like? What cheese would you want? etc. In such cases builder pattern comes to the rescue. + +In plain words +> Allows you to create different flavors of an object while avoiding constructor pollution. Useful when there could be several flavors of an object. Or when there are a lot of steps involved in creation of an object. + +Wikipedia says +> The builder pattern is an object creation software design pattern with the intentions of finding a solution to the telescoping constructor anti-pattern. + +Having said that let me add a bit about what telescoping constructor anti-pattern is. At one point or the other we have all seen a constructor like below: + +```php +public function __construct($size, $cheese = true, $pepperoni = true, $tomato = false, $lettuce = true) +{ +} +``` + +As you can see; the number of constructor parameters can quickly get out of hand and it might become difficult to understand the arrangement of parameters. Plus this parameter list could keep on growing if you would want to add more options in future. This is called telescoping constructor anti-pattern. + +**Programmatic Example** + +The sane alternative is to use the builder pattern. First of all we have our burger that we want to make + +```php +class Burger +{ + protected $size; + + protected $cheese = false; + protected $pepperoni = false; + protected $lettuce = false; + protected $tomato = false; + + public function __construct(BurgerBuilder $builder) + { + $this->size = $builder->size; + $this->cheese = $builder->cheese; + $this->pepperoni = $builder->pepperoni; + $this->lettuce = $builder->lettuce; + $this->tomato = $builder->tomato; + } +} +``` + +And then we have the builder + +```php +class BurgerBuilder +{ + public $size; + + public $cheese = false; + public $pepperoni = false; + public $lettuce = false; + public $tomato = false; + + public function __construct(int $size) + { + $this->size = $size; + } + + public function addPepperoni() + { + $this->pepperoni = true; + return $this; + } + + public function addLettuce() + { + $this->lettuce = true; + return $this; + } + + public function addCheese() + { + $this->cheese = true; + return $this; + } + + public function addTomato() + { + $this->tomato = true; + return $this; + } + + public function build(): Burger + { + return new Burger($this); + } +} +``` +And then it can be used as: + +```php +$burger = (new BurgerBuilder(14)) + ->addPepperoni() + ->addLettuce() + ->addTomato() + ->build(); +``` + +**When to use?** + +When there could be several flavors of an object and to avoid the constructor telescoping. The key difference from the factory pattern is that; factory pattern is to be used when the creation is a one step process while builder pattern is to be used when the creation is a multi step process. + +🐑 Prototype +------------ +Real world example +> Remember dolly? The sheep that was cloned! Lets not get into the details but the key point here is that it is all about cloning + +In plain words +> Create object based on an existing object through cloning. + +Wikipedia says +> The prototype pattern is a creational design pattern in software development. It is used when the type of objects to create is determined by a prototypical instance, which is cloned to produce new objects. + +In short, it allows you to create a copy of an existing object and modify it to your needs, instead of going through the trouble of creating an object from scratch and setting it up. + +**Programmatic Example** + +In PHP, it can be easily done using `clone` + +```php +class Sheep +{ + protected $name; + protected $category; + + public function __construct(string $name, string $category = 'Mountain Sheep') + { + $this->name = $name; + $this->category = $category; + } + + public function setName(string $name) + { + $this->name = $name; + } + + public function getName() + { + return $this->name; + } + + public function setCategory(string $category) + { + $this->category = $category; + } + + public function getCategory() + { + return $this->category; + } +} +``` +Then it can be cloned like below +```php +$original = new Sheep('Jolly'); +echo $original->getName(); // Jolly +echo $original->getCategory(); // Mountain Sheep + +// Clone and modify what is required +$cloned = clone $original; +$cloned->setName('Dolly'); +echo $cloned->getName(); // Dolly +echo $cloned->getCategory(); // Mountain sheep +``` + +Also you could use the magic method `__clone` to modify the cloning behavior. + +**When to use?** + +When an object is required that is similar to existing object or when the creation would be expensive as compared to cloning. + +💍 Singleton +------------ +Real world example +> There can only be one president of a country at a time. The same president has to be brought to action, whenever duty calls. President here is singleton. + +In plain words +> Ensures that only one object of a particular class is ever created. + +Wikipedia says +> In software engineering, the singleton pattern is a software design pattern that restricts the instantiation of a class to one object. This is useful when exactly one object is needed to coordinate actions across the system. + +Singleton pattern is actually considered an anti-pattern and overuse of it should be avoided. It is not necessarily bad and could have some valid use-cases but should be used with caution because it introduces a global state in your application and change to it in one place could affect in the other areas and it could become pretty difficult to debug. The other bad thing about them is it makes your code tightly coupled plus mocking the singleton could be difficult. + +**Programmatic Example** + +To create a singleton, make the constructor private, disable cloning, disable extension and create a static variable to house the instance +```php +final class President +{ + private static $instance; + + private function __construct() + { + // Hide the constructor + } + + public static function getInstance(): President + { + if (!self::$instance) { + self::$instance = new self(); + } + + return self::$instance; + } + + private function __clone() + { + // Disable cloning + } + + private function __wakeup() + { + // Disable unserialize + } +} +``` +Then in order to use +```php +$president1 = President::getInstance(); +$president2 = President::getInstance(); + +var_dump($president1 === $president2); // true +``` + +## Structural Design Patterns +In plain words +> Structural patterns are mostly concerned with object composition or in other words how the entities can use each other. Or yet another explanation would be, they help in answering "How to build a software component?" + +Wikipedia says +> In software engineering, structural design patterns are design patterns that ease the design by identifying a simple way to realize relationships between entities. + +There are 7 types of structural patterns + + * [Adapter](#-adapter) + * [Bridge](#-bridge) + * [Composite](#-composite) + * [Decorator](#-decorator) + * [Facade](#-facade) + * [Flyweight](#-flyweight) + * [Proxy](#-proxy) + +🔌 Adapter +------- +Real world example +> Consider that you have some pictures in your memory card and you need to transfer them to your computer. In order to transfer them you need some kind of adapter that is compatible with your computer ports so that you can attach memory card to your computer. In this case card reader is an adapter. +> Another example would be the famous power adapter; a three legged plug can't be connected to a two pronged outlet, it needs to use a power adapter that makes it compatible with the two pronged outlet. +> Yet another example would be a translator translating words spoken by one person to another + +In plain words +> Adapter pattern lets you wrap an otherwise incompatible object in an adapter to make it compatible with another class. + +Wikipedia says +> In software engineering, the adapter pattern is a software design pattern that allows the interface of an existing class to be used as another interface. It is often used to make existing classes work with others without modifying their source code. + +**Programmatic Example** + +Consider a game where there is a hunter and he hunts lions. + +First we have an interface `Lion` that all types of lions have to implement + +```php +interface Lion +{ + public function roar(); +} + +class AfricanLion implements Lion +{ + public function roar() + { + } +} + +class AsianLion implements Lion +{ + public function roar() + { + } +} +``` +And hunter expects any implementation of `Lion` interface to hunt. +```php +class Hunter +{ + public function hunt(Lion $lion) + { + $lion->roar(); + } +} +``` + +Now let's say we have to add a `WildDog` in our game so that hunter can hunt that also. But we can't do that directly because dog has a different interface. To make it compatible for our hunter, we will have to create an adapter that is compatible + +```php +// This needs to be added to the game +class WildDog +{ + public function bark() + { + } +} + +// Adapter around wild dog to make it compatible with our game +class WildDogAdapter implements Lion +{ + protected $dog; + + public function __construct(WildDog $dog) + { + $this->dog = $dog; + } + + public function roar() + { + $this->dog->bark(); + } +} +``` +And now the `WildDog` can be used in our game using `WildDogAdapter`. + +```php +$wildDog = new WildDog(); +$wildDogAdapter = new WildDogAdapter($wildDog); + +$hunter = new Hunter(); +$hunter->hunt($wildDogAdapter); +``` + +🚡 Bridge ------ +Real world example +> Consider you have a website with different pages and you are supposed to allow the user to change the theme. What would you do? Create multiple copies of each of the pages for each of the themes or would you just create separate theme and load them based on the user's preferences? Bridge pattern allows you to do the second i.e. + +![With and without the bridge pattern](https://cloud.githubusercontent.com/assets/11269635/23065293/33b7aea0-f515-11e6-983f-98823c9845ee.png) + +In Plain Words +> Bridge pattern is about preferring composition over inheritance. Implementation details are pushed from a hierarchy to another object with a separate hierarchy. + +Wikipedia says +> The bridge pattern is a design pattern used in software engineering that is meant to "decouple an abstraction from its implementation so that the two can vary independently" + +**Programmatic Example** + +Translating our WebPage example from above. Here we have the `WebPage` hierarchy + +```php +interface WebPage +{ + public function __construct(Theme $theme); + public function getContent(); +} + +class About implements WebPage +{ + protected $theme; + + public function __construct(Theme $theme) + { + $this->theme = $theme; + } + + public function getContent() + { + return "About page in " . $this->theme->getColor(); + } +} + +class Careers implements WebPage +{ + protected $theme; + + public function __construct(Theme $theme) + { + $this->theme = $theme; + } + + public function getContent() + { + return "Careers page in " . $this->theme->getColor(); + } +} +``` +And the separate theme hierarchy +```php + +interface Theme +{ + public function getColor(); +} + +class DarkTheme implements Theme +{ + public function getColor() + { + return 'Dark Black'; + } +} +class LightTheme implements Theme +{ + public function getColor() + { + return 'Off white'; + } +} +class AquaTheme implements Theme +{ + public function getColor() + { + return 'Light blue'; + } +} +``` +And both the hierarchies +```php +$darkTheme = new DarkTheme(); + +$about = new About($darkTheme); +$careers = new Careers($darkTheme); + +echo $about->getContent(); // "About page in Dark Black"; +echo $careers->getContent(); // "Careers page in Dark Black"; +``` + +## 🌿 Composite + +Real world example +> Every organization is composed of employees. Each of the employees has the same features i.e. has a salary, has some responsibilities, may or may not report to someone, may or may not have some subordinates etc. + +In plain words +> Composite pattern lets clients treat the individual objects in a uniform manner. + +Wikipedia says +> In software engineering, the composite pattern is a partitioning design pattern. The composite pattern describes that a group of objects is to be treated in the same way as a single instance of an object. The intent of a composite is to "compose" objects into tree structures to represent part-whole hierarchies. Implementing the composite pattern lets clients treat individual objects and compositions uniformly. + +**Programmatic Example** + +Taking our employees example from above. Here we have different employee types + +```php +interface Employee +{ + public function __construct(string $name, float $salary); + public function getName(): string; + public function setSalary(float $salary); + public function getSalary(): float; + public function getRoles(): array; +} + +class Developer implements Employee +{ + protected $salary; + protected $name; + protected $roles; + + public function __construct(string $name, float $salary) + { + $this->name = $name; + $this->salary = $salary; + } + + public function getName(): string + { + return $this->name; + } + + public function setSalary(float $salary) + { + $this->salary = $salary; + } + + public function getSalary(): float + { + return $this->salary; + } + + public function getRoles(): array + { + return $this->roles; + } +} + +class Designer implements Employee +{ + protected $salary; + protected $name; + protected $roles; + + public function __construct(string $name, float $salary) + { + $this->name = $name; + $this->salary = $salary; + } + + public function getName(): string + { + return $this->name; + } + + public function setSalary(float $salary) + { + $this->salary = $salary; + } + + public function getSalary(): float + { + return $this->salary; + } + + public function getRoles(): array + { + return $this->roles; + } +} +``` + +Then we have an organization which consists of several different types of employees + +```php +class Organization +{ + protected $employees; + + public function addEmployee(Employee $employee) + { + $this->employees[] = $employee; + } + + public function getNetSalaries(): float + { + $netSalary = 0; + + foreach ($this->employees as $employee) { + $netSalary += $employee->getSalary(); + } + + return $netSalary; + } +} +``` + +And then it can be used as + +```php +// Prepare the employees +$john = new Developer('John Doe', 12000); +$jane = new Designer('Jane Doe', 15000); + +// Add them to organization +$organization = new Organization(); +$organization->addEmployee($john); +$organization->addEmployee($jane); -## Emphasis -```markdown -Emphasis, aka italics, with *asterisks* or _underscores_. -Strong emphasis, aka bold, with **asterisks** or __underscores__. -Combined emphasis with **asterisks and _underscores_**. -Strikethrough uses two tildes. ~~Scratch this.~~ +echo "Net salaries: " . $organization->getNetSalaries(); // Net Salaries: 27000 ``` -Emphasis, aka italics, with *asterisks* or _underscores_. -Strong emphasis, aka bold, with **asterisks** or __underscores__. +☕ Decorator +------------- -Combined emphasis with **asterisks and _underscores_**. +Real world example -Strikethrough uses two tildes. ~~Scratch this.~~ +> Imagine you run a car service shop offering multiple services. Now how do you calculate the bill to be charged? You pick one service and dynamically keep adding to it the prices for the provided services till you get the final cost. Here each type of service is a decorator. -## Lists -(In this example, leading and trailing spaces are shown with with dots: ⋅) +In plain words +> Decorator pattern lets you dynamically change the behavior of an object at run time by wrapping them in an object of a decorator class. -```markdown -1. First ordered list item -2. Another item -⋅⋅* Unordered sub-list. -1. Actual numbers don't matter, just that it's a number -⋅⋅1. Ordered sub-list -4. And another item. +Wikipedia says +> In object-oriented programming, the decorator pattern is a design pattern that allows behavior to be added to an individual object, either statically or dynamically, without affecting the behavior of other objects from the same class. The decorator pattern is often useful for adhering to the Single Responsibility Principle, as it allows functionality to be divided between classes with unique areas of concern. -⋅⋅⋅You can have properly indented paragraphs within list items. Notice the blank line above, and the leading spaces (at least one, but we'll use three here to also align the raw Markdown). +**Programmatic Example** -⋅⋅⋅To have a line break without a paragraph, you will need to use two trailing spaces.⋅⋅ -⋅⋅⋅Note that this line is separate, but within the same paragraph.⋅⋅ -⋅⋅⋅(This is contrary to the typical GFM line break behaviour, where trailing spaces are not required.) +Lets take coffee for example. First of all we have a simple coffee implementing the coffee interface -* Unordered list can use asterisks -- Or minuses -+ Or pluses +```php +interface Coffee +{ + public function getCost(); + public function getDescription(); +} + +class SimpleCoffee implements Coffee +{ + public function getCost() + { + return 10; + } + + public function getDescription() + { + return 'Simple coffee'; + } +} +``` +We want to make the code extensible to allow options to modify it if required. Lets make some add-ons (decorators) +```php +class MilkCoffee implements Coffee +{ + protected $coffee; + + public function __construct(Coffee $coffee) + { + $this->coffee = $coffee; + } + + public function getCost() + { + return $this->coffee->getCost() + 2; + } + + public function getDescription() + { + return $this->coffee->getDescription() . ', milk'; + } +} + +class WhipCoffee implements Coffee +{ + protected $coffee; + + public function __construct(Coffee $coffee) + { + $this->coffee = $coffee; + } + + public function getCost() + { + return $this->coffee->getCost() + 5; + } + + public function getDescription() + { + return $this->coffee->getDescription() . ', whip'; + } +} + +class VanillaCoffee implements Coffee +{ + protected $coffee; + + public function __construct(Coffee $coffee) + { + $this->coffee = $coffee; + } + + public function getCost() + { + return $this->coffee->getCost() + 3; + } + + public function getDescription() + { + return $this->coffee->getDescription() . ', vanilla'; + } +} ``` -1. First ordered list item -2. Another item - * Unordered sub-list. -1. Actual numbers don't matter, just that it's a number - 1. Ordered sub-list -4. And another item. - You can have properly indented paragraphs within list items. Notice the blank line above, and the leading spaces (at least one, but we'll use three here to also align the raw Markdown). +Lets make a coffee now - To have a line break without a paragraph, you will need to use two trailing spaces.⋅⋅ - Note that this line is separate, but within the same paragraph.⋅⋅ - (This is contrary to the typical GFM line break behaviour, where trailing spaces are not required.) +```php +$someCoffee = new SimpleCoffee(); +echo $someCoffee->getCost(); // 10 +echo $someCoffee->getDescription(); // Simple Coffee -* Unordered list can use asterisks -- Or minuses -+ Or pluses +$someCoffee = new MilkCoffee($someCoffee); +echo $someCoffee->getCost(); // 12 +echo $someCoffee->getDescription(); // Simple Coffee, milk -## Links -There are two ways to create links. -```markdown -[I'm an inline-style link](https://www.google.com) +$someCoffee = new WhipCoffee($someCoffee); +echo $someCoffee->getCost(); // 17 +echo $someCoffee->getDescription(); // Simple Coffee, milk, whip -[I'm an inline-style link with title](https://www.google.com "Google's Homepage") +$someCoffee = new VanillaCoffee($someCoffee); +echo $someCoffee->getCost(); // 20 +echo $someCoffee->getDescription(); // Simple Coffee, milk, whip, vanilla +``` -[I'm a reference-style link][Arbitrary case-insensitive reference text] +📦 Facade +---------------- -[I'm a relative reference to a repository file](../blob/master/LICENSE) +Real world example +> How do you turn on the computer? "Hit the power button" you say! That is what you believe because you are using a simple interface that computer provides on the outside, internally it has to do a lot of stuff to make it happen. This simple interface to the complex subsystem is a facade. -[You can use numbers for reference-style link definitions][1] +In plain words +> Facade pattern provides a simplified interface to a complex subsystem. -Or leave it empty and use the [link text itself]. +Wikipedia says +> A facade is an object that provides a simplified interface to a larger body of code, such as a class library. -URLs and URLs in angle brackets will automatically get turned into links. -http://www.example.com or and sometimes -example.com (but not on Github, for example). +**Programmatic Example** -Some text to show that the reference links can follow later. +Taking our computer example from above. Here we have the computer class -[arbitrary case-insensitive reference text]: https://www.mozilla.org -[1]: http://slashdot.org -[link text itself]: http://www.reddit.com +```php +class Computer +{ + public function getElectricShock() + { + echo "Ouch!"; + } + + public function makeSound() + { + echo "Beep beep!"; + } + + public function showLoadingScreen() + { + echo "Loading.."; + } + + public function bam() + { + echo "Ready to be used!"; + } + + public function closeEverything() + { + echo "Bup bup bup buzzzz!"; + } + + public function sooth() + { + echo "Zzzzz"; + } + + public function pullCurrent() + { + echo "Haaah!"; + } +} +``` +Here we have the facade +```php +class ComputerFacade +{ + protected $computer; + + public function __construct(Computer $computer) + { + $this->computer = $computer; + } + + public function turnOn() + { + $this->computer->getElectricShock(); + $this->computer->makeSound(); + $this->computer->showLoadingScreen(); + $this->computer->bam(); + } + + public function turnOff() + { + $this->computer->closeEverything(); + $this->computer->pullCurrent(); + $this->computer->sooth(); + } +} ``` +Now to use the facade +```php +$computer = new ComputerFacade(new Computer()); +$computer->turnOn(); // Ouch! Beep beep! Loading.. Ready to be used! +$computer->turnOff(); // Bup bup buzzz! Haah! Zzzzz +``` + +🍃 Flyweight +--------- + +Real world example +> Did you ever have fresh tea from some stall? They often make more than one cup that you demanded and save the rest for any other customer so to save the resources e.g. gas etc. Flyweight pattern is all about that i.e. sharing. + +In plain words +> It is used to minimize memory usage or computational expenses by sharing as much as possible with similar objects. -[I'm an inline-style link](https://www.google.com) +Wikipedia says +> In computer programming, flyweight is a software design pattern. A flyweight is an object that minimizes memory use by sharing as much data as possible with other similar objects; it is a way to use objects in large numbers when a simple repeated representation would use an unacceptable amount of memory. + +**Programmatic example** + +Translating our tea example from above. First of all we have tea types and tea maker + +```php +// Anything that will be cached is flyweight. +// Types of tea here will be flyweights. +class KarakTea +{ +} + +// Acts as a factory and saves the tea +class TeaMaker +{ + protected $availableTea = []; + + public function make($preference) + { + if (empty($this->availableTea[$preference])) { + $this->availableTea[$preference] = new KarakTea(); + } + + return $this->availableTea[$preference]; + } +} +``` -[I'm an inline-style link with title](https://www.google.com "Google's Homepage") +Then we have the `TeaShop` which takes orders and serves them -[I'm a reference-style link][Arbitrary case-insensitive reference text] +```php +class TeaShop +{ + protected $orders; + protected $teaMaker; + + public function __construct(TeaMaker $teaMaker) + { + $this->teaMaker = $teaMaker; + } + + public function takeOrder(string $teaType, int $table) + { + $this->orders[$table] = $this->teaMaker->make($teaType); + } + + public function serve() + { + foreach ($this->orders as $table => $tea) { + echo "Serving tea to table# " . $table; + } + } +} +``` +And it can be used as below -[I'm a relative reference to a repository file](../blob/master/LICENSE) +```php +$teaMaker = new TeaMaker(); +$shop = new TeaShop($teaMaker); -[You can use numbers for reference-style link definitions][1] +$shop->takeOrder('less sugar', 1); +$shop->takeOrder('more milk', 2); +$shop->takeOrder('without sugar', 5); -Or leave it empty and use the [link text itself]. +$shop->serve(); +// Serving tea to table# 1 +// Serving tea to table# 2 +// Serving tea to table# 5 +``` -URLs and URLs in angle brackets will automatically get turned into links. -http://www.example.com or and sometimes -example.com (but not on Github, for example). +## 🎱 Proxy +Real world example +> Have you ever used an access card to go through a door? There are multiple options to open that door i.e. it can be opened either using access card or by pressing a button that bypasses the security. The door's main functionality is to open but there is a proxy added on top of it to add some functionality. Let me better explain it using the code example below. -Some text to show that the reference links can follow later. +In plain words +> Using the proxy pattern, a class represents the functionality of another class. -[arbitrary case-insensitive reference text]: https://www.mozilla.org -[1]: http://slashdot.org -[link text itself]: http://www.reddit.com +Wikipedia says +> A proxy, in its most general form, is a class functioning as an interface to something else. A proxy is a wrapper or agent object that is being called by the client to access the real serving object behind the scenes. Use of the proxy can simply be forwarding to the real object, or can provide additional logic. In the proxy extra functionality can be provided, for example caching when operations on the real object are resource intensive, or checking preconditions before operations on the real object are invoked. -## Images -```markdown -Here's our logo (hover to see the title text): +**Programmatic Example** -Inline-style: -![alt text](https://github.com/adam-p/markdown-here/raw/master/src/common/images/icon48.png "Logo Title Text 1") +Taking our security door example from above. Firstly we have the door interface and an implementation of door -Reference-style: -![alt text][logo] +```php +interface Door +{ + public function open(); + public function close(); +} + +class LabDoor implements Door +{ + public function open() + { + echo "Opening lab door"; + } + + public function close() + { + echo "Closing the lab door"; + } +} +``` +Then we have a proxy to secure any doors that we want +```php +class SecuredDoor +{ + protected $door; + + public function __construct(Door $door) + { + $this->door = $door; + } + + public function open($password) + { + if ($this->authenticate($password)) { + $this->door->open(); + } else { + echo "Big no! It ain't possible."; + } + } + + public function authenticate($password) + { + return $password === '$ecr@t'; + } + + public function close() + { + $this->door->close(); + } +} +``` +And here is how it can be used +```php +$door = new SecuredDoor(new LabDoor()); +$door->open('invalid'); // Big no! It ain't possible. -[logo]: https://github.com/adam-p/markdown-here/raw/master/src/common/images/icon48.png "Logo Title Text 2" +$door->open('$ecr@t'); // Opening lab door +$door->close(); // Closing lab door ``` -Here's our logo (hover to see the title text): +Yet another example would be some sort of data-mapper implementation. For example, I recently made an ODM (Object Data Mapper) for MongoDB using this pattern where I wrote a proxy around mongo classes while utilizing the magic method `__call()`. All the method calls were proxied to the original mongo class and result retrieved was returned as it is but in case of `find` or `findOne` data was mapped to the required class objects and the object was returned instead of `Cursor`. -Inline-style: -![alt text](https://github.com/adam-p/markdown-here/raw/master/src/common/images/icon48.png "Logo Title Text 1") +## Behavioral Design Patterns -Reference-style: -![alt text][logo] +In plain words +> It is concerned with assignment of responsibilities between the objects. What makes them different from structural patterns is they don't just specify the structure but also outline the patterns for message passing/communication between them. Or in other words, they assist in answering "How to run a behavior in software component?" -[logo]: https://github.com/adam-p/markdown-here/raw/master/src/common/images/icon48.png "Logo Title Text 2" +Wikipedia says +> In software engineering, behavioral design patterns are design patterns that identify common communication patterns between objects and realize these patterns. By doing so, these patterns increase flexibility in carrying out this communication. -## Code and Syntax Highlighting +There are 7 types of 10 types of behavioral design patterns -Code blocks are part of the Markdown spec, but syntax highlighting isn't. However, many renderers -- like Github's and Markdown Here -- support syntax highlighting. Which languages are supported and how those language names should be written will vary from renderer to renderer. Markdown Here supports highlighting for dozens of languages (and not-really-languages, like diffs and HTTP headers); to see the complete list, and how to write the language names, see the highlight.js demo page. +* [Chain of Responsibility](#-chain-of-responsibility) +* [Command](#-command) +* [Iterator](#-iterator) +* [Mediator](#-mediator) +* [Memento](#-memento) +* [Observer](#-observer) +* [Visitor](#-visitor) +* [Strategy](#-strategy) +* [State](#-state) +* [Template Method](#-template-method) -```markdown -Inline `code` has `back-ticks around` it. +## 🔗 Chain of Responsibility + +Real world example +> For example, you have three payment methods (`A`, `B` and `C`) setup in your account; each having a different amount in it. `A` has 100 USD, `B` has 300 USD and `C` having 1000 USD and the preference for payments is chosen as `A` then `B` then `C`. You try to purchase something that is worth 210 USD. Using Chain of Responsibility, first of all account `A` will be checked if it can make the purchase, if yes purchase will be made and the chain will be broken. If not, request will move forward to account `B` checking for amount if yes chain will be broken otherwise the request will keep forwarding till it finds the suitable handler. Here `A`, `B` and `C` are links of the chain and the whole phenomenon is Chain of Responsibility. + +In plain words +> It helps building a chain of objects. Request enters from one end and keeps going from object to object till it finds the suitable handler. + +Wikipedia says +> In object-oriented design, the chain-of-responsibility pattern is a design pattern consisting of a source of command objects and a series of processing objects. Each processing object contains logic that defines the types of command objects that it can handle; the rest are passed to the next processing object in the chain. + +**Programmatic Example** + +Translating our account example above. First of all we have a base account having the logic for chaining the accounts together and some accounts + +```php +abstract class Account +{ + protected $successor; + protected $balance; + + public function setNext(Account $account) + { + $this->successor = $account; + } + + public function pay(float $amountToPay) + { + if ($this->canPay($amountToPay)) { + echo sprintf('Paid %s using %s' . PHP_EOL, $amountToPay, get_called_class()); + } elseif ($this->successor) { + echo sprintf('Cannot pay using %s. Proceeding ..' . PHP_EOL, get_called_class()); + $this->successor->pay($amountToPay); + } else { + throw new Exception('None of the accounts have enough balance'); + } + } + + public function canPay($amount): bool + { + return $this->balance >= $amount; + } +} + +class Bank extends Account +{ + protected $balance; + + public function __construct(float $balance) + { + $this->balance = $balance; + } +} + +class Paypal extends Account +{ + protected $balance; + + public function __construct(float $balance) + { + $this->balance = $balance; + } +} + +class Bitcoin extends Account +{ + protected $balance; + + public function __construct(float $balance) + { + $this->balance = $balance; + } +} ``` -Inline `code` has `back-ticks around` it. -Blocks of code are either fenced by lines with three back-ticks ```, or are indented with four spaces. I recommend only using the fenced code blocks -- they're easier and only they support syntax highlighting. +Now let's prepare the chain using the links defined above (i.e. Bank, Paypal, Bitcoin) -```markdown -```javascript -var s = "JavaScript syntax highlighting"; -alert(s); +```php +// Let's prepare a chain like below +// $bank->$paypal->$bitcoin +// +// First priority bank +// If bank can't pay then paypal +// If paypal can't pay then bit coin + +$bank = new Bank(100); // Bank with balance 100 +$paypal = new Paypal(200); // Paypal with balance 200 +$bitcoin = new Bitcoin(300); // Bitcoin with balance 300 + +$bank->setNext($paypal); +$paypal->setNext($bitcoin); + +// Let's try to pay using the first priority i.e. bank +$bank->pay(259); + +// Output will be +// ============== +// Cannot pay using bank. Proceeding .. +// Cannot pay using paypal. Proceeding ..: +// Paid 259 using Bitcoin! ``` - -```python -s = "Python syntax highlighting" -print s + +👮 Command +------- + +Real world example +> A generic example would be you ordering food at a restaurant. You (i.e. `Client`) ask the waiter (i.e. `Invoker`) to bring some food (i.e. `Command`) and waiter simply forwards the request to Chef (i.e. `Receiver`) who has the knowledge of what and how to cook. +> Another example would be you (i.e. `Client`) switching on (i.e. `Command`) the television (i.e. `Receiver`) using a remote control (`Invoker`). + +In plain words +> Allows you to encapsulate actions in objects. The key idea behind this pattern is to provide the means to decouple client from receiver. + +Wikipedia says +> In object-oriented programming, the command pattern is a behavioral design pattern in which an object is used to encapsulate all information needed to perform an action or trigger an event at a later time. This information includes the method name, the object that owns the method and values for the method parameters. + +**Programmatic Example** + +First of all we have the receiver that has the implementation of every action that could be performed +```php +// Receiver +class Bulb +{ + public function turnOn() + { + echo "Bulb has been lit"; + } + + public function turnOff() + { + echo "Darkness!"; + } +} ``` - +then we have an interface that each of the commands are going to implement and then we have a set of commands +```php +interface Command +{ + public function execute(); + public function undo(); + public function redo(); +} + +// Command +class TurnOn implements Command +{ + protected $bulb; + + public function __construct(Bulb $bulb) + { + $this->bulb = $bulb; + } + + public function execute() + { + $this->bulb->turnOn(); + } + + public function undo() + { + $this->bulb->turnOff(); + } + + public function redo() + { + $this->execute(); + } +} + +class TurnOff implements Command +{ + protected $bulb; + + public function __construct(Bulb $bulb) + { + $this->bulb = $bulb; + } + + public function execute() + { + $this->bulb->turnOff(); + } + + public function undo() + { + $this->bulb->turnOn(); + } + + public function redo() + { + $this->execute(); + } +} ``` -No language indicated, so no syntax highlighting. -But let's throw in a tag. +Then we have an `Invoker` with whom the client will interact to process any commands +```php +// Invoker +class RemoteControl +{ + public function submit(Command $command) + { + $command->execute(); + } +} ``` +Finally let's see how we can use it in our client +```php +$bulb = new Bulb(); + +$turnOn = new TurnOn($bulb); +$turnOff = new TurnOff($bulb); + +$remote = new RemoteControl(); +$remote->submit($turnOn); // Bulb has been lit! +$remote->submit($turnOff); // Darkness! ``` -```javascript -var s = "JavaScript syntax highlighting"; -alert(s); + +Command pattern can also be used to implement a transaction based system. Where you keep maintaining the history of commands as soon as you execute them. If the final command is successfully executed, all good otherwise just iterate through the history and keep executing the `undo` on all the executed commands. + +➿ Iterator +-------- + +Real world example +> An old radio set will be a good example of iterator, where user could start at some channel and then use next or previous buttons to go through the respective channels. Or take an example of MP3 player or a TV set where you could press the next and previous buttons to go through the consecutive channels or in other words they all provide an interface to iterate through the respective channels, songs or radio stations. + +In plain words +> It presents a way to access the elements of an object without exposing the underlying presentation. + +Wikipedia says +> In object-oriented programming, the iterator pattern is a design pattern in which an iterator is used to traverse a container and access the container's elements. The iterator pattern decouples algorithms from containers; in some cases, algorithms are necessarily container-specific and thus cannot be decoupled. + +**Programmatic example** + +In PHP it is quite easy to implement using SPL (Standard PHP Library). Translating our radio stations example from above. First of all we have `RadioStation` + +```php +class RadioStation +{ + protected $frequency; + + public function __construct(float $frequency) + { + $this->frequency = $frequency; + } + + public function getFrequency(): float + { + return $this->frequency; + } +} ``` - -```python -s = "Python syntax highlighting" -print s +Then we have our iterator + +```php +use Countable; +use Iterator; + +class StationList implements Countable, Iterator +{ + /** @var RadioStation[] $stations */ + protected $stations = []; + + /** @var int $counter */ + protected $counter; + + public function addStation(RadioStation $station) + { + $this->stations[] = $station; + } + + public function removeStation(RadioStation $toRemove) + { + $toRemoveFrequency = $toRemove->getFrequency(); + $this->stations = array_filter($this->stations, function (RadioStation $station) use ($toRemoveFrequency) { + return $station->getFrequency() !== $toRemoveFrequency; + }); + } + + public function count(): int + { + return count($this->stations); + } + + public function current(): RadioStation + { + return $this->stations[$this->counter]; + } + + public function key() + { + return $this->counter; + } + + public function next() + { + $this->counter++; + } + + public function rewind() + { + $this->counter = 0; + } + + public function valid(): bool + { + return isset($this->stations[$this->counter]); + } +} ``` - +And then it can be used as +```php +$stationList = new StationList(); + +$stationList->addStation(new RadioStation(89)); +$stationList->addStation(new RadioStation(101)); +$stationList->addStation(new RadioStation(102)); +$stationList->addStation(new RadioStation(103.2)); + +foreach($stationList as $station) { + echo $station->getFrequency() . PHP_EOL; +} + +$stationList->removeStation(new RadioStation(89)); // Will remove station 89 ``` -No language indicated, so no syntax highlighting. -But let's throw in a tag. + +👽 Mediator +======== + +Real world example +> A general example would be when you talk to someone on your mobile phone, there is a network provider sitting between you and them and your conversation goes through it instead of being directly sent. In this case network provider is mediator. + +In plain words +> Mediator pattern adds a third party object (called mediator) to control the interaction between two objects (called colleagues). It helps reduce the coupling between the classes communicating with each other. Because now they don't need to have the knowledge of each other's implementation. + +Wikipedia says +> In software engineering, the mediator pattern defines an object that encapsulates how a set of objects interact. This pattern is considered to be a behavioral pattern due to the way it can alter the program's running behavior. + +**Programmatic Example** + +Here is the simplest example of a chat room (i.e. mediator) with users (i.e. colleagues) sending messages to each other. + +First of all, we have the mediator i.e. the chat room + +```php +interface ChatRoomMediator +{ + public function showMessage(User $user, string $message); +} + +// Mediator +class ChatRoom implements ChatRoomMediator +{ + public function showMessage(User $user, string $message) + { + $time = date('M d, y H:i'); + $sender = $user->getName(); + + echo $time . '[' . $sender . ']:' . $message; + } +} ``` -## Tables +Then we have our users i.e. colleagues +```php +class User { + protected $name; + protected $chatMediator; + + public function __construct(string $name, ChatRoomMediator $chatMediator) { + $this->name = $name; + $this->chatMediator = $chatMediator; + } + + public function getName() { + return $this->name; + } + + public function send($message) { + $this->chatMediator->showMessage($this, $message); + } +} +``` +And the usage +```php +$mediator = new ChatRoom(); -Tables aren't part of the core Markdown spec, but they are part of GFM and Markdown Here supports them. They are an easy way of adding tables to your email -- a task that would otherwise require copy-pasting from another application. +$john = new User('John Doe', $mediator); +$jane = new User('Jane Doe', $mediator); -```markdown -Colons can be used to align columns. +$john->send('Hi there!'); +$jane->send('Hey!'); -| Tables | Are | Cool | -| ------------- |:-------------:| -----:| -| col 3 is | right-aligned | $1600 | -| col 2 is | centered | $12 | -| zebra stripes | are neat | $1 | +// Output will be +// Feb 14, 10:58 [John]: Hi there! +// Feb 14, 10:58 [Jane]: Hey! +``` + +💾 Memento +------- +Real world example +> Take the example of calculator (i.e. originator), where whenever you perform some calculation the last calculation is saved in memory (i.e. memento) so that you can get back to it and maybe get it restored using some action buttons (i.e. caretaker). + +In plain words +> Memento pattern is about capturing and storing the current state of an object in a manner that it can be restored later on in a smooth manner. + +Wikipedia says +> The memento pattern is a software design pattern that provides the ability to restore an object to its previous state (undo via rollback). + +Usually useful when you need to provide some sort of undo functionality. -There must be at least 3 dashes separating each header cell. -The outer pipes (|) are optional, and you don't need to make the -raw Markdown line up prettily. You can also use inline Markdown. +**Programmatic Example** -Markdown | Less | Pretty ---- | --- | --- -*Still* | `renders` | **nicely** -1 | 2 | 3 +Lets take an example of text editor which keeps saving the state from time to time and that you can restore if you want. + +First of all we have our memento object that will be able to hold the editor state + +```php +class EditorMemento +{ + protected $content; + + public function __construct(string $content) + { + $this->content = $content; + } + + public function getContent() + { + return $this->content; + } +} ``` -Colons can be used to align columns. +Then we have our editor i.e. originator that is going to use memento object -| Tables | Are | Cool | -| ------------- |:-------------:| -----:| -| col 3 is | right-aligned | $1600 | -| col 2 is | centered | $12 | -| zebra stripes | are neat | $1 | +```php +class Editor +{ + protected $content = ''; + + public function type(string $words) + { + $this->content = $this->content . ' ' . $words; + } + + public function getContent() + { + return $this->content; + } + + public function save() + { + return new EditorMemento($this->content); + } + + public function restore(EditorMemento $memento) + { + $this->content = $memento->getContent(); + } +} +``` -There must be at least 3 dashes separating each header cell. -The outer pipes (|) are optional, and you don't need to make the -raw Markdown line up prettily. You can also use inline Markdown. +And then it can be used as -Markdown | Less | Pretty ---- | --- | --- -*Still* | `renders` | **nicely** -1 | 2 | 3 +```php +$editor = new Editor(); + +// Type some stuff +$editor->type('This is the first sentence.'); +$editor->type('This is second.'); + +// Save the state to restore to : This is the first sentence. This is second. +$saved = $editor->save(); -## Blockquotes +// Type some more +$editor->type('And this is third.'); -```markdown -> Blockquotes are very handy in email to emulate reply text. -> This line is part of the same quote. +// Output: Content before Saving +echo $editor->getContent(); // This is the first sentence. This is second. And this is third. -Quote break. +// Restoring to last saved state +$editor->restore($saved); -> This is a very long line that will still be quoted properly when it wraps. Oh boy let's keep writing to make sure this is long enough to actually wrap for everyone. Oh, you can *put* **Markdown** into a blockquote. +$editor->getContent(); // This is the first sentence. This is second. ``` -> Blockquotes are very handy in email to emulate reply text. -> This line is part of the same quote. -Quote break. +😎 Observer +-------- +Real world example +> A good example would be the job seekers where they subscribe to some job posting site and they are notified whenever there is a matching job opportunity. -> This is a very long line that will still be quoted properly when it wraps. Oh boy let's keep writing to make sure this is long enough to actually wrap for everyone. Oh, you can *put* **Markdown** into a blockquote. +In plain words +> Defines a dependency between objects so that whenever an object changes its state, all its dependents are notified. -## Inline HTML -You can also use raw HTML in your Markdown, and it'll mostly work pretty well. +Wikipedia says +> The observer pattern is a software design pattern in which an object, called the subject, maintains a list of its dependents, called observers, and notifies them automatically of any state changes, usually by calling one of their methods. -```markdown -
-
Definition list
-
Is something people use sometimes.
+**Programmatic example** -
Markdown in HTML
-
Does *not* work **very** well. Use HTML tags.
-
+Translating our example from above. First of all we have job seekers that need to be notified for a job posting +```php +class JobPost +{ + protected $title; + + public function __construct(string $title) + { + $this->title = $title; + } + + public function getTitle() + { + return $this->title; + } +} + +class JobSeeker implements Observer +{ + protected $name; + + public function __construct(string $name) + { + $this->name = $name; + } + + public function onJobPosted(JobPost $job) + { + // Do something with the job posting + echo 'Hi ' . $this->name . '! New job posted: '. $job->getTitle(); + } +} ``` -
-
Definition list
-
Is something people use sometimes.
+Then we have our job postings to which the job seekers will subscribe +```php +class EmploymentAgency implements Observable +{ + protected $observers = []; + + protected function notify(JobPost $jobPosting) + { + foreach ($this->observers as $observer) { + $observer->onJobPosted($jobPosting); + } + } + + public function attach(Observer $observer) + { + $this->observers[] = $observer; + } + + public function addJob(JobPost $jobPosting) + { + $this->notify($jobPosting); + } +} +``` +Then it can be used as +```php +// Create subscribers +$johnDoe = new JobSeeker('John Doe'); +$janeDoe = new JobSeeker('Jane Doe'); -
Markdown in HTML
-
Does *not* work **very** well. Use HTML tags.
-
+// Create publisher and attach subscribers +$jobPostings = new EmploymentAgency(); +$jobPostings->attach($johnDoe); +$jobPostings->attach($janeDoe); -## Horizontal Rule +// Add a new job and see if subscribers get notified +$jobPostings->addJob(new JobPost('Software Engineer')); -```markdown -Three or more... ---- -Hyphens -*** -Asterisks -___ -Underscores +// Output +// Hi John Doe! New job posted: Software Engineer +// Hi Jane Doe! New job posted: Software Engineer ``` -Three or more... +🏃 Visitor +------- +Real world example +> Consider someone visiting Dubai. They just need a way (i.e. visa) to enter Dubai. After arrival, they can come and visit any place in Dubai on their own without having to ask for permission or to do some leg work in order to visit any place here; just let them know of a place and they can visit it. Visitor pattern lets you do just that, it helps you add places to visit so that they can visit as much as they can without having to do any legwork. ---- +In plain words +> Visitor pattern lets you add further operations to objects without having to modify them. -Hyphens +Wikipedia says +> In object-oriented programming and software engineering, the visitor design pattern is a way of separating an algorithm from an object structure on which it operates. A practical result of this separation is the ability to add new operations to existing object structures without modifying those structures. It is one way to follow the open/closed principle. -*** +**Programmatic example** -Asterisks +Let's take an example of a zoo simulation where we have several different kinds of animals and we have to make them Sound. Let's translate this using visitor pattern -___ +```php +// Visitee +interface Animal +{ + public function accept(AnimalOperation $operation); +} + +// Visitor +interface AnimalOperation +{ + public function visitMonkey(Monkey $monkey); + public function visitLion(Lion $lion); + public function visitDolphin(Dolphin $dolphin); +} +``` +Then we have our implementations for the animals +```php +class Monkey implements Animal +{ + public function shout() + { + echo 'Ooh oo aa aa!'; + } + + public function accept(AnimalOperation $operation) + { + $operation->visitMonkey($this); + } +} + +class Lion implements Animal +{ + public function roar() + { + echo 'Roaaar!'; + } + + public function accept(AnimalOperation $operation) + { + $operation->visitLion($this); + } +} + +class Dolphin implements Animal +{ + public function speak() + { + echo 'Tuut tuttu tuutt!'; + } + + public function accept(AnimalOperation $operation) + { + $operation->visitDolphin($this); + } +} +``` +Let's implement our visitor +```php +class Speak implements AnimalOperation +{ + public function visitMonkey(Monkey $monkey) + { + $monkey->shout(); + } + + public function visitLion(Lion $lion) + { + $lion->roar(); + } + + public function visitDolphin(Dolphin $dolphin) + { + $dolphin->speak(); + } +} +``` -Underscores +And then it can be used as +```php +$monkey = new Monkey(); +$lion = new Lion(); +$dolphin = new Dolphin(); -## Line Breaks +$speak = new Speak(); -My basic recommendation for learning how line breaks work is to experiment and discover -- hit `` once (i.e., insert one newline), then hit it twice (i.e., insert two newlines), see what happens. You'll soon learn to get what you want. "Markdown Toggle" is your friend. +$monkey->accept($speak); // Ooh oo aa aa! +$lion->accept($speak); // Roaaar! +$dolphin->accept($speak); // Tuut tutt tuutt! +``` +We could have done this simply by having an inheritance hierarchy for the animals but then we would have to modify the animals whenever we would have to add new actions to animals. But now we will not have to change them. For example, let's say we are asked to add the jump behavior to the animals, we can simply add that by creating a new visitor i.e. -Here are some things to try out: +```php +class Jump implements AnimalOperation +{ + public function visitMonkey(Monkey $monkey) + { + echo 'Jumped 20 feet high! on to the tree!'; + } + + public function visitLion(Lion $lion) + { + echo 'Jumped 7 feet! Back on the ground!'; + } + + public function visitDolphin(Dolphin $dolphin) + { + echo 'Walked on water a little and disappeared'; + } +} +``` +And for the usage +```php +$jump = new Jump(); -```markdown -Here's a line for us to start with. +$monkey->accept($speak); // Ooh oo aa aa! +$monkey->accept($jump); // Jumped 20 feet high! on to the tree! -This line is separated from the one above by two newlines, so it will be a *separate paragraph*. +$lion->accept($speak); // Roaaar! +$lion->accept($jump); // Jumped 7 feet! Back on the ground! -This line is also a separate paragraph, but... -This line is only separated by a single newline, so it's a separate line in the *same paragraph*. +$dolphin->accept($speak); // Tuut tutt tuutt! +$dolphin->accept($jump); // Walked on water a little and disappeared ``` -Here's a line for us to start with. -This line is separated from the one above by two newlines, so it will be a separate paragraph. +💡 Strategy +-------- + +Real world example +> Consider the example of sorting, we implemented bubble sort but the data started to grow and bubble sort started getting very slow. In order to tackle this we implemented Quick sort. But now although the quick sort algorithm was doing better for large datasets, it was very slow for smaller datasets. In order to handle this we implemented a strategy where for small datasets, bubble sort will be used and for larger, quick sort. -This line is also begins a separate paragraph, but... -This line is only separated by a single newline, so it's a separate line in the same paragraph. +In plain words +> Strategy pattern allows you to switch the algorithm or strategy based upon the situation. -(Technical note: Markdown Here uses GFM line breaks, so there's no need to use MD's two-space line breaks.) +Wikipedia says +> In computer programming, the strategy pattern (also known as the policy pattern) is a behavioural software design pattern that enables an algorithm's behavior to be selected at runtime. + +**Programmatic example** + +Translating our example from above. First of all we have our strategy interface and different strategy implementations + +```php +interface SortStrategy +{ + public function sort(array $dataset): array; +} + +class BubbleSortStrategy implements SortStrategy +{ + public function sort(array $dataset): array + { + echo "Sorting using bubble sort"; + + // Do sorting + return $dataset; + } +} + +class QuickSortStrategy implements SortStrategy +{ + public function sort(array $dataset): array + { + echo "Sorting using quick sort"; + + // Do sorting + return $dataset; + } +} +``` + +And then we have our client that is going to use any strategy +```php +class Sorter +{ + protected $sorter; + + public function __construct(SortStrategy $sorter) + { + $this->sorter = $sorter; + } + + public function sort(array $dataset): array + { + return $this->sorter->sort($dataset); + } +} +``` +And it can be used as +```php +$dataset = [1, 5, 4, 3, 2, 8]; -## YouTube Videos +$sorter = new Sorter(new BubbleSortStrategy()); +$sorter->sort($dataset); // Output : Sorting using bubble sort -They can't be added directly but you can add an image with a link to the video like this: +$sorter = new Sorter(new QuickSortStrategy()); +$sorter->sort($dataset); // Output : Sorting using quick sort +``` + +💢 State +----- +Real world example +> Imagine you are using some drawing application, you choose the paint brush to draw. Now the brush changes its behavior based on the selected color i.e. if you have chosen red color it will draw in red, if blue then it will be in blue etc. + +In plain words +> It lets you change the behavior of a class when the state changes. + +Wikipedia says +> The state pattern is a behavioral software design pattern that implements a state machine in an object-oriented way. With the state pattern, a state machine is implemented by implementing each individual state as a derived class of the state pattern interface, and implementing state transitions by invoking methods defined by the pattern's superclass. +> The state pattern can be interpreted as a strategy pattern which is able to switch the current strategy through invocations of methods defined in the pattern's interface. + +**Programmatic example** + +Let's take an example of text editor, it lets you change the state of text that is typed i.e. if you have selected bold, it starts writing in bold, if italic then in italics etc. + +First of all we have our state interface and some state implementations + +```php +interface WritingState +{ + public function write(string $words); +} + +class UpperCase implements WritingState +{ + public function write(string $words) + { + echo strtoupper($words); + } +} + +class LowerCase implements WritingState +{ + public function write(string $words) + { + echo strtolower($words); + } +} + +class DefaultText implements WritingState +{ + public function write(string $words) + { + echo $words; + } +} +``` +Then we have our editor +```php +class TextEditor +{ + protected $state; + + public function __construct(WritingState $state) + { + $this->state = $state; + } + + public function setState(WritingState $state) + { + $this->state = $state; + } + + public function type(string $words) + { + $this->state->write($words); + } +} +``` +And then it can be used as +```php +$editor = new TextEditor(new DefaultText()); + +$editor->type('First line'); + +$editor->setState(new UpperCase()); + +$editor->type('Second line'); +$editor->type('Third line'); + +$editor->setState(new LowerCase()); + +$editor->type('Fourth line'); +$editor->type('Fifth line'); + +// Output: +// First line +// SECOND LINE +// THIRD LINE +// fourth line +// fifth line +``` + +📒 Template Method +--------------- + +Real world example +> Suppose we are getting some house built. The steps for building might look like +> - Prepare the base of house +> - Build the walls +> - Add roof +> - Add other floors + +> The order of these steps could never be changed i.e. you can't build the roof before building the walls etc but each of the steps could be modified for example walls can be made of wood or polyester or stone. + +In plain words +> Template method defines the skeleton of how a certain algorithm could be performed, but defers the implementation of those steps to the children classes. + +Wikipedia says +> In software engineering, the template method pattern is a behavioral design pattern that defines the program skeleton of an algorithm in an operation, deferring some steps to subclasses. It lets one redefine certain steps of an algorithm without changing the algorithm's structure. + +**Programmatic Example** + +Imagine we have a build tool that helps us test, lint, build, generate build reports (i.e. code coverage reports, linting report etc) and deploy our app on the test server. + +First of all we have our base class that specifies the skeleton for the build algorithm +```php +abstract class Builder +{ + + // Template method + final public function build() + { + $this->test(); + $this->lint(); + $this->assemble(); + $this->deploy(); + } + + abstract public function test(); + abstract public function lint(); + abstract public function assemble(); + abstract public function deploy(); +} +``` + +Then we can have our implementations + +```php +class AndroidBuilder extends Builder +{ + public function test() + { + echo 'Running android tests'; + } + + public function lint() + { + echo 'Linting the android code'; + } + + public function assemble() + { + echo 'Assembling the android build'; + } + + public function deploy() + { + echo 'Deploying android build to server'; + } +} + +class IosBuilder extends Builder +{ + public function test() + { + echo 'Running ios tests'; + } + + public function lint() + { + echo 'Linting the ios code'; + } + + public function assemble() + { + echo 'Assembling the ios build'; + } + + public function deploy() + { + echo 'Deploying ios build to server'; + } +} +``` +And then it can be used as + +```php +$androidBuilder = new AndroidBuilder(); +$androidBuilder->build(); + +// Output: +// Running android tests +// Linting the android code +// Assembling the android build +// Deploying android build to server + +$iosBuilder = new IosBuilder(); +$iosBuilder->build(); + +// Output: +// Running ios tests +// Linting the ios code +// Assembling the ios build +// Deploying ios build to server +``` -```markdown - +## Wrap Up Folks -[![IMAGE ALT TEXT HERE](http://img.youtube.com/vi/YOUTUBE_VIDEO_ID_HERE/0.jpg)](http://www.youtube.com/watch?v=YOUTUBE_VIDEO_ID_HERE) -``` \ No newline at end of file +And that about wraps it up. I will continue to improve this, so you might want to watch/star this repository to revisit. Also, I have plans on writing the same about the architectural patterns, stay tuned for it. \ No newline at end of file diff --git a/layouts/default/global.scss b/layouts/default/global.scss index 9420d9851..96cfa84ef 100644 --- a/layouts/default/global.scss +++ b/layouts/default/global.scss @@ -5,6 +5,10 @@ max-width: 800px; } +ul li, ol li { + margin-bottom: 7px; +} + .border-top { border-top: 1px solid #eaeaea; } diff --git a/pages/guides/[guide].js b/pages/guides/[guide].js index 9089df1d8..2ddd20254 100644 --- a/pages/guides/[guide].js +++ b/pages/guides/[guide].js @@ -18,7 +18,9 @@ const Guide = ({ guide }) => { Guide.getInitialProps = serverOnlyProps(({ req }) => { // Remove URL chunk to make it a slug e.g. /guides/some-guide-item to become `some-guide-item - const slug = req.url.replace(/^\/*?guides\/*?/, '/').replace(/\/*$/, ''); + const slug = req.url + .replace(/^\/*?guides\/*?/, '/') + .replace(/\/*$/, ''); return { slug, diff --git a/pages/privacy.js b/pages/privacy.js index 534fa3229..9c424edbe 100644 --- a/pages/privacy.js +++ b/pages/privacy.js @@ -7,7 +7,7 @@ const Privacy = () => ( -
+

Privacy Policy

By using or accessing the Services in any manner, you acknowledge that you accept the practices and policies outlined in this Privacy Policy, and you hereby consent that we will collect, use, and share your information in the following ways. Remember that your use of roadmap.sh’s Services is at all times subject to the ( -