Speeding up your project development with scaffolds

Fabio Carvalho
Ship It!
Published in
4 min readAug 14, 2018

3 basics steps before creating your own custom scaffold generator

Why?

Sometimes when you are developing a big application many features follow the same basic approach. For example, let us suppose you are developing a CRM application. You will probably need a basic structure for each entity like a CRUD (create, read, update and delete). Big frameworks, like Ruby on Rails or EmberJS, bring it native with themselves helping a lot when the time is short. But, when you do not want to use any of them and are developing a project with your custom architecture, can scaffolds help you to be more productive? The answer is: YES! My goal in this article is to show you how to create your own scaffold generator following a few basic but crucial steps.

Defining your custom scaffold

To tap into the magic that a scaffold has to offer, you need to first define some critical steps that allow a high degree of modularity and convention in your project. As noted, many of these frameworks follow the same pattern for everything that you create using their generators.

1. Define a minimal architecture

Architecture is the base of any application. It is is the first step before creating your app, and it can define the future, enhancing or disturbing future refactors and implementations. I very much like to follow The Clean Architecture, created by Uncle Bob. It permits the user to create a testable and decoupled architecture that scales. One of the main principles of this approach is to extract your business rules from UI or Database. You only need to focus on what your software needs to do, and postpone future decisions regarding technology. A scalable architecture will enable you to create and plug in new features easily.

Illustration of Clean Architecture responsibility flow.

2. Convention is awesome for replication

Sometimes conventions sound boring since we don’t like to follow patterns and prefer more flexibility, but they can help more than you think. When you are working with a project’s convention, you only need to follow the pattern and everything will work well, reducing the number of decisions you need to make. You already saw some of the conventions proposed by famous frameworks like Ruby on Rails’s folders structure. Convention is an important design paradigm that permits us to create a more “defined” application, allowing certain types of replication.

3. Modularity is extremely important!

Since we need to create incremental applications, modules are great for increasing new features easily. You only need to call up some feature and it will be part of your application, enabling you to reuse it in other places. A great approach is split feature by self-sufficient directories, with a minimum of dependencies. You can see a good example of it below:

Example of a project using modular architecture.

Tools

Repetitive tasks are very boring. Currently, I’m working on a big project with my team: a Landing Page, Email and Pop-Up builder, a tool that generates metadata to be rendered as you wish. In this project we have many components that follow the same basic setup. The majority of them are draggable components and need to have coordinate positions (x, y, z) in the canvas. To avoid a certain type of repetitive work, I decided to look for some tools that would help us automate the initial basic setup for each part of the project. I found Hygen, a simple and complete tool that permitted us to create a custom generator for new components, It also seems to be helping in building many of our parallel components. Everything we generate follows our architecture and convention, being a modular approach. You can test Hygen.js by clicking here.

Conclusion

If you are doing a small project involving just a few people, you may not need scaffolding. However, scaffolds are very useful when you need to deliver a consistent software faster. In this article, I have demonstrated how scaffolding enabled my team to create a custom generator in our project, on time and meeting all code requirements. Of course, there are many other generators like Hygen. Since we are creating a React’s project, a solution using JavaScript looked appealing to us.

If you’ve got any questions, do not be shy. Please leave it in comments.

--

--