As someone interested in becoming a web developer, the sheer number of programming languages/frameworks/libraries/etc. can feel overwhelming. Now that I am a few more steps into my coding journey, I am starting to realize that the power of all this variety is developers can use the appropriate tool for each specific task. And all this variety allows for us to have the crazy dynamic web applications we have today.
In the early 1990s websites were built using only 2 tools- HTML and CSS, and with these two tools web developers could only build really simple static web pages that looked the same for every user. You can think of HTML as the “skeleton” and CSS as the “skin” of these basic websites. In the mid 1990s JavaScript started making these boring web pages more interactive, so you can think of JavaScript as the “muscles” in this analogy. This website offers some straightforward examples to help you understand how JavaScript can change HTML content, attributes, and styles.
Fast forward to 2016. The reason why JavaScript is so popular is it has a monopoly over client-side web development. This means that almost every person using a web browser to experience a web page is interacting with JavaScript. When a user asks their web browser (ex: Google Chrome) for a certain web page, the files needed to create this web page are sent from the web server to the user’s computer. The web browser then displays the document to the user. The power of client-side scripts is that they “contain instructions for the browser to follow in response to certain user action, (e.g., clicking a button)… without further communication with the server.”
This is very important for modern web applications. Users are impatient! They want instant change! By embedding JavaScript into HTML, “user’s actions will result in an immediate response because they don’t require a trip to the server.” Gone are the days of early web-based message boards. Imagine if you were using Google Hangouts and you needed to refresh the page every time you wanted to see if someone replied in your chat conversation. That would be really annoying! As users we expect this sort of functionality, so JavaScript is required to make all this magic happen.
Video: Watch on YouTube
JavaScript is not limited to working as a client-side script embedded in HTML. It is possible to utilize JavaScript on both the client-side and the server-side, which means you can build a full web applications utilizing JavaScript and its many frameworks and libraries. Now you may be wondering why web developers use other programming languages such as Ruby if everyone has to work with JavaScript for client-side web development. That’s a good question, and I am too new to the game to understand the pros and cons of these decisions. I believe there are real advantages and disadvantages for using any of these web development tools, and different web developers also pick up their own personal preferences along the way.
In my last post, I took a stab at demystifying object-oriented programming (OOP) and mentioned that both JavaScript and Ruby are object-oriented languages. While this is technically true and why it is relatively easy to shift from one language to the other, JavaScript works well as a client-side scripting language because it can easily take advantage of the functional programming style. OOP and functional programming styles share the common purpose of trying to compartmentalize code into manageable pieces in order to minimize room for error and align with the DRY (Don’t Repeat Yourself) golden rule of computer programming. The reason why the different styles exist is because they are good at approaching programming challenges in different ways. Again, check out my last post if you want to understand the advantage of OOP.
Video: Higher-order functions - Part 1 of Functional Programming in JavaScript
As you may expect, functional programming emphasizes functions, which means the emphasis is on actions. I mentioned earlier that the reason why it is useful to have client-side scripts is because they can readily react to user actions. Functions are actions. Functional programming is best fit to pay attention to actions. The tricky business is we don’t want all our actions to be executed once the page loads. We want the browser to hold off executing these actions until the user triggers them. That is where closures come in. Closures are simply functions hiding within other functions that are waiting for the user to provide some data and activate the outer function in order for the inner function to finally execute. This is what allows for event-based programming to exist.
In the future posts I plan to get more in depth and provide more coding examples in the process, but I hope this provides a high level introduction to some web development fundamentals that are difficult to understand. Don’t expect to understand everything at once. Absorb what you can along your coding journey and trust that things will click over time. Happy coding!