Entry-level position

The entry criteria are simple: get to a level where you can participate in actual Web front-end projects. Note that this is a real project, which requires an understanding of what technology stacks are being used for real project development today. HTML/CSS/JavaScript are the three basic technology stacks to master, but to participate in actual project development, you must master some other mainstream framework systems.

A few years ago, jQuery + Bootstrap was the king of the front-end. In recent years, with frameworks like Angular, React, Vue, etc., it has become a field of contention. In recent years, the development of Web front-end technology has been so fast that the technology stack has become quite numerous. Besides the basic HTML/CSS/JavaScript, and JavaScript frameworks such as Vue/React/Angular and their respective ecosystems, There are CSS preprocessors Sass/Less/Stylus, TypeScript, various packaged build tools like Grunt/Webpack /gulp, and a whole bunch of other stacks.

There are so many technology stacks that we can’t master all of them. Even experienced front-end engineers are only familiar with some of them. For example, some are familiar with Angular, some with React, and some with Vue. Therefore, we don’t need to learn every framework to get started, just pick one. Moreover, as a full stack, it is more important that we learn a technology to learn the programming thought, design thought, architecture thought behind the technology. The core design philosophy behind Angular, React, or Vuew is component-based, so mastering a framework allows you to learn the core concepts of front-end technology.

So what kind of framework should we learn? My suggestion is to start with Vue, because the learning cost of Vue is the lowest and it is easy to get started. Moreover, Vue has seen explosive growth in the past two years, approaching React. The main learning cost of React is the JSX syntax, and the documentation is mostly in English. As Vue is developed and maintained by Chinese, it is naturally more friendly to domestic developers. Angular is a big, comprehensive framework that is too heavy and naturally the most expensive to learn. As for jQuery + Bootstrap, it is already out of date. It is suggested that there is no need to learn it. After all, our time is precious and there are a lot of more valuable things waiting for us to learn.

Therefore, we want to enter the Web front-end development, in addition to learning HTML/CSS/JavaScript three basic technology stack, but also to understand the Vue system. The Vue architecture, in addition to the Vue framework itself, also includes other technology stacks, which will be discussed later.

HTML/CSS/JavaScript

HTML, CSS, and JavaScript are the core fundamentals of the front end, so you have to master them. HTML is primarily HTML5, with many new features compared to previous versions. CSS is mainly CSS3, which is modular split compared to previous versions. JavaScript actually has three parts: ECMAScript, DOM, and BOM. ECMAScript (ES) is the core of JavaScript. The latest version is ES2017, the third minor version of ES6. The DOM is a document object model, essentially a set of apis for accessing and manipulating all the elements of HTML. The BOM is the browser object model for accessing and manipulating browser features.

There are many HTML/CSS/JavaScript learning resources, I recommend a few. First up is the w3School tutorial series:

HTML: This tutorial also covers new HTML5 content, but it’s not as detailed as the HTML5 tutorial below, so I recommend sticking to the BASICS of HTML and the forms section

HTML5: This tutorial explains the new features of HTML5

CSS: This tutorial does not cover the new features of CSS3, so you will need to follow the CSS3 tutorial below

CSS3: This tutorial is relatively light and covers only the new features of CSS3

JavaScript: This tutorial covers very basic syntax

However, I prefer to recommend cainiao’s tutorial, although the content is also from W3School, but some of the content is more detailed than w3School, here is the tutorial address:

HTML:www.runoob.com/html/html-t…

CSS:www.runoob.com/css/css-tut…

JavaScript:www.runoob.com/js/js-tutor…

HTML and CSS are sufficient, but JavaScript is not. ES6 and higher is missing, and I will recommend other resources to supplement it later.

For books, HTML and CSS basics, Head First HTML and CSS is designed to be easy to understand, even non-IT people who have no basic knowledge are suitable for learning. However, the Head First book doesn’t cover HTML5 and CSS3 updates. However, Head First has another book on HTML5 called “Head First HTML5 Programming”, but to get familiar with HTML5, you need to know a little JavaScript First. Head First doesn’t have a CSS3 book, so I recommend a practical Guide to CSS3.

In terms of JavaScript, I first recommend the book “JavaScript Advanced Programming”, which is easy to understand and suitable for beginners. On the other hand, some people will recommend the Definitive JavaScript Guide, but it’s mostly a dictionary and a bit obscure, so it’s not really a good place to start. However, JavaScript Advanced Programming is still based on ES5. In order to supplement ES6, I recommend Ruan Yifeng’s Introduction to ES6 Standards, currently in its third edition, which has covered the latest version of ES2017. In addition, because this is an open source textbook, you can also go to Ruan yifeng’s official website to read it for free.

Getting started with ECMAScript 6: es6.ruanyifeng.com/

There is also a book series called You Don’t Know JS, which is also an open source textbook that will help You understand JavaScript and how it works. It also covers ES6 content, but it is for beginners and is only suitable for advanced use. I have also published a Chinese translation book called JavaScript you Don’t know. At present, there are only two volumes, volume I and volume II. According to the evaluation, the translation of volume I is good, but the translation of volume II is not so bad, and I don’t know when the next volume will be published. Here is the github address for the book series:

“You Don’t Know JS: github.com/getify/You-…“

So, with so many learning resources, how should we study effectively? In fact, the main purpose is to understand the core concepts, we can not be familiar with all the knowledge in a short period of time, so I will just like the previous article, listed some of the core points.

HTML basics: Based on W3School or Cainiao HTML tutorials, familiar with the use of various common tags, especially headings, paragraphs, links, images, tables, lists, forms, blocks, layouts, CSS, scripts, etc

