If there is a complex web part to be implemented (for eg. with over 5000 lines of code), then the important question to ask is how to distribute the implementation logic, so it could be better maintained. From a technical architecture point of view, better readability and efficiency, the react components provide a suitable solution for it.
Another important consideration for this is to increase performance of the control during build and debugging. From experience, if a control’s logic goes beyond 5000 lines of code then the build performance decreases drastically, it takes about 30 secs or more to build and another 30 secs or more to ready the control for debugging.
Thus, the important question is how to plan and implement it. In this blog, we will look at these topics.
Scoping and Implementation plan:
It is advisable to start planning for it as soon as possible before the development cycle so to prevent any rework. Generally start with the solution planning steps at start of a project. The most important point is to define and divide the requirements into independent and dependant control requirements. An independent control will allow the logic to be reused across other components and increase efficiency.
From a performance point of view, if there is more than 5000 lines of code and more than 20 controls in the page, the gulp compile and serve takes too long, generally 30 secs or more, my patience runs out in like secs 🙂
For scoping and implementation, consider the below.
1. Think controls not pages – think of controls like reusable functions which could be reused in many pages, so the functionality can be replicated.
2. Divide business logic into isolated independent components – design the components with reusability in mind but isolated from each other in functionality to provide less dependancy code.
3. Share information across controls using properties – use properties of React components to send information to the controls
4. Identify isolated components in a page – determine the components that could be created for the page providing flexibility and ease of build. If there are too many components then switching between components might add to page performance.
5. Allow passing styling and context information to the sub component – a very important consideration for the sub component is to allow the styling the child component. Since the sub component might have it’s own control, the best way to allow styling is to pass a class or styling information to the sub component.
6. Get data out of the child control – after the child control has performed it’s requirement, the result(s) needs to be passed to the master component so it could be reused. This could be done by method override to pass values out of the control.
Implementation Steps
Before starting the implementation, it is important to plan on the above scoping points and divide the master component into isolated components that will have their own logic and page lifecycle methods. Next, is to implement the individual component logic and then finally embed the child control into the master component.
- Divide the logic of master component into sub-components that could be build into separate files
- Create .tsx files for each of the component. Add properties in the sub component to receive data from the master component. The subcomponent will act as any other component when built.
Note: Pass the page context from Master to child in case if you are using SharePoint list or libraries in the component. - Use page life cycle method to initialize the sub-component and values. For more information, please check the blog here.
- In order to pass values outside the child control, use an export method and override that method in the master component.
- After the child component is created, now add the control into the master control in the render method. Pass any value to the subcomponent using the properties.
- Pass styling information to the sub component as needed.
- In order to get values from the child control, override a method from Child component and set the output values to local values of the master component
- After the above steps are done, we will have a child component implemented which could be reused across multiple master components
Below is the example code for Child and Master Components for reference purposes.
Child Component
Master Component
Conclusion
In this blog we saw, how we could reuse or divide component logic across multiple components using Master and Child component logic as described above. Even it might take some time setting this up but the greatest advantage is reusability and performance of the code that will benefit long term in managing the code better.
Happy Coding!!!