The Relationship Between Frontend and Frameworks

The Secrets of Frontend and Frameworks

Preface: The Birth of JS and the Warring States Period

In 1995, JavaScript was born. Brendan Eich took only 10 days to design the JavaScript language. At that time, browsers were in their "warring states period," with each browser having its own JS specifications. Inconsistent syntax implementations often caused confusion. For compatibility, everything was stuffed into the window object. Even today, printing window properties reveals many traces of this history. It wasn't until later that the ECMA organization established standards.

jQuery's Great Unification

In 2006, jQuery was released. At that time, frontend developers faced browser compatibility issues (the toxic legacy of browser wars). jQuery developed extensive DOM/BOM compatibility solutions, was quite lightweight, used method chaining, provided developers with quick development methods, and enabled more stable applications, leading to widespread adoption. This was also one of the indirect causes of frontend-backend separation. However, we can't call jQuery a framework—it's just a library, but it was the enlightener of frontend frameworks.

Differences Between JS and jQuery

JS

var checkValue;
var elements = document.getElementsByTagName('input');
for (var n = 0; n < elements.length; n++){
if (elements[n].type == 'radio' && elements[n].name == 'RadioGroup' && elements[n].checked){
checkedValue = elements[n].value;
}

jQuery

var checkValue = $('[name="radioGroup"]:checked').val();

jQuery's Decline and Exit

As web applications became more widespread, page logic became increasingly complex, and jQuery's advantages gradually faded. To develop increasingly complex applications, developers had to add different functional jQuery libraries to solve problems encountered in developing complex pages, gradually becoming a burden for developers. Although new libraries continued to emerge, no one could replace jQuery until Angular was proposed in 2010, introducing a new idea—the concept of "frontend frameworks" was born.

What is the Framework Concept, and What Problems Do Frameworks Solve?

To answer this question, we need to start analyzing from business models.

Web 1.0: MVC model development applications, where page display and logic functions were bound together. Frontend and backend didn't have clear division of responsibilities, meaning a page would mix different language logic.

Web 2.0: With the emergence of AJAX technology, frontend obtained data asynchronously through AJAX and used jQuery to present pages and logic operations. Backend provided API interfaces. This cooperation method separated pages from data, which was the initial prototype of frontend-backend separation! But it was still the MVC model.

The Old Business Model: MVC

Model: Engineers write program functions, database data management and database design (implementing algorithms, page functions, etc.) View: Graphical interface design, i.e., client-side pages. Controller: Responsible for forwarding requests, processing requests, then notifying the model.

The New Business Model: MVVM

Model: Represents the data model. View: User interface. ViewModel: Business logic layer.

Simply put, MVVM allows business logic to be reflected on pages. The logic layer has two-way binding with the data layer, achieving mutual interaction effects.

MVVM is the framework concept, simplifying dependencies between data and UI pages, and solving the problem of frequent data updates. Developers no longer need to depend on a bunch of jQuery packages. Frontend no longer needs to mix logic and pages together like making beef balls. Data is reflected in real-time on the view. Backend no longer needs to process frontend pages, reducing developers' mental burden and achieving focused division of labor cooperation.

The Big Three Frameworks

React was open-sourced in May 2013, currently has 196K stars, with Facebook as its parent. Angular was open-sourced in 2009, currently has 84.4K stars, with Google as its parent. Vue was open-sourced in 2014, has 200K stars, created by Evan You, currently has no corporate parent. All three frameworks have their own enthusiasts. Learning difficulty: Angular > React > Vue.

React

UI = fn(state) React's core philosophy: pages can be generated by wrapping state in abstract functions to produce UI. In other words, UI is a function that projects data into different forms. Same input provides same output. Maintains pure and simple usage.

Current version is 18. After version 16.8, Hook API was introduced, enabling better control of side effects and state management. The lifecycle concept was removed, using unified stream management functions. Dependencies can be abstracted, reasonably controlling the rendering process and reducing developers' mental burden. However, it requires some understanding of JavaScript to operate conveniently.

Vue

The youngest and most comprehensive of the three frameworks.

Vue's core consists of declarative UI description, renderer, components, compiler.

Each core depends on the others, forming a more complex framework than React. The framework itself performs many optimizations, combining the essence of other frameworks. It has lifecycles, Hook-style usage, Class optional usage, Fn composition methods, comprehensive official documentation, quick development onboarding, many framework syntactic sugars for developers, and provides JSX writing mode, letting you write nearly native JS.

Simply put, it has everything you want, touching on everything a little~

Angular

The oldest and most complete framework.

Developed based on TypeScript, with a complete and extensive dependency system library. Directive development patterns and component separation concepts have been imitated by many frameworks. Steep learning curve, with many good development patterns to follow. Large websites requiring high stability often use this framework.

Rising Stars (Endless Frameworks to Learn)

Svelte is a completely new framework for building user interfaces. Unlike traditional frameworks, Svelte puts a lot of optimization work into the compilation phase of building applications. No virtual DOM, no need to add state management tools.

SolidJS is for building fast declarative UIs on the web. It shares many ideas with React but doesn't use virtual DOM to provide a more efficient and practical developer experience.

Qwik is a React-like frontend SSR framework that greatly optimizes or even eliminates the hydration process. It not only lazy-loads components but can also lazy-load click events and other code. It can almost achieve loading only the JS code and CSS code currently in use. If DOM elements don't appear in the screen's visible area, component internal methods won't execute.

Conclusion

Various frameworks have evolved different core ideas to solve increasingly complex frontend application problems. There are freely unlimited control modes and complex design concepts with numerous regulations. As browser engines evolve, frontend frameworks will inevitably update accordingly. Observing frameworks is observing frontend trends. Frontend engineering will continue to develop, mature, and thrive under the impact of these ideas.

References:

• JS Origins and Past Life
• Review of Web 20 Years
• Frontend Framework Evolution Path
• UI is a function of state
• Front-end frameworks and libraries
• How to Use Qwik and Partytown to Reduce 99% of JavaScript on Pages