What frameworks are there for web front-end?

Web front-end frameworks include: 1. Angular, a front-end framework for creating a single application interface; 2. react, a JavaScript development framework for building user interfaces; 3. vue, a set of A progressive JavaScript framework for building user interfaces; 4. Bootstartp, a front-end framework based on HTML, CSS, and JavaScript; 5. QUICK UI, a set of enterprise-level web front-end development solutions; 6. SUI, a front-end component library.

The operating environment of this tutorial: Windows 7 system, Dell G3 computer.

The web front-end, also known as the "client", is about the visual aspects of the website that users can see and experience, that is, everything the user sees and what the web browser displays, involving what the user can see , everything you touch and experience; that is, the web front-end includes the structure of the web page, the visual appearance of the web, and the implementation of interaction at the web level.

What are the web front-end frameworks

1. Angular

AngularJS is developed by Misko Hevery et al. Founded in 2009 and later acquired by Google. It is an excellent front-end JS framework that is used in many products. It is not only a front-end development framework with advanced concepts, but also an end-to-end solution. It follows the MVC pattern in architectural design and advocates loose coupling of data and logical processing components. AngularJS realizes the natural extension of HTML through instruction technology, and realizes two-way automatic synchronization of data model and display view through compilation technology, alleviating complex DOM operations. In addition, it also provides good support for front-end automated testing technology.

Angular is a front-end framework for creating a single application interface. It has many core features such as data binding, services, directives, dependency injection, etc. It has powerful module functions and has the advantages of custom commands

Features:

• 1. Good application structure

• 2. Two-way data binding

• 3. Instructions

• 4.HTML template

• 5. Can be embedded, injected and tested

Advantages:

• 1. Template function Powerful and rich, it comes with an extremely rich set of angular instructions.

• 2. It is a relatively complete front-end framework, including services, templates, two-way data binding, modularization, routing, filters, dependency injection and other functions;

• 3. Customize the instruction. After customizing the instruction, it can be used multiple times in the project.

• 4.ng modularity boldly introduces some things from Java (dependency injection), which can easily write reusable code, for agile development teams Very helpful.

• 5.angularjs is developed by Internet giant Google, which also means that it has a solid foundation and community support.

Disadvantages:

• 1. Angular is easy to get started with, but there are many concepts when you get deeper, and it is difficult to understand during learning.

• 2. There are very few documentation examples. The official documentation basically only describes the API, without any examples. In many cases, the specific how to use it comes from Google, or directly asks Misko, Angular author.

• 3. The compatibility with IE6/7 is not particularly good, but you can use jQuery to write your own code to solve some problems.

• 4. There are few best practice tutorials on the application of instructions. Angular is actually very flexible. If you don’t follow the usage principles of some authors, it is easy to write different codes, such as in js or in js. Thinking like jQuery there are many dom operations.

• 5.DI dependency injection requires explicit declaration if code compression is needed.

#2. React

React, produced by facebook, the official version was launched in 2013, later than angular It took 4 years, but thanks to its innovative VirtualDOM, it surpassed angularJS in terms of performance. Once it was launched, it became very popular. It has many features, including VirtualDOM, JSX, Diff algorithm, etc., supports ES6 syntax, and uses functional programming. The threshold is slightly higher, but it is also more flexible, allowing more development possibilities.

Features

• 1. Declarative design: React adopts a declarative paradigm, which can easily describe applications.

• 2. Efficiency: React minimizes interaction with the DOM by simulating the DOM.

• 3. Flexible: React works well with known libraries or frameworks.

Advantages:

• 1. Fast: During the UI rendering process, React passes the Micro-operations to implement local updates to the actual DOM.

• 2. Cross-browser compatibility: Virtual DOM helps us solve cross-browser problems. It provides us with a standardized API, which is no problem even in IE8.

• 3. Modularization: Write independent modular UI components for your program, so that when there is a problem with one or some components, you can easily isolate it.

• 4. One-way data flow: Flux is an architecture for creating a one-way data layer in JavaScript applications 5. Isomorphic, pure JavaScript: Because search engine crawlers rely on By serving server-side responses instead of executing JavaScript, pre-rendering your app helps with SEO. 6. Good compatibility: For example, RequireJS is used for loading and packaging, while Browserify and Webpack are suitable for building large applications. They make those difficult tasks less daunting. Disadvantages: React itself is just a V, not a complete framework, so if you want a complete framework for a large project, you basically need to add ReactRouter and Flux to write large applications.

3, Vue

Vue, as the last framework launched (2014), draws on its predecessors angular and react Features (such as VirtualDOM, two-way data binding, diff algorithm, responsive attributes, component development, etc.) and related optimizations have been made to make it more convenient to use, easier to get started, and less suitable for beginners.

Features:

• 1. Lightweight framework

• 2. Two-way data binding Defined

• 3. Command

• 4. Plug-in

Advantages:

• #1. Simple: The official documentation is very clear and easier to learn than Angular.

• 2. Fast: Update DOM in asynchronous batch processing.

• 3. Composition: Compose your application with decoupled, reusable components.

• 4. Compact: ~18kbmin gzip, and no dependencies.

• 5. Powerful: Expressions do not need to declare dependent deducible properties (computedproperties).

• 6. Module-friendly: It can be installed through NPM, Bower or Duo. It does not force all your code to follow Angular's various regulations, and the usage scenarios are more flexible.

Disadvantages:

• 1. Newborn: Vue.js is a new project, not as mature as angular .

