The difference between front-end framework and library

Gathering sand into a tower, making a little progress every day


⭐ Column introduction

Front-end Getting Started Tour: Exploring the Wonderful World of Web Development Welcome to the Front-End Getting Started Tour! If you are interested, you can subscribe to this column! This column is tailor-made for those who are interested in web development and have just entered the front-end field. Whether you are a complete novice or a developer with some basic knowledge, here will provide you with a systematic and friendly learning platform. In this column, we will update it every day in the form of questions and answers, presenting you with selected front-end knowledge points and answers to frequently asked questions. Through the Q&A format, we hope to respond more directly to readers’ questions about front-end technology and help everyone gradually establish a solid foundation. Whether it's HTML, CSS, JavaScript, or various common frameworks and tools, we'll explain concepts in a simple and easy-to-understand way, and provide practical examples and exercises to solidify what you've learned. At the same time, we will also share some practical tips and best practices to help you better understand and apply various technologies in front-end development.

Insert image description here

Whether you are looking for a career change, upskilling or fulfilling personal interests, we are committed to providing you with the best learning resources and support. Let's explore the wonderful world of web development together! Join the front-end entry journey and become an outstanding front-end developer! Let’s set sail on the front-end journey! ! !

Today’s content:The difference between front-end framework (Front-end Framework) and library (Library)











Insert image description here


The difference between front-end framework and library

front-end framework

  1. definition:

    • A framework is a set of predefined rules and conventions for organizing and managing code. It provides a structured way to build applications, including defining the project's file organization, data flow, state management, etc.
  2. Features:

    • Versatility: A framework is usually a more comprehensive solution that covers all aspects of the application, including views, data, routing, state management, etc.
    • Strong binding: When using a framework, you usually need to develop in accordance with the rules and conventions provided by the framework, so it is highly binding.
  3. example:

    • Angular: Maintained by Google, it is a complete MVC (Model-View-Controller) framework.
    • React: is maintained by Facebook. It mainly focuses on the construction of the UI layer, but can be combined with other libraries and tools to form a complete application.
    • Vue: A progressive framework for building user interfaces that is easy to get started and can also be flexibly used to build complex single-page applications.

Front-end library

  1. definition:

    • A library is a set of encapsulated tools and functions designed to handle a specific task or problem. It usually focuses on a problem in a specific domain and provides specific functionality without imposing the structure of the entire application.
  2. Features:

    • Lightweight: Libraries are generally more lightweight than frameworks because they focus on solving a specific problem rather than providing an overall architecture.
    • Flexibility: When using libraries, developers are generally more flexible and can choose how to organize their code, manage state, etc.
  3. example:

    • jQuery: A library for simplifying DOM manipulation and event handling.
    • Lodash: Provides a set of practical tool functions to simplify JavaScript programming.
    • Redux: A library for JavaScript application state management, often used in conjunction with React.

Summary of differences

  1. use:

    • Framework: provides a complete set of solutions for building the overall structure of an application.
    • Library: Provides a set of tools and functions for solving domain-specific problems.
  2. Binding:

    • Framework: is usually highly restrictive and needs to be developed in a manner specified by the framework.
    • Library: provides some functions, but the overall structure is more flexible, and developers can choose how to use it.
  3. Example:

    • Biles: Angular, React, Vue.
    • 库: jQuery、Lodash、Redux。

In a real-world project, the choice between using a framework or a library depends on the complexity of the project, developer preferences, and the requirements of the specific problem. Sometimes developers use a combination of frameworks and libraries to take advantage of their strengths. For example, use React as the view layer framework and Redux as the state management library.


⭐Write at the end

This column is suitable for a wide range of readers, and is suitable for front-end beginners; or those who have not learned front-end and are interested in front-end, or back-end students who want to better show themselves and expand some front-end knowledge points during the interview process, so If you have the basics of front-end and follow this column, it can also help you to a great extent to check for omissions and fill in the gaps. Since the blogger himself does the content output, if there are any flaws in the article, you can contact me through the left side of the homepage. , let’s make progress together, and at the same time, I also recommend several columns to everyone. Interested partners can subscribe: In addition to the columns below, you can also go to my homepage to see other columns;

Front-end games (free)This column will take you into a world full of creativity and fun. By using the basic knowledge of HTML, CSS and JavaScript, we will build together Various interesting page games. Whether you are a beginner or have some front-end development experience, this column is for you. We'll start with the basics and walk you through the skills you need to build a page game. Through practical cases and exercises, you will learn how to use HTML to build page structure, use CSS to beautify the game interface, and use JavaScript to add interactive and dynamic effects to the game. In this column, we'll cover various types of mini-games, including maze games, brick breaker, snake, minesweeper, calculators, plane battles, tic-tac-toe, puzzles, mazes, and more. Each project guides you through the building process in concise and clear steps, with detailed explanations and code examples. At the same time, we will also share some optimization tips and best practices to help you improve page performance and user experience. Whether you are looking for an interesting project to exercise your front-end skills, or are interested in page game development, the front-end games column will be your best choice. Click to subscribe to the front-end game column

Insert image description here

Vue3 Transparent Tutorial [From Zero to One] (Paid) Welcome to Vue3 Transparent Tutorial! This column aims to provide everyone with comprehensive technical knowledge related to Vue3. If you have some Vue2 experience, this column can help you master the core concepts and usage of Vue3. We will start from scratch and guide you step by step to build a complete Vue application. Through practical cases and exercises, you will learn how to use Vue3's template syntax, component development, state management, routing and other functions. We will also introduce some advanced features, such as Composition API and Teleport, to help you better understand and apply the new features of Vue3. In this column, we'll guide you through each project in concise and clear steps, with detailed explanations and sample code. At the same time, we will also share some common problems and solutions in Vue3 development to help you overcome difficulties and improve development efficiency. Whether you want to learn Vue3 in depth or need a comprehensive guide to building a front-end project, the Vue3 thorough tutorial column will become an indispensable resource for you. Click to subscribe to the Vue3 Transparent Tutorial [From Zero to One] column

Insert image description here

Guess you like

Origin blog.csdn.net/JHXL_/article/details/134918233