Learn about the first five front-end frameworks
Relevant concepts
- Class library – A class library is a collection of functions that help you write WEB applications. It’s your code that takes the lead, and you decide when to use the library. Class library: jQuery, etc
- Framework – A framework is a special, implemented WEB application that you just need to populate with specific business logic. The framework takes the lead, calling your code according to the specific application logic. Frameworks include knockout, SproutCore, etc.
directory
-
Angular
-
Vue
-
React
-
JQuery
-
Bootstrap
-
Personal summary
1. Angular
- A brief introduction to Angular
- AngularJs is an excellent JS framework that has been used in many Google products
- It’s a JavaScript framework that passes
<script>Tags are added to HTML pages- It extends HTML with directives (such as ng-app, ng-model) that bind data to pages with expressions
- AngularJs was designed to overcome the shortcomings of HTML in building Web applications by instructing browsers to recognize new syntax
- Presents the use of
- Through the first
<script>Tags are added to web pages
Concrete is: < script SRC = “https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js” > < / script >
- Extend HTML with AngularJs directives
Add an attribute to an HTML element. For example, add the ng-app directive (attribute) to a
tag:tells AngularJs that the tag owns the AngularJs application. Other directives include: Ng-model binds the input values to application variables, which ARE not covered here. - Bind data to HTML through expressions
Expressions are enclosed in {{}}, much like JavaScript expressions, and can contain text, operators, and variables
- Advantages and disadvantages AngularJs
- advantages
- Two-way data binding is possible, and data binding is probably the coolest and most useful feature of AngularJS. It can save you development time by avoiding writing a lot of initial code. A typical Web application may contain 80% of the code used to process, query, and listen to the DOM. Data binding means less code and you can focus on your application
- Is a relatively complete front-end MVVM framework, including templates, data bidirectional binding, routing, modularization, services, filters, dependency injection and other functions
- Code modularization, each module of the code has its own scope, model, controller and so on
- The powerful directive can encapsulate many functions into HTML tags, attributes or comments, which greatly beautifies the structure of HTML and enhances its readability
- Ng modular bold introduction of Java some things (dependency injection), can easily write reusable code, for the agile development team is very helpful, our project from online to the present, UI changes greatly, in the exploration of the iteration of the product, but JS code is basically little change
- disadvantages
- Validation function error message display is weak, need to write a lot of template tags
- The upgrade from 1.0.x to 1.2.x seems to be a major adjustment, not perfectly compatible with the lower version, and may cause a compatibility BUG after the upgrade
- AngularJs is too cumbersome
2. Vue
- A brief introduction to Vue
- Vue.js is a set of progressive frameworks for building user interfaces
- Vue focuses only on the view layer and adopts a bottom-up incremental design
- The goal of Vue is to implement data binding of responses and composite view components through the simplest POSSIBLE API
- Vue is very easy to learn
- Vue does not support IE8 and below because Vue uses ECMAScript 5 features that IE8 cannot emulate
- through
<script>Tag introduction, such as:<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>- Vue is very easy to integrate with other libraries or existing projects
- Pros and cons of Vue
- advantages
- Simple and easy to use
- Easy to learn, easy to learn
- Lightweight and efficient, only 20KB size after compression, using virtual DOM to achieve fast rendering
- It belongs to the MMVM framework. If you have written complex DOM operations, you will feel the convenience brought by MMVM
- Componentization Vue
- disadvantages
- Lack of advanced learning courses
- Internet Explorer 8 and later versions are not supported
- Poor ecosystem, not as good as Angular and React
- The community is not big
- advantages
3. React
- React
- React is a JAVASCRIPT library for building user interfaces
- React is mainly used to build UIs. You can pass various types of parameters in React, such as declaration code, to help you render the UI, static HTML DOM elements, dynamic variables, and even interactive application components
- React grew out of an internal Facebook project to build the Instagram site and opened source in May 2013
- React has high performance, very simple code logic, and more and more people are paying attention to and using it
- Pros and cons of React
- advantages
- Declarative design −React uses the declarative paradigm to describe applications
- −React Minimizes interaction with the DOM by simulating the DOM
- Flexible −React works well with known libraries or frameworks
- Components − Use React to build components, making code reusable and suitable for large project development
- − React implements one-way response data flow, reducing duplicate code, which is why it is simpler than traditional data binding
- disadvantages
- React is a UI component that can be used in combination with other frameworks. It is not currently appropriate to create a complete framework on its own
- The HTML template functionality of ReactJs is neither complete nor robust
4. JQuery
- A brief introduction to JQuery
- JQuery is a fast and concise JavaScript framework that is also a JavaScript code library
- JQuery is designed to “write Less, Do More”, which is to write Less code and Do More things
- JQuery greatly simplifies JavaScript programming by encapsulating common JavaScript functionality and providing a simple JavaScript design pattern that optimizes HTML document manipulation, event handling, animation design, and Ajax interaction
- JQuery has a unique chained syntax and a short, clear, multifunctional interface. It has efficient and flexible CSS selectors and can be extended to CSS selectors. Have convenient plug-in extension mechanism and rich plug-in
- JQuery is compatible with many major browsers
- Pros and Cons of JQuery
- advantages
- It’s easy to use JavaScript
- JQuery separates the script from the page
- The least amount of code does the most
- Performance support is good, and jQuery has the best understanding of performance among large JavaScript frameworks. Despite all the new features in different versions, the slimmest version is only 18KB in size, a number that will be hard to reduce. There are significant performance improvements with each release of jQuery. When paired with a new generation of browsers with faster JavaScript engines, such as Firefox 3 and Google Chrome, developers will have a new speed advantage when creating experiential Web applications.
- JQuery can modify the content of a web page, such as changing the text of the page, inserting or flipping the image of the page, and JQuery simplifies the way you would normally do things with JavaScript code.
- disadvantages
- Backward compatibility is not possible. Each new version is not compatible with an earlier version
- Multiple plug-ins conflict. When using multiple plug-ins on the same page, it’s easy to encounter collisions, especially when they rely on the same event or selector. This is not a jQuery problem, but it can be a difficult problem to debug and fix.
- The JQuery core code base has relatively poor support for animation and special effects
5. Bootstrap
- A brief understanding of Bootstrap
- Bootstrap is based on HTML, CSS, and JavaScript
- Bootstrap is a front-end framework for rapid development of Web applications and websites
- Bootstrap is written in the dynamic CSS language Less
- Bootstrap provides a basic structure with a grid system, link styles, and backgrounds
- Bootstrap comes with the following features: global CSS Settings, defining basic HTML element styles, extensible classes, and an advanced grid system
- Bootstrap contains more than a dozen reusable components for creating images, drop-down menus, navigation, warning boxes, pop-up boxes, and more
- Bootstrap includes more than a dozen custom jQuery plug-ins. You can include all plug-ins directly or individually
- You can customize Bootstrap components, LESS variables, and jQuery plug-ins to get your own version
- Bootstrap relies on JQuery
- Advantages and disadvantages of Bootstrap
- advantages
- Cross-device, cross-browser, compatible with all modern browsers
- It provides a responsive, mobile-first streaming grid system. It can adjust the interface to fit the user’s screen size so that it behaves well in all sizes
- Bootstrap pre-defines a number of CSS classes. When Bootstrap is used, you can simply assign the corresponding class name to the class
- Bootstrap provides a number of useful JQuery plugins that make it easy for developers to implement common effects on the WEB
- Bootstrap provides useful components, including navigation, tabs, toolbars, buttons, etc
- disadvantages
- There is no small issue with IE compatibility. Bootstrap sets all element box models to border-box, which is the box model in IE promiscuous mode
- Bootstrap uses a lot of HTML5 and CSS3 syntax, which also has compatibility issues
- If you have specific requirements that require you to re-customize the style, you will need to do a lot of CSS rewriting
6. Personal summary
Angular is clunky, React and Vue are easy to learn, lightweight and efficient, and focus on the view layer. JQuery greatly simplifies JavaScript writing, while Bootstrap provides many CSS predefined classes. However, this is only at the initial level of understanding, only after practice will you really understand the differences, characteristics, strengths and weaknesses of these frameworks.