preface

In modern front-end development, frameworks help us do a lot of things, and we can develop quickly by generating an engineering project with a single command. This article wants to help you understand what is going on through the process of front-end engineering. From the beginning of the static page, HTML, CSS, JS this front end three axe. After the jQuery function library, I jumped directly to vUE, React and other modern MVVM frameworks. After learning the process of feeling very confused,.vue file is what ghost? Why write some HMTL and js in a.vue file, the browser can render the effect in real time, isn’t the browser only know.js files? With these questions in mind, I’m going to talk about the past and present of front-end engineering.

The Bronze Age: the front and back ends are not separated

In the web1.0 era, early web development was largely dominated by the back end, because browsers were weak and poorly standardized, and there was little that the front end could do. At that time, the front and back ends are not separated, generally by the artist out of the picture, the front end of the picture and restore the design for a static page template to the back end, the back end is responsible for the final rendering, commonly known as the picture.

The MVC pattern

In the era dominated by the backend, the MVC pattern is followed. The front end is only responsible for the implementation of the View layer.

In the classic MVC pattern, M refers to the business model, V refers to the user interface, and C is the controller. The purpose of using MVC is to separate the implementation code of M and V, so that the same program can use different representations. Among them, the definition of View is relatively clear, is the user interface.

MVC Schematic:

At that time, the front-end page was implemented with the help of technologies such as JSP, essentially by the back end rendering front-end files, such as HTML, in. JSP file can use Java variables, in the compilation phase into the page to inject Java variables to achieve. Such as:

<html>
<head><title>An Include Test</title></head>
<body bgcolor="white">
The current date and time are
<%@ include file="date.jsp" %>
</font>
</body>
</html>
date.jsp
<%@ page import ="java.util.*" %>
<%= (new java.util.Date()).toLocaleString() %>
Copy the code

The resulting page will display information similar to the following in the browser:

The current date and time are
Aug 30,1999 2:38:40
Copy the code

The <% @page import =”java.util.*” %>, <%= (new java.util.date ()).tolocaleString () %> is the JSP include directive. The problem: because the front end is only responsible for writing the template interface, and the front end is not separated, it is very difficult to modify. The front-end needs to be debugged and then packaged, compiled and released by the back end. Validation is then carried out by the front end, which leads to low development efficiency and high communication costs.

The Silver Age: The advent of Ajax

In the era of back-end dominance, it is often necessary to refresh the whole page to obtain the latest data, which is very bad from the standpoint of user interaction experience.

In 2004, Google launched Gmail and Google Map. Both products make heavy use of Ajax technology, allowing the front end to communicate with the server over the network without refreshing the page.

Ajax, Asynchronous Javascript And XML, is a term coined in 2005 by Jesse James Garrett to describe a ‘new’ approach using a set of existing technologies, including: HTML or XHTML, CSS, JavaScript, DOM, XML, XSLT, and most importantly XMLHttpRequest. Web applications using Ajax technology can quickly present incremental updates to the user interface without the need to reload (refresh) the entire page, making the application more responsive to the user’s actions.

With the popularity of Ajax, the front end from web pages to Web applications, marking the advent of the Era of Web 2.0. With the help of Ajax, the era of front end separation has arrived.

Front and rear separation

The separation of front and back ends makes the division of labor of front-end and back-end engineers clear: front-end engineers are responsible for UI restoration and user interaction, while back-end engineers are responsible for data support, and the nodes of their interaction are in the interface. This allowed a lot of logic to shift to the front end, and the front end engineers finally stood up.

Although the separation of the front and back ends has now been achieved, new problems have arisen. As the performance and popularity of browsers increases, the front end plays an increasingly important role in Web applications. The front-end is responsible for more business logic and UI rendering, and the more complex interaction logic makes the front-end code heavier and heavier.

As you know, JavaScript is an interpreted scripting language, and there was no modularity in JS at the time. As the project gets larger, the front-end code becomes more difficult to maintain. Imagine how creepy it would be in a multiplayer development scenario, with various JS files sharing a global environment. It is possible to encapsulate conventions at the syntax level, such as using Script tags, directory file organization, closures, IIFE, object emulation namespaces, and so on, but it is still a palliative. There are problems that need to be solved, so modularize it.

Golden Age: The advent of Node

In 2008, Google launched its V8 engine. In 2009, Ryan Dahl, an American programmer, created Node.js based on Google’s V8, which is a JavaScript runtime environment that allows JS to run on the server. Node uses the CommonJS modularity specification. At this point, front-end development ushered in an era of vigorous development, and also entered the golden age of the front-end.

How to use modularity in front-end projects when front-end native languages and browsers did not yet support modularity led to front-end packaging tools such as WebPack, Rollup, etc. This article focuses on WebPack.

