The article "Contemporary Front-end Architectures" discusses front-end architectures in terms of data flows in historical retrospective.

The material consists of three parts

1. Theory and History
2. Implementation

3. Prospects

   
   

Part 1. Theory and History

.

, !

, , - — . - - ( ) SPA SSR API. CMS - .

- . , DOM, jQuery, Backbone.js MVC. . - , . , MVC, React? ? .

, - , -, -. — , , , .. .

— ?

. — , / , . ? .

.

, , , , , (Model) (Application state). « » (Domain model) «-» (Business logic) . -.

(-) . , .

MVC —

( -, ). MVC — Model View Controller, (View) (Model) . , , MVC , .

, SoC (Separation of Concern) — . , , MVC .

MVC Smalltalk-80. MVC View , Model. MVC, ( 1970- ):

• MVC . . .
• Web. .
• , "" .

MVC. Controller , , . , , (View) , .

, . , . , - , .

React, Vue Angular View-Controller , .

MVC, MVC. . . , .

:

1. View Controller Model, . , Model , .

   
   

2. Observer, View. Model , , View .

   
   

MVC . View- Model . . — View-.

MVC MVC MVC (father's MVC).

(Application model)

, Application State GUI. - (Presentation logic) (View state), .

, .

. . 10, , . - . (UX), . — ? ?

, , . , , — — . , . . . , 10 View , -.

, MVC — (Application Model, AM). , View-Controller . .

, MVC. , , AM-MVC . , Application Model View , , , Application Model View.

, . (Presentation Model), , .

, , - , . .

. . "" . , . , Windows, .

. (View) .

. View . . . . , , .

View - View. — .

MVC . , Dolphin . 1995 . , Dolphin , . .

, MVC 60 , « » (Twisting the triad). MVP.

:

1. (Presenter) . . .

   
   

2. , , .

   
   

, MVP Supervising Controller MVP Passive View MVP. .

MVVM — Model View ViewModel

MVP , , - MVVM . Model-View-Binder. MVVM Passive View MVP, (data binding). , . , View Model. .

:

1. ViewModel — , (bind-able) , View.

   
   

2. MVVM Binder, View ViewModel. , ViewModel , , .

   
   

Data binding, MVVM, , Knockout, Angular, Vue.js, React .

-.

-

MVC, -. Web MVC. , - , - , MVC , .

, MVC web-MVC — . web-MVC - , .

- . MVC -, . , — .

- , . (rich client-driven) . .

- MVC, , , MVC: MVC , MVC - MVC. :

1. (JS + HTML) .
2. .
3. .

, . , MVC .

MVC a.k.a. 2

MVC 2 Sun Microsystems - Java.

MVC MVC, , , , . , :

• MVC (Data cycles), -MVC — .
• (View cycles). — , , .. — , , ..
• , (Model cycle), , -.
• Front Controller: , HTTP-. , - Java, IHttpHandler ASP.NET HTTP.Server Node.js.

, SSR (Server Side Rendering) — . . HTML/ , JavaScript , -, MVC, SSR.

. JavaScript. , AJAX -. Google .

MVC, HTML + JavaScript. JS . JavaScript UX (Server View Cycles). , , .. .

-. B2C, SEO- -, CMS — Content Management Systems, . .

. Web MVC. ASP.NET MVC, Java Struts, Python Django, Ruby ROR, PHP CodeIgniter — , MVC Web MVC.

, , - .

RIA — - (Rich Internet Application Architecture)

, -. - RIA — Rich Internet Application. RIA , . RIA Rich Web Applications — , , UX . , SPA (Single Page Application) — . Web MVC . HTML-, .

RIA — , . ViewModel, Observers, Components .. , . Oliver Steel, 15- ( , ) RIA.

RIA Web MVC Controller View . . , Controller View , , . - , , API-. JSON, -.

GUI ?

(Patterns), , GUI . , , - (Elements of Reusable Object-Oriented Software). . GUI.

GUI HCI (Human Computer Interaction) — . (User) (Side Effect) .

, , . , , . .

- : , .

MVC. - . , UX .

— , . SPA-.

Modern templates are similar to the advanced version of these revolutionary models and are a kind of general trend towards which the front-end community is moving.

End of Part One
Part 2