As a self-taught front-end developer while also freelancing in technology research, learning to code has been a sloooow burn. Looking back on some code from a year ago, when I first started learning modern JavaScript, I can confidently say that a year ago my code was a cluster-f***. The process of refactoring the code a year later really highlighted how much I learned and help me deal with imposter syndrome
TL;DR
I had three key wins that helped me feel more confident:
- I know more than I thought I did, like applying the MVC pattern to code and how to structure code clearly
- I can figure out my own solution by using tools I'm not familiar with like pug and Node by reading documentation and doing research
- I overcame my fear of Webpack
The project I'm refactoring is called Remixoji. Remixoji was a vanilla JavaScript webapp I was building to learn about modern JavaScript. With Remixoji, I ended up in a rabbit hole of learning how to manipulate Canvas and SVG elements and the DOM in general. Remixoji takes different aspects of emojis to create a new emoji
I knew then that the code was pretty poorly written, but I had not yet learn how to make it better, so it never went into production.
Old code where basically everything ran from a single file: [Github Gist]
New code with everything neatly structured: [Github Repo]
Remixoji [Live site]
What I learned by refactoring Remixoji
1. Using Class syntax with MVC pattern
When refactoring the code I put relevant functions (including event handlers) and variables into logical classes using the ES6+ Class syntax with a simple MVC setup. This gave me the opportunity to better understand the MVC pattern and also to write Classes from scratch
Old index.html file
<html>
<!-- DOM elements -->
<script>
/* a whole bunch of functions not in any particular order */
</script>
</html>
New script.js file structure, split out from index.html
class EmojiPart {
// This class ensures consistency of an EmojiPart object
constructor(type, id) {
this.type = type;
this.id = id;
}
}
class Remix {
// Remix is the model which takes care of the data for the app
constructor() {...}
addPart(part) {...}
removePart(partType) {...}
removeAllParts() {...}
}
class View {
// The view takes care of displaying the app based on the data from the model
constructor() {...}
displayRemix(remix) {...}
updateSVGDownloadURL() {...}
// more methods...
}
class App {
// App is the controller which tells the model to update in response to user input
// App also providers a handler for Remix that tells View to update based on Remix data
constructor() {...}
handleAddPart = (partID, partType) => {...}
handleUpdateVivew = () => {...}
// more methods...
}
Win #1
My original code had no real structure or pattern, but a year later I can apply MVC using Classes! 🙋🏻♀️
2. Using build scripts and Pug to generate HTML
My Remixoji scripts from one year ago inserted SVGs into the DOM on the client side. It would fetch a JSON file that listed all the SVGs that needed to be inserted and then get each SVG and insert it into the DOM. This approach was unnecessary since the SVGs I'm using do not change—they can be part of the static HTML
Using Pug I was able to build an html page with all the SVGs inserted. With the pug package and a short script I got node to dynamically pass in the SVGs inline to the pug template via the list of SVG files listed in the original JSON file I had used before refactoring
For each of the SVG files listed in the JSON, the script pulled in the file data, and pushed it to the pug template so it can be inserted as inline SVGs. By building the HTML page with all the SVGs already in it I also cut out a lot of the client-side JavaScript that I was using for fetching and DOM manipulation
Win #2
I didn't know much about Pug and I didn't know how to use it in Node, nor would I consider myself a Node expert, but was able to read the documentation and do some googling to create a unique solution for this project. Win! 🙋🏻♀️
3. Rolling my own webpack config
I had read up a bit about webpack through React tutorials, but never wrote my own. Refactoring Remixoji is a great opportunity to write a basic webpack.config.js file because:
- I needed to transpile my script.js file to ES5 using Babel so it would work for most users; not just people running the latest and greatest browser versions
- I wanted to minify my script.js and style.css files to improve performance for the user
I got the basics setup to compile my ES6 JavaScript to ES5 and to minify, but there's still more to learn in terms of fine tuning webpack.config.js such as working with different types of sourcemaps
Win #3
6 months ago I was so intimidated by Webpack that I metaphorically hid under the sheets. I went so far as to use Gulp instead, but during my refactoring of Remixoji I decided it was time to start reading their Getting Started and Documentation. While I can improve my Webpack setup, getting started is such a win! 🙋🏻♀️
Conclusion
Refactoring Remixoji was a great learning experience, and it also meant I finally got to put some old code in production in an efficient, structured, and performant way. What was once an html file with a HUGE script section that did everything client-side became a project that builds a performant webapp without any frameworks that most users can use on their desktop and mobile devices
Top comments (4)
This article gives me hope. Thanks so much for sharing. I'm in a bootcamp now, so much respect to you for being self-taught. I hope to have the same experience looking back one year from now. Remixoji is so cool, by the way!
Thank you! I wish you the best with your learning journey 😀
My respect to you, and I wish you to further develop as JS-programmer. You are doing a great job!
Thank you for the kind words! 😀