In this paper, starting from vivo Internet technology WeChat public links: https://mp.weixin.qq.com/s/VRSl5_yn5BZcqtRxWkXU-Q author: hole hanging light

What is the front end

Before answering this question, I was reminded of a classic front end question: “What happens from the time you type in the URL to the time the page appears in front of you?” This topic can be answered very simple, but careful thinking, can also be answered very deep, this process involves a lot of things. Let’s start with a picture:

The short answer is

  1. Domain Name System (DNS) resolution

  2. Transmission Control Protocol (TCP) connection

  3. HyperText Transfer Protocol (HTTP) request

  4. The HTTP response

  5. HTML parsing & CSS rendering

  6. JS parsing execution

Why mention this? Because this is the entire Web service life cycle, and in the beginning there was no concept of a front end or a back end. At that time, I used Dreamweaver to write static HTML pages and then deployed them to IIS (Internet Information Services) on a computer. When the page is requested, the HTML file is returned.

Later on, the server side became a bit more complex, and HTML pages started to be written using various templates, such as The Java family FreeMarker, ASP, PHP, and so on. Back then, back end development was integrated, and at most template writing was the original front-end domain, but back then, it was often done by today’s back end development.

Here is a typical PHP template:

<html>
  <head><title>Car {{ $car->id }}</title></head>
  <body>
    <h1>Car {{ $car->id }}</h1>
    <ul>
      <li>Make: {{ $car->make }}</li>
      <li>Model: {{ $car->model }}</li>
      <li>Produced on: {{ $car->produced_on }}</li>
    </ul>
  </body>
</html>Copy the code


This all changed with the advent of Ajax (Asynchronous JavaScript and XML) in 2005. JS scripts can request data from the server independently, and then process and update the web page. In this process, the back end is only responsible for providing data, and the front end does other things. It was around this time that the front end became more complex, and it was around this time that designers and back-end development began to abandon the front end and the role of development quietly changed:


Now, what is the front end of the problem should be clear:

  • Front-end: For browser development, code runs in the browser

  • Back end: For server development, the code runs in the server

It’s fair to say that Ajax was the turning point for the front end, but it wasn’t the beginning of the front end, the beginning of the front end, and we’ll talk about that later in the history of JavaScript.

Since the front end is for the browser, what does a page render do in the browser?

After receiving the HTTP packet from the server, the browser parses and renders the packet. First, the browser parses the HTML file to build the DOM tree, then the CSS file to build the render tree, and once the render tree is built, the browser lays out the render tree and draws it to the screen. In addition to presentation, we also need to interact with the page, so we cannot do without JS. The parsing and running of JS is completed by the JS engine in the browser, the most famous of which is V8 released by Google in 2008.

So, there are only three types of code running in the browser: HTML + CSS + JS.

HTML(HyperText Markup Language) is not a programming Language, but a Markup Language used to tell browsers how to organize pages. It consists of a series of elements that can be used to surround different parts of content to make it appear or work in a certain way.

If we open the source code of any page in the browser, we will see something like this:

Cascading Style Sheets (CSS), short for Cascading Style Sheets, are used to Style and format web pages – for example, changing the font, color, size, and spacing of web content, breaking it up into columns, or adding animations and other decorative effects. It selects the HTML elements mentioned above through a selector, and then adds color, spacing, and other styles to the selected elements. As follows:

Every page that has the pursuit of taste, is borrowing CSS to say to the viewer: “HOW I look so good!”

JS(JavaScript) is a function-first, lightweight, interpreted programming language. It was born of the Internet, right after the advent of the browser. It is a computer language. With the rapid development of the front end, it has become one of the important languages for building enterprise-level applications, not just for verifying some pages, as it was at the beginning of its emergence. It is currently ranked third in the global usage.

If use a person to make analogy webpage words, HTML is a person’s skeleton, CSS is a person’s flesh and blood, and JS is a person’s soul!

Front-end development engineer is a new profession that has really begun to gain attention with the development of the front-end in the last decade. So we just mentioned the front three parts: HTML + CSS, JS, the three parts looks sounds all feel very simple, also because of this, the front-end development into “to” counterparts, there are a lot of self-study, I even in the school for the interview to hear say candidates because thought the backend is too difficult for other job interview pass it to choose the front end.

Indeed, front-end development has a low threshold of entry. Compared to the learning curve of back-end languages, the learning curve of front-end development is fast and then slow, and the learning curve becomes steeper and harder with each step, resulting in most front-end development remaining in the initial stage.

The history of the JavaScript language

JS as the soul of web pages, it is the most important part of front-end development, so next we look at JavaScript as a computer language is how it was born, and experienced how the development.

In December 1990, CERN scientist Tim Berners-Lee invented the World Wide Web. On March 12, 2019, CERN hosted a series of events to celebrate the 30th anniversary of its creation. At that time, the web page can only be viewed in the terminal of the operating system, that is to say, can only use the command line operation, the content of the web page is displayed in the character window, which is of course very inconvenient.

