Today’s front-end technology is a complex ecology.

Read any technical article on the front end, and you’re bound to find plenty of technical jargon. Vue, Webpack, React, Antdesign, etc., all kinds of new terms make beginners very confused, and they can quickly understand the whole front-end system in a short time, thus falling into an inefficient and anxious learning state.

What is the front end?

In the website technology, the front end is the user interface, mainly through the page to display content or data to the user, at the same time, the user can choose the required content and fill in the data to the website to give feedback.

Front end is relative to back end. This mode of division of labor is very common in life or human organization. For example:

  • TV + set-top box
  • Soldier + operational command
  • Unmanned convenience store + operation system

In short, the front end of the website mainly obtains data from the background, presents the data to the user or collects the data and sends it to the background

Front-end technology system

Take the website as an example, the front-end carrier is the browser Chrome, FireFox, etc., so the front-end technology is developed from beginning to end around the browser’s several basic technologies:

  • HTML
  • CSS
  • JavaScript/ECMAScript

The current popular front-end technologies are all “advanced programming” of the above basic technologies, providing different software packages around interface design, interface interaction and interface experience.

Frameworks such as Vue, React, Bootstrap, etc. are excellent examples of this.

Either framework ultimately relies on the above technologies.

UI framework

UI frameworks tend to focus on the effects of the UI display and contain design concepts, so websites based on the same UI framework look very similar visually.

The main UI framework is:

  • Material Design
  • Ant Design
  • Bootsrap
  • iView
  • Element

JS Framework (Interactive programming)

Different from UI framework, interactive programming focuses on data display (collection) after user interaction. That is, interactive programming is needed when your front page needs to present different types of data depending on the user’s choice.

In the early days, developers mainly used native JavaScript to realize this interaction. With the evolution of technology, the JS software package framework specially used for interactive programming was born to solve some general problems. Developers can develop front-end interaction more conveniently based on this JS software package.

The mainstream JS framework is:

  • jQuery
  • Vue.js
  • React
  • Angula.js
  • Ember.js
  • Meteor
  • Mithril
  • Backbone.js
  • Handlebars.js

Hybrid framework

In the actual development of web sites, a single framework does not satisfy the business.

For example, vue. js can handle data interaction very well, but it can’t build a beautiful interface by itself. Because the open source world has always had some unsung top programmers doing great work, there has been a thriving ecosystem of UI and JS frameworks based on the mainstream, with frameworks combining and introducing more tools that combine into new frameworks.

In the case of vue.js, more hybrid frameworks are generated:

  • Bootstrap-vue means vue.js + Boostrap
  • Ant Design of Vue is vue.js + Ant Design
  • Vuetify. Js is vue. js + Material Design
  • Nuxt.js is the SSR pattern enhancement of Vue.js
  • Nativescript-vue (vue.js) mobile development has increased
  • Quasar is vue.js + to write code once and deploy it simultaneously asa website, mobile application and/or electronic application

Assistive technology

Other important technologies that do not rise to the framework level and are not at the core of the technology, but are essential components of front-end applications include:

  • Node Front-end engine
  • NPM Installation manager for front-end software packages
  • Webpack front-end packaging tool
  • Babel is used to convert ECMAScript 2015+ code into backward compatible JavaScript syntax

Talk about the Node

The Node is the Node. Js.

As mentioned earlier, the browser is an interpreter that contains JavaScript programs, so it can handle JS code.

Unlike any of these frameworks, Node is supposed to be called an interpreter for JavaScript programs (similar to a virtual machine), so it is primarily used to handle JS code in situations where it is not convenient to call a browser.

Use scenarios for Node include debugging and building

conclusion

The above explanation seems simple and clear, but in actual work, we still need to keep practicing and summarizing, to grasp the fundamental.

This article is originally published by Websoft9. Creation is not easy, welcome to discuss, thanks for your support!