Reusability Is the Name of the Game

So, what’s the solution to this predicament? This is where you need to work smart. Don’t develop unnecessary components! When it comes to auxiliary components like a modal that can be used to add images or notes, a drop-down menu providing the user with various actions, a pop-up with a collection of options out of which you can have multiple selections or other similar components – it’s better to make them reusable. Multiple features of your application will use them so treat them as such by making them generic without any concern for a specific feature’s visual model. Here are a few examples depicting the use of such generic reusable components in example applications:

[rev_slider alias=”reusability-1″][/rev_slider]

Reusability in itself is a broad term and may mean something entirely different to different developers. In this article, reusability refers to a concept in application development in which, where possible, you design components that are reusable and customizable, thereby, future-proofing your code.

In order to make a reusable component whose bare-bones structure may be used across multiple apps as well as across multiple features within a single app, you have to map out and design the structure of your component before starting the actual implementation in such a way that if in the future, the need arises, you can customize the component further and add more options depending upon the particular use case.

Let’s take a look at an example of an app in which the user can upload the pre and post images of their room transformation. For this, a custom UIView called AttachmentsListView has been created. This can be used as a component in any controller. In this example app, AttachmentsListView is used in the following two ways:

[rev_slider alias=”reusability-“][/rev_slider]

1. Pre-transformation
   • Workflow: Clicking on the Add Image button opens up a pop-up modal. The user is required to upload images from the modal.
   • Implementation: For this purpose AttachmentsListView is embedded within this modal. To communicate between the modal and then calling the view controller, a delegate can be used.
2. Post-transformation
   • Workflow: Clicking on Add Attachment opens up a context-menu to choose from the relevant option.
   • Implementation: The custom view has been embedded in the screen so the user can directly add images or other files.

You might have observed that the scope of attachments has been extended from just allowing the images to be uploaded in pre-transformation section to allowing the user to upload all kinds of attachments such as DOCX, PDF, etc. for post-transformation. This is where the concept of reusability comes into play. All you have to do is add just another AttachmentsListView to allow uploading these files. And for this particular option, you can replace the text of the button from Add Image to Add Attachment by adding a simple check of supportedTypes.contains(.file)

For the context menu, AttachmentsListView contains a UICollectionView section. This collection view further contains two different types of cells:

1. One that contains a button which opens up a context menu with available upload options for the user to choose from. This can either be:
   • Open camera
   • Choose from Gallery
   • Choose from Files
2. The other which represents a thumbnail of the attachment

[gist id=”736ebd0d9a41576fe86b6960d9322a21″]

What we see above is the initialization of the function supportedTypes, and the values in this array are further specified in their relevant calling class.

[gist id=”789f3756df8321ce99c2d98b6552fd1e”]

In this example, the user can upload files only for the post-transformation section, hence reusing the context menu with various options as per the use case.

As the above example illustrates, the reusable component AttachmentsListView has been used in 3 similar yet slightly different ways in this one project. It’s not hard to imagine that another app may also need a view that allows users to upload images/files, so it can be reused there as well and can be further customized depending upon the particular use case. Want to dig into the code part? Click here to access the source files on GitHub.

While this solution may look pretty simple, but the fact is, it is important to be able to identify the basic structures that can be used over and over again. Doing so, will prevent the developers from entangling themselves in the web of endless possibilities of defining what components can go generic, and be specific in identifying these components. All major websites and apps across the world take advantage of this concept of reusability to save development time and effort and reduce redundancy in code as well. This not only ensures that their code is efficient but also decreases file sizes and build times overall by having premade components that can be reused throughout the app.