In May 1994, Xu Rongsheng, a researcher from the Computing Center of Institute of High Energy Physics, Chinese Academy of Sciences, went to CERN to attend the first International WWW conference attended by 380 people. After the meeting, he led a group of young people to create China’s first WWW server using Linux on a PC in the HIGH-TECH Institute’s computing center, and launched the first website www.ihep.ac.cn (the domain name is still in use) and an English web Page (IHEP/China Home Page). The site became one of the few in Asia at the time.

In late 1992, the National Center for Supercomputer Applications (NCSA) began developing a stand-alone browser called Mosaic. This was the first browser in human history, from which a web page could be viewed in a graphical window. Mosaic was the forerunner of the browser that came to be known as Netscape Navigator.

This was before Ajax, so every time the user acted, the entire page would be reloaded. Netscape soon figured out a problem. If the user hadn’t entered anything, it hit the “send” button, and the server sent the entire page back to the client with just an error message.

In those days, the Internet was very slow and very expensive, and it was obviously too late to get to the server and tell the user, “Please fill this out,” before the user sent the data. This involves embedding a small program in a web page that lets the browser check that each field is filled in.

In April 1995, Netscape hired programmer Brendan Eich to develop the web scripting language. In just 10 days, Brendan Eich designed the first version of the language, which was originally called Mocha and changed to LiveScript in September 1995. In December Netscape struck a deal with Sun, the inventor and owner of the Java language, to allow the language to be called JavaScript.

This allowed Netscape to ride the wave of the Java language, while Sun extended its influence to the browser. JavaScript actually has nothing to do with Java!

In August 1996, Microsoft developed a similar language modeled after JavaScript, called JScript (JavaScript is a trademark of Netscape and cannot be used by Microsoft), first built into IE 3.0. Netscape faced the loss of dominance in the browser scripting language.

As a result, Netscape decided in November 1996 to submit JavaScript to the European Computer Manufacturers Association (ECMA), The hope is that JavaScript will become an international standard against Microsoft.

In July 1997, the ECMA organization released the first version of standard Document 262 (ECMA-262), which specifies the standard for the browser scripting language and calls the language ECMAScript.

Java is a trademark of Sun, and according to a license agreement, only Netscape can legally use the JavaScript name, JavaScript has been registered as a trademark by Netscape. On the other hand, it also wants to show that ECMA is the creator of this language, not Netscape, so as to ensure the openness and neutrality of this language.

Thus, the relationship between ECMAScript and JavaScript is that the former is a specification of the latter and the latter is an implementation of the former. In everyday situations, the two words are interchangeable.

The next two years saw the release of ECMAScript 2.0 (June 1998) and ECMAScript 3.0 (December 1999). Version 3.0 was a huge success, gaining widespread support in the industry and becoming the prevailing standard, laying down the basic syntax of the JavaScript language, which later versions inherited completely. To this day, when beginners start learning JavaScript, they are learning the syntax of version 3.0.

In 2000, ECMAScript 4.0 was hatched. This version did not pass, but most of it was inherited by ES6. So the starting point for ES6 was actually 2000. Why didn’t ES4 pass? ECMA met and decided to discontinue development of ECMAScript 4.0 because it was too radical, a radical upgrade to ES3 (now KNOWN as ES6), and attracted strong opposition from major companies including Yahoo, Microsoft, and Google.

Only Mozilla, the company behind JavaScript creator Brendan Eich, stuck to the ES4 draft, and sometimes it’s hard to get creative!

In June 2015, ECMAScript 6 was released and renamed “ECMAScript 2015”. Since ES3, ES5 and ES5.1 have been released, but they are only minor improvements to existing features.

It’s hard for front-end development to embrace ES6 and get used to it. After all, Google couldn’t, and ES6 is the best of the last 15 years.

Third, Web development technology evolution

After talking about the history of JavaScript, we can see that it has not been positively correlated with the development of the front end because it has not changed much over a long period of time. So let’s talk a little bit about the history of how the front-end technology has evolved and what’s happened to the front-end over the years.

1. Web 2.0

Ajax, which was introduced in 2005, promotes separation of the front and back ends.

In fact, this was the year Google released a test version of Google Maps, and the project made extensive use of the technology that allows web pages to asynchronously update their content by sending data back and forth in XML format via Javascript.

It was a generational feat at the time, giving users the chance to see a map that could update their status without having to refresh the entire page, and we’ve seen how asynchronous operations can be a great experience for site users.

It was literally the first year of Web development technology. The Web has moved from 1.0 to 2.0.

2.MVC (model-view-controller)

The front-end can fetch data through Ajax, so there is a need to process the data, which leads to the birth of front-end MVC.

