Typescript design patterns for SharePoint Framework Part 3 – Builder

Back to previous page

Typescript design patterns for SharePoint Framework Part 3 – Builder

Builder pattern builds a complex object using simple objects and using a step by step approach. This type of design pattern comes under creational pattern as this pattern provides one of the best ways to create an object.

A Builder class builds the final object step by step. This builder is independent of other objects.

For this pattern, we have taken an existing example https://www.tutorialspoint.com/designpattern/builderpattern.htm and translated it to Typescript. Data Access implementation details are left to the reader.

The idea on this example is to show how you can build a Complex object from single objects, a Meal from (burger, fries, soda). Suppose you have a Sharepoint List for Burgers, another list for Sodas, another one for desserts, and you want to build different Meals (Menus), so this would be a perfect sample.

UML

This is more or less the diagram of the classes were are coding below.

Diagram of coding

Project structure

We have created a component with all the needed class, lets discuss them one by one.

Components

IItem.ts

This interface is the one that every item needs to implement to come with a common structure for all products.

Ipacking.ts

This interface is the one that all packaging will use, eg: Bottle, Wrapper, etc, its the way to define common behavior and properties for each product packing.

Bottle.ts

This is one type of packing, it implements the IPacking interface.

Wrapper.ts

Burger.ts

This is an abstract class from which all our specific burgers need to implement, its there to have a common structure for name, packing and pricing.

ChickenBurger.ts

VegBurger.ts

Colddrink.ts

Coke.ts

Pepsi.ts

Meal.ts

This class will represent a full meal behavior, here we have the methods to add items to the Meal, get the cost and show the items belonging to the Meal.

MealBuilder.ts

Mealbuilder its just the class that uses the classes explained before to construct any type of meal, for sake of simplicity, we created only 2 meals here.

ITypescriptDesignPatterns03BuilderProps.ts

We created a selectedMeal string property to take the decision on which meal to build.

TypescriptDesignPatterns03Builder.tsx

This is our component class, here we have a constructor and in the constructor we call the setMeal method, with the selected meal option as a parameter, and then we can define which meal to prepare. Once the meal is prepared, in the render method we can use the showItems method

And finally

TypescriptDesignPatterns03BuilderWebPart.ts

Here what we do is just to use our component and sending the parameter of the selected meal, which is just a normal dropdown with 2 hardcoded values.

Data source implementation is left to the reader.
This project is in my github repo: https://github.com/levalencia/TypescriptDesignPatterns03-Builder

About the Author: 

Luis Valencia, CTO at Software Estrategico, Medellin, Colombia, independent blogger and still a coder, after 17 years of experience in the field and regardless of my position, and mostly with SharePoint/Office Products, I still love to code, open Visual Studio and bring solutions to users and to the community its what makes me wake up every morning.

Feel free to contact me via twitter direct messages, @levalencia

Reference: 

Valencia, L (2018). Typescript design patterns for SharePoint Framework Part 3 – Builder. Available at: http://www.luisevalencia.com/2018/03/19/typescript-design-patterns-for-sharepoint-framework-part-3-builder/ [Accessed 12 November 2018]

Share this on...

Leave a Reply

Back to previous page

ESPC Community Login

ESPC Community Login

  • Already a member? Simply Login

  • Sign up for ESPC community membership, to access exclusive member-only content from the SharePoint, Office 365 & Azure community and the latest conference offers and announcements.
    (All Fields Required)
  • ** Verification Email will be sent **
    Check your Spam/Junk/Clutter folder
  • This field is for validation purposes and should be left unchanged.
Scroll to top
[gravityform id="97" title="false" description="false" ajax="true" tabindex="50"]
  • This field is for validation purposes and should be left unchanged.