CSS basics: also based on W3School or ROOKIE CSS tutorials, familiar with CSS syntax and selectors, styles, box models, positioning and other modules content

JavaScript basics: First of all, as a programming language, you must be familiar with the basics of the language itself, including data types, variables, operators, control flows, functions, objects, etc. Also, familiarize yourself with DOM; A brief understanding of BOM is ok. There are not many usage scenarios

HTML5: THE new features of HTML5 must be understood, the content is not a lot, the core is canvas, SVG, multimedia support, Web storage, application cache, WebSocket and so on

CSS3: CSS3 is also to familiarize with those new features, the most core is the elastic box

ES6: Familiarize yourself with ES6. Just learn Ruan Yifeng’s Introduction to ECMAScript 6 tutorial

Vue system

Before we begin our formal study of Vue, let’s look at a few concepts so that we can better understand some of Vue’s design concepts. The first concept is a “single-page application,” which is a single Web page application that loads a single HTML page and dynamically updates that page as the user interacts with the application. The second concept is the “Virtual DOM”, or Virtual DOM, which is simply a JavaScript object that simulates a DOM tree, in order to avoid the performance problems caused by large-scale manipulation of the real DOM. The third concept is a “responsive system”, through the data binding of the data model to the View, the system can automatically respond to changes in the data model to the View. The fourth concept is “componentization.” Both Vue and React form applications by combining various components. By understanding these concepts, you can better understand the Vue/React front-end frameworks.

Also, for development tools, I recommend Visual Studio Code, a free open source lightweight Code editor that supports macOS, Windows, and Linux. Some people say it’s better than Sublime, faster than Atom, and lighter than WebStorm, so you’re worth it.

Vue system contains many technology stacks. A complete Vue project generally includes Vue + VUe-Router + VUex + VUE-CLI + AXIos + sass + Webpack. Vue + VUE-Router + VUex is also known as vUE family bucket, because these three sets of stacks are officially launched by VUE, while other frameworks and tools are third-party. So, let’s take a look at these stacks one by one.

Vue: Vue is the vue. js framework itself. It is a set of JavaScript framework that adopts MVVM mode. Like React, vUE uses Virtual DOM and provides responsive and componentized view components. But unlike React, Vue prefers htML-based templates, which is why it’s easier to get started than other frameworks like React.

Vue-router: Since most Web applications are single-page applications, routing is needed to realize the jump between different views in a single page. Vue-router library is used to implement the routing function of single-page applications.

Vuex: Vuex is a Flux-like state management library that uses a centralized storage to manage the state of all components of an application. For more information on what Flux is, please refer to the Flux Architecture Primer by Yifeng Ruan.

Vue-cli: Vue-CLI is an official command line tool that allows you to quickly create vUE projects.

Axios: Axios is a third-party HTTP library officially recommended by Vue that is based on Promise, a new feature in ES6.

Sass: A preprocessor of CSS. For a simple introduction, see Ruan Yifeng’s article “SASS Usage Guide”. Other preprocessors include the Less and Stylus, but the Sass is recommended by many.

Webpack: Webpack is a packaged build tool that can be likened to Java Gradle. However, WebPack is based on Node.js, so you need to be familiar with WebPack, learn some basic knowledge of Node.js, at least know how to configure node.js runtime environment and understand the common commands of Node.js package management tool NPM.

For those who are new to the contemporary front end, there are too many unfamiliar concepts to understand, which may be difficult to digest at the moment. You Yuxi, the author of Vue, wrote an article called “Novice to Vue: A Recommended Learning Sequence for Vue 2.0”, which can be followed by his advice.

In terms of learning resources, the best is probably the official documentation. In addition, “Vue. Js actual combat” this book has yu Xi to recommend preface, can also buy to see, can be used as the official website of supplementary resources. If you don’t quite understand some of the concepts, you can also put them aside for the time being, and you may understand them later in the project development process.

Introduction to combat

The most important thing is to really get started through project practice, which is what I always recommend. This is the same advice as Android and iOS. If possible, you can apply to your boss to participate in your company’s front-end project development, and then start to get familiar with the code and implement some simple tasks. It is recommended to start with some simple UI interfaces. Similarly, open source projects are also indispensable. I recommend two open source projects for Vue:

Vue2 – HappyFRi: a simple little project, perfect for beginners

Vue2 – ELM: A complete project to imitate Ele. me with vue

Also attached is a github address for many vue open source projects: github.com/opendigg/aw… .

As for the operation of the open source actual combat project, I still suggest changing the skin of the application first, and then trying to make a similar App by myself. Take the above VUE version of Ele. me project as an example, you first change the skin for all its pages, including the background, buttons, text and so on, and then try to do a Baidu takeout or Meituan takeout by yourself. When you finish, you should have no problem dealing with the general VUE project development. Later, you can learn the React system as needed, which will not be difficult to learn.

conclusion

Front-end development entry, to learn a lot of stack technology, in addition to the most basic HTML/CSS/JavaScript, but also HTML5, CSS3, ES6, but also to learn the current popular JavaScript framework, MY suggestion is to start from Vue, easy to get started, The technical stack to master includes vue + vue-Router + vuex + VUE-CLI + AXIos + sass + webpack, in addition, Node.js also needs to understand the basics. Finally, I recommend a simple small project and a complete VUE version of ele. me project.

Thinking and practice

How is the programming philosophy of front-end development different from mobile development? How to apply front-end architectural ideas to mobile development? Finally, make a Web application on your own.

If you want to learn front-end development technology now, you can join my Q group if you have any questions about learning methods, learning routes, learning efficiency and so on in the process of learning front-end. There are a lot of front-end learning materials and 2020 big factory interview real questions like, comments, forward can be obtained for free, I hope to be helpful to you.