You constantly need to be aware of content changes that you need to make. Just because you are reusing a component, it doesn’t mean content is going to be the same. If you were building out a website and wanted to use the same reusable button, then the text of the button is going to be different. It might not matter so much for smaller changes but it can get tricky when changing things on a larger scale, even if they happen to share the same functionality.
If you look at Netflix as an example, when you select a movie it takes you to a separate UI screen where the information for that movie is displayed. This is exactly the same UI every time; the only thing that changes each time is the actual content.
When it comes to styling, you might have separate style folders inside your component folder. This would contain the styles for each company that you are building for. • styles - company 1
- company 2 - company 3
Of course, this is only most likely to apply if you have several websites for one brand. If you were building out a brand new website, then you would only need one set of styles. Try to keep this approach consistent for each project you build out, that way you only need to change the styles themselves rather than the class types.
Sharing your component
The best way for applications to install your components is through NPM, so make sure they’re all published there and are all versioned – major, minor, etc. All future projects that want to use the component can run npm install.
Before publishing, make sure you go to your component folder and check that package.json is up to date, with attributes like name, description and author. Remember that you are going to need to create an account if you don’t have one already. You can do this at http://npmjs.
com/. Ensure that you keep your NPM registry private!
Then all you need to do is log in, enter your username and password and finally publish using the following commands:
npm login npm publish
Continuous integration server
Setting up a continuous integration server (CI) is crucial when it comes to using components across multiple applications. This is to make sure you don’t break any existing applications. You can use CI to run your tests and create automated builds. CI builds your app the moment you commit and makes sure it runs on another machine.
One challenge is that there are always going to be new libraries and technologies. How are you meant to innovate when everyone is using the same thing? A carousel that is developed in 2018 might be completely different in 2020 and there might be better ways of showcasing your products. You have to accept that there is always going to be change; as a developer you need to be able to know what’s coming and plan accordingly. You can always build out a separate component later down the line or even build upon the existing component. Remember that it’s easier to tackle component by component, rather than all at once.
You may experience conflicts when it comes to versioning. If you go with React, make sure your company is on the same page. Decide what version of React you want to use (that’s if you decide to use React). Having your own starter kit can really help the process along.
Sometimes one of the biggest challenges is discoverability, especially in larger organisations with separate development teams. Your developers may not find what they are looking for or be unsure whether or not the component works exactly how they need. This can lead to them building out something new for themselves, which then involves more time and money.
A great way to avoid this is to have an external tool that showcases the component using demos and screenshots. A good example of this is Electrode Explorer, which you can read more about here: https://www.electrode.io/site/web. html#electrode-tools.
If you are only now thinking about reusing code, then it might take some time to get the structure in place. You have to consider how you think reusability would suit your business in the future. Can you train and restructure your current workforce and how long will it take? In the long run, it is likely to pay off and save you both time and money whether you are an agency or an organisation with a chain of websites.
Just because you are reusing a component, it doesn’t mean content is going to be the same
Above Electrode Explorer enables you to automatically run a demo of each component, so that you can get a better idea of how it might integrate