When developing for different platforms, the most common problem we have to face is sharing the common parts of a component while providing different implementations for details that are platform-specific. We will now explore some of the principles and the patterns to use when facing this challenge.
The most simple and intuitive technique for providing different implementations based on the host platform is to dynamically branch our code. This requires that we have a mechanism to recognize at runtime the host platform and then switch dynamically the implementation with an if…else statement. Some generic approaches involve checking global variables that are available only on Node.js or only in the browser. For example, we can check the existence of the window global:
if(typeof window !== "undefined" && window.document) {
//client side code
console.log('Hey browser!');
} else {
//Node.js code...