• 2. The impact is not very big: I googled it and found that the diversity or richness of Vue.js is less than that of some other famous libraries

• 3. IE8 is not supported.

4. Bootstartp

Bootstrap is Twitter’s open source front-end framework based on HTML, CSS, and JavaScript. It is a front-end toolkit designed for rapid development of web applications. It supports responsive layout and adheres to mobile device priority after the V3 version.

Bootstrap provides elegant HTML and CSS specifications, which are written in the dynamic CSS language Less. Bootstrap has been very popular since its launch and has been a popular open source project on GitHub, including NASA's MSNBC (Microsoft National Broadcasting Company) Breaking News. Some frameworks that are familiar to domestic mobile developers, such as the WeX5 front-end open source framework, are also performance optimized based on the Bootstrap source code.

Official address: https://getbootstrap.com

Chinese address: http://www.bootcss.com/

Bootstrap Features

Bootstrap is very popular due to its very useful functions and features. The main core features are as follows:

1) Cross-device and cross-browser

It is compatible with all modern browsers, including the criticized IE7 and 8. Of course, this course no longer considers browsers below IE9.

2) Responsive layout

can not only support the display of various resolutions on the PC, but also support the responsive switching display of mobile PAD, mobile phone and other screens.

3) Comprehensive components provided

Bootstrap provides highly practical components, including: navigation, labels, toolbars, buttons and a series of components, which are convenient for developers to call.

4) Built-in jQuery plug-ins

Bootstrap provides many practical jquery plug-ins, which facilitate developers to implement various general special effects on the Web.

5) Support HTML5, CSS3

HTML5 semantic tags and CSS3 attributes are well supported.

6) Support LESS dynamic styles

LESS uses variables, nesting, and operation mixed coding to write faster and more flexible CSS. It can be developed well with Bootstrap.

5. QUICK UI

QUICK UI is a complete set of enterprise-level web front-end development solutions, consisting of a basic framework, UI component library, It consists of skin packages, sample projects and documentation. Developers using QUICKUI can greatly reduce their workload and improve development efficiency, and quickly build powerful, beautiful, and compatible web application systems.

6. MDC Web

Material Components for the web (MDC Web), a new front-end framework designed by Google for the Web. MDC Web helps developers implement Material Design, and components are developed by Google's core team of engineers and UX designers. These components enable a reliable development workflow to build beautiful and functional web projects.

7、Pure

Bootstrap, Patternfly and MDC Web are very powerful CSS frameworks, but very tedious and complex. If you want a lightweight CSS framework, it is recommended to try Pure.css. It is closer to CSS programming, but it can also help build a good web page. Pure is a lightweight CSS framework with a minimal footprint. It is developed by Yahoo and is open source under the BSD license.

8. Foundation

Foundation claims to be the most advanced responsive front-end framework in the world. It provides advanced features and tutorials for building professional websites. This framework is used by many companies, organizations and has extensive documentation available.

9. Bulma

Bulma’s open source framework based on Flexbox is open source under the MIT license. A very lightweight framework that only requires one CSS file. Bulma has concise and clear documentation making it easy to choose the theme you want. There are also many web components available to use them in your designs.

10. Skeleton

Lightweight framework Skeleton. The Skeleton library is only about 400 lines long, and the framework only provides some basic CSS framework components. Skeleton still provides detailed documentation to help you get started quickly.

11. Materialize

Materialize is a modern responsive front-end framework based on the Material Design style, which solves the most arduous work. Combined custom components provide default styles. Materialize's documentation page is very comprehensive and easy to follow. Its component page includes buttons, cards, navigation, etc.

12. Bootflat

Bootflat is an open source CSS framework derived from Twitter’s Bootstrap. Bootflat is simpler and more lightweight than Bootstrap. Mostly images without much text.

13. PatternFly

PatternFly is Red Hat’s open source CSS framework. Unlike Bootstrap, Bootstrap is for those who want to create beautiful websites. Designed for developers, PatternFly is mainly focused on enterprise application developers providing components such as bar charts, charts, navigation, etc. In fact, Red Hat used it to create OpenShift. In addition to static HTML, PatternFly also supports the ReactJS framework, a popular JavaScript framework developed by Facebook. PatternFly has many advanced components such as bar charts, charts, patterns and layouts suitable for enterprise-level applications.

14. flex

Flex is still in the incubation stage and is not yet an official Apache project. Flex4.8 is not an official Apache project either. Version. , this version marks the beginning of a new era for Flex, where the future of Flex will be driven by the community rather than by one company. Developers can help improve Flex by contributing code, such as fixing bugs, adding features, etc.

The above are some commonly used frameworks for Web front-end development shared by Xiaoqian. Programmers can choose a simple, intuitive, and powerful front-end development framework based on their business needs to make their work faster and easier and improve development efficiency.

15. SUI

"SUI is a front-end component library developed based on bootstrap. It is also a set of design specifications. Through SUI makes it very convenient to design and implement beautiful pages." Sure enough, it is better to directly quote the boring official advertisement to save your own brain cells (囧...). Of course, as the advertisement said, if you have used Bootstrap before, you can easily switch to SUI. This may be what Taobao gives to the front-end losers. Welfare. .

Github: https://github.com/sdc-alibaba/sui

Official website: http://sui.taobao.org/sui/docs/index.html

(Learning video sharing: web front-end)

The above is the detailed content of What frameworks are there for web front-end?. For more information, please follow other related articles on the PHP Chinese website!