My first front-end project is to use MVC mode to do, using ExtJs, it used to be a very good enterprise Web rich client application development platform, it made the page effect is particularly cool. As shown below:

I applied the MVC pattern in this project.

  • View: User interface

  • Controller: service logic

  • Model: Data Model

As the user interface, the View sends instructions to the Controller, which requires the Model to change the state. Meanwhile, the Model sends the updated data to the View for feedback to the user.

One of the core aspects of the MVC model is that all communication is one-way.

In fact, the DESIGN idea of MVC is reflected in many places in daily life. Taking the household microwave oven as an example, it can also be understood as a three-layer structure. The external appearance of the microwave oven and its operation buttons are the “View layer”, while the magnetron, the microwave generator inside, is the “Model layer”, where “data” can be understood as “core functions”. The instruction to push buttons is translated into the operation of the magnetron by the circuit board of the “controller layer”.

If you want to replace your microwave oven with a funkier housing or a more powerful magnetron, you can do it without changing the other layers. Each layer is independent, which is the biggest advantage of the MVC pattern.

Later in this phase, the front end gradually began to have a bit of engineering shadow, and began to be influenced by CommonJS, the concept of modular programming, the corresponding CMD and AMD specifications were born. There was the build tool Grunt/Gulp, and there was the specification JsLint for coding.

3.MVVM (Model-View-ViewModel)

MVVM is also a software architecture pattern, which is evolved from MVC, removing the Controller in MVC and adding two-way binding of data.

The most representative framework is Angular from Google, which is an enhancement of THE HTML language and the core concept is two-way data binding.

Vue can also be considered an MVVM Model, although it does not fully follow the DESIGN of MVVM, but is inspired by MVVM. It was also bidirectional data binding in the beginning, and has always used VM to represent the View-Model. Taking Vue as an example, take a quick look at the idea of MVVM.


4.SPA (single-page application)

SPA stands for single page application, which is a distinction between traditional models. We started by exploring the process from entering the URL to the page being presented to us, and we became familiar with HTML, CSS, and JS. Now look at the process from another Angle:


When the client makes a page request, the back end receives the request, fetches the data from the database, assembles the HTML, and returns HTML, CSS, and JS. With Ajax, you can retrieve data from the current page and update the page content. But when we switch pages, that is, when there is a jump, the whole process starts all over again.

For starters, Ajax can fetch data from the current page and update the current page at any time, so what if you could switch pages and update them with Ajax data instead of reloading them all?

The answer is yes! As shown in the figure below, the first time a user makes a page request, the back end receives the request, then fetches the data from the database and returns the CSS and JS files.

JS file includes the processing of page switching logic, which is the key to the realization of single-page application. It uses Hash or History technology to realize that when switching pages, it first obtains the data required by the new page through Ajax, and then JS switches to the website according to the site to be switched. Use the obtained data to stitch together the HTML for the page to be displayed.

The whole action of switching pages is completed by the front end. This is a single-page application, where all resources are loaded only on the first page request, followed by an Ajax request for data.


5.SSR (server side render)

SPA takes the Web in the form of an application, which is client Side render. Client-side rendering has its drawbacks, such as not doing SEO(Search Engine Optimization), because all JS and CSS will be loaded in the first visit, and HTML is assembled in the front end, it is bound to lead to the first screen loading and rendering time will increase, affecting the user experience.

It is ridiculous to think that ten years ago, in order to get on the Ajax bus to do SPA, do client rendering, but now think of ways to do server rendering again.

In fact, the essence is the same, so there is a historical burden here. Before starting the project, it is important to think clearly whether it is necessary to make a SPA, rather than blindly chasing after it.

Of course, there are still some differences in the form of server-side rendering today:

The previous server-side rendering was basically a page-centric development model that only needed to handle template -> HTML string conversion, and the performance was better than the current server-side rendering.

The current server-side rendering is basically component-centric development mode, development efficiency and maintainability of course higher, components can also be unified through the module building tools such as Webpack together.

There are some Web applications that should use the SPA pattern, but want SEO to solve?

When a web crawler from a search engine comes in, it can actually be determined by the header information, so an innovative solution is to write a service in the middle layer to intercept the request.

Rendora, for example, solves this problem by not changing any of the previously written projects. It simply adds server rendering to the crawler request and returns the generated HTML. For non-crawlers, you can do whatever you like.

6. The Node & full stack

In 2009, the Node project was born, which is a JavaScript runtime environment on the server. Node gives front-end development the ability to control the server: Node = JavaScript + OS API

Stay tuned for the next section on Node.

Iv. References

  1. History of the JavaScript language

  2. The technical principle and history of big front end

  3. History of front-end frameworks

  4. History of the WEB front-end

  5. Thirty years of the World Wide Web WWW

  6. MVC, MVP, and MVVM diagrams

For more content, please pay attention to vivo Internet technology wechat public account

Note: To reprint the article, please contact our wechat account: LABs2020.