Introduction to the

Sometimes need to new students popular science front, and do not know how to start? Toss this post to him first!

This article is adapted from magic brother for “people network summer intern training camp” front-end introduction lecture. This lecture is for college students, the content is relatively elementary, master please float ~

Hello everyone, today’s sharing is mainly divided into the following three parts.

At present, there is no special course for Web front-end technology in computer major, and each student has different understanding of the front-end. Today’s lecture will introduce the “front-end” in the most simple way to help you establish a basic concept.

What’s the front end?

Before answering this question, I came up with an interview question:

What happens when we type the url into the browser and press Enter?

Let’s take a quick look at the whole process of web presentation.

So let’s say I have a user here who needs to go to abc.com. Generally speaking, when a user enters a domain name, they are requesting an HTML resource. When he is done resolving the domain name, his browser makes a request to the Web server to which the abc.com domain name refers.

Sometimes the Web server simply returns the user’s request; Sometimes the Web server also needs to query some data from the database before it can return the processing results to the user.

When the user’s browser receives the HTML resource returned from the server, it parses and displays the HTML content.

In general, HTML pages require CSS resources to describe the style of the page. For example, when a browser parses HTML and finds a CSS link abc.com/a.css, it will request the resource.

HTML pages often also need to load external JS resources, such as abc.com/a.js, which the browser will also request from the server.

When all the required resources are loaded, the page is ready to provide the full look and function. And that’s pretty much what it looks like.

If we take a look at this flow chart, we can draw a vertical line down the middle, dividing it into left and right parts.

We’ll notice that the left side of the line is on the browser side, which we call the “front end”; What happens on the right side is on the server side, called the “back end.” (The front end is so called because it’s closer to the user.)

You’ve all taken courses on backend development, so you’re familiar with the backend. Which begs the question: what are the limitations of the back end in this process?

  • Once the server makes the resource available to the browser, it loses influence over the content.

  • The server cannot know what the user is doing in the browser and cannot interact with the user.

This means that only the next time a user requests resources from the server will the server have another chance to determine what the user sees. When does a user request a resource from the back end?

The first is a “navigational action”. For example, the user refreshes the page, clicks a link, clicks the browser forward/backward, and so on.

The second case is when the user submits the form. Forms are one of the most traditional ways to interact with a page. When you submit a form, the browser makes a new request to the server — which means the browser jumps to a new address and the server displays the result of the form’s processing on a new page.

There is also a special case, when the server returns HTML resources to the browser, it inserts a special mark in the page. When the browser sees this mark, it will automatically refresh the current page or jump to other pages after a certain period of time, which is equivalent to forcing the user to send a request again. As you can imagine, this non-user-driven page-hopping behavior isn’t very pleasant, so it’s not used much anymore.

In a traditional web page, the above interaction between the user and the server is sufficient. However, with the evolution of web form, users have put forward higher requirements for web experience. In many cases, the web is not just a static document, but more like an application, with which users can interact at any time. At this point, the value of the front end is reflected.

  • The front end controls the content of the page between the time a user stays on the current page and the time a new request is made.

  • The front end has the ability to interact with the user when they stay on the current page. Since the front-end JS can listen to various behaviors of the user in the browser (such as mouse clicks, keyboard input, page scrolling, etc.), the front-end can provide corresponding feedback for these behaviors.

In the interaction between the front end and the user, there are things that the front end alone can respond to. For example, we have made a calculator function on the web page. After the user enters the formula, JS can directly calculate the result and display it to the user. The whole process can be done without the server’s involvement.

But there are some things that a front end alone can’t do. At this point, the front end needs to be handed over to the back end for processing, and then handed over to the user after getting the processing results. In this process, the front end can keep the user on the current page, and the interaction process has good continuity.

So how does the front end hand off tasks to the back end and get the results? There are two main methods: Ajax and Socket connection.

Ajax is the most common form of front-end and back-end interaction. It completes the information transfer of the front and back end in the way of “request → response”. The traditional form interaction requirements can be changed from Ajax to “submit and get feedback in place” interaction, without the need to jump to the page, thus effectively improving the user experience.

