Asynchronous JavaScript as an “Art Masterpiece”
For anyone that is new to JavaScript, there is a common undeniable truth; JavaScript is a headache. If you’re like me and attempting to learn a frontend language after learning a solid backend with a user-friendly language like Ruby, you quickly realize JS does not have our back!
Why is JavaScript so hard to learn?
There are multiple complexities of JavaScript that can be very daunting to grasp for beginners.
- In order to use JavaScript, you need to learn multiple things at once.
There are additional topics that you have to teach yourself in able to build a frontend application with JavaScript. As a beginner, this can be extremely overwhelming. One of the advanced features that you need to learn in order to actually write JS is how to write HTTP requests (AJAX) through a RESTful JSON API. When writing out JS code for a web browser, you need to be able to create an HTTP request to a different web address, parse the result of that HTTP request to get the information you desire, and then do something with that result. Learning how to do this on top of learning how to write JS code is difficult and can take months of practice.
2. JavaScript is an asynchronous programming language.
Most programming languages can be broken down into concrete steps:
- First, do this and wait for it to be finished before moving on to the next thing.
- Then, do that and wait for it to be finished before moving on to the next, next thing.
- etc.
JavaScript works in an asynchronous way:
- First, do this and move on to the next thing, but notify me when it finishes.
- Then, do something else and notify me when it finishes.
- [then later]
- Finally, notify me that the first thing is finished.
- Finally, notify me that the second thing finished. (but not necessarily in this order).
Asynchronous code is important when it comes to loading a browser for the best user experience. If JS was written synchronously, the user could be waiting to see important features on your web page. This creates a poor experience for the user and hinders the success of your application.
3. JavaScript is powered by an event queue.
The event queue is invisible but what it essentially means:
When [ SOMETHING HAPPENS] I want you to do the following [CODE TO EXECUTE HERE].
JavaScript magically triggers events based on what you tell it to do. The event queue is a difficult concept to grasp but once you can master this, the power behind what you can do in JS is remarkable!
Asynchronous JavaScript as an Art Masterpiece
Personally, my journey to gaining an understanding of these concepts has been challenging. In order to visually see the magic behind asynchronous JS, I decided to create an “art masterpiece”. The process behind this is to link up my JS code with a “canvas” and display shapes and colors in different sizes. Adding visuals has helped me see which part of my code is executing first and has helped me grasp an understanding of the workflow.
Please take a minute to admire my masterpiece!!! Isn’t it lovely?! :)
So the point of all this is to show you a little JS magic! I have created four different functions, a click event, and two functions inside a setTimeout function. Some of these function definitions include calling other functions. The bottom line drawShapeThree(drawshapeTwo(drawShapeFour())) starts the program. You can decide how you want to kick things off since you’re the engineer. In JS, functions are considered first-class citizens. This means they can be treated like any other variable: they can be assigned to a variable, stored in a data structure, passed as an argument to another function, or be the return value of another function(learn.co “Fns as First Class Data: Do Behavior”).
On the top right side of the canvas, I included a console.log chart that shows the order in which each function was triggered. Because of the asynchronous behavior of JavaScript, the shapes that were created inside of the setTimeout function were automatically triggered after x amount of time without me having to manually tell them to do so. This function can be useful in times when you want certain elements or functionalities to appear on the browser at a specific time.
I also included a click event that displayed a blue moon when clicked. When I executed the program, I clicked inside the browser 4 times randomly. I was able to invoke this click event at any time without having to wait on any other function. This event is a good example of JavaScript executing asynchronously versus a typical top to bottom synchronous flow.
Let’s see what type of masterpiece I can create by changing things up a bit….
In this example, I switched things up a bit. I added a third setTimeOut that displayed the heart on the screen. You can see in the console.log chart that the heart was logged fourth on the list. The first setTimeOut function which created the larger purple circle on the screen was 8th on the list! This means our program read that bit of code and saw that it needed to be delayed, so continued on to the next function and after x amount of time passed, returned back to the top and executed that function asynchronously while the rest of the program was still flowing! Meanwhile, I randomly clicked the canvas two times so I could add some cute blue moons to really spice up my art piece. ;)
It’s fun to see asynchronous magic when dealing with pretty colorful shapes! Try and follow along with the code, console.log chart, and the different shapes to unfold the workflow of this masterpiece!
Final thoughts
I hope this idea of asynchronous JavaScript as an art masterpiece has helped you get a better understanding of how things work under the hood. If you want to test your artistic abilities, here is the repo that contains the code that was used for this blog. Clone the repo to your local repository and open up the index.html file in your browser. Play around with the code! Add more! See what type of masterpiece you can create! P.S Don’t forget to save and refresh every time you do something new! ;)
https://github.com/ChristyTropila/Blog-Art
Resources
https://css-tricks.com/the-shapes-of-css/#circle-shape
http://blog.thefirehoseproject.com/posts/why-is-javascript-so-hard-to-learn/
