A “black swan” is an event that is unpredictable, impactful and can be analyzed with hindsight. A few black swan events explain almost everything that happens in the world. Isn’t the front end evolving more like a black swan than a gradual one? Let’s take a look at history from another perspective…

An unpredictable black swan

Take a look at your environment. Look at the major events, technological changes and inventions that have taken place around you since you were born. Compare them to what people had expected about them. Look at your own life, your career choices, your encounters with your spouse, your forced departure from your native land, the betrayal you faced, your sudden wealth or destitution. How many of these things happened according to plan?

— Black Swan

Many historical books and biographies explain the inevitability of historical evolution from the perspective of determinism, but in fact, for ordinary people living at that time, the great changes in history often happened suddenly on an ordinary day, without any precaution or concern.

The development of technology also has a high leap and uncertainty. There are points in time that occur only once in a few years or even decades, and then there are periods of steady growth. Moreover, the birth of new technology is often not as strong as the iPhone launch with a sense of ceremony, but may just be flat or even questioned to reveal their own veil. Now, we’ll take a closer look at the browser to see how some of the most familiar technologies in the front-end world today were born and how they resonated.

JavaScript born on the fly

The mid – ’90s was a magical time. In the film industry, three classic films released in 1994, The Shawshank Redemption, Leon and Forrest Gump, have long been in the Top 10 of Douban’s Top 250 films. By 1995, three emerging programming languages were firmly in TIBOE’s top ten today: Java, PHP, and JavaScript.

If Java expresses the heaviness of Shawshank and PHP implies the danger of Leon the killer, then perhaps JavaScript was born with consideration for Forrest Gump’s intelligence… Many years later, Brendan Eich, the father of JS, expressed the original intention of DESIGNING JS as follows:

We are ready to provide a “glue language” for Web designers and part-time programmers who build Web content using components such as images, plug-ins, and Java applets. We think of Java as a “component language” for highly paid programmers, while glue programmers — web designers — can assemble components and automate interactions through a scripting language.

Therefore, in the view of the JS author himself, the front-end engineers he expects are only “part-time programmers” and “glue programmers” (original part time programmer/glue programmer), which is somewhat prophetic. To get his proposal to implement the language approved by Netscape management, he implemented a prototype in ten days in May 1995. Note the timing, because Netscape went public three months later in a record-breaking IPO.

Under the historical background of rapid development of the company, many aspects of JS have rushed to work. When asked in the interview about his biggest headache in language development, Brendan admitted:

The main thing is that the proof-of-concept time is incredibly short, and after that the language design has to freeze. It took me about ten days to develop the interpreter, including implementing the built-in objects.

If Brendan had known that these hastily frozen base designs would affect millions of developers and billions of users for the next 20 years, maybe he would have convinced management to give him a little more time… The short design time resulted in a lot of historical technical debt in the basic design of the language, such as the coexistence of undefined and null for “value does not exist” :

JavaScript applies Java’s separation of values into “raw values” and “objects” at design time. It also uses Java to express “not an object” value, which is null. According to the C (not Java) precedent, null becomes 0 when converted to a value:

> Number(null)
0
> 5 + null
5
Copy the code

The first version of JavaScript had no exception handling. As a result, undefined variables and missing attributes need to be represented by a value. Null would have worked well for this scenario, but Brendan also wanted to satisfy the following two conditions:

  • This value should not have a meaning corresponding to the reference type, because it is not just an object.
  • This value should not be converted to 0, as this would make errors harder to detect.

As a result, Brendan added the concept of undefined to express another form of “value does not exist.” It will be converted to NaN:

> Number(undefined)
NaN
> 5 + undefined
NaN
Copy the code

This is the origin of the undefined Chou (Ming) – zhao (Zhu) in JS. This feature has caused a lot of pain for many developers over the years. For example, a bug on the line where it actually occurs will often not report an error directly, but will produce a undefined that the interpreter accepts. And then a long time later, somewhere else you get an error telling you that undefined does not exist, but the error is not in that line at all, it happened a long time ago! This feature is definitely not a pl-ready feature today, but given ten days, would you really not choose the easier design to implement?

Of course, no language is born perfect. However, it is very difficult to make any Breaking Change in language features in the browser, which has extremely strict requirements for forward compatibility. A problem like this is a feature rather than a bug:

var obj = {}
typeof obj // 'object'
typeof null // 'object'

obj instanceof Object // true
null instanceof Object // false
Copy the code

To conclude, we now have evidence, directly or indirectly, that JavaScript is the product of a hasty implementation:

  • Design target positioning low-end code farmers.
  • The fund owner is in extensive growth stage.
  • Prototype iterations take very little time.
  • Many of the underlying features are poorly implemented.