For high real-time scenarios, Socket connection is a better choice. It works by establishing a continuous connection between the front and back ends, and information can be sent from the front end to the back end or pushed from the back end to the front end at any time. If we want to build a real-time conversation application, we usually use Socket connections.

What technologies are needed at the front end?

When it comes to front-end technology, we often talk about the “big three” :

  • HTML
  • CSS
  • JS

These are the three core technologies of the front end.

Next, we’ll talk about the layered architecture of the front end. The principle of this architecture is “let the right technology do the right thing”. A web page can logically be viewed as an organic combination of these three layers:

  • Structure layer: This layer expresses what information is on a page and how it relates to each other. This layer is technically implemented by HTML.

  • Presentation Layer: This layer determines how the information on the page will appear. This layer is implemented by CSS.

  • Behavior Layer: This layer controls how the page interacts with the user. In traditional presentation web pages, only the “structure layer” and “presentation layer” may be enough to provide complete functionality; Modern web pages are hosting more and more interactions, driving the power of “behavior layers.” This layer is implemented by JS.

We use an example to understand this layered architecture.

For example, I am a user of people’s Net, and I open the page of “Information I post” in the “User Center”.

The HTML for this page describes the information and the structure of the information. Even without the help of CSS and JS, the page still makes sense (see figure above). At the top of the page are some navigation elements, followed by “Information in display”, a heading, which leads to a list. This list of course is all the information I published in the people’s net. (In addition to “information displayed,” there is also “deleted information” at the bottom of the page, which will not be described here.)

Next, we will work on the presentation layer, using CSS to set the appearance of each element on the page. After this layer of polish, the content on the page is more beautiful; More importantly, the functional responsibilities of each element are more intuitive (see figure above).

This is already a pretty good web page, but next, we will enrich its function through JS, improve the user’s efficiency.

As a publisher of information, I might need to modify the content of a message, or “refresh” it, or something like that. In a traditional interaction, I would click on the information I want to act on in this list, and then select the appropriate action on the details page of the information.

We can simplify the process by adding an action button for each message in the list, and when the user clicks on the action button for a message, we pop up an action panel in the page, allowing the user to directly select the desired action, eliminating the middle link (see figure above).

Thus it can be seen that the structure layer, performance layer, behavior layer these three have their own advantages, together to construct a complete function, good experience out of the web page.

In addition to the basic “three pieces”, as front-end engineers, we also need to master the following knowledge and skills:

  • HTTP related: Because front-end resources are downloaded by the browser over the network, it is important to understand the relevant network protocols.

  • Browser-specific: The front-end code runs in the browser, and we need to understand the various features of the browser and the various interfaces that the browser provides to us.

  • Front-end performance optimization: make web pages faster and reduce user wait, which is also an important topic for front-end engineers. To optimize the front-end performance of web pages, we need to have the above two knowledge, and master the tools and methods related to performance optimization.

  • Graphics and images: Web page information contains not only text, but also pictures, videos and other multimedia information. As the most commonly used media resources, images require us to master the skills related to them. For example, understand the scenarios applicable to various image formats, basic image processing methods and so on.

(There will be a demo session where I will show you how to create a simple web page from scratch and practice the “layered architecture of the front end.”)

How is the front end developed?

We’ve covered the “big three” of front-end technology, but today we’re not “naked” when we write code for these three pieces. This means that the code we write during development is different from the code we actually run in the browser environment, in detail:

  • We use a template language to generate HTML.
  • Generate CSS code through the CSS preprocessor.
  • Write JS code using ES6+ syntax and features.

As an example, the following three examples show the evolution of the way code is written.

People net uses two template languages: Jade and Jedi. In the code above, we use only the most basic markup syntax of the template language, without inserting any of the logical capabilities of using the template language. In this step alone, you can see the benefits of template languages.

