Original: itsOli @ front-end 10,000 hours this article was first published in the public number "front-end 10,000 hours" this article belongs to the author, without authorization, please do not reprint! This article is adapted from "sparrow" private pay column "front end | ten thousand hours from zero basis to easily obtain employment"Copy the code


❗ ️ ❗ ️ ❗ ️

The following link is the latest erratum to this articleWhat nouns do we need to Understand when We first touch the front End?


Preface: in the previous “from zero basis to easily obtain employment | well-worn behind from the URL input to the page to show what happened”, we learned from input to output behind what happened, and preliminary cognition to the “front end” what is the role in the process. In this article, we will officially start with the noun explanation and slowly push open the door of “front end”.

The following series of articles starts with Web front-end development. Therefore, the term “front end” refers to Web front-end development.


1 front-end function positioning

Front end this position, we still basically call inside Internet company.

1.1 What is an Internet company

I think the most direct way to identify the company is to see whether the company has its website address, and whether users can conduct relevant operations through this webpage (for example: Domestic BAT — Baidu, Ali, Tencent, and foreign Facebook are all Internet companies).

1.2 What is the basic operation mode of Internet companies

1.3 Which positions are included in RD (program development)

1.3.1 Front-end development

Realize the code construction of user-oriented operation (including iOS engineers, Android engineers, Web front-end engineers, PC engineers, etc.).

1.3.2 Back-end development

Back-end development: develop server running system (main language: Java, PHP…) for client to receive and push data. .

Of course, no position in a company is isolated. For the front end, as long as the node is here, it means you are everywhere.


To get to know the front end, we need to know the most basic concepts

2.1 Type 1: make a static page at the beginning

  • HTML (HyperText Markup Language) : A Language used to describe web pages, with lots of “tags” and “plain text”. The structure of HTML determines whether the page is stable, standardized, and performs well.

  • HTML5: The new standard for HTML, it is more semantic (and adds a lot of semantic tags). That’s what we’ve been talking about in H5 for years. — Generally used to do mobile pages;

  • CSS (Cascading Style Sheets) : Used to control the presentation of HTML. CSS determines how good the page looks and how cool the animation looks;

  • CSS3: the latest CSS standard, on the basis of CSS added some properties, animation effects, streaming media and other resources have better support.

Conclusion:

  • HTML+CSS is the basic composition of a static page. It’s like a girl who has basic body features (HTML) and then dresses herself up with makeup, hair, and clothes (CSS).

  • HTML5+CSS3 can accommodate more advanced animations, but only with advanced browsers (IE is not compatible).

2.2 Type 2: Make the static page move

  • JavaScript: It is a lightweight programming language that inserts JavaScript into static pages to make them “live” and interact.

  • JQuery: This is a library of JavaScript functions – however, I don’t use it much in my projects now.

Conclusion:

  • If HTML+CSS is a person’s skin and facial hair, with some makeup and dress up, then JavaScript is the person’s joint, skeleton and blood, which can make the page move and realize human-computer “interaction”.

  • If JavaScript is bricks, you build a house with those bricks when you use it. JQuery is a house of sorts already built, and you only need to use the piece you want to use – it increases development efficiency.

2.3 Category 3: Make page updates more efficient

Asynchronous JavaScript and XML: Asynchronous JavaScript and XML

  • AJAX is a technique for creating fast, dynamic web pages;

  • AJAX allows web pages to be updated asynchronously by exchanging small amounts of data with the server in the background. This means that part of a web page can be updated without reloading the entire page. Traditional web pages (without AJAX) have to reload the entire page if they need to update their content.

This is an explanation of the terms associated with a Web page, and we can stop there for now (even if there are many more to come). Here are some general terms to give us a big picture of what a front-end career involves.


3. An overview of related nouns

3.1 Code Editor (download and install)

For the first month of learning, it is recommended to type out the code one by one in a notepad/text editor.

What is 3.1.1

It’s a vehicle for writing code.

3.1.2 What Are they (The Front-end Is Most Commonly Used)

  • Visual Studio Code (common, free, easy to use);

  • Sublime Text (easy to use, fast to start up, weak, need to configure some plug-ins to make it powerful);

  • WebStorm (complex operation, charging, powerful and a bit slow to start).

3.2 Markdown

3.2.1 what

Markdown is a simple markup language that corresponds to HTML tags. There are conversion libraries that can convert Markdown to HTML or HTML to Markdown.

3.2.2 role

It is used to display articles on the web without the trouble of layout.

3.2.3 limitations

Not all web writing articles support Markdown format. For example, I cannot write easily with Markdown on Zhihu (” Yuqi “can be used).

3.2.4 Basic grammar learning reference