In a system that connects more than 3 billion people, the only programming language at the application layer is a rush work riddled with design flaws — and it’s a good example of the sudden and far-reaching nature of the Black Swan. Of course, the importance of the Web has spawned countless successive innovations, and here we pick out the most well-known ones to illustrate their black swan nature.

Face based live jQuery

Twelve years ago, during the white album season, if you had been lucky enough to attend a BarCamp offline conference in New York, would you have imagined that this guy on stage, John Resig, would be running amway’s new wheel, which has not even finished its documentation, on more than 70% of the world’s web pages?

BarCamp is a workshop meeting that participants share with each other. The agenda is provided by participants, usually on topics related to the Internet, programming, and open source. In other words, it was a small technical exchange. BarCamp is held many times, with many speakers sharing many different topics, and in terms of the influence of jQuery, it is probably the most famous Big Thing to emerge from this kind of event. At the time of its release, however, jQuery was just one of several topics that the author himself shared. According to John Resig’s own statement, he didn’t share anything else during the BarCamp, about three things:

  • I talked about a Demo of a real-time collaboration application called ideaShurb.
  • About a new web product called Feed Pile that aggregates information from people you know.
  • I talked about a new wheel called jQuery that improves the way you control HTML with JS.

If there is one other achievement, it is an extra PPT for thinking about social network and an idea of paid social network. But the main thing is these three things.

Back then, writing JavaScript meant constantly stepping into compatibility pits: you needed to support IE6 and Firefox, and Google’s Chrome wasn’t released for another five years. JQuery quickly became popular with glue programmers and front-end developers, and to date has over 6000 commit entries from nearly 300 people to prove its popularity. JQuery has also established a foundation that many volunteers continue to maintain.

The jQuery example shows how small the starting point for a transformative technology can be. JQuery was not a project promoted by a company or organization, and the author himself had no all-dimensional development at that time (John Resig, himself an entrepreneur and ukiyo-e researcher, basically withdrew from the project after the foundation was established). And now, who do we know about ideaShurb and Feed Pile? We have every reason to believe that the author would have liked all three of the projects he shared to work, but jQuery was the only one that stayed and changed the way millions of people work. Today, there are many articles that say “the Web was facing compatibility issues at the time, so jQuery was a historical necessity.” But once you understand how it came to be, the black Swan’s contingency and uncertainty are the only commonalities among these projects.

At the end of this section, let’s think back to the jQuery front page. At that time, the sky was blue, the water was green, and the house price in Beijing was only 8000 yuan……

The React

When we opened React, the initial reaction was skeptical.

On the first anniversary of React open source, the understatement on its official blog is a reflection of the community’s skepticism about its universality in its early days. Here’s how people on Reddit initially reacted to the React news:

Reading their documentation, I have no idea what the simplest example is trying to do.

Am I the only one who thinks this looks messy and unwieldy (with a new grammar to learn)? Does this have any advantage over Angular?

Just because Facebook’s library works for Facebook doesn’t mean it works for other people.

Oh, my God. Why would you want to add more tags to your code?

For a second I wondered if it was April 1st. It broke too many promises, destined for hatred. I welcome diversity, but it certainly doesn’t look good.

Mixing HTML, XML, and JavaScript makes me feel like I’m back in the JSP era. When you have five languages and syntax in a file, it’s NP hard to determine which language the cursor is in. Forget it. Unless it makes a difference, I’ll use Angular.

HTML mixed in with JavaScript? No, thank you.

Looks like it cost a billion dollars.

Ugly.

Almost 90 percent or more of the dozens of most popular comments on Reddit were negative. Interestingly, just in the same year, Dr. Ali Yun Wang Jian received overwhelmingly negative comments on Zhihu.

React was originally a JAVASCRIPT version of XHP (a Facebook PHP dialect). Due to the difficulty of mixing XHP with client-side JS code, An engineer asked the manager for six months to fully migrate it to JavaScript. Today, with tens of thousands of React-XXX plugins, nearly 10,000 Commits, and thousands of contributors, it’s a superstar in the front-end community.

React represents another type of technological innovation. It did break a lot of “best practices” and stereotypes, and created a lot of controversy, but the ideas and paradigms behind it did lead to a round of technological advances in the front-end community. The most interesting thing about this example is that a glue programmer front-end developer in 2013 saw it for the first time and over 90% of his first impressions were “what the f * * k”. Yes, mainstream opinion at the time also thought bitcoin was too expensive… We are often wildly wrong and presumptuous about our ability to predict the future.

