This article is suitable for front-end novices, and it is best to read it for front-end novices or back-end developers, because I dare not guarantee that there will be much gain from front-end veteran drivers.
By reading this article, you will have a general understanding of what has happened to the front-end over the years, as well as a simple introduction to some of the current mainstream technologies on the front-end. All the content involved is to let you pierce this layer of window paper as much as possible and know the general way of playing.
Front-end technology development trajectoryHistory of character architecture, history of front-end technology, history of ECMASCRIPT syntax, history of AJAX technologyIntroduction to the current mainstream technology principlesSPA single-page application principle nodeJS server-side JS run-how, SSR server-side rendering principle, VUE MVVM principle, webpack packaging principle, SASS CSS compilation principleSome new technology explorationtypescriptpwagraphqlflutterTwo popular conceptual solutionsWhat is a big front-end and what is front-end engineeringThis section is about knowledge:
History of character architecture, history of front-end technology, history of ECMASCRIPT syntax, history of AJAX technology
web1.0 to web2The 0 transition was marked by the advent of AJAX (2005).
ajaxNamelyasynchronous j**ascript and xml(Asynchronous j**ascript and XML technologies).
Step 1: XMLhttpRequest native object.
var request = new xmlhttprequest();request.open('get', '/my/url', true);request.onload = function() else };request.onerror = function() request.send();step2：$.AJAX operations$.ajax(})Step 3: Promise operation
let getdata = function (url) ,error: function (err) var data = getdata('/my/url').then(function (data) )Step4: Generator gereratorlet it = null;let ajax = function(url,data), success : function(result) }function *getdata();it = getdata();it.next();Step5: Async Await Advanced Operations
let ajax = function(url,data) }async function getdata();getdata();Background information on AJAX:
In 1999, Microsoft released Internet Explorer 5Version 0, the first introduction of a new feature: allowing j**ascript scripts to make HTTP requests to the server. This feature didn't go unnoticed at the time until Gmail was released in 2004 and Google Maps in 2005.Knowledge points in this section:The term AJAX was first formally coined in February 2005 to refer to a set of practices for developing around this feature. Since then, AJAX has become synonymous with script-initiated HTTP communication, and W3C released its international standard in 2006.
SPA single-page application principle nodeJS server-side JS operating principles, SSR server-side rendering principles, VUE MVVM principles, webpack packaging principles, SASS CSS development principles, what is SPA?SPA is a single page, which is an implementation method in which the page as a whole is not refreshed, and different pages only change the partial content.
A complete URI consists of the following parts:
scheme:[//[user[:password]@]host[:port]][/path][?query][#fragment]#BehindfragmentWhen a change occurs, the page will not be rerequested, and other parameter changes will cause the page to be rerequested, and in js there are eventswindow.onhashchangeI can monitorfragmentSo this principle is used to achieve an operation to modify the local content.
#fragmentPart of it corresponds to JSlocation.hashvalue.
Directly on ** Description:
The main process is as follows:The user enters the URL in the address bar, the browser uses the HTTP protocol to obtain resources from the background, the browser parses and renders the HTML page, renders it to the browser, and executes the AJAX operation asynchronously, the browser sends the AJAX request, and the background interface browser obtains the data, executes the ** function, dynamically appends the content to the page, and uses SSR technology to display the page
const vue = require('vue')const server = require('express')()const renderer = require('vue-server-renderer').createrenderer()server.get('*', (req, res) => ,template: pass the vue object to the final output result html and then return the html to the front-end browser renderer through the reponse objectrendertostring(app, (err, html) => server.listen(8080)The main process is as follows:
Enter the URL in the user's address bar, the browser uses the HTTP protocol to fetch the resource from the background, the browser parses and renders the HTML page, and renders it to the browser
If anyone is interested in the complete build process for this Vue example, they can quickly set up the environment and allow it to go by following the following process:
* And install nodejs: create a new directory, open the command window, switch to the current directory and execute the command: npm init, press enter all the way to the next step, and quickly create a node project to install the required js package: npm i vue express vue-server-renderer --s**e-dev new file: vi index.js, paste all the above vue ** fragments into the execution file to start the node program: node indexjs open the browser to access: http: localhost:8080 (note that the port number does not conflict with the local existing program) What is MVC? What is MVVM?
As you can clearly see from the above figure, MVVM is missing compared to MVCcontrollerOne layer, traditionalcontrollerWhat it does is deal with a bunch of complex logic and then output the data toviewTopmost. So now this layer is missingviewwithviewmodelHow to automatically associate data bindings in both directions?
In other words, if the data on the page changes, the data in JS changes with it; Conversely, if the data changes in JS, how can the page automatically follow suit?
As an example to further clarify this question, how can the following effects be achieved?
How to notify js of changes in page data by adding to the page elementonchangeoroninputevent, get the value of the form in the event, and then assign the value to the corresponding object of js.
For example, the input box in the example can add an oninput event.
Then define this function in js and perform the relevant assignment operations:function evtinput()There is a native method for how js data changes are notified to the page
object.defineproperty(), which can reset some of the properties of an element in a js object and provide it at the same timegetwithsetmethod, which allows the user to reassign and take values on elements.
A brief analysis**:
Formally due to the fact that we can intercept a property'ssetMethod. So, we can be theresetIn the method, it is enough to assign the new value to the page element.
object.defineproperty(data,'name',})Why should the front-end be packaged? So why is the front-end being packaged? Isn't the front-end ** directly able to run to the browser, why do you package it?
To understand this problem, it may be appropriate to take j**a as an example, for example: j**a has a source code directory in the project directory:src
It's used to store the j**a source code, but after j**a is actually compiled, there must be no src directory, right?
SosrcWhat is the purpose of source code? It is used to better classify and sort out our source**, which may be completely different from the structure of our actual operation, because the actual operation is something that the machine can read, and the source code is for people to see.
So the front-end is the same, because of the current stage, the front-end business logic has also become very complex, and it is no longer possible to do it with one HTML, one JS, and one CSS in the traditional sense. Therefore, we have to divide the source code into modules and directories, and finally package and then assemble them into a ** and directory structure that can be read by browsers.
For example, let's create a Vue's webpack project through Vue's scaffolding and look at its default source directory (src) tree structure
src├──app.vue├──assets│ └logo.png├──components│ └helloworld.vue├──main.js└──router └─index.jsassetscomponentsrouter, and 2 more.vueThe end of the file. So, this kind of directory structure and files will definitely not work in the browser, and if we want to run it, we have to compile it and translate it into an html js css file that the browser can read.
When we package it, we see that the dist directory of the project has a compiled and executable structure for the browser
dist├──index.html└──static ├─css │ app.30790115300ab27614ce176899523b62.css │ app.30790115300ab27614ce176899523b62.css.map └─js ├─app.b22ce679862c47a75225.js ├─app.b22ce679862c47a75225.js.map ├─manifest.2ae2e69a05c33dfc65f8.js ├─manifest.2ae2e69a05c33dfc65f8.js.map ├─vendor.7fed9fa7b7ba482410b7.js └─vendor.7fed9fa7b7ba482410b7.js.mapThe principle of webpack packaging sums up the essence of webpack in one sentence:
Webpack is a tool for packaging modular JS, which can convert files through loaders and extend functionality through plugins.A simple diagram of webpack packaging:
What is SASS? It is a tool that can improve the efficiency of CSS development.
The compilation principle is as follows:
How do you actually use SASS in your projects?
As I said earlier about webpack, front-end technology can't run directly without packaging tools, and the same is true for sass files like this. Therefore, we only need to add the loader of the sass file in webpack, so that in the ** compilation environment, the sass file can be automatically converted into a css file, and finally the css file is introduced into the html, so that the page can be rendered normally.
What are the benefits of SASS?
test.scss file:
$color-red: #00ff00;$color-white: #ffffff;#main p }If you write in traditional css:
#main p #main p .redboxKnowledge points in this section:
TypeScriptPwagraphQlflutterWhat is TypeScript?
TypeScript is a superset of the J**Ascript type released by Microsoft as open source, which can be compiled into pure J**Ascript.The reason why TypeScript is a superset of J**Ascript means that TypeScript extends more syntax on the basis of J**Ascript's syntax, making development more convenient.It is a JS framework that can be used to develop front-end systems.
Let's take a look at the extra parts of Typescript compared to j**ascript
Students who learn j**a don't panic, personally, it seems that typescript is to re-implement j**a with j**ascript!1. Strong data types
boolean type let isdone: boolean = false; let decliteral: number = 6; String let name: string ="bob";let list: array = [1, 2, 3]; Function definition function add(x: number, y: number): number2. Interface
interface labelledvalue function printlabel(labelledobj: labelledvalue) let myobj = ;printlabel(myobj);
The interface here is different from the interface in J**a, and the interface in Typescript is just a contractual agreement for parameters, that is, the parameters must be the structure and parameter names of the interface definitions.3. Classes
Define class greeter greet() let greeter = new greeter("world");Inheritance of class animal mClass Dog extends animal } Common, private variables, methods, class animal public move(distanceinmeters: number) moved $m`)4. Generics
function identity(arg: t): t5. Enumeration
enum directionWhat is PWA?
Progressive Web App, or PWA for short, is a new way to incrementally improve the experience of a web app, giving users the experience of a native app.PWAs are essentially web apps, that is, apps running on mobile phones are not purely native, but many pages are web pages.
web appWe all know that there are web pages in the app! ButprogressiveProgressiveAnd how to understand it?
Personal understanding,ProgressiveThat's what it means:Gradual development or transformation
PWA is more literally just:
Step 1: We are now going to develop an app, but the maintenance and extension cost of developing a pure native app is too high, so we need to add some web pages to it, after all, web pages are easy to maintain! (This part is actually a hybrid app, also called: hybrid app).Therefore, PWA is to improve the user experience of hybrid apps in a step-by-step way, and the problem that affects the experience the most is page loading, so the core technology of PWA is:Step 2: But the addition of web pages in our app can't be too violent, too violent is easy to make users feel very unnatural, so we need to use a step-by-step way, so how to do it step by step to make the user's experience reach the ultimate (that is, it is almost impossible to see that a page is a web page!). ）
Step 3: We need to add some strategies to ensure the user experience first, such as: to ensure that all web pages use https, use offline caching to reduce the waiting time for users to open the page, etc.
Offline cachingThe common scheme for offline caching is:service workerBefore we understand what GraphQL is, let's first understand what SQL is?
What is SQL?
Structured Query Language, a structured query language that is the standard language for relational database management systems.To put it bluntly, SQL is a specific syntax, which can also be called a database management API, through which the operation of the database must be carried out.
What is GraphQL?
A query language for APIs.To illustrate with a **:GraphQL is both a query language for APIs and a runtime for your data queries. GraphQL provides a complete, easy-to-understand description of the data in your API, allowing clients to get exactly what they need without any redundancy, making it easier for the API to evolve over time and for building powerful developer tools.
So you're going to say it again? Without graphql, can't I interact between the client and the backend now?
That's right! That's how you interact :
So, it's not that we can't live without GraphQL, but it gives us a new way to query and interact with APIs, making the interface communication between the client and the backend more efficient.
So what are the advantages of GraphQL over traditional interface requests?
1. What you see is what you get
Query Criteria} Returns result }}What does a traditional API look like?
Query Criteria} Returns result }}2. Reduce the number of network requestsIt only takes one network request to get data for resources and sub-resources (e.g., comments in the Chinese chapter above).
Query condition }, comment }In a traditional query, article is queried first, and then comment. Of course, you can check it all at once and let the backend come back at one time, but generally no backend will design such an API for you:
getarticleandcomment, how to follow the RESTful interface standard, you should need to query 2 times.
3. Strong verification of parameter type
GraphQL specifies a set of data types, which ensures that the field type is clearly defined when the interface is queried, whereas it is generally difficult for traditional interfaces to guarantee the type of query parameters.
For example, here's the syntax definition of GraphQL:
type starshipWhat is Flutter?
Flutter is Google's mobile UI framework that makes it possible to quickly build high-quality native user interfaces on iOS and Android.Something like
react nativeLike the framework, Flutter can also invoke some app system-level commands, allowing you to quickly develop a hybrid app.
If you are interested, you can go to the official website to learn: flutter Chinese network knowledge points in this section:
What is a big frontend, what is front-end engineering, and the title of this article isThe technical principles and evolution of the big front-endNow for you to answer, what is:Large front end
Large front endIt's comparisonFront-endSo what does the traditional front end mean? What has become a big front-end?
What is the traditional meaning of the front end?
The traditional front-end refers to the application or system that directly faces the customer, such as a web page or mobile app.So what does the big front-end mean? In fact, after various data research, there is no such a clear definition, but with the progress of technology, we have a default convention, the reason why the big front-end is called the big front-end, mainly reflected in the following aspects:Programmers who develop web pages, iOS and Android can be called front-end engineers.
Traditionally, a front-end engineer has only been a web developer, while iOS and Android developers have generally referred to a client developer, or a software engineer role.
1. Large front-end - front-end separation
With the separation of front-end and back-end responsibilities and technical frameworks, the requirements for the front-end of products are getting higher and higher, the expectations of users for the front-end are getting higher and higher, and the development of front-end technology is getting faster and faster. This partly reflects the higher the requirements of the front-end, and the greater the responsibility.
2. Big front-end - node full stack
After the front-end and back-end are separated, it is not possible for the front-end to complete one thing independently, because there is a lack of back-end support. But with the advent of node, the front-end can easily handle this part of the back-end without relying on back-office personnel or learning new back-end languages. In this way, in the face of some small systems, the front-end engineer can handle the whole system. This part reflects the comprehensiveness and full-stack nature of the front-end.
3. Big front-end - Deal with all kinds of ends
Traditional front-end engineers, generally referred to as web development engineers, generally refer to running on PC browsers, and slowly also run on mobile phones. However, with the development of the mobile Internet, more mobile devices have suddenly emerged, such as: mobile phones are divided into Android phones and Apple mobile phones, smart watches, wearable devices supported by VR AR technology, eyes, helmets, car systems, smart TV systems, and so on. These devices all need the support of the front-end, and the technical requirements and capabilities of the front-end are higher. This partly reflects the fact that the scope of the front-end has become larger.
4. Large front-end - micro application
When the WeChat applet comes out, everyone's first feeling is that the front-end can be popular again, there is no need for the back-end, no need for the server, only need to develop a web page on the WeChat platform to publish it online.
Recently, a number of domestic mobile phone manufacturers have jointly launchedQuick application, It's similar to a mini program, but after a simple front-end development and release, users don't need to install an app to open such an app directly on mobile phones like Xiaomi, vivo, oppo, etc.
Similar to these micro-applications, the appearance of background-free and installation-free has also prompted the front-end industry to also involve such new fields to promote technological progress. This partly reflects that the front end is the lucky one of the times.
To sum up, we can get a rough definition:
The large front-end refers to a manifestation of the front-end being involved in a wider and wider range, involving more and more ends, getting higher and higher technical requirements, and having an increasingly large scope of influence.Definition of front-end engineering:
Front-end engineering is based on business characteristics, the front-end development process is standardized, standardized, it includes the development process, technology selection, standardization, construction and release, etc., to improve the development efficiency and quality of front-end engineers, and finally deliver a high stability, good scalability, easy to maintain the process of the system.In general, a solution that meets the requirements of front-end engineering should include the following elements:
Development SpecificationsModular DevelopmentComponentized DevelopmentComponent Warehouse Performance OptimizationDeployment Development Process Development ToolsIn addition, when we talk about engineering, we should not only think about front-end engineering, but should consider how to engineer from the perspective of the whole system, that is to say, for a whole project, what factors should we consider when talking about engineering?
The engineering construction of a system should include the following factors:
Goals, understand the target group, and continue to provide them with the best quality service; Boundary, draw a clear line with other systems, and at the same time do a good job of interface, ensure that the responsibility of its own system is clearly positioned, at the same time, manage the dependent system, and increase its own robustness; Barriers, its own platform construction, including front-end engineering construction, back-end engineering construction, as well as the overall construction of the project and many other factors. History and Trends of Front-End Development-Yifeng RuanHistory of the J**Ascript Language-Yifeng Ruan YifengAjaxj**Ascript Asynchronous Programming for Native JSYou might not need jQueryGoing Async with es6 generatorsUniform Resource Identifiers-Wikipedia Unified Resource Locators-Wikipedia Anatomy of Vue's Implementation - How to Implement Bidirectional Bindings MVVMVUEjs server-side rendering guidewebpack:output managementwebpack principle and practice-gwuhaolin blogtypescript handbook (Chinese version)What is pwagraphql and restful comparisonWhen we are talking about the big front-end, we are talking about what front-end engineering - the basics - Zhang Yunlong.