Reference link: Official guide to Markdown sparrow

3.3 Cli and Terminal (Download and Install for Windows Users)

What is 3.3.1

The corresponding concept is “graphical interface” — opening an app has options and menus that we can intuitively click on. The “command line” is nothing to open, you need to tap some letters, commands to talk to the computer.

3.3.2 Usefulness and necessity

For later development we talked to the backend server (many backend server systems don’t have a graphical interface to click on).

3.3.3 Where Do I Strike the Command Line

The command line is tapped at a place called the terminal.

3.3.4 terminal

  • Linux: The system has its own terminal, you can directly find;

  • MacOS: Command + space, then enter terminal or “terminal” in the dialog box — the macOS kernel is Unix.

  • Windows: When you install Git, you come with a “Git Bash” terminal — a small imitation of the Linux operating system.

3.3.5 Bash

  • The Linux operating system is generally divided into Kernel and Shell.

  • Common shells are Bash and Zsh;

  • Bash is command-line software;

  • Bash is a concrete implementation of the Shell.

3.3.6 Shell

  • The thing that executes the commands you write on the terminal.

3.4 Git (download and install from the official website) and version control system

3.4.1 track what is

Git is a free, open source, and new-age “distributed version control system”. Can efficiently handle a variety of projects from small to large.

3.4.2 What is a Version Control System?

It is a system that records changes in the contents of one or more files for future reference of revisions to a particular version. Main development history:

  • Native version control systems (long ago);

  • Centralized version control system (SVN);

  • Distributed Version control system (Git).

Rule 3.4.3 advantage

  • Speed;

  • Simple design principle;

  • Allows thousands of parallel branches to be developed at the same time;

  • Not afraid of disconnection (because disconnection can be committed to the local library first).

3.5 GitHub (Self-registered)

3.5.1 track of what is

  • It is a San Francisco company founded in April 2008.

  • It is a software source code hosting service platform for version control through Git.

  • It is the world’s largest code repository and open source community.

3.5.2 role

For future software development etc. – very important.

3.5.3 Relationship between GitHub and Git

Git is a tool for project management on GitHub, and all project code hosted on GitHub is now based on Git for version control.

3.5.4 Matters needing attention during registration

  • Choose a good username to officially start your career as a front-end engineer — this is the best name for all applications and code from now on.

  • Then if you’re hosting a blog on GitHub, your blog address will be prefixed with your username.

  • During the sign-up process, you’ll see that GitHub has two options:

    • Unlimited Public Repositories for Free, where you create a project that is open for everyone to see (for individuals, we chose this option directly);
    • Unlimited Private Repositories for $–/month — Personal private repositories are also free since being acquired by Microsoft. Typically, enterprises use GitHub’s private repository to host their projects.

  • After registering, if the English interface is very difficult, and you are using Chrome browser, you can directly right-click → translate into Chinese (to get familiar with the interface), then please go back to the English interface. Remember, English is not scary!

3.6 Development Environment: Node.js (download and install from the official website), NPM (NPM comes with node.js after download and install)

What is 3.6.1 track

Node.js is an open source server framework.

3.6.2 What can I Do

  • Node.js generates dynamic page content;

  • Node.js can create, open, read, write, delete, and close files on the server;

  • Node.js can collect form data;

  • Node.js can add, delete, and modify data in a database.

3.6.3 NPM

  • Node Package Manager Node Package Manager

  • It is the default Node.js software management system written in JavaScript.

3.7 Front-end automation Tools

3.7.1 Gulp

🔗Gulp: Gulp is fairly light and easy to understand for an automation tool. It can be used to enable Server services, build Sass, build ES6, compress image sizes, etc. It is ideal for small projects.

3.7.2 Webpack

🔗Webpack official documentation Webpack: the most popular automation tool in the market, whether compilation, packaging or server services, is quite comprehensive. The entry threshold is relatively high. The configuration of Webpack needs to be converted by loader tool, and then configured by simple regular expression. At first, it may feel less convenient than Gulp, but when you get used to Webpack, you will find many things are really very convenient.

Webpack has become a standard for medium and large projects today.

🚀 We will use Webpack to build the environment for mobile travel website.

3.7.3 Parcel 

🔗Parcel official documentation Parcel: A relatively new automation tool, called ultra-fast zero configuration, is very easy to use without writing commands like Webpack or Gulp.

🚀 The “native JS field project” behind us — mobile music players — will use Parcel to build environments.

3.8 JS Preprocessing

Babel

🔗Babel JavaScript currently comes out as a draft spec every year, currently out in ES2019 — we’re used to calling it ES6+, but browsers won’t support the update soon enough (i.e., the ES6 code we’re currently writing won’t run directly in the browser).