There’s one last detail worth mentioning about React: it’s the only wheel in this article that doesn’t have an explicit author. We all know React is the product of Facebook, but who was the engineer who applied for six months to build the wheels? React’s AUTHORS are in alphabetical order. The original design document for React basic has no author submission. We managed to catch up with Jordan W on his Github account, but compared to the React team’s star-studded cast of influenters, he didn’t even post a photo… Given the debate between Vue and Angular and the React controversy, we can understand the author’s difficulties in anonymity…

Vue was born just in time

All of these wheels have their own advantages: JavaScript makes rich interaction in browsers possible, jQuery’s DSL simplifies DOM manipulation, React’s programming paradigm changes the way developers think… When it comes to Vue, it’s hard to find a technological breakthrough beyond “easy to use.” However, since its popularity has eclipsed React in China, it certainly has its own unique features.

Compared to React, Vue’s debut was relatively unknown. On Hacker News, author Evan You’s first Vue post earned 54 points and 26 comments. React, by contrast, received 2,280 points and 498 reviews for even changing licenses.

Although the topic of Vue was not as strong as React when it was first released, it was quite good in communication and reputation, gaining 2W + official website page views and 600+ star within the first week after its release. Today, three years later, it is almost the preferred framework for business development among Chinese developers. The rise of Vue has been a platitude, not to mention here. The question we want to ask in this section is: Why have so many front-end developers recently switched to Vue? Why don’t Angular/Avalon/Knockout frameworks such as MVVM take off like this?

From a technical point of view, I can think of several “reasonable” reasons:

  • When turning to Vue, IE8 can be generally abandoned in China, and THE implementation principle of Vue just supports IE9 at the lowest level.
  • Angular 1 performance is poor, and Angular 2 API changes are large.
  • React’s JSX has long been viewed as heretical, not compatible with the family, and not as supportive of Chinese culture as Vue.
  • Knockout and Avalon lack modern engineering support and are poorly maintained.
  • …

So do these reasons make sense? They’re just pure afterthought! These reasons are just justifications for “why Vue is popular” based on the reality that “Vue is popular”. There is no doubt that Vue’s framework design is first class, but does Vue’s popularity outnumber some of the major in-house frameworks by a factor of ten, so its code quality is so many times better? We can’t quantify that. But here’s an example to use as an analogy:

If you’re a music lover, you might pay $100 to hear a small local band at your local theater when you don’t have records. Would you still be as willing to go to a concert by a small local band when records became popular and you could hear a number one band in the world for $10? There is a very strong Matthew effect on information resources, and open source has greatly reinforced this effect in programming. How many of the alternatives to frameworks like React and Vue actually make it into production, compared to the front end? Much of the black Swan’s influence comes from this winner-takes-all agglomeration, and Vue is a rare winner in the field.

So far, we’ve seen the creation of several key technologies in the browser space that are quite different from what we might expect: JavaScript was implemented in a very sloppy way, jQuery was a tiny side project, React was initially discredited, and Vue wasn’t much of a game-changer… But they will not be forgotten by history. So what’s next? If a black swan could be predicted, it would not be a black swan.

Afterword.

People don’t know, you can’t predict. A person’s fate ah, of course, to rely on their own struggle, but also to take into account the history of the journey.

At this point, I have some additional thoughts: The developers in this article are undoubtedly the best in the community, but are they necessarily the best at the technical level when it comes to making great contributions? I’d like to believe that out of the millions of developers out there, there are a lot of low-profile guys out there whose projects are as tough and challenging as any of the above. However, there are only a few black swans, and the spotlight is limited in scope, and for the vast majority of hard-working developers, black swans are available.

So what is our attitude towards the black swan nature of technological evolution? Yu Bo Dalao’s signature is very instructive: “due to efforts, the fruit of fate”. There are many students who have reached the level of developing star projects, but there are too many uncertainties in revolutionary projects. What we can do is to steadily learn and progress, and then wait patiently. In other words, this is the so-called “do good, don’t ask future”. Of course, please don’t confuse this attitude with glue programmers writing the business logic of add, change and delete with ease 🙂

Given the author’s limited knowledge of the front end, this article has covered only a few examples of what the front end is all about. If you have any errata or better ideas, feel free to post them on Github or in the comments. Thank you.

References

  • How JavaScript Was Created
  • The A-Z of Programming Languages: JavaScript
  • A Brief History of JavaScript
  • The History of undefined and null
  • JavaScript’s History and How it Led To ReactJS
  • Popularity – Brendan Eich
  • BarCampNYC Wrap-up
  • History break: How did John build jQuery?
  • The most popular JavaScript library, jQuery, is now 10 years old
  • One Year of Open-Source React
  • React: Facebook’s latest Javascript client library, now open sourced
  • Relicensing React, Jest, Flow, and Immutable.js
  • Vue.js: JavaScript MVVM made simple
  • First Week of Launching Vue.js
  • Evan You
  • Internet Trends