1. Traditional JavaScript
Traditional js runs on the browser, because the browser kernel is divided into two parts:
- Rendering engine-renders HTML and CSS,
- JavaScript engine-responsible for running JavaScript
With the development of technology, the JavaScript engine used by Chrome is V8, which is very fast and has good performance. At the same time, Node.js, developed by Ryan Dahl in May 2009, was born.
2. What is Node.js?
Node.js is a JavaScript runtime environment based on the Chrome V8 engine. Node.js uses an event-driven, non-blocking I/O model, making it lightweight and efficient.
Node is a development platform that allows JavaScript to run on the server side. It makes JavaScript a scripting language on par with server-side languages such as PHP, Python, Perl, and Ruby. Released in May 2009 and developed by Ryan Dahl, it essentially encapsulates the Chrome V8 engine.
Node optimizes some special use cases and provides alternative APIs to make V8 run better in non-browser environments. The V8 engine executes Javascript very quickly and has very good performance. Node is a platform built on the Chrome JavaScript runtime, used to easily build web applications that are responsive and easy to expand. Node uses an event-driven, non-blocking I/O model to be lightweight and efficient, making it ideal for running data-intensive real-time applications on distributed devices.
Its characteristics are described on the official website as:
- It is a Javascript runtime environment
- Rely on Chrome V8 engine for code interpretation
- event driven
- Non-blocking I/O
- Lightweight and scalable, suitable for real-time data interaction applications
- Single process, single thread
Compared with traditional JavaScript, Node.js is a framework that runs on the server side, and its bottom layer uses the V8 engine. We know that Apache + PHP and Java Servlet can be used to develop dynamic web pages. Node.js has a similar role to them, but it is developed using JavaScript, which greatly improves the performance and convenience of development.
1) When developing with node, you can also use node’s own supporting npm package management tool:
NPM is a package management tool installed along with NodeJS. It can solve many problems in NodeJS code deployment. Common usage scenarios include the following:
- Allow users to download third-party packages written by others from the NPM server for local use.
- Allows users to download and install command line programs written by others from the NPM server for local use.
- Allows users to upload packages or command line programs they write to the NPM server for others to use.
- Node.js uses the package manager npm to manage the installation, configuration, deletion and other operations of all modules, which is very convenient to use.
2) node itself is a server-side framework
For some simple projects, we can directly use node to add, delete, modify and query the database without the need for back-end cooperation (but we generally do not use this function);
3) nodejs is a service js platform
There are its own npm (front-end project package management tool based on Node.js), third-party grunt (front-end project construction tool based on Node.js, that is, scaffolding), third-party express (routing function) and other powerful tools. Code and project management applications. It also has its own powerful functions such as webpack (front-end project deployment and packaging tool based on Node.js), v8 (Google client browser javascript engine).
npm (package management tool)
The front-end project package management tool based on Node.js is the dependency management of various packages in the project. Traditional development projects mainly focus on the back-end. Now the technology is updating, and the front-end has the development mode management of the framework, and also needs to use packages. The idea of management tools is to simplify the complexity of referencing third-party packages in projects. The front-end js package is a variety of code modules shared by JavaScript geniuses around the world. These code modules are unified into a library according to an independent software function. A code module is a package (ie, code module). It is the world’s largest software registry, with approximately 3 billion downloads each week, and contains more than 600,000 packages (i.e., code modules), using a package structure that allows you to easily track dependencies and versions. Official website: https://www.npmjs.cn/
webpack
Front-end project deployment and packaging tool based on Node.js. grunt is a front-end JS language project construction tool based on Node.js, that is, scaffolding. Bottom line: Build project automation. For tasks that need to be repeated repeatedly, such as minification, compilation, unit testing, linting, etc., automated tools can reduce your labor and simplify your work. When you configure the task correctly in the Gruntfile, the task runner will automatically complete most of the boring work for you or your team. Official website https://www.gruntjs.net/
Express
is a flexible Node.js web application development framework that is kept to a minimum and provides a powerful set of features for web and mobile applications.
3. Vue
First of all, vue.js is a library, not a framework, not a framework, not a framework. Vue.js uses an HTML-based template syntax that allows developers to declaratively bind the DOM to the data of the underlying Vue instance. At its core, Vue.js is a system that allows you to declaratively render data into the DOM using concise template syntax. vue.js supports the development of routing functions and is called vue-route.js, and vue.js supports the development of data request functions and is called vue-resource.js.
vue.js can be used after downloading it and directly introducing it into HTML. It does not necessarily require npm install vue. So why do you need to use NPM in business development demand scenarios? Is NPM official? Vue.js can be directly referenced in HTML. When there are more third-party application libraries or frameworks used with Vue, it will be inconvenient to import them one by one from HTML. All of them need to be borrowed from npm in node.js. The introduction of management packages is to facilitate package management.
How to deploy a front-end project developed using Vue.js? We use program packaging tools in node.js such as webpack (the program deployment and packaging tool in node.js), which can directly package different modules into a single js file after requiring is introduced. At the same time, these tools provide various automated processes to make front-end development more enjoyable.
Vue.js is data-driven. Different from JQuery, you hardly need to perform complex and inefficient DOM operations yourself, and the development introduction is clear. From this point on, you can basically abandon JQuery.
Vue.js develops project construction tools with third-party support, vue-cli scaffolding
Through the above analysis, instead of saying that VUE needs to use NODE to develop front-end projects, it is better to change the idea and integrate VUE in NODE to develop front-end projects. Therefore, install Node first, use Node’s npm to install Vue first, and then install the vue-cli scaffolding. , and finally build the front-end project through vue-cli scaffolding.
Let’s expand on the idea:
Above, we have interpreted the relationship between Vue and Node. From the relationship between them, we can get to the bottom of it. The essence of this problem is a question of front-end development thinking. Traditional front-end development is only the development of CSS3, HTML5, and object-oriented JS. Front-end technology has developed rapidly in recent years. It is developing rapidly. Today’s front-end development is no longer as simple as writing HTML and CSS 10 years ago. New concepts are emerging one after another, such as ES6, Node.js, NPM, front-end engineering, lightweight template engines, modularization ( Such as vue module vue-require.js), componentization, pre-compilation, two-way data binding, routing (such as vue routing vue-route.js, common front-end routing frameworks include Director, Angular’s ngRouter, React’s ReactRouter), State management, animation, SSR, front-end and back-end separation development, etc. These new things are constantly optimizing our development model and changing our programming ideas.
With the popularity of these technologies, a set of technologies that can be called “panacea” has emerged and is used in production environments by many commercial projects: jQuery + RequireJS (SeaJS) + artTemplate (doT) + Gulp (Grunt) is a front-end development solution . This set of technical warfare is based on jQuery and is compatible with most browsers. This is of great concern to many companies because their customers are likely to still use IE7 and below browsers. Using RequireJS or SeaJS for modular development can solve the problem of confusing code dependencies and facilitate maintenance and team collaboration. Use lightweight front-end templates such as doT to separate data from HTML templates. Finally, using automated build tools (such as Gulp) can merge compressed code. If you like to write Less, Sass and the now popular ES 6, it can also help you precompile. Such a set of seemingly flawless front-end solutions constitutes what we call the traditional front-end development model. Because of its simplicity, efficiency, and practicality, many developers are still using it today. However, with the expansion of the project and the passage of time, more complex business scenarios have emerged, such as SPA (Single Page Rich Application), component solution, etc. In order to improve development efficiency and reduce maintenance costs, the traditional front-end development model can no longer fully To meet our needs, Angular, React and the protagonist we are going to introduce, Vue, appeared.
? In terms of comprehensive solutions, Node.js took the first step and laid the foundation for front-end engineering development. Based on Node, it provides project scaffolding, packaging tools, package management tools, etc. Based on Node, Vue, Angular, React and other front-end development ideas, as well as assembly and matching front-end development solutions.
? After the emergence of Node.js, the jQuery + RequireJS (SeaJS) + artTemplate (doT) + Gulp (Grunt) development combination has been improved. It is the so-called big front end. Thanks to the language features of Node.js and JavaScript, html The template can be completely controlled by the front end. Synchronous or asynchronous rendering is completely decided by the front end, and a set of templates is maintained by the front end. This is why artTemplate, React and Vue2 are used on the server side. Having said all that, what exactly is a SPA? In fact, it is to add a layer of front-end routing based on the separation of front-end and back-end.
? Front-end routing, that is, the front-end maintains a routing rule. There are two implementations. One is to use the hash of the url, which is often called the anchor point. JavaScript/uses the hashChange event to monitor changes in the url. IE7 and below need to use polling: the other is the History mode of HTML5. It makes the URL look like a normal website, separated by “/”, without #, but the page does not jump. However, using this mode requires server support. After receiving all requests, the server points to fl The same html file, otherwise 404 will appear. Therefore, when SPA has only one ht, all the content of the entire website is in this one html and is processed through JavaScript. There are many advantages of front-end routing, such as page persistence, like most For music websites, you can jump to other pages while playing songs without the music being interrupted. Another example is the complete separation of the front and back ends. The common front-end routing framework is Director (ht brush: //github.com/flatiron/ director ), but more often it is used in conjunction with specific frameworks, such as Angular’s ngRouter, React’s ReactRouter, and Vue’s vue-router, which is introduced in this section. If you want to develop a front-end route independently, you need to consider the pluggability of the page , page life cycle, memory management and other issues. The core idea of Node’s webpack packaging is single page rich application (SPA). SPA usually consists of an html file and a bunch of js loaded on demand, and its html structure may Very simple, such as:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset=”UTF-8”>
<title>webpack app</title>
<link rel="stylesheet" href="dist/main.css ">
</head>
<body>
<div id="app"></div>
<script type="text/javascript" src="dist/main.js "></lcript>
</body>
</html>