Scaffolding Snippets FTW
How do we help new and existing devs?
It takes a lot of time to get up to speed as a new developer at any organization. Learning patterns of best practice can be an art form. So over the past few months as we have released the fourth version of Guild’s component library “Recess”, we added a number of improvements to the documentation and the development environment for developers.
During a recent “Learn-a-thon” (a.k.a. hackathon) at Guild Education, I worked on a simple solution that is relatively easy to implement and can help save developers time when developing.
One of the solutions we came up with was creating snippets for Recess.
How much time saved?
Snippets you say. Sounds simple enough, but do snippets really save time for developers?
To effectively estimate the amount of time saved, a small personal test was conducted. This ballpark figure showed how much time could potentially be saved using snippets vs the standard route through the documentation.
Someone who was effective at using the library before who realistically knew how to use the component would theoretically have the URL for the recess documentation saved would follow a different path than someone new to the organization. Both experienced and inexperienced users of the library are important to consider and two tests were conducted.
Experienced User of Recess
This user had to follow the following steps in order to get to documentation that they required
- Visit Recess URL
- Find component
- Copy component
- Paste component in editor
Result: It takes approximately 15 seconds to navigate and paste the component you are looking for into your editor.
New User of Recess
For this user I assumed they started at the github project and followed the following steps
- Visit Recess Project on Github
- Find Recess URL
- Visit Recess URL
- Find component
- Copy component
- Paste component in editor
Result: It takes approximately 40 seconds to navigate and paste the component for a new user. An extra few seconds for moments a new user would be searching for something were added.
What’s an extra 30 seconds
It is important to note that searching through documentation increases the cumulative cognitive load the developer experiences. It seems logical, but the less that has to be searched for and read through the easier and faster the development process is.
As a new developer at a company this can be a small distraction that overtime can add up to a significant amount of time.
When using the snippet version of this, the developer can stay mentally fresh with that knowledge at their fingertips.
Scaffolding Snippets
Typical snippets are built for power users of the application. That is an important facet of all snippets and we made sure to make simple power use components as well.
The real time saver that we are experimenting with is building what we like to call Scaffolding snippets.
What is a Scaffolding snippet?
This snippet is an overly detailed example of the component you are attempting to use for the first time. The idea is to create and extremely practical example of how the component is being used.
Currently we have built out our first iteration of this in VSCode and utilizing IntelliSense.
Importing is made easier with a snippet that contains the all of the components that you can import
We will use our button component as an example of how to import specific scaffolding components.
There are three primary use cases for our button
- Standard Button
- Anchor Tag Href Button
- React Router Nav Link Button
When the scaffold is selected it is simple to tab through each predefined selection point and alter or remove specific pieces of text.
Here is an example of the entire process working
Of course, this is not a replacement for proper documentation but with well-constructed use cases, you can save the developer using these snippets a lot of time and hassle.
TLDR: Building snippets is not just for the power users, but detailed scaffolding snippets for the forgetful or less experienced users of your library. This helps them save time and cumulative cognitive load.
If you are interested in learning with us and working on a platform that will help millions of working adults go back to school, check out our careers page.
