Today's front-end is no longer as simple as writing pages and adjusting styles as before. Now the front-end is becoming more and more complex and more knowledgeable.
To be a WEB front-end, you need to know what the front-end is and learn those knowledge; the front-end must understand at least three parts: HTML, CSS, JavaScript (JS for short), then first clarify these three concepts:
HTML is responsible for the structure, and the content that the webpage wants to express is written by html.
CSS is responsible for styles, and the beauty and ugliness of web pages are controlled by it
JS is responsible for interaction, and the interaction between users and web pages is controlled by it.
Since the development of the web front-end, countless libraries and frameworks have evolved; when it comes to libraries, is it jquery? When the editor first came into contact with the library, it also started with jQuery; today we will talk about the useful library frameworks that the front-end has developed up to now.
The beginning of 2016 should be a few years of rapid development of the Internet, and it is also a very popular year for web front-end development. The development speed of web front-end technology makes people feel that it is hardly inherited iteration, but revolution and creation. This year, there are many popular front-end development frameworks. The following source code era web editor summarizes the most popular front-end frameworks from 2016 to the present.
In this information age with the rapid development of the Internet, technological updates and iterations are also accelerating. It seems that Java technology, which has been popular for more than ten years, is still an evergreen tree. Looking back on how I came here at the beginning of two years ago, I also wanted to be a java programmer. I thought about the five-year plan, but in the end I got the front end by mistake. The front-end is still very popular at present. With the blossoming of IT technology, new front-end frameworks are constantly being introduced, but most of them are still in the stage of roaring. In fact, the understanding of technology has always been that technology serves business and products, and products promote the evolution of technology to varying degrees. Web, wireless, Internet of Things, VR, and PC promote the integration of technology and micro-innovation from different directions. The roles of programmers are exchanged in different business scenarios. With the emergence of Node.js, the role of language is also changing, and js has played an increasingly important role. After having a meal, I will sort out the knowledge I have learned.
1. Front-end UI framework component library:
When it comes to front-end frameworks, I think of React, Vue and Angular in my first impression. I don’t know if you think of these like me. Now the commonly used ones are: Bootstrap, jQuery UI, BootMetro, AUI, there are many commonly used, not one by one. Everyone gave an example, because many friends think that the front-end frameworks used in different project development are different. In fact, there is also a front-end framework that can be applied to a variety of project development, but I didn't find it.
Why use front-end framework to develop projects?
This should be the best solution. The first is to reduce the idea of making wheels. It is very willing for companies to develop a web application quickly, and it can save a lot of time between time and cost. This is one of them, and the other is to use the component functions of the front-end framework. As long as the components are powerful, any project can be developed (the premise is: familiar with the functions of the front-end framework!), and the time cost problem can be easily solved.
A front-end framework that can make beautiful page effects without a designer
Although there are many front-end frameworks in the market, some UI frameworks belong to component libraries. However, QUICK UI is different from the three popular underlying frameworks React, Vue and Angular. QUICK UI provides a complete set of front-end solutions, including front-end and back-end separation. The development framework, more than 100 powerful UI controls, dozens of sets of exquisite skin templates and nearly 160,000-word development documents satisfy you, so development projects are not a problem.
2. Front-end framework library:
1.Node.Js
Address: http://www.runoob.com/nodejs/nodejs-tutorial.html (Chinese website)
Description: Node.js is a Javascript runtime environment (runtime). It actually encapsulates the Google V8 engine. The V8 engine executes Javascript very fast and the performance is very good. Node.js optimizes some special use cases and provides alternative APIs, making V8 run better in a non-browser environment.
Node.js is a platform based on the Chrome JavaScript runtime, which is used to conveniently build web applications with fast response speed and easy expansion. Node.js uses event-driven, non-blocking I/O model to be lightweight and efficient. It is very suitable for running data-intensive real-time applications on distributed devices.
Simply put, node.js is JavaScript running on the server.
Node.js is a platform based on Chrome javascript runtime.
Node.js is an event-driven I/O server-side JavaScript environment. Based on Google's V8 engine, the V8 engine executes Javascript very fast and has very good performance.
Purpose:
1. RESTful API (currently popular interface development style)
This is the most ideal application scenario for NodeJS, which can handle tens of thousands of connections. There is not much logic in itself. You only need to request the API and organize the data to return. It is essentially just looking up some values from a database and forming a response. Since the response is a small amount of text, and the inbound request is also a small amount of text, the traffic is not high, and a machine can handle even the API needs of the busiest company.
2. Unify the UI layer of Web applications
In the current MVC architecture, in a sense, Web development has two UI layers, one is what we finally see in the browser, and the other is on the server side, responsible for generating and splicing pages.
It is not discussed whether this architecture is good or bad, but there is another practice, a service-oriented architecture, which better separates the front-end and back-end dependencies. If all the key business logic is encapsulated into REST calls, it means that the upper layer only needs to consider how to use these REST interfaces to build specific applications. Those back-end programmers don't care about how specific data is passed from one page to another, and they don't care whether user data updates are obtained asynchronously through Ajax or through page refresh.
3. Applications with a large number of Ajax requests
For example, in personalized applications, each user sees a different page, the cache is invalid, and an Ajax request needs to be initiated when the page is loaded. NodeJS can respond to a large number of concurrent requests. All in all, NodeJS is suitable for scenarios with high concurrency, I/O intensive, and a small amount of business logic.
2.angular.Js (more powerful, github ranking is also relatively high)
Address: http://www.runoob.com/angularjs/angularjs-tutorial.html (Chinese website)
Description: AngularJS[1] was born in 2009, created by Misko Hevery and others, and later acquired by Google. It is an excellent front-end JS framework that has been used in many Google products. AngularJS has many features, the core ones are: MVVM, modularization, automatic two-way data binding, semantic labeling, dependency injection, etc.
Purpose: We should be able to understand the real purpose of AngularJS, MVVM, modularity, automatic two-way data binding, etc. In addition to simple dom operations, it also reflects the power of Js programming. Of course the application should depend on the occasion.
It appeared earlier and was once a popular front-end js framework, but with the emergence of reactJS and VueJS this year, its popularity is slowly decreasing.
3.JQuery Mobile
Address: http://www.w3school.com.cn/jquerymobile/ (Chinese website)
Description: Query Mobile is the version of jQuery on mobile phones and tablet devices. jQuery Mobile will not only bring the jQuery core library to mainstream mobile platforms, but also release a complete and unified jQuery mobile UI framework. Support global mainstream mobile platforms. The jQuery Mobile development team said: We are very excited to develop this project. Mobile Web needs a cross-browser framework so that developers can develop real mobile Web sites.
Purpose: jQuery Mobile is a framework for creating mobile web applications.
jQuery Mobile is suitable for all popular smart phones and tablets.
jquery Mobile uses HTML5 and CSS3 to lay out the page with as few scripts as possible.
4.requirejs
Address: http://www.requirejs.cn/
Description: The goal of RequireJS is to encourage the modularization of the code, it uses a different
Purpose: Modular dynamic loading.
5.Vue.js (currently mainstream on the market)
Address: http://cn.vuejs.org/
Description: Vue.js is a library for building interactive web interfaces. It provides MVVM data binding and a composable component system with simple and flexible API. Technically speaking, Vue.js focuses on the view model layer on the MVVM pattern and connects the view and the model through two-way data binding. The actual DOM operation and output format are abstracted into instructions and filters. Compared with other MVVM frameworks, Vue.js is easier to use.
At present, the more popular development model of separation of front and back ends in the market, most of the front ends are made by vueJS, please refer to the official documents for specific advantages.
6.backbone.js
Address: http://www.css88.com/doc/backbone/
Description: Backbone provides the structure of models, collections, and views for complex Javascript applications. The model is used to bind key-value data and custom events; the collection is accompanied by a rich API of enumerable functions; the view can declare event handling functions and connect to the application through the RESTful JSON interface.
7. React.js (gihub ranks second only to vue.js)
Address: http://reactjs.cn/react/docs/why-react.html
Description: React is a JavaScript library used by Facebook and Instagram to create user interfaces. Many people think that React is the V (view) in MVC. We created React to solve a problem: building large-scale applications with constantly changing data over time. To achieve this goal, React uses the following two main ideas.
8.Amaze UI
Amaze UI is a lightweight front-end application framework. It is a relatively popular framework in China. It is more suitable for mobile-side responsive development frameworks. It can generate exclusive UI framework libraries for use according to project requirements. The components are very rich and beautiful. web page.
Official website address: http://amazeui.org/
Three, visual components
1.Echarts
Address: http://echarts.baidu.com/
Description: ECharts, a pure Javascript chart library, can run smoothly on PC and mobile devices, compatible with most current browsers (IE8/9/10/11, Chrome, Firefox, Safari, etc.), the bottom layer relies on the lightweight Canvas library ZRender, which provides intuitive, vivid, interactive, and highly personalized data visualization charts.
2.tableau (charged)
Address: http://www.yuandingit.com/special/tableau/index.html
Description: Tableau is the simplest business intelligence tool software in the desktop system. Tableau does not force users to write custom codes, and the new console can also be completely Custom configuration. On the console, not only can monitor information, but also provide complete analysis capabilities. The Tableau console is flexible and highly dynamic.
Four, front-end construction tools
1.gulp
Address: Description: Easy to use Through the strategy of code better than configuration, Gulp makes simple tasks simple and complex tasks manageable. Build fast Using the power of Node.js streaming, you can quickly build projects and reduce frequent IO operations.
High quality plugins
Gulp's strict plugin guidelines ensure that plugins work as simple and high-quality as you expect.
Easy to learn
Through the minimum API, mastering Gulp is effortless, and the construction work is mastered: like a series of stream pipelines.
2、ES or webPackage
1.Bootstrap Chinese website
First share, if you want to learn web front-end, HTML5 and JavaScript, you can come to my front-end group 733581373, friends will communicate in it, share some learning methods and small details that need to be paid attention to, and I will talk about some on time every day The front-end cool special effects, and the front-end live course learning
Bootstrap, make your page more concise, intuitive, powerful, mobile device-first front-end development framework, and make web development faster and easier. It also provides more elegant HTML and CSS specifications, which is written by the dynamic CSS language Less. It has a rich grid layout system and a wealth of reusable components, as well as powerful support for more than a dozen JavaScript, jQuery plug-ins, and component customization.
Bootstrap Chinese website address: http://www.bootcss.com/
2. Layui
layer is a web bomb layer component with excellent reputation. It is a front-end UI framework written with its own module specifications. It follows the writing and organization form of native HTML/CSS/JS. It has a very low threshold and is ready to use. The first version of layui was released in the fall of 2016. It is different from those UI frameworks based on the underlying MVVM. Every detail from the core code to the API has been carefully crafted, which is very suitable for rapid interface development.
Layui official website address: https://www.layui.com/
3.ElementUI
Element-Ul is a desktop UI framework based on Vue.js 2.0 launched by the front-end team of Ele.me. The corresponding framework on the mobile phone is Mint UI. UI framework suitable for Vue;
official website address: http://element-cn.eleme.io/#/zh-CN
4.Mint UI
Mint UI is a mobile component library based on Vue.js launched by the front-end team of Ele.me. Mint UI contains rich CSS and JS components, which can meet the daily mobile development needs. Through it, you can quickly build a unified style page and improve development efficiency.
Official website address: http://mint-ui.github.io/
5.angular
AngularJS was born in 2009, created by Misko Hevery and others, and later acquired by Google. It is an excellent front-end JS framework that has been used in many Google products. AngularJS has many features, the core of which is MVW (Model-View-Whatever), modularity, automatic two-way data binding, semantic labeling, dependency injection, etc.
Official website address: http://www.angularjs.net.cn/
6.React
React can create user interaction interfaces very easily. Design a concise view for each state of your application. React can also efficiently update the rendering interface when the data changes. React originated from Facebook's internal project. Because the company was not satisfied with all the JavaScript MVC frameworks on the market, it decided to write a set of its own to build an Instagram website. After making it, I found that this set of things is very useful, and it was open sourced in May 2013.
Official website address: http://react-china.org/
7.vue.js
The most popular front-end framework in recent years is Vue.js, which is a progressive framework for building data-driven web interfaces. The goal of Vue.js is to implement response data binding and combined view components through the simplest possible API. Many programmers who have used vue commented on it like this, "vue.js combines the advantages of angular.js and react.js, and eliminates their disadvantages." Vue.js, which has been awarded such a high evaluation, is also the pride of the Chinese in the open source world, because its author is a Chinese – You Yuxi.
Several commonly used high-quality web front-end frameworks
Web front-end frameworks are designed to save development costs and time. Generally, a front-end framework is used to develop a project (unless you have a front-end development team). I have analyzed several web front-end frameworks based on my experience. They are all personal opinions, the benevolent see the benevolent and the wise see the wisdom.
QUICK UI
QUICK UI is a complete set of enterprise-level web front-end development solutions, consisting of a basic framework, UI component library, skin packs, sample projects and documents. Developers using QUICKUI can greatly reduce workload, improve development efficiency, and quickly build powerful, beautiful, and compatible web application systems.
Advantages of QUICK UI:
①The most powerful
QUICKUI has undergone 7 years of iterative updates, constantly summarizing and extracting component requirements from customers' various businesses to create new components and functions. The latest version 4.0 framework now contains more than one hundred components and more than one thousand application scenarios. It can be said that QUICKUI has the most powerful component library in the field of front-end frameworks.
②The most stable operation
Many other third-party UI controls use OK in simple situations, and many problems will appear in complex scenarios. This phenomenon is very common because it is not possible to anticipate all applications in the component design. And QUICKUI has gone through thousands of actual projects in 7 years, applied in various complex scenarios, and constantly improved and adjusted according to customer feedback. The current fourth generation can be said to be the most stable and perfect version.
③Rich and exquisite interface skins Unlike other web front-end frameworks, which are only a set of component libraries, QUICKUI is a set of front-end solutions with rich appearance interface solutions. Adopting the popular flat design concept, it has launched hundreds of beautifully crafted interfaces with excellent user experience, including login, responsive web, work desktop, maps, portal style, large-screen display style, etc. These interfaces are released in the form of QUICKUI skin packs, which are very convenient to use and replace.
④ Development documents of all
sizes QUICKUI has a development document of 160,000 words +. Each function point of the framework and components has detailed explanations and code examples, which can be consulted at any time during development. In addition to the framework mechanism explanation and component usage tutorials, the document also involves a lot of knowledge about web front-end development. Read carefully and use it in conjunction with the framework, and you will soon become a master of web development.
⑤It is very easy to get started. QUICKUI adopts the idea of component to build components. A component is a tag of one or two html, which is very simple to use. It frees developers from tedious JS coding, greatly reduces the error rate of front-end coding; retains the HTML layout, so as to quickly perform page layout. The developer’s front-end technical requirements are also very low, only need to understand html syntax and some simple JS, so that more energy can be put on the realization of business functions, which greatly improves development efficiency.
⑥Browser compatibility is very good QUICKUI4.0 uses a lot of HTML5, CSS3 technology to improve expressiveness and user experience, these new features will have a good effect in modern browsers. However, there are still a large number of domestic users using old-age browsers such as IE7 and IE8. In order to take care of these users, the framework adopts a progressive idea to ensure that lower version browsers can also be used normally. Therefore, QUICKUI is compatible with all major browsers above IE7.
The flex
Apache Foundation today released the Flex4.8 version, which is the first version released by Adobe after donating Flex to the Apache Foundation.
It should be noted that Flex is still in the incubation stage and is not an official Apache project, and Flex4.8 is not an official Apache version.
Apache said that this version marks the beginning of a new era of Flex, and the future of Flex will be driven by the community, not by a company. Developers can help improve Flex by contributing code, such as fixing bugs and adding features.
I sold it from Macromedia to Adobe, and then donated it to Apache. I don’t know what it is. Fortunately, it has not been refactored significantly, otherwise it would be really sad!
extjs
ExtJS is a front-end ajax framework that is mainly used to create front-end user interfaces and is basically independent of back-end technology.
With rich functions, no one can match.
Regardless of the beauty of the interface, or the strong function, ext's table controls are at the top of the list.
Gorgeous interface, flexible functions, and development tools are all supporting, but there is the biggest problem, you have to spend money to use it!
easyui
easyui helps you build your web application easier.
It is a set of lightweight ui framework developed based on jquery, which is very small and feature-rich.
But one of her biggest problems is that the code can only find the previous open source version. The source code of the version after 1.2 is obfuscated. If there is a problem, it will be very troublesome to modify! But a big advantage is that it is open source and free, and the interface is still in the past!
jQueryUI
jQueryUI is a set of jQuery page UI plug-ins, including many commonly used page spaces, such as Tabs (such as the upper right corner of the homepage of this site), curtain effects (upper left corner of the homepage of this site), dialog boxes, drag and drop effects, dates Selection, color selection, data sorting, form size adjustment, etc. are very much content. The function is very comprehensive, the interface is also very beautiful, you can use it as a whole, or you can use several modules separately, free and open source!
MiniUI is
another jquery-based framework with rich interface functions.
jQueryMiniUI-rapid development of WebUI.
It can shorten the development time, reduce the amount of code, enable developers to focus more on the business and server side, easily implement interface development, and bring an excellent user experience.
Using MiniUI, developers can quickly create typical WEB applications such as Ajax without refresh, B/S fast data entry, CRUD, Master-Detail, menu toolbar, pop-up panel, layout navigation, data verification, paging table, tree, tree table, etc. system interface.
The interface is well done and the functions are quite rich, but there are two major problems, one is charging, the other is no source code. To put it bluntly, not open source! Based on this development, if you want to expand the function, you need to find their team to upgrade!
DWZ
DWZ rich client framework (jQueryRIAframework) is an AjaxRIA open source framework based on jQuery developed by the Chinese. The
design goal is simple and practical, rapid development, and reduce Ajax development costs.
Everyone is welcome to make suggestions, and we will further adjust and improve the functions in the next version. Jointly promote the overall domestic ajax development level.
After all, it's domestically produced, support it, and the source code is completely open, you can choose! But I am not sure how the performance is!
YUI
Yahoo! UILibrary (YUI) is an open source JavaScript function library. In order to create a highly interactive web page, it uses AJAX, DHTML and DOM and other code technologies. It also contains many CSS resources. The use authorization is the BSD license, basically I haven't studied it much! YUICompressor is quite famous. I don’t know how the application of this UI library is!
Sencha
Sencha is a new project formed by the merger of ExtJS, jQTouch and Raphael.
The framework of a large company, and a powerful combination of several libraries, is worth recommending!
OperaMasks-UI
OperaMasks-UI is a lightweight front-end JS component library created by the OperaMasks team in the second half of 2011. It aims to provide a low learning curve, flexible customization, unified style, and multi-browser support, covering enterprise business scenarios The front-end JavaScriptUI component library. At present, the team has opened this product to the community under the LGPL open source agreement.