roymosby.me

Code Re-use (Keeping it DRY)

Published: Mon, May 31, 2021

Job Application Tracker logo

Intro

As my graduation from Flatiron draws nearer, I am starting to focus on landing my first developer job. Inspired by one of my peers, Stacey (hi Stacey!!!) and her job tracker, I set out to make a job application tracker of my own.

JAT-Iron - a cheesy name for my job application tracker, it meant to run on a person's local system. A person can clone the repo, install it with the instructions found in the project's readme. It requires Ruby v 2.5 or greater, a terminal, and a modern web browser. Sorry IE!!

Code re-use

As it currently stands, I wrote a little over 1250 lines of code. This number is not notable except that it could have been much larger had I not found ways recycle some parts. Code re-use is a must in any application. It reduces code complexity and makes for easier maintenance down the road.

Figuring out how to re-use certain blocks of code can be a little challenging. This is particularly true where with large procedural functions used to template out html elements on a page. One example that comes to mind in my job tracker is a form used to take in information about a job. The form does not exist in the page, rather I use JavaScript to build it and then insert it into the appropriate area.

3 versions of the same form

While coding out the MVP, I found myself using 3 versions of the same form that take in the same type of information. Each varied based on whether it pre-loaded data and how the form activated. 3 forms at over 140 lines each is a headache in the making!

Similarities and differences

With the 3 versions in place, I took an inventory of commonalities and differences.

Commonalities

Differences

DRYing up my codebase

From the commonalities I could build the base of a form that I could re-use for the three versions. This foundation version consists of the html used to build the form and a basic behaviors of the 3 buttons found on the form- x2 cancel and 1 submit. I could use the same "submit" action and choose what to do with it based on the information found in the form.

My next step was to add in the unique requirements for version 1 of the form. For the "New" form, I had to:

  1. Create a static method to create new blank form including button behaviors.
  2. Create a method to:
    1. Set the form title text to "New job".
    2. Set the default value of "Status" to new.
    3. Append the header and the form content to the work pane.
  3. Call an existing utility method to open work pane.

For version 2, Edit form #1, I did the following:

  1. Re-use the static method above for new blank form.
  2. Create a method to:
    1. Sets the title text to "Edit job".
    2. Create a hidden field for the job id and insert it into the form.
    3. Select all form fields and insert their values.
    4. Select all text areas and insert their values.
    5. Append the header and the form content to the work pane.
  3. Call another method to open work pane.

For version 3, the second edit form

  1. Call an existing utility method to clear job details off the open pane
  2. Re-use static method to create blank form.
  3. Re-use method made in step 2 of the 2nd form version.

Much of the form's foundation was made inside of a template literal. Insertions and changes were applied using Web API tools such as querySelector, innerHTML, appendChild, etc. Mozilla Developer Network goes into detail about such tools and has been a great resource for using JavaScript on websites.

Making these changes significantly reduced the amount of code that I need to maintain. Further on down the development process, I found that I was missing some fields that I wanted to put onto the form. I also ended up changing the way I handled job notes in my application, necessitating another form change. Had I not distilled the 3 forms into one and then re-used it, I would have had to make identical changes to all three versions. Instead, I could just focus on modifying a single form.



Portrait of Roy

I'm open to work!

  • Looking for a back-end or full-stack position that will leverage my strength in researching business processes and translating them into code.
  • I've worked with JavasScript, Ruby, and PHP but am game to learn other scripting languages.
  • Prior to development I have 20 year military service- I have the leadership experience and know-how to complete the mission.
  • Most importantly, I am all about making positive impact at organizations that see inclusivity as a strength rather than an obligation.

If you have room on your team, I'm looking for a good place to put my skills to use!