00 Introduction to JavaScript Advanced Path #
Hello, I’m Ishikawa, and welcome to join me in learning JavaScript.
JavaScript, formerly known as Mocha, was designed by Brendan Eich in just 10 days back in 1995. I first came across JavaScript 10 years after its inception when I was studying in school. At that time, websites were mostly static pages for displaying information. So, JavaScript was similar to its initial version as a scripting language. It can be said that during that era and for a long time before that, the entire frontend was considered to be a very amateur skill.
However, things changed with the birth of AJAX in 2005 and the subsequent release of the XHR (XMLHttpRequest) specification draft by W3C in 2006. With AJAX, we could not only develop static pages but also create dynamic and interactive applications. It was then that JavaScript started to receive more attention, and AJAX-related technologies were eventually incorporated into web standards. The first application I developed with AJAX was a web portal for Yahoo that combined various web APIs (such as Flickr, Yahoo Answers, similar to Zhihu) back in 2007, right after I graduated. So, I caught up with this turning point perfectly.
Afterward, JavaScript evolved from a simple scripting language to a language capable of developing complex applications. However, even then, JavaScript itself did not undergo significant changes and still lacked a powerful standard library like Java or C++. As a result, developers had to find their own ways to solve many problems. The biggest issue at that time was resolving system compatibility, which led to the emergence of many third-party libraries.
Around the same time, I got involved in open source and turned the pitfalls I encountered as well as their solutions into small tools. Later on, I had the opportunity to collaborate with engineers from Google and Twitter in creating the HTML5 Boilerplate open source project to address compatibility issues frequently faced by frontend developers. Then, I published a book titled “HTML5 Mobile Web Development in Action” in the UK. I continued to contribute to open source projects and later released the open source project JavaScript Patterns & Anti-Patterns.
With the further development of web applications, I also faced greater challenges in my work. In recent years, I collaborated with Tencent and Alibaba on some large-scale frontend projects. During these projects, I discovered that as the number of application users increased exponentially, many problems also arose exponentially. Non-functional issues such as performance and security continued to manifest.
For example, I was once responsible for developing a large-scale ticket booking application in a project. Due to the complexity of business processes and rapidly changing business requirements, even a small side effect could result in a significant number of order problems. In such cases, the concept of idempotence in pure functions is used to ensure that the result of executing a function multiple times is the same as executing it once, avoiding duplicate order submissions.
Apart from side effects caused by business complexity and high concurrency, in situations of heavy traffic, even a small resource loading can have an exponential impact on resource consumption. In today’s emphasis on cost reduction and efficiency improvement, being able to effectively control resources is crucial for our business. For example, by combining functional and reactive programming, we can dynamically load resources based on the real-time needs of users, thus saving unnecessary costs of preloading resources.
Taking all of this into account, I have been involved in frontend development and using JavaScript for over a decade. Throughout this journey, I have encountered numerous difficulties and conundrums in the frontend/JavaScript field. Therefore, in the following time, I will share my practical experience in JavaScript with you one by one, hoping to help you establish a systematic problem-solving mindset and master practical methods for addressing issues.
Why should we learn this course? #
Nowadays, JavaScript is no longer just a scripting language like it used to be. With the rise of web applications and Node.js, the revival of functional programming, and the emergence of reactive programming, JavaScript appears to be more “professional”. Although JavaScript has added many features and syntactic sugars compared to a decade ago, its core principles have not changed much.
Despite not having many fundamental changes, JavaScript still poses the problem of being easy to learn but difficult to advance.
I believe that there are two main reasons for this problem. First, many early JavaScript programmers lacked a solid programming foundation and had scattered knowledge, which resulted in a lack of in-depth understanding of JavaScript. Second, some influential figures who later joined the JavaScript community came from other languages and found it difficult to share and explain certain knowledge.
Taking Monads in functional programming as an example, Douglas Crockford (Douglas Crockford, who helped improve JavaScript) once said: Once someone understands Monads, they lose the ability to explain it to anybody else. - The gist is that once you know how to use Monads, you don’t know how to explain it to others.
This polarization among JavaScript developers has led to a situation where some are stuck at the entry level while others have reached their peak.
So, the original intention of this course is to provide you, who are learning JavaScript, with a systematic and professional understanding of this language that initially might not seem so “professional”. It aims to help you step by step, connecting the dots, forming lines, and constructing a spatial and three-dimensional “thought building”.
Seeing this “building”, you might feel overwhelmed and think that the knowledge system is vast and scattered, making it daunting to learn. However, there is no need to worry. A tall building starts from level ground. As long as you combine the knowledge framework with practical experience and follow the methods I share, understanding and using it won’t be complicated.
So, what is my method? Let me explain it to you in detail below.
How to Learn and Avoid Detours? #
Many people believe that programming patterns, data structures, and algorithms can be detached from the language itself because these patterns are used regardless of the language being used.
In my opinion, while these concepts can be abstracted, understanding their application is improved by considering the characteristics of the language itself. After all, whether we are reading someone else’s code or making a program execute effectively, “language” is the tool we use to communicate.
Functional Programming #
To give an example, the rise or revival of functional programming and reactive programming is closely tied to their practical applications. In front-end development, our applications face UI clients, which require handling a large number of events triggered by users and the network, and responding to these events based on their states.
Many ideas from functional and reactive programming can help achieve this goal. Hence, these approaches have gained popularity and are not merely based on a particular theory or an attempt to surpass object-oriented programming.
However, I have also noticed that if we explain programming patterns without considering the actual language or the problems being solved, the explanations can become highly abstract and seem esoteric. For example, let’s consider the important concept of Monad in functional programming, which is officially explained as follows:
All told, a monad in X is just a monoid in the category of endofunctors of X, with product × replaced by composition of endofunctors and unit set by the identity endofunctor.
This kind of explanation may leave you scratching your head when trying to understand functional programming, let alone mastering its powerful capabilities. Although the explanation is not wrong because it is a mathematical concept that requires rigor and objectivity. But what relevance does it have to our development work?
So, in my opinion, when it comes to the question of “why do we need functional and reactive programming,” a very simple real-life example can help clarify things.
You must have also felt that in the past two years, black swan events have been occurring globally, and we feel that the world’s order is resetting. In the past, when we faced complexity and chaos, we could still “feel our way across the river by touching the stones”; but now, even the stones are gone, and what we experience is “chaos”.
Welsh scholar Dave Snowden, who worked at IBM in 1999, proposed a Cynefin framework to deal with this kind of “chaos.” In the face of chaos, he believes that we should follow these three steps: act, sense, and respond.
What does this have to do with our applications? We can actually understand the support for functional programming in JavaScript by combining it with its application in the field of front-end development. In front-end development, human-computer interaction is very complex. For example, after loading a page, we have no idea what reaction the user will have or which button they will click. What should we do then? The first step is to load the initial page, which is the action.
So, when the user clicks a button, such as a calendar, we move on to the second step, which is to perceive that the user wants to select a date. Therefore, we can add an event handler to this button, complete the loading of the relevant calendar component or module, and display the loaded calendar based on the user’s remembered requirements. This is the third step, the response.
In this process, we need to use tools to handle many things, such as event handling and state management. Functions are the tools for this. Their core is input-output (IO). We give a function an input value (data structure), it processes it (algorithm), and then gives us an output value (return value).
The core of Monad is to organize various methods around a “value”. So whether it’s the array.map provided by JavaScript itself, or the observer and reducer commonly used in React.js, they are all methods and tools that help us take action, perceive, and respond in complex systems, uncertainty, and chaos, to solve various side effects and improve performance.
Therefore, functional and reactive programming are not distant concepts but productivity tools right in front of us. If you haven’t seen them, you may just lack the eyes to discover them.
Object-Oriented Programming #
If we consider “productivity” when using functional programming, then when using object-oriented programming, we consider “production relationships” more. Before learning JavaScript, you may have a background in other languages, and you may tend to apply concepts like class to JavaScript and ignore some of its characteristics.
For example, in JavaScript, inheritance is based on prototype chaining and leans more towards delegation rather than inheritance. Even in the field of object-oriented design, emphasis is placed on using composition more and inheritance less. So, let’s see what unique characteristics JavaScript has in terms of object-oriented programming to organize production relationships.
In this course, we won’t use a binary thinking approach to say that one pattern is a silver bullet; instead, we will find appropriate methods based on the actual situation.
Data Structures and Algorithms #
Speaking of data structures and algorithms, I believe that whether you are solving Leetcode problems or watching courses on Geek Time, you can master them. And although it’s not absolute, algorithms are relatively language-independent. A friend once asked me whether it is necessary to solve algorithmic problems when learning data structures and algorithms. I actually think it is because sometimes, even if it’s for exam preparation, it is still a way of learning.
However, when teaching this part of the knowledge, I won’t approach it as an exam preparation lecture because you can easily find similar content elsewhere. In this course, I hope to guide you through the process of learning JavaScript engines, browsers, and compiler principles to understand these data structures and algorithms. This way, you can better understand the running mechanism and principles of this language, which complements courses specifically dedicated to algorithms. For example, if you don’t understand stack, queue, and heap, it will be difficult to understand even basic concepts like closures and event loops, let alone considerations for program development based on these mechanisms.
Design Ideas for this Course #
So, based on the above considerations, I have also summarized several pain points in learning JavaScript.
Firstly, as mentioned earlier, because JavaScript is a language with a low learning curve, although it is easy to get started, it is easy to lack understanding of underlying logic. This will greatly limit the quality of our code and our ability to solve more complex problems.
Secondly, it also makes it difficult for us to apply theoretical knowledge to practical use.
Lastly, due to the wide range of knowledge involved in front-end development, such as understanding the runtime mechanism of JavaScript, one needs to understand computer architecture, engines, browsers, and compilation. If every knowledge point is studied in a scattered manner, the wasted energy could be several times or even tens of times greater.
Therefore, when designing this course, I mainly divided it into five modules to address these issues.
- The Path of JavaScript
In the first module, we will first talk about functional and object-oriented programming patterns. After all, some core concepts or metacognition have stood the test of time and are still core theories and practices up to the present. Therefore, when you understand and master these two core programming paradigms, you will know how to combine the characteristics of JavaScript to complement each other’s strengths and weaknesses, and you will be able to solve practical problems according to the specific situation.
- The Law of JavaScript
Next, I will teach you the underlying logic of JavaScript and the data structures and algorithms used in it, helping you write more efficient code. I will start with a large number of open-source projects and other case examples to help you understand, learn, and master the characteristics of JS engines and browsers during compilation and runtime. This will help you truly understand these knowledge points and eventually integrate them seamlessly. This way, when you use certain features of JavaScript, such as sorting or code optimization, you will be able to grasp the key points better and manage your expectations.
- The Art of JavaScript
After understanding the data structures and algorithms of JavaScript, we will also take a look at the design patterns it uses. I have emphasized the importance of JS programming patterns (functional + reactive and object-oriented), and design patterns are actually an extension of the previous modules. In this part, I will combine some third-party libraries to help you understand and master how to improve “productivity” and optimize “production relationships” through design patterns.
- The Instrument of JavaScript
We know that using tools effectively can reduce repetitive work and help us improve development quality and efficiency. Therefore, in this module, we will still start with examples to understand and learn about commonly used tools in JavaScript and the principles and scenarios behind them. This will enable you to better empower development through understanding principles and practical experience.
- The Momentum of JavaScript
We say that the only constant is change itself. Through a systematic understanding of the JavaScript knowledge system, in the end, let’s also take a look at some new technological trends in front-end development. By understanding these changes and trends, we can further consolidate our knowledge system and advance to become a strong JavaScript language practitioner.
Closing Remarks #
In conclusion, I would like to say that learning is something that requires long-term persistence. I hope that in the upcoming updates, you can complete each lesson and participate in the discussion in the comment section. However, I also know that it is easier said than done, as learning itself goes against human nature.
So, if it’s so difficult, how can we truly persist in learning a course? I don’t have a definitive answer, but I would like to share some feasible methods based on my own experiences, hoping that they can be helpful to you.
- Firstly, when studying a piece of knowledge, try to keep going as much as possible. Even if some concepts are unclear, it is better to push through rather than dwelling on one specific point. If you encounter difficulties, you can simply look up some information, but make sure you only search for content that allows you to continue reading, without deviating from the main topic of each lesson.
- Secondly, you can provide feedback, and we promise to assist you. If you have simpler descriptions or unique insights on certain knowledge points, we welcome you to share them in the comment section.
- Thirdly, you can invite your good friends to study the course together and grow together. While reading thousands of books may not be as good as traveling thousands of miles, sometimes communication and interaction are more valuable. This is similar to peer programming in programming.
Furthermore, in order to make your learning process easier, I have incorporated two commonly used ideas from functional and object-oriented programming patterns, namely “declarative” and “interface-based design”. This means treating the learning process as a conversation, using plain language, readable code, and intuitive images as much as possible to help you understand some complex and confusing concepts.
Lastly, I would like to thank you for your trust. I hope that through this course, we can become friends with time and grow together! Through conversation, we can also become good friends on the lifelong learning journey.