Therefore, we need to compile the new syntax into browser-aware ES5.

Babel is a toolchain for converting ECMAScript 2015+ version code into backwardly compatible JavaScript syntax so it can run in current and older versions of browsers or other environments.

3.9 CSS Preprocessing

3.9.1 Sass

🔗Sass: Born in 2007, Sass is the earliest and most mature CSS preprocessor. Under the influence of Less, Sass has evolved into SCSS fully compatible with CSS.

3.9.2 Less

🔗Less Chinese document Less: appeared in 2009, greatly influenced by Sass. But it uses the syntax of CSS, making it easier for most developers and designers to use. It has far more supporters outside the Ruby community than Sass! The disadvantage is that it is less programmable than Sass, but the advantage is simplicity and CSS compatibility. This, in turn, influenced the evolution of Sass into SCSS, with the famous Twitter Bootstrap using Less as the underlying language.

3.9.3 Stylus

🔗Stylus document Stylus: created in 2010, from the Node.js community. It is mainly used to support CSS preprocessing for Node projects. It has certain supporters in this community and is not as popular as Sass and Less in a broad sense.

3.10 DOM manipulation

jQuery

JQuery: The big brother in the front-end world. Simple syntax and manipulation, as well as a large suite ecosystem, make it possible for beginners to quickly create page effects.

However, due to the update of native JS, DOM manipulation is becoming more and more friendly (or because frameworks like React. JS and Vue. JS don’t need DOM manipulation at all). JQuery is a relatively heavy resource, and more and more projects have abandoned jQuery.

3.11 Asynchronous Processing (Data Request)

3.11.1 jQuery. Ajax

Jquery. ajax: A wrapper around the native XMLHttpRequest object, which is the implementation version of jQuery. Support for JSONP has also been added.

But:

  • Itself is for MVC programming, not in line with the current wave of front-end MVVM;
  • Based on native XMLHttpRequest object development, XHR’s own architecture is not clear, and there is already an alternative to Fetch;
  • The entire jQuery project is too big, and it makes no sense to use AJAX only to introduce the entire jQuery (personalized packaging solution does not enjoy CDN service).

3.11.2 Axios

Axios is a lightweight alternative to jquery. ajax that can also do asynchronous processing.

Axios is essentially a wrapper around the native XMLHttpRequest object, but it’s an implementation version of Promise that complies with the latest ES specification and has the following features on its website:

  • Create HTTP requests from Node.js;
  • Support the Promise API;
  • Client support to prevent CSRF;
  • Provides some interfaces for concurrent requests (much easier operations).

3.11.3 Fetch

  • More low-level, it provides rich APIS (request and Response).
  • XHR is a new implementation in the ES specification.

However, Fetch is a low-level API that we can think of as native XHR, so it is not comfortable to use and needs to be encapsulated.

🏆 Conclusion: In the current environment, we can be bold to use Axios well.

3.12 Front-end framework

🚀 the “vue. js actual combat project” behind us — mobile terminal tourism website, will build our project step by step through vue. js.

3.13 Animation Tools

3.13.1 Animate. CSS

🔗Animate. CSS Animate. CSS: is a set of cool, fun, cross-browser animations that we can use in our projects.

🚀 we will use Animate. CSS to complete our animation.

3.13.2 TweenMax

🔗TweenMax TweenMax: It is a large and comprehensive animation tool that supports Canvas animation as well as DOM animation.

3.13.3 Popmotion

🔗Popmotion Popmotion: 2018’s breakout animation tool is nothing like anything you’ve ever seen before. It abandons the usual architecture used by animation tools, and has many innovations in Web animation that can be continuously focused on.

3.13.4 CSS 3

About 70% of the animation on the Web today can be done with CSS3.

3.14 2D Canvas game development

3.14.1 Createjs

🔗Createjs Createjs: Createjs is a set of modular libraries and tools developed based on HTML5. Based on these libraries, HTML5 games, animations, and interactive applications can be developed very quickly.

3.14.2 Pixijs

🔗Pixijs Pixijs: Pixijs is a Canvas framework with excellent performance, no matter in game or screen processing.

3.15 MDN website

What is 3.15.1

It contains a lot of the most up-to-date and correct knowledge that is useful for us to learn front-end technology.

How to use 3.15.2

When searching for relevant difficulties and unknown knowledge points, the blank space plus MDN will jump to the corresponding tutorials and documents on the website.


Postscript: The above is as a zero basis we need to understand the knowledge point, Less is more to fix the above, and then based on its subsequent divergent learning, thin water long.

The front end is long, but fun. There’s no end to learning, and it’s worth the next 10,000 hours for you and me.

I wish you good, QdyWXS ♥ you!