For back-end programmers like us, the front end always seems to be hard to grasp. It may not be because of difficulty, but because in the front-end world, there is a lack of rationality and logic. Knowledge is decentralized, tools are dispersed, and libraries are scattered. In particular, like me, there is no perseverance, or the less imaginative people, the front-end progress is not big.
All right, the end of The spit groove.
-------------Teacher Mao spoke-------------
A few years ago, when I was obsessed with Java, I also struggled with the choice of front-end frameworks. Try to find a set of front-end frameworks that inherit into the project schema. Search all over the net to draw the following conclusions:
each large front-end frame can be differentiated according to the "encapsulation" standard.
Design just out of a set of web skin, package degree of 0. Layers are packaged into a page that can be written directly in the background language, with a package of 10. So that's how I differentiate the front-end framework.
Level 1--Pure html+css
5 years ago, the basic is to use Dreamweaver just out of the page or page to view the source code stripped down skin. Does not involve JS, is pure page skin.
--------------------------------
Class 2--bootstrap seriesThe advent of Bootstrap is a milestone event. Originated in Twitter and introduced a lot of HTML5/CSS3 features. Thanks to its responsive support and a good experience, it is a refreshing sensation. Its source code, whether it is CSS or JS are worth learning, after looking at often there will be "originally can do this" feeling of this sudden sensation. But in the final analysis is a set of UI skin + a small number of JS frame, belonging to the low package of the framework.
--------------------------------
Class--metronic/adminlte Series
Based on Bootstrap or other 1-level framework, and then integrates a variety of jquery plug-ins, Rich text editor, such as JS Library, composed of a hodgepodge toolkit and case Library. Skin is basically a set of themes based on bootstrap customization. Case more detailed, the development of the time to find the components needed to copy the front-end code to paste, and then a little debugging can achieve good visual effects. Based on the number of integrated third-party libraries, the basic can be divided into a range of three-dimensional packaging. The code for this level of the framework is more of a binder, which binds the front-end code of various third-party libraries together.
--------------------------------
Level 5--jquery-ui
It is not because of how high the package is, but I think it is a dividing point, to take Jquery-ui out alone. jquery The following levels of the framework, the code is based on CSS, its own JS code is less, the frame is lighter, more flexible, more suitable for Internet web products. jquery above the level of the framework, belonging to the front-end of the heavy packaging, through the framework exposed interface for development, developers do not even need much front-end knowledge, only need to review the framework of the development documentation. The framework above jquery is better suited to the development of traditional management software. --------------------------------
6~7 Grade--EASY-UI/DWZ
Easy-ui is based on Jquery-ui, but has a richer library of components. It seems that the commercial version charges very high. It is said that a large state-owned enterprise has spent a large price to buy. DWZ is a domestic framework I think the overall performance is good, completely free, there are problems can be in their QQ group to mention. The rest of the previous use of Kingdee Operamasks-ui, but now seems to have not been updated. This class of framework also has an additional salutation-"rich client framework", meaning the heavy JS framework. The use of development efficiency is very high, the year was also a flourishing, the framework.
<img src= "https://pic4.zhimg.com/494173ca84cd589c8d0403c80b6080d7_b.png" data-rawwidth= "709" data-rawheight= "261" class= "Origin_image zh-lightbox-thumb" width= "709" data-original= "https://pic4.zhimg.com/ 494173ca84cd589c8d0403c80b6080d7_r.png ">--------------------------------
--------------------------------
Class 8--extjs seriesExtJS belongs to the front-end framework in the field of behemoths, packaging is very high, with a self-contained element selection engine and browser compatibility scheme, JS writing also has its own way. A lot of components are full. Just look at the official documents and examples of ExtJS. Almost no need to learn any other front-end knowledge to make "very beautiful" front-end pages. Of course the page is easy to "hit the shirt." The use of a long time, will be a heavy reliance on it, leaving the ExtJS, almost no writing front page.
<img src= "https://pic4.zhimg.com/aec387db3f85bb45e166f9de63f8bd0b_b.png" data-rawwidth= "1439" data-rawheight= "789" class= "Origin_image zh-lightbox-thumb" width= "1439" data-original= "https://pic4.zhimg.com/ Aec387db3f85bb45e166f9de63f8bd0b_r.png ">
--------------------------------
Level 9--VAADIN/GWTThe last level, is also the highest package level, that is, the so-called use of background language to write the front end. If the previous level eight at least the front and back end is relatively separate, the background program in Java, the foreground program in HTML or JS write, then this level of the framework will simply subvert your understanding! Just use Java in the background to write classes and objects, and set the relevant properties, the elements of the page is automatically generated through the background object. This certainly has the benefit, the mother no longer has to worry that I cannot write JS and the CSS. But is it really that hard to learn html/css/js? Personally, while GWT has such a strong endorsement from Google, the 9-tier package essentially couples the front and rear tables closer together. A person to do a project can also be considered, but a team before and after the separation, modular development, the use of this framework is a disaster! So I was extremely not recommended to use the 9-level package framework.
--------------------------------
For different programming methods, the following references are given:
1 DOP (Deadline oriented program, programming for deadlines) apes have two choices: A, study hard html/css/js, use three-or three-level framework; B, see the front-end code, 6~8 level is a good choice. For business priority, the boss all day shouting time how tight, the customer has the urgency of the project, you can directly choose B, I think the boss will not give you time to learn html/css/js.
2 EOP (Experience oriented program, user-experience-oriented programming) apes, most of them are Internet products that pursue the ultimate user experience. The decisive choice of the 1-level package of the framework, the appropriate reference to the framework of the one-dimensional.
3 MOP (Money oriented program, for RMB programming) for always do backstage, while the new Year holiday want to earn a little extra money procedure Ape, I know you also do not want in the front-end area has much development, do well backstage is enough for a lifetime of food and clothing worry-free, so still choose 6~8 level bar.
In addition, you need to consider search engine optimization projects, with the careful use of rich client or heavy AJAX applications.
What the? You also need to consider the compatibility of IE6? Go out to the left side of a wall, you can hit up, do not send!
Finally, I'm telling you, these are some of the things I've done a few years ago to treat my choice of phobias.
Now, Lord, I'm no longer obsessed with the various front-end frameworks. Because the heart has a sword, foliage, petals can be swords.
----------------------------------------
A friend mentioned Backbonejs/angularjs/reactjs/vuejs these emerging frameworks, and it feels necessary to complement the answer.
About five or six years ago, the front-end is still a marginal post, the front-end of the work: CSS by the designer with Dreamveaver and other tools incidentally done; JS side by the background programmer write to achieve the effect on the line.
The reason is mainly due to the fact that there is no large area of support at the time, the browser Web page HTML5 limited expressive. Even the need to rely on flash support for enhanced expressiveness. In recent years, with the rise of mobile and the popularization of HTML5/CSS3 and other technologies, the expression of Web end is becoming richer and more complex.
This is the subject of computer science,
when a thing is complicated to a certain extent, someone must abstract out various frameworks to improve maintainability and extensibility.
The transmission is complex, with the OSI 7-and 5-layer framework, the server cluster is complex, with a variety of cloud computing frameworks, and even the sales problem is complex, others summed up the "Sales Skills XX Recruit" ... This abstraction is also a basic way of thinking about human beings.
The front-end post is generated by the increasing complexity of the front page. To tell the truth, many old programmers used to be invisible to the front-end industry, thinking nothing but a few Kit Kat kinky skills. And now, JavaScript-based front-end technology has been successfully reversed, the development of Nodejs is to let JS have a elated day.
Now look back at the Backbonejs/angularjs/reactjs/vuejs series framework, which is not really a framework for background programmers. Don't be gullible about the "easy-to-use quick-start" propaganda spoken on their website, which is not told by background programmers and JS beginners. If you are vague about the concept of JS prototype chains, scopes, and asynchronous callbacks, using these frameworks will only get you bogged down in the mire!
While you can easily and roughly divide these frameworks into 7-level packages, I don't think these "deep front-end" frameworks are suitable for background developers.
Of course, there is no absolute, if you like me a wide range of interests, like toss, front and rear double repair, then you naturally know what to choose the front-end frame, you will not come to know to ask this question.
This is the present I, with a certain front-end skills, open-source community in the forest so many rich resources, foliage, petals are knives, do not need to tangled in the framework.
the front-end layering of teacher Mao's talk is more interesting. As for the other ideas, let's look at them and not make comments.
A front-end course for Mao [Wen Qiang] 's teacher
