For the front end of this work, we should have what knowledge? What kind of body of knowledge is needed? I will list a few points below that I hope will help you.

Basic knowledge: HTML + CSS + JS

  • For those of you who have never touched HTML, don’t worry, I will introduce HTML in the simplest way. Some websites we often see in notebooks are actually made up of HTML tags. HTML can be simply understood as human body structure. HTML full name is (Hyper Text Markup Language), hypertext Markup Language.
  • Although the site has a structure, but it still needs to have the appearance of things to modify, to modify the role of that is CSS, it is called style, you can also simply understand as a person’s dress. Cascading Style Sheets CSS stands for Cascading Style Sheets.
  • Website we can see the dynamic effect, and our own to operate some buttons on some websites, we generally attribute this kind of behavior action to JS implementation. The first two kinds of HTML, CSS respectively represent the skeleton and appearance of the human, but we also have some behavior, generally JS to represent the human behavior and action. Js full name is (JavaScript), simple understanding is that we write some statements, can let the computer recognize, and according to the statement you write the corresponding operation.
  • HTML and CSS learning path: I personally recommend using bilibili official website or App to learn, because bilibili official website learning resources are mostly free, and for beginners is completely possible.
  • Js learning words can also refer to bilibili official website, have to recommend the official website of learning: MDN authoritative official website, modern JavaScript tutorial, Ruan Yifeng tutorial, of course, ah little friends I will also put my own information on baidu network disk, which is more comprehensive JS notes, but you need to install an Evernote, mobile phone can also install and view.
  • Overall impression js note: link: pan.baidu.com/s/1u8Lb9CBX… Extraction code: GW1R
  • Js other learning websites zhihu, Nuggets, Jianshu, CSDN

Front-end advanced framework: vue + React

  • We need to have a overall knowledge of the front, and in a few years ago, at that time, you will as long as the basic HTML, CSS, js can find a relatively good the front of the post, but, when a real enterprise after its development to a large scale project, before the technology can not able to adapt to the management of the project. Foreign FaceBook company first launched react technology, just to facilitate the development and maintenance of the project. In China, the vUE framework recognized by everyone also emerged. The main creator of the VUE framework is Yu Yuxi.
  • For beginners, we need to understand it simply. Vue is just like the frame structure of a house. You can simply understand a floor as piling up wood.
  • React also has the same principle for building houses. Vue borrowed many ideas from React, and Yuxi himself also said it.
  • Now if you want to be good at the front end, you have to learn one of these skills, and every Internet company today requires one of these skills, and two is the best.
  • Vue learning way: or recommended entry to see bilibili video, recommended learning official website words: VUE official website, VUE management system,
  • React react
  • Finally, I personally recommend you to learn VUE as the basis and spend more time in REACT. React will be more competitive in the market and will have higher salaries.

Front-end engineering: Webpack builds project tools

  • For those of you who are learning, we have a technical term for front-end engineering called scaffolding.
  • What is scaffolding? When the company does a project, we need to quickly build a framework structure, so that we can quickly develop the project in this framework, so we need to have such a building tool.
  • Just like in real life, we see on the construction site of the building of the frame.
  • How easy is webpack to understand? I can simply understand that it is an assembly line in the factory. There are assembly lines for the beginning part, intermediate processing, and finally packaging of this item. The company’s projects also go through such a process, and our projects are packaged into a mechanism. Webpack is simply packaging projects, but does a lot of processing in between.
  • Recommend webpack learning way: bilibili official website, webpack official website

Setting up the Node Service

  • The simple understanding is that when we see an App on our mobile phone, we need a server to process all the operations we want to do in the App.
  • For example, when we go to a restaurant for dinner, we can choose to order food. After ordering the food, we need the corresponding chef to cook in the background. We go to the restaurant to consume, so there needs to be a corresponding service background something like this. Node acts like a cook.
  • Learning node knowledge I recommend: NPM package, nodeJS official website, Expree framework, Koa framework, MongooseJS

Create a technical selection for the project

  • What is called project technology selection? This part of knowledge can be summed up after you learn the previous knowledge. When doing the company’s project, we need to do an evaluation of the project, see what technology is good for the project? Because there are many kinds of matching technology structure in the market, technology selection should also focus on this fast.
The product type Technology selection The main technical points
website Vue/React/Angular/jQuery Responsive (media query)
A WebApp (H5 / M stand) Vue + VueRouter + Vant React + ReactRouter + Antd-Mobile Angular/jQuery Mobile Layout (REM)
Subscription number development Vue/React/Angular/jQuery WXSDK (only available in wechat ecosystem)
Native App IOS/Android The H5 technology
Hybrid App IOS/Android + Front-end H5(Vue/React /jquery) WebView
Cross-platform App uniapp/Taro/RN/Flutter
Management system Vue/React/Angular front-end separation PHP/Java front-end separation Use a template engine when the front and back ends are not separated
A desktop application Electron + Vue/React/Angular Electron
Wechat applets Native applets /uniapp/taro/wepy/mpvue Native is rarely used