Giving 'Context' to Javascript Fundamentals - How Codesmith Style Whiteboarding Guides Aspiring Engineers

As an instructor for Codesmith’s Intro to Javascript series, I had the privilege of getting to revisit the fundamentals of Javascript from the perspective of someone new to the language. At the same time, my time spent with this material as an instructor gave me insight into how the Codesmith curriculum’s dive under the hood creates a useful paradigm for understanding more complex topics like recursion, OOP, and Asynchronicity.

Codesmith’s free and public workshops on beginning to advanced Javascript topics are open and available to the public. These workshops provide resources to the aspiring software engineer in the form of the Intro to Javascript series and continue supporting students with workshops covering intermediate and advanced concepts in the language. Some introductory topics include variables, control flow, looping, functions, objects and HTML/CSS. By melding the needs of those new to development with a curriculum based on depth of knowledge, the Intro to Javascript series provides a unique opportunity and environment. Attendees can feel confident and comfortable following their own path to understanding of a topic as opposed to a tutorial style course that might lead down a path defined by someone with different goals, perspectives, and skills.

In this post, I’ll be exploring how the knowledge made available to all participants in the series functions not only as an introduction to building in Javascript but also as a set of patterns and tools that students can employ as they dive deeper into the language and the reasoning and logic so integral to software development more generally.

In each of their public workshops, Codesmith introduces a unique style of visual diagramming that shows students how they can visualize the interactions between the JavaScript engine and your computer’s processing power and how that relationship is ultimately expressed through code. Through the use of drawings to visualize important concepts like scope, the call stack, and variable reassignment in memory, Codesmith transmits a mental model that gives attendees the ability to think through how code is processed on a deep level. This strengthens attendee’s understanding of the code and gives them access to a more in-depth comprehension by exercising their spatial reasoning - a category of analytical skills that help you to build or to expand mental models that aid humans in more accurately describing the processes of code and computers.

According to one academic study, “Spatial reasoning is also considered by some to be an important determinant in program comprehension, due in part to source code being likened to a multidimensional virtual space that requires similar skills for navigation as those utilized in a real environment”-Cox, Fisher, & O’Brien, 2005. This goes to show that white boarding out how code runs is more than just a way to onboard the repetitive process of a for loop; it instead reflects the way that our brain organizes logic in an imagined space.

As an instructor of these introductory workshops, my responsibility quickly changed from being sure of the ability to use these tools and concepts in my own work to practicing the language and whiteboard skills needed to transmit these concepts to others. While preparing to host these workshops, I reflected on how and when I applied the mental model introduced to me by Codesmith instructors and I arrived at topics as diverse as recursive algorithms, object oriented design patterns, and even the communications protocols and code that make up the internet.

Below you’ll find a few examples important to my own journey beyond my first intro workshops, but many more exist in between and beyond.

• Recursion: 

  Codesmith style whiteboarding allows for a strong visual model to conceptualize things like stack frames, context, and scope. A strong foundation in these concepts can aid us as we dive into the recursive process, in which Javascript chains together multiple function calls to modify inputs step by step towards a desired output.

• Object Oriented Programming: 

  A flexible understanding of how and why Javascript has been designed to combine both functionality and data in its objects can aid us in understanding how these characteristics give us the building blocks for Object Oriented Programming paradigms in Javascript

• The Network: 

  Looping and repetition give us an introduction to the stepwise process of asynchronous code as it weaves through the many interconnected pieces of a system. A strong visual foundation for how Javascript can incrementally interact with data over time helps us to track information as it navigates the network via protocols like HTTP.

Small steps that contribute to a larger picture are both easier to learn and understand as an aspiring software engineer, while spatial and visual paradigms invite us to really reflect on the processes described by written code and driven by the actions of a computer. My experience as a participant and now facilitator of the Intro to Javascript workshops presented by Codesmith have provided me an actionable way to break down and think about concepts that I had never been able to fully understand and which I still use today. Through the tools that I learned by whiteboarding and diving under the hood Codesmith style, I've forged a path to build my engineering knowledge step by step and brick by brick — even, execution context by execution context.