Photo by Ken Wyatt on Unsplash

From an App to a Super App

Part 6: How to work in an easy and fast way

Do not reinvent the wheel

To create a new view, sometimes we have to create a lot of files: View Controller, View Model, Router, etc. Those files are always equal at beginning and we loose much time creating and setting up them.

In the last episode of How to create a Super App and not die trying, we are going to talk about Templates. Templates allows us to save time and create views in an easy and fast way.

Templates

There are much templates in Xcode:

Those default templates are in the path: /Applications/Xcode.app/Contents/Developer/Library/Xcode/Templates

If we open the path we can find two folders: File Templates and Project Templates. The templates of the image are inside File Templates folder and we are going to use some of them to create ours, but first, let’s talk about them.

Each template must has at least 3 files:

• TemplateInfo.plist: is the responsible for describing the template.
• TemplateIcon.png: is the icon shown in Xcode new file dialog.
• __FILEBASENAME__.swift: the actual template file what will be created. Template file can be any other type: .xib, .h, .m, .storyboard…

The plist file has the info of the template. There are some mandatory parameters:

• Description: a brief description of the template file
• DefaultCompletionName: the default name of file (without extension).
• Summary: a brief description of the template file

And also, there are some optional parameters:

• MainTemplateFile: is the list of files that our template has. The first file of the list is the file that Xcode opens when the template has been created..
• Options: determine the options what you can configure in the first step of creating a new File.

Let’s create our template

We talk previously about the default templates and their path, but we are going to add our custom templates in another path: ~/Library/Developer/Xcode/Templates. In this path we have to create a File Templates folder, where we are going to create a new folder called: Swift MVVM Router.xctemplate.

Now, go to template’s default folder, open Source folder, copy the items of Swift File.xctemplate and paste them inside our folder. We have to do the same with a xib file, so open User Interface folder and copy the xib file of View.xctemplate folder in our folder. With these files we have the minimun to start, so open our template folder and let’s create our template. We need one file for our View Controller, other for our View Model and another one for our Router, so we have to duplicate the swift file two times and rename them:

• ___FILEBASENAME___ViewController.swift
• ___FILEBASENAME___ViewModel.swift
• ___FILEBASENAME___Router.swift

Also, change the xib file name to: ___FILEBASENAME___ViewController.xib

The next step is configure the plist file. This file is where we give the properties to the template: name of the template, description, the relationship between the files, etc.

Open the plist file and add the following values to the properties:

• DefaultCompletionName: MVVM Router Swift.
• Description: Generates a View Controller, View Xib, ViewModel and Router.
• Summary: Templates for Swift using MVVM pattern with Routers.

Now we are going to add some keys that set the relationship between the files and other properties:

• MainTemplateFiles: the list of files that our template has. The first file of the list is the file that Xcode opens when the template has been created.

• Options: determine the options what you can configure in the first step of creating a new File.

The last part is add the code to our files:

Juantri94/MVVM-Router-Template

Getting a bit deeper in the files, we can see many variables with underscore:

• ___FILEBASENAMEASIDENTIFIER___
• ___VARIABLE_productName___
• ___FILEBASENAME___

When we add the template, Xcode asks us the Class Name (configured in the plist file as productName). This productName variable gives the value to ___VARIABLE_productName___ and ___FILEBASENAME___, for example: if in one file we have the following code: ___VARIABLE_productName___ViewModel, and we call the class Test the result is TestViewModel .

The variable ___FILEBASENAMEASIDENTIFIER___ is the name of the file, for example: if the Class name is Test, our View Controller file will be called TestViewController.

Now, open Xcode and create a new file ;)

Some info:

https://www.rubydoc.info/github/bfoz/xcode-ruby/Xcode/Template

https://help.apple.com/xcode/mac/9.0/index.html?localePath=en.lproj#/dev7fe737ce0

Conclusions

You can find the source code of the example on GitHub.

A huge project has a lot of challenges and processes. During these stories I have tried to resume some of them in an easy way with examples to help developers to do a Super App. Of course, these tutorials are a posibility among many more.