frame
front-end framework
Front-end frameworks generally refer to frameworks used to simplify web design, using a wide range of front-end development kits, such as jquery, extjs, bootstrap, etc. These frameworks encapsulate some functions, such as html document operations, beautiful various controls (buttons, forms etc.), using a front-end framework can help build a website quickly.
The framework is to provide a complete set of solutions, arranged according to the prescribed code structure, using the front-end framework can reduce the interface development cycle and improve the aesthetics of the interface.
As the Web becomes more and more standardized and standardized, Web componentization technology continues to innovate, mobile terminal development continues to sublimate, and front-end frameworks emerge in endlessly.
We always say that the three front-end frameworks are one family, you copy me, I copy him, integrity is trampled by wild beasts, Google, God and Meta
The three frameworks are:
- Vue of You Yuxi team
- React from the Meta (formerly Facebook) team
- Angular by Google Team
But the front-end is not limited to these frameworks. Below, a few popular front-end frameworks are briefly introduced.
For more details, please search for " " on WeChat前端爱好者 , and click me to view .
Common front-end frameworks
Vue
Official website : https://cn.vuejs.org/
Vue.js was first released in February 2014 by Chinese developer You Yuxi. In its predecessor version vue.js 0.x, You Yuxi was still working at Google, and later resigned to become a developer. Vue.js officially released version 1.0 in 2015. With the rapid development of the community, it has now become a popular front-end framework.
Perfect Chinese supporting documents, ultra-low entry barriers, once called a "fool-like framework", easy to learn and use, two-way data binding with mixed reviews, and super easy-to-use progressive framework mode are all deeply loved by us. favorite point.
Advantages :
- Easy to learn: Vue's core library is very streamlined, and the learning curve is relatively low, allowing developers to get started quickly.
- Two-way data binding: Vue supports two-way data binding, which can make UI and data update synchronously, avoiding the tedious manual operation of DOM.
- Component-based development: Vue also adopts the idea of component-based development, which allows developers to better organize and reuse code.
- Virtual DOM: Vue also uses virtual DOM technology, which can optimize page performance and improve rendering efficiency.
- Active community: Vue has a large and active community, and developers can easily obtain various resources and plug-ins, which can improve development efficiency.
Disadvantages :
- Rely on third-party libraries: Vue needs to use third-party libraries to implement some functions, such as Vuex management state, Vue Router implementation routing, etc., which makes developers need to learn and use more tools and libraries.
- Lack of strict specifications: Vue lacks strict specifications, and developers may use different naming rules, component structures, etc., which may reduce the maintainability of the project.
- Relatively low market share: Compared to React and Angular, Vue has a relatively low market share, which may affect the choice of some developers.
React
Official website : https://react.dev/
React is a JavaScript library developed by Meta (formerly Facebook) for building user interfaces. The first version of React was released in May 2013, but in 2015, React's architecture changed significantly, leading to React 16. React has a wide range of applications both in the community and in business.
React's component-based development model, virtual DOM rendering, can be used in combination with other framework libraries, and the "fun and interesting" JSX syntax is deeply loved by everyone
Advantages :
- Efficient virtual DOM: React uses virtual DOM technology, which can reduce the number of page redraws and improve page rendering efficiency.
- Component-based development: React adopts the idea of component-based development, which allows developers to better organize and reuse code.
- One-way data flow: React adopts a one-way data flow architecture, making the state of the application controllable and predictable.
- Rich ecosystem: React has a huge ecosystem, including Redux state management, React Router for routing, etc., which can help developers better develop and maintain applications.
- Cross-platform support: React also supports cross-platform development and can be used to build web applications, mobile applications, desktop applications and other platforms.
Disadvantages :
- High learning cost: React adopts JSX syntax. Developers need to master this syntax and related tools and libraries, and the learning cost is high.
- Complex ecosystem: Although React has a rich ecosystem, there are also some complex libraries and components. Choosing the right library and components requires a certain level of technology and experience.
- Limitations of component development: Although React's component development idea improves code reusability and maintainability, there are still some limitations, such as communication between components, state management, etc., requiring developers to spend a certain amount of energy to solve the problem. solve.
Angular
Official website : Angular
Angular is an upgraded version of AngularJS released by Google in 2010, also known as Angular 2. AngularJS was created by Misko Hevery and Adam Abrons in 2009, originally known as "GetAngular" and changed its name to AngularJS in 2010.
Following the success of AngularJS, Google began a complete refactoring of the framework and released Angular 2 in 2016. Currently, Angular is also one of the very popular front-end frameworks.
Advantages :
- Complete MVC framework: Angular provides a complete MVC framework, including data binding, routing, dependency injection, directives, etc. These functions can help developers manage and maintain code more conveniently.
- Reactive Programming: Angular supports reactive programming, which makes it easy to handle asynchronous data streams. This style of programming improves code readability, maintainability, and testability.
- TypeScript support: Based on TypeScript, Angular provides better type checking, code hinting, refactoring and other functions, which can reduce the risk of code errors and improve development efficiency.
- Suitable for large applications: Angular is suitable for building large and complex web applications, which can help developers better organize code and manage modules.
Disadvantages :
- High learning cost: Since Angular provides a complete MVC framework, the learning cost is relatively high, and there are many knowledge points to be mastered, which may be difficult for beginners.
- Performance Issues: Due to the large number of features and dependencies provided by Angular, this can sometimes cause performance issues. Developers need to use features such as dependency injection and data binding carefully to avoid affecting the performance of the application.
- Version upgrade problem: Angular version upgrades are relatively frequent, and some compatibility problems may be caused during the upgrade process. This requires developers to spend a certain amount of time and energy to adapt to the new version.
jQuery
jQuery was one of the original front-end frameworks launched in 2006. Regardless of its release date, what sets it apart is its importance in today's tech ecosystem. Not only is jQuery easy to use, but it also reduces the need to write extensive JavaScript code. Basically, jQuery is used to manipulate DOM and CSS manipulation on the front end and enhance the interactivity and functionality of the website.
The latest development of the framework allows developers to create native mobile applications using its HTML5 based UI solution - jQuery Mobile. Also, the jQuery framework is browser-friendly and supports the browsers you intend to use.
Some old websites still use this jQuery.
Svelte
Official website : https://svelte.dev
Chinese official website : https://www.sveltejs.cn / https://www.svelte.cn/
Svelte is a fresh approach to building user interfaces. While traditional frameworks like React and Vue do a lot of work in the browser, Svelte handles that work in the compile phase of building your application.
Unlike diffing with virtual DOM. Svelte wrote code that surgically updates the DOM when the state of the application changes.
Alpine
Official website : https://alpinejs.dev
Chinese official website : https://www.alpinejs.cn
Alpine.js provides responsive and declarative features similar to larger frameworks such as Vue or React at a very low cost.
You can continue manipulating the DOM and use Alpine.js when needed.
It can be understood as the JavaScript version of Tailwind.
Note : Alpine.js's syntax is almost entirely borrowed from Vue (with some extensions from Angular). I would like to thank them all for their contributions to the Web world.
example
<div x-data="{ open: false }">
<button @click="open = true">Open Dropdown</button>
<ul
x-show="open"
@click.away="open = false"
>
Dropdown Body
</ul>
</div>
Preact
Official website : https://preactjs.com
React's 3kb lightweight solution, with the same ES6 API. It has the characteristics of small size, high performance, lightweight & embeddable, and ecosystem compatibility.
Preact is a JavaScript library that defines itself as the fastest 3KB alternative to React with an ES6-like API. Preact provides the smallest possible virtual DOM abstraction other than DOM.
It is developed together with other available front-end and UI libraries on stable platform features and functions. Preact is small in size without compromising speed, and can develop complex dynamic web applications.
example
import { h, render, Component } from 'preact';
class App extends Component {
// Initialise our state. For now we only store the input value
state = { value: '' }
onInput = ev => {
// This will schedule a state update. Once updated the component
// will automatically re-render itself.
this.setState({ value: ev.target.value });
}
render() {
return (
<div>
<h1>Hello, world!</h1>
<form>
<input type="text" value={this.state.value} onInput={this.onInput} />
<button type="submit">Update</button>
</form>
</div>
);
}
}
render(<App />, document.getElementById("app"));
LitElement
Official website : https://lit.dev
LitElement is a simple framework for building fast, lightweight web components. It provides reactive state, scoped styles and a small, fast and expressive declarative templating system.
example
import { LitElement, html, property, customElement } from 'lit-element';
@customElement('simple-greeting')
export class SimpleGreeting extends LitElement {
@property() name = 'World';
render() {
return html`<p>Hello, ${this.name}!</p>`;
}
}
<simple-greeting name="Everyone"></simple-greeting>
Why use LitElement
- Pleasant disclaimer : Lit-element's simple, familiar development model makes building web components easier than ever. Express UI declaratively, as a function of state. You don't need to learn the web-components language, you can use all the functions of javascript in the template. It will be updated automatically when the element element changes
- Fast and Light : Anyone who works anywhere will appreciate how fast Lit-element is. It uses lit-html to define and render the html only to re-refresh the dynamically changed part of the component style
- Seamless interoperability : Lit-element follows web component standards. So components will work with any framework. Lit-element is easily included in web pages using custom elements. Use shadow DOM for encapsulation.
Stimulus
Official website : https://stimulus.hotwired.dev
Stimulus is a lightweight front-end framework. This framework binds HTML elements and JavaScript behaviors through attributes such as data-contoller data-target data-action. Stimulus itself does not handle HTML rendering, but adds behaviors to rendered HTML.
Ember
Official website : https://emberjs.com
Ember.js is an open-source free JavaScript client-side framework for developing web applications. Use the Model-View-Controller (MVC) pattern. The framework provides a common data binding, URL-based approach to building different applications with an emphasis on scalability.
Emberjs is a component-based framework developed in 2011. It presents two-way data binding, similar to Angular. It is designed to impeccably manage the ever-increasing demands on contemporary technology. You can build multifaceted web and mobile applications with Ember.js and expect its efficient design to handle them. However, Ember's learning curve is one of its few drawbacks. Due to its traditional and rigid structure, this framework is one of the most challenging web UI frameworks. Being relatively new and unexplored, its developer community is insignificant. Anyone can learn it as long as they don't take the time to learn it.
Of course, there are many frameworks, such as: Semantic-UI, Backbone.js, Foundation and so on.
best front-end framework
When it comes to the best front-end frameworks, we can be sure that the market is diverse. What's more, UI developers have the opportunity to choose from top innovators.
Front-end frameworks like Angular, Vue.js, and React have taken top positions in the market.
These frameworks have received strong support from the community and were chosen for their unique flexibility and features.
reference documents
- https://baijiahao.baidu.com/s?id=1719221861793933665&wfr=spider&for=pc
- https://zhuanlan.zhihu.com/p/76463271
- https://baijiahao.baidu.com/s?id=1728185890869092949&wfr=spider&for=pc