Оффлайн
- Регистрация
- 1 Мар 2015
- Сообщения
- 1,481
- Баллы
- 155
The Early Web: Full Page Reloads
Websites were once simple HTML, CSS, and JS files. Every click triggered a full page reload, fetching a fresh bundle from the server—and performance lagged as pages multiplied.
Browser Quirks and jQuery to the Rescue:
Different browsers implemented the DOM in slightly different ways, forcing developers into messy, browser‑specific code. In 2006, jQuery abstracted away those inconsistencies with a clean, chainable API for DOM selection, manipulation, events, and Ajax.
Backbone.js and the First SPAs:
By 2010, Backbone.js layered on jQuery to introduce light MVC constructs—Models, Views, Collections, and Routers—so you could fetch JSON and swap in content without reloading the page.
AngularJS and Two‑Way Binding:
Also in 2010, Google released AngularJS, a full‑featured MVC/MVVM framework with two‑way data binding and declarative templates. It streamlined small‑to‑medium apps—but as app complexity grew, tightly coupled components and performance bottlenecks surfaced.
Facebook’s Pain Points and React’s Birth (2013):
Facebook’s Ads team faced tangled imperative code and slow DOM updates. They built React to address these issues by:
Declarative components: You describe what the UI should look like for a given state.
Virtual DOM: React diffs an in‑memory tree against the previous one and updates only the changed parts of the real DOM.
State‑based rendering: Components re‑render automatically when their state changes.
- The Aftermath and Angular’s Rewrite In 2014, AngularJS was re‑architected into Angular (v2+), borrowing component‑based ideas—but many developers had already shifted to React for its simplicity, performance, and predictable data flow.
Because React controls the DOM for you, you never manually manipulate it; you simply update state or props, and React takes care of the actual DOM changes.