Front-end frameworks are Buzz word these days, so I’m going to introduce you to some of the major frameworks and help you distinguish what a “front-end framework” really is.

Popular word

When you talk about front-end frameworks, you will hear some seemingly sophisticated words, such as MVVM, VDOM view Layer, Unidirection, etc., and these so-called “frameworks” :

  • Bootstrap
  • jQuery
  • BackBone
  • AngularJS
  • React
  • Vue

Frame chaos war

Bootstrap

Is Bootstrap a framework? Yes, even if it’s just a collection of common CSS and jQuery plugins, it’s still a framework. But it’s more of a collection of common code snippets than a framework that leads to design patterns.

The Bootstrap is a grid system, bring you is preset buttons, forms, lists, navigation, responsive, and so on style, it is very useful when you are independently developed, because can save time for the “design page”, and the style of this preset itself “also not ugly,” nature is popular with many companies “early rapid development”.

I prefer to call Bootstrap a UI library, like purecss and Foundation. Of course, the recent popular wechat mobile terminal UI library weUI also belongs to this category.

jQuery

JQuery is a phenomenon that redefines the behavior of DOM manipulation.

In a sense, jQuery is a framework because it makes it a design pattern to manipulate the DOM directly for UI interaction (laughs). This is a joke, but jQuery is more of a more abstract DOM API that compensates for the native DOM API and adds a lot of common helpers.

Common Web design patterns are MVC and MVVM, and another difference between them and jQuery is the handling of data. Code written in jQuery often deals directly with data in the DOM, requiring the page to be updated “manually.” Whereas MVC and MVVM usually store data in the Model layer and implement more efficient page rendering and updating through some binding mechanism.

BackBone

BackBone is often used with jQuery, MVC + a highly abstract DOM API has conquered the hearts of many developers.

However, BackBone is often criticized as “not MVC” MVC, the reason is that it is difficult to generalize the code written with jQuery properly with MVC pattern. In my opinion, this is because there is no standard View layer to organize the DOM related code.

Angular/Vue/React

See cn.vuejs.org/guide/compa…

My choice

For me, Vue and React are the more modern choices. Angular 2 has a steep learning curve that I find daunting.

The biggest difference between Vue and React is the activity and maturity of the community.

The React community seems to be active and mature, but the so-called Best practice is constantly emerging. Sometimes a thing with a different name can be used to show off and disturb the public.

The Vue community looks more authoritarian, with the status quo being that everyone is the boss. It’s not bad, it’s very good, it’s right things have a lot of people following and there’s nothing wrong with that. And now that the community is thriving, Righty himself is working full-time on Vue and related ecological components.

How to learn a framework

basis

Familiarizing yourself with the framework is essential, so it’s a good idea to read the official guide and try Vue on JSbin. This aspect of Vue’s official tutorial from simple to profound, comprehensive can be regarded as a model of the industry.

ecological

A framework without ecology will not live long, and one of the important things about ecology is that it saves developers time to rework. So your next step is to learn a lot about the ecology, like if you do React todomvc you can go and look at awesome-React, usually there’s a guide that’s been written before.

Continuous learning

I think one of my good habits as a developer is to “do everything yourself”. Even if someone tells you something once, you don’t have the experience to do it yourself.

“Their solution” is not to do a hand party, but to Google will never Baidu, baidu will never ask questions, can ask as far as possible to describe clearly, can describe clearly think can solve through Google.