A few years ago, jQuery + the Bootstrap is unify river's lake, is a absolute dominance in the field of the front, and in recent years, with presents, React, and the rise of Vue and framework into the situation of schools of thought contend, in recent years, Web front-end technology development is fast, accordingly, the technology stack also becomes very much, but the most basic HTML/CSS/JavaScript, as well as the Vue/React/presents the JavaScript frameworks and their ecological system, and CSS preprocessor Sass/Less/Stylus, and TypeScript, and grunt/webpack gulp and other packaging build tools, there are a lot of other technology stack,
So much technology stack, we can't all master, even the front end of the senior engineer, is proficient in part, for example, some competent presents, some mastery of the React, some are familiar with the Vue, few people know about three kinds of framework of the ecological system are, therefore, we didn't need an introduction to each framework to study, just pick a is enough, and, as a whole stack, we learn a foreign technology is more important to learn the programming ideas behind the technology, design idea, architecture thought and so on, and presents, the React or Vuew, behind the core design idea are modular design, so as long as the master a kind of framework, we can also learn the core idea of the front end technology,
So, we should learn what kind of framework? My advice starts, Vue because Vue learning cost is the lowest, simple introduction, and this two years Vue is explosive growth, has pushed the React, the main cost is in the React to master JSX syntax, and the document also are in English, mostly Vue because it is the development and maintenance, natural more friendly to domestic developers, presents is a large framework, too heavy, the highest natural learning cost, as for jQuery + the Bootstrap this, has been out of date, suggested that don't need to learn, after all, our time is precious, there are a bunch of more valuable things waiting for us to learn,
Therefore, if we are to portal Web front-end development, in addition to learning HTML/CSS/JavaScript three basic technology stack, to know more about the Vue system, while the Vue system, in addition to the Vue framework itself, also includes other technology stack, behind this besides,
HTML/CSS/JavaScript
HTML, CSS, JavaScript is at the core of the front, so must grasp, HTML is the main HTML 5, compared to the previous version, added a lot of new features, CSS is mainly CSS 3, compared to the previous version, is mainly for the modular split, JavaScript is divided into three parts: ECMAScript, DOM and BOM, ECMAScript ES for short, is the core of JavaScript, is currently the latest version was ES2017 ES6 third small version, the DOM document object model (DOM), is a set of all elements of the API to access and manipulate HTML, BOM is the browser object model, is used to access and manipulate the browser's features,
HTML/CSS/JavaScript, more learning resources on w3school series can go to look for
Books, based on HTML and CSS, First "Head First HTML and CSS layout easy to understand, even completely zero basis of non-it personnel are suitable for learning, however, the Head First this book does not involve the update content of HTML 5 and CSS 3, however, the Head First explained the HTML 5, there is another book called" Head First HTML Programming ", however, be familiar with the use of the HTML 5, or want to learn some JavaScript, CSS 3 aspects Head First then there is no corresponding books, therefore, I recommend another book "range of practical guidelines,"
JavaScript, I first "JavaScript senior program design" this book, unit 1 in the book, is written in easy to understand, suitable for entry, in addition, some people would recommend "JavaScript authoritative guide", but this book is mainly a book dictionary, somewhat obscure, actually is not suitable for introduction, but "JavaScript senior program design" is based on the ES5, in order to supplement the content of the ES6, recommend nguyen piece "ES6 standard introduction", is currently the third edition, content has covered the latest version of ES2017,
In addition, a series of books called "You Don 't Know JS" also want to recommend to You, is also open source materials, the books will allow You to also Know how to JavaScript learning, also contains the ES6 content, but the books for beginners, only suitable for advanced, also published a translation books, called "You Don't Know JavaScript", only the roll-up and volume two, according to the evaluation, roll-up translation is good, but the volume of translation is so-so, and volume Don't Know when to press,
So, so much learning resources, we should learn how to efficient? In fact, we mostly in order to understand all kinds of core concept, we can't familiar with all the knowledge points in the short term, therefore, I still like the previous articles, also lists some core knowledge,
HTML based: give priority to with w3school or novice HTML tutorial, familiar with all kinds of commonly used the use of the label, especially the headings, paragraphs, links, images, forms, lists, forms, blocks, layout, CSS, script, etc.
CSS basis: the same is given priority to with w3school or novice CSS tutorial, familiar with CSS syntax and selector, style, the contents of the box model, positioning module
JavaScript: first as a programming language, must be familiar with the basis of language itself, including data types, variables, operators, control flow, functions, objects, etc.; In addition, also want to be familiar with the DOM; BOM under the simple understanding, usage scenario is not much
HTML 5: the new HTML 5 features must be understanding, content is also not many, the core is the canvas and SVG, the support of multimedia and Web storage, application cache, WebSocket etc.
CSS 3: CSS 3 are to be familiar with those new features, is the core of the elastic box
ES6: ES6 nature are to be familiar with, learn nguyen piece "ECMAScript 6 introductory tutorial is enough"
Vue system
Before we start formal learning Vue, we first to get to know a few concepts, so as to better understand the design concepts of the Vue, the first concept is application (single page), is only the application of a Web page, the load is only a single HTML page and the user and the application of interactive dynamic updating the page Web application, the second concept is (Virtual DOM), namely Virtual DOM, simply be a simulation of the DOM tree JavaScript object, in order to avoid large area caused by operating real DOM performance problems, the third concept is (response system), through the data model and the View of data binding, the system can change automatically in response to the View of the data model, the fourth concept is (modular), Vue and React by combination of various components of the application, understand these concepts, you can better understand the Vue/React these front end framework,
Also, development tools, I recommend the Visual Studio Code, a free open source lightweight Code editor, macOS, Windows, Linux support, someone said than sublime does open source, faster than the atom, more light than webstorm, say so, you're worth it,
Vue system contains a lot of technology stack, a complete set of Vue program generally includes Vue + Vue router + vuex + Vue cli + axios + + webpack sass, among them, the Vue + Vue router + vuex is also called the Vue buckets, because the three sets of technology stack is a Vue official launch, other frameworks and tools are a third party, so, let's understand these technology stack,
Vue: vue is vue. Js framework itself, adopt the MVVM pattern is a set of JavaScript framework, and using the Virtual DOM as the React, also provides responsive and componentization view components, but unlike the React, vue is recommended based on HTML templates, this also is compared it React and other reasons, easier introduction to the framework of
Vue - the router: for most Web applications today are single-page applications, the different views in order to achieve a single page jump, you use routing, vue - library of the router is used to implement the single-page applications of routing,
Vuex: vuex is a kind of Flux state management library, it USES the centralized storage management application state of all the components, about what is a Flux, can refer to nguyen other wrote an article "Flux architecture introductory tutorial,"
Vue - cli: vue - cli is the command line tools included with the official offer, with it you can quickly create vue program,
Axios: axios vue is a recommended a third-party HTTP library, it is based on the promise, promise is ES6 new features,
Sass: CSS a preprocessor, a simple introduction can see article "sass usage guidelines", the preprocessor and less and stylus, but a lot of Daniel's recommended or sass,
Webpack: webpack is packaged to build tools that can analogy for Java Gradle, but webpack is based on the node. Js, so use cooked webpack, also learn some node. Js basic knowledge, at least want to know the configuration node. Js running environment and understand the node. Js NPM package management tools commonly used commands,
For just ahead of contact time, there are too many unfamiliar concept need to know, at that time may be hard to digest, the author of the Vue especially rain creek wrote a "novice to: Vue 2.0 suggest learning sequence", can according to his suggestion to the study,
Learning resources, the best should be the official document, in addition, "Vue. Js combat" the book is especially rain creek as a recommended sequence, also can buy, can be used as a complementary resources, the club's official website for some concept if it is not very understanding, can temporarily put a put first, and later in the process of development project to do may be you will understand,
Practical introduction to
The key is to through the introduction to project combat can truly, that is, I have always admired and Android, iOS practical advice, if the condition allows, you can apply to the boss in the front end of the project development company, and then start to be familiar with the code and implement some simple tasks, suggested that begin with complete some simple UI interface, in the same way, nature is little not open source project, Vue, I recommend two open source projects:
nullnullnullnullnullnullnullnullnullnullnullnullnull