webpack

Webpack is a front-end packaging tool based on Node.js. With WebPack we can do a lot of things, engineering modularization, componentization, normalization, automation. To use WebPack, you need to install the Node environment, which is Java’s equivalent of a JVM. So, what does WebPack do?

As you can see above, you can use WebPack to package, compile, and combine files to produce CSS, JS, PNG, and other files that browsers recognize. With WebPack and NPM, a package management tool, we can easily develop based on modularity.

So how does WebPack convert different types of files into browser-recognized.js,.css, etc.? It converts various files through a loader. The previously mentioned.vue file is converted into a JS file using a function called vue-loader. All kinds of files need to be converted by various corresponding loaders, such as Sass-loader and URl-loader.

So how does WebPack generate dist folder from converted files according to predetermined rules? Webpack broadcasts events during the runtime lifecycle, and plugins listen to these events to perform their plug-in tasks at specific stages to implement the functionality of the plug-in.

How does WebPack achieve modularity when the browser (which is now supported in higher versions of Google Chrome) and the JS language itself does not support modularity (there was no ES6Module support before ES6)? With that in mind, let’s take a look at front-end engineering in a packaging tool like WebPack.

The embodiment of engineering

1. Modularity: WebPack packages our module code into a file by emulating variables such as Module, exports, require, etc., allowing browsers to run our module code. In other words, webpack treats each of our files as a module, with a layer of functions attached to the package. The input variables are module, exports, require, and so on. This is implemented by caching a module. The details of how CommonJS is implemented will be explained in a future article. Webpack can help us transform various modularity proposals such as CommonJS, AMD, CMD, etc. ES6’s ES6Module can also be implemented via WebPack in browsers that do not support modularity.

Webpack’s modular implementation is based on caching, and if a project has too many modules, it takes too long to compile, package, start up, and package. So now there is a new packaging tool vite based on ES6Module. Click here to see a project I wrote based on vite2.x+ vuE3 building project, and using JSX development of a project, interested students can go to have a look.

2. Componentization: During development, you will encounter recurring UIs with the same functions, such as navigation bars, common button components, etc. Wouldn’t it be exhausting to write code like this on every page? Modularity is a split of code or resources at the file level, while componentization is more divided at the business level. So each of these fully functional structure units containing template (HTML)+ style (CSS)+ logic (JS) can be extracted and encapsulated into components. Just like assembling a car, it must be very inefficient to start from the parts every time a car is produced. Therefore, with the help of the idea of componentization, the tires, Windows, doors and so on can be extracted as a component for assembly line production (code reuse), and then assembled to achieve twice the result with half the effort.

3. Standardization: The software development process is a collaborative process, so standardization is very important. Directory structures, code specifications, documentation, front and back interface specifications, and commit logs all need a specification. Standardization is actually a very important part of engineering, the quality of the early project specification will directly affect the quality of later development.

4. Automation: With the help of packaging tools such as WebPack, we can achieve automated build, automated test, automated deployment and other functions. Webpack-dev-server can be compiled and packaged in the development environment, generates a dist static resource folder, and starts a local service to access it. We can easily see the resulting page locally. The HMR module can be used to implement hot update. The principle is that WebPack and the page establish a WebSocket service, when the compiler saves the edit, it will recompile and update the page through Websocket. Front-end automated testing can improve code quality, reduce human testing, etc. Automated deployment can also be achieved through related plug-ins and configurations.

The MVVM framework

In modern times, there are many excellent MVVM frameworks, such as React, VUE, etc. They can use WebPack to compile, package, and make a big difference to our development. The emergence of a virtual DOM (describing a DOM object through a JS object) allows us to operate on the DOM with very little overhead, because the overhead of operating on a real DOM is very large (the browser DOM object is a very large object). With React, Vue and other frameworks, we can easily use the virtual DOM with their specified syntax. We plan to write an article about the virtual DOM in the future.

The emergence of scaffolding tools, such as vue-CLI, can help us quickly build a project that can meet engineering standards.

You just need to download a global NPM package locally

npm install -g @vue/cli
# OR
yarn global add @vue/cli
Copy the code

Using the one-line command vue create Hello-world and selecting configuration items, you can quickly set up a project to help you develop quickly. The Vue-CLI scaffolding is based on WebPack. It encapsulates WebPack twice, so I won’t unwrap it here.

conclusion

With the rapid development of the front-end, front-end engineers need more and more skills and play an increasingly important role in the project development process. While using a modern framework, we feel the convenience and power it brings, we also need to know how it works and where it came from. If there is something wrong with this article or not good enough, please feel free to comment on it.