In today’s front-end world, there are numerous UI frameworks, and each of the major manufacturers has its own framework in place, which makes us front-end developers feel very uncomfortable. So many front-end UI frameworks, how should we choose it, how to quickly master the application to the actual development? Especially our novice students, at the beginning of contact with the framework is not special understanding, also not easy to use. That’s what we’re talking about today.

Meaning of frame

The point of a framework, what is the point of a framework, is to get you to think about what problem does the framework solve for us, what help does it provide, why do you choose a framework? The answer is obvious:

  1. Unity, choose a Ui framework, this framework will unify the style, interactive animation unified, so as to ensure the integrity of our system, not to a page a style, let people feel that it is pieced together.
  2. Compatibility, by compatibility, is not in the traditional sense of compatibility with Internet Explorer 6, 7, and 8, but with the major standard browsers, for example: When a checkbox looks one way on Internet Explorer, another way on Google, another way on Firefox, framework developers harmonize the way it looks and work with all sorts of glitches.
  3. Fast. Fast means fast and efficient development, because UI frameworks encapsulate many of the components we use so that we don’t have to reinvent the HTML structure and functionality.

Using a framework

With the understanding of the UI framework above, the next step is to use the framework, needless to say, the old front-end development, I here summarize two novice students often appear problems:

  1. Installation, this problem is almost a beginner students hundred problem, the problem of the reason: because the spa one-page application development, unlike traditional development, before use scripr tags introduced the SRC attribute can, but use NPM to install, and then in the injection, then the new classmates in this very strange. I think this question is an important problem, because of careless, aside from abroad, the framework of like domestic framework, the framework of their installation instructions, on the website are really write very detailed, and it is absolutely suitable for Chinese reading habits, and it happened that a lot of new students are always problems in the installation, all kinds of error, Problem is out in a careless, careless reason is that many students don’t go to somebody else’s official website to see, but go to baidu, search out all kinds of tutorial blog, ferret out the tutorial blog, itself also won’t have too many wrong, after all, the somebody else bothered to write, but after you introduce forgotten injection or lack of the introduction of style, such as: For vue projects, you don’t just import the main frame (js file), the main frame you need to be injected by vue.use(), and you need to import CSS accordingly; Angular projects (above Angular2) import the main framework in the @NgModule({}) import property. Note that Angular projects have a different UI framework style file than vue, which is usually written in main.js. Angular projects import the global CSS file style.css in the project, using @import.

  1. Application of components installed framework, it involves the practical application, before practical application, tell me something about you first look at existing project will appear, in the existing project, the project USES a particular UI framework, and then the project code in various strange properties, looking at let a person fog, scratching their heads, appear this kind of circumstance, the first one is not familiar with the project, There is nothing wrong with this, and the second reason is that you don’t understand the properties and functionality of the components that you are applying to the UI framework. Actually use a framework, a lot of new classmates for application, is copy paste the code in the past, but ignore the to see the actual instructions or is not careful, the component of any UI framework, website have corresponding to the components inside of API, the role of attribute, method calls, and use the matters needing attention. In fact, AT this time, I recommend novice students to spend more time to read the API of this component, understand its usage and precautions, so that you can get twice the result with half the effort in the development process.
  2. The understanding of the framework, each UI framework, all have their own special components, namely oneself have, others did not, it is for this reason, in the early part of the project started, while selecting a technology, it is also a selection criteria for UI framework, we need one of its functions to achieve our demand, of course also involves the practical application, and extensibility. Speaking of components, I don’t want to say that each framework is unique, but that everyone has, because your understanding of this will determine your level of proficiency with the UI framework, which level you use the framework at, elementary, intermediate, advanced, or supreme level. I categorize UI framework components into the following categories:
  • Layout components: mainly refers to grid system components, layout components and so on
  • Basic components: buttons, ICONS, fonts, colors, etc
  • Navigation component: mainly refers to the menu, TAB TAB, paging control components, drop-down list components and so on
  • Form-based components: input field, checkbox check,radio radio, score, date, form, etc
  • Dialog box component: mainly refers to the confirmation dialog box, information prompt box
  • Data view component: mainly refers to table, list, etc

The above are component types that almost all UI frameworks have. The only difference is that each UI framework names the type differently, and the function is almost the same. All components are packaged components that provide the following functionality: ** Properties, methods, events ** these interfaces are available for us to use, so when we call a component, we just need to look at the corresponding API, and it’s so easy to use.

conclusion

This article is more theoretical knowledge, the purpose is to help novice front-end students to understand the UI framework, will not be scared and afraid, and the core essence of UI framework application is the same as we master, JS,jquery,vue, Angular, patiently carefully look at their API, and appropriate practice small demo. I believe everyone can get started very quickly.