Previously, we talked about the basic elements of HTML, and some basic CSS properties, when creating a webpage. In this article, I will cover the essential mechanism of a dynamic webpage, which is JS (JavaScript), and covering the idea of TS (TypeScript).
Opinion: In my previous topic, I did not cover much about CSS. There are a lot more to it like color, gradient, and even animation. Reason for not touching upon those topics because I feel like it will deviate towards literal design, and if I do not talk about it, it might not make sense. But alright, now you know you can change things like color, so you can research what other kind of aesthetic you can do as well from here.
DOM
In my previous article (Web Dev Overview), I mentioned that JS can be used in creating dynamic webpages, or developing a backend server application. In this article, I will focus on the learning of the language. Even though the focus deviate from the actual making of a web application, it is critical to be familiar with the nature of the programming language used. Nonetheless, I thought it be good to still highlight the concept of the Document Object Model (DOM), since this is a key topic when developing on the frontend.
Websites, often consist of multiple webpages, but will have at least 1. In a webpage, all of the things you see, at the basic layer, are represented as HTML. The word, “Document”, refers to the webpage, which is a HTML file. When the browser receives a HTML file, the codes are converted into data, which the browser understands, in order to interpret it to produce the appropriate visual.
The idea of the DOM, is the interaction point which allows us to manipulate the rendered web elements in the browser. Technically speaking, the DOM is an interface, which allows us to access the different functionalities it offers to achieve the intended effect we want, using JS.
Note: An API (Application Programming Interface) is the interaction point which you can write codes to utilize it, to achieve the intended function it is supposed to achieve. The DOM is a type of API which you can use to manipulate the web components rendered in a browser.
Here is an example to better illustrate it. Lets say you have a HTML code, which will render a button:
<button>This is a button :D</button>
When opening the HTML document containing the above code in a browser, the codes will be rendered accordingly to it’s intended nature, which visually we will see the button. The API provided by the DOM, then allows us to manipulate the button component, making changes like:
Editing the button label to a different text
Setting a color for the button
Increasing the size of the button
Of course, this is just an example, you definitely can do much more than that.
JS
I have covered the basic idea of the DOM, which you can use JS to manipulate what is to be seen in a browser. But as mentioned, JS is not just exclusive to DOM manipulation. You can use it to craft out your own set of logic and turn it into a simple program.
JS itself is similar to the other programming languages, like PHP, C#, and Java. The different constructs which forms the developed application like data types, function calls, and iteration, are some of the basics which you are required to be familiar when picking up a language.
As there are countless resources out in the internet which teaches the different aspect of a programming language, I am not going to re-write what is already available, Instead, I recommend the following as a guideline for you to pickup JS:
Variable declaration: https://javascript.info/variables
Data type: https://javascript.info/types
Math operators: https://javascript.info/operators
Data comparison: https://javascript.info/comparison
Logical operators: https://javascript.info/logical-operators
Condition branching (selection): https://javascript.info/ifelse
Loops (iteration): https://javascript.info/while-for
Functions: https://javascript.info/function-basics
As you can see, I am using https://javascript.info/ as a guideline for learning JS. In addition, I did not highlight every topics under “JavaScript Fundamentals”. The reason is because the topics which I mentioned are the basic constructs of a programming language. This means that if you were to pick up a different programming language, like PHP, it has the same constructs too.
Note: I am only talking about imperative programming, which is the basic paradigm, and the type of programming people generally learn when they 1st started. If we dive deeper into this topic, there are different types like OOP (Object Oriented Programming), and functional programming. Subjects like OOP are beneficial to learn, but is beyond the idea of what this article cover.
TS
JS is a great language, as it allows us to develop amazing applications, which the level of our creativity is the limit. But the problem with the language itself, is that it lacks plenty of features, which prevents an engineer from developing a robust software. Thus, to solve it’s limitations, Microsoft created TS (TypeScript), which in a nutshell is an extension of JS.
TS is a programming language with additional features, which JS lacks. Features include type safety, and true OOP mechanism. Though a point to note, TS codes cannot be directly execute in a browser or NodeJS. The code has to be transpiled (converted) into JS, to be able to execute the codes in the respective environment.
The value of TS isn’t just the feature it has, but to also provide an improved developer’s experience. In the real world, development of a software will reach a certain level of complexity, as it grows. Depending on how a software is being developed, it affects it’s maintainability. The true value of TS is to significantly enhance the quality of implementation in a software project.
Note: The purpose of this segment is to introduce TS. JS itself is still improving, with every new version released. Nonetheless, using TS still has it’s benefits as mentioned. I will address TS alone in a separate article, which I dive into the different topics accordingly. But if you’re keen, you can check it out here: https://www.typescriptlang.org/
Learning Tips
In the context of developing in JS or TS, it is important that the code is implemented properly to a reasonable degree. Regardless of whether you are coding dynamic webpages or developing a complex system, all these boils down to a combination of good thought process and practices.
Tutorials for learning the basics often addresses the individual topics, but the challenge is always about putting them together. Thus, these are some advice I can offer to assist in your learning:
Platforms like LeetCode has exercises that you will be able to practice out coding in a particular language. Focus on the easy level difficulty problems 1st. Your 1st goal is to be familiar with literally coding, not to be technical
When coding, always think about the data you will be manipulating, and the logic of how you like to process them
Data is always about the type (e.g. integer, char, boolean) and fundamental data structure (e.g. array, string). It is a question of “what you are dealing with”
Logic here refers to the flow. A sequence of operations which manipulates the data. It is a question of “how you are dealing with the data”
Often, programming languages have built-in functions. These functions are meant to deal with common operations, which simplify your efforts. Be aware of the built-in functions JS offers, and use them whenever you have identified the opportunity
Above are tips pertaining to the technicalities, but a good SWE is also about inculcating good practices:
Code with ownership in mind. Always think that there will be someone who will be seeing or using your code. You have to make it as easy as possible for them, or minimally intuitive to understand
Think as if you are decorating your own house. Are things where they are supposed to be? Is the whole house neat? Is it organized? Some of the many questions you may ask yourself
Focus on the workability. Optimizing right at the start may not be ideal, even if you have experience. In other words, get things working before looking at improving it
Improvement comes in 2 forms, functional or structural. Functional is like better algorithm, or faster runtime. Structural is purely organization, for better readability and maintainability
Opinion: Good code is 1 big topic, with engineers having differing opinions. The same applies when discussing about the design of a software system. As such, I plan to have a series of topics which cover the quality aspect.
Conclusion
Learning how to code is a challenging topic. Mainly because of putting everything together, and then applying it in practice. I highly recommend to focus on getting familiar with coding in general, before moving on to further topics. The things learned will be beneficial when picking up the more advanced, or relevant topics. Till then, stay tuned for the next series of learning web development!