Understanding and Implementing Third Party APIs (Canvas and React DnD)
Background
During my time at Flatiron School, I think the application where I had the most fun developing is the Space X Cookie Monster game. The Space X Cookie Monster game is a one-player, survival game using vanilla Javascript and Ruby on Rails. What made this fun was the challenge of not only implementing my newfound knowledge of Javascript but also implementing the Canvas API. My partner, Joshua, and I concluded that Canvas was the best approach to allow interactions with the user throughout the game.
Implementing Canvas
Remembering my personal lessons learned, I decided to read the Canvas documentation before implementing it in our code. After a cursory look and a thorough reading of the documentation, I began implementing the applicable parts of Canvas onto our code. I kept on running into a whole slew of errors and wasn’t making much headway. I decided to change gears and work on the direction keys feature while Joshua attempted to implement Canvas.
While I was researching on how to implement the direction keys feature, I would occasionally glance at his screen to see how he was doing. I noticed that he was following the given examples in the documentation, copying from the examples and executing the code himself. I didn’t really question him doing so since I assumed he had a reason to do so. Eventually, Joshua was able to implement Canvas for the game while implementing the additional features I was working on.
Implementing React Drag and Drop (React DnD)
Currently, I am working on a new side project that also involves a third party API, React DnD. React DnD allows React components to be dragged and dropped and uses React hooks to keep track of the state of each component. This API is exactly what I needed for my project as it involves dragging dice from one portion of the screen to another.
After reading the tutorial and the documentation, I decided to jump straight into it and implement React DnD into my side project. Again, I was getting a whole slew of errors or components were not having the desired interactions. I re-read the documents and was confident that I understood and was able to follow the tutorial but clearly my failed results proved otherwise.
Then, I decided to copy and follow the tutorial on the website, step by step. During this process of reading, copying, and executing the tutorial code, I felt the neurons connecting and everything started to make sense on a holistic level.
I realized I understood what each function and React hook did but didn’t understand why it was implemented in the way it did. As I was copying and executing the tutorial code, slowly, but surely, I understood the reason for the implementation of certain functions and React hooks.
Moment of Clarity
While copying the tutorial, it also dawned on me that Joshua was doing something similar when learning how to implement Canvas. I realized that with Canvas and React DnD, as I was reading their respective documentation, I was thinking about how to implement it immediately rather than focusing on the documentation itself. Essentially, I was jumping the gun and nitpicking the necessary functions/React hooks to immediately implement the new feature based on the third party API without fully understanding it.
Key Takeaway
Read the API’s documentation AND execute their examples, if any. If the documentation doesn’t provide examples, attempt to implement it at a small scale (e.g., possibly write the code separate from your program). This will help solidify your understanding of the API’s functions and a grasp on how to implement those functions. Always remember when learning anything new, start off small and slowly expand from that rather than blindly diving into it.