We used to spend a lot of time writing HTML code on syntax noise like <, /, >; At the same time, identifying the nested relationships of tags is also a bit of an eye-opener. Fortunately, modern template languages like Jade and Jedi have liberated the front-end engineer. They express nested relationships through indentation, and the hierarchy is clear; The grammar is more concise and expressive.

In THE case of CSS, the preprocessor eases the writing burden of developers with simpler syntax on the one hand, and enhances the expressiveness of code with built-in logic on the other. For example, when writing code with native CSS, the same color for different elements can only be scattered throughout the code; With the CSS preprocessor, we can abstract out the same meaning of color in the form of variables and call it everywhere in the code. This not only facilitates later maintenance, but also makes it easier to understand the intent of the code when reading it.

On the JS side, we are beginning to enjoy the benefits of new features brought by ES6+. ES (ECMAScript) is the standard specification that defines THE JS language. Since the sixth edition, ES continues to expand the capabilities of THE JS language at a rapid pace at an annual pace.

Historically, if we wanted to implement the need to find members in an array that match certain criteria, we would use a tool library like Underscore to call its _.find() method. In ES6, the language itself extends array capabilities by simply calling the Array#find() interface. In addition, new syntax such as arrow functions can further simplify the code.

In the case of HTML, CSS and JS, we have abandoned “naked writing” and adopted “higher level” languages for the purpose of:

  • Leverage the “logic capabilities” provided by high-level languages to enhance the expressiveness of your code.

  • Take advantage of the “syntactic sugar” and “new features” of high-level languages to improve development efficiency and comfort.

Of course, adopting these higher-level languages is not entirely cost-free. The languages we used during the development phase were no longer pure HTML, CSS, AND JS, which browsers could not recognize and run directly. Therefore, when we give up “naked writing”, it means:

  • There is a build part of the deployment process that compiles the source code into object code that the browser environment can run.

  • During the development phase, tools are needed to monitor and compile the changing source code in real time to ensure that the page is rendered with the latest changes we have made.

At People’s Net, the front-end architecture team has built the necessary development environment, and developers only need to focus on the development itself.

In enterprise-level front-end development, we also need to know the following:

  • Modularity: Modularity is one of the most common programming practices that makes our code organization clearer and easier to maintain. ES6 adds a complete modular solution to JS, and our daily development has been migrated to ES6 module specifications.

  • Package management: How can I leverage the best components in the open source community? It is necessary to mention “NPM”, the most mainstream JS package manager. Most of the best open source projects in the front-end world are published in NPM’s package repository, and the third-party libraries we use in daily development are managed by NPM.

    The packaging tool can integrate the modular source code we write with third-party packages to form the complete JS resources required by the page. The combination of “package manager”, “modularity” and “packaging tools” is basically the way everyday JS code is organized.

  • Componentization: In traditional front-end development, the HTML, CSS, and JS pieces of code have separate files, which are often scattered in different directory structures.

    If the functional blocks of the page are clearly divided, developers can use the concept of “components” to break up the page, and the entire page is treated as a nesting and composition of multiple components. At the same time, developers tend to consolidate the HTML, CSS, and JS code related to each component into the same directory (or file) for easy management and maintenance.

    This is the “componentized” development model. To implement such a development pattern, a front-end framework and build tools are often required.

  • Single-page application: THE History API of HTML5 provides the front end with the ability to control the navigation behavior of the browser. With the feature of Ajax updating the page content without refreshing, we can realize the multi-view switch of the application within a page, avoiding frequent page jumps and providing the experience similar to desktop application. For example, Gmail and other products are typical single-page application mode, most of the background system of the people’s network is also single-page application.

  • Other practical knowledge point, leave to wait for everybody to excavate slowly in the job.

That’s all I want to share with you today. Thanks for reading, bye!

Author: CSS magic @ front-end architecture introduction: People network front-end architecture TL, “CSS Revealed” translator, CSS Conf lecturer, claiming to “wear the engineer’s coat of the designer”.

This article is the author’s personal view only, does not represent the people’s net position. Photo by Lakexyde @pixabay

This article is published on the wechat public account of “People’s Net Technical Team”. Scan the code to subscribe immediately: