تناقش مقالة "البنى المعاصرة للواجهات الأمامية" البنى الأمامية من حيث تدفقات البيانات في الماضي بأثر رجعي.

تتكون المادة من ثلاثة أجزاء

1. النظرية والتاريخ
2. التنفيذ

3. الآفاق

   
   

الجزء 1. النظرية والتاريخ

.

, !

, , - — . - - ( ) 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-.

تشبه القوالب الحديثة الإصدار المتقدم من هذه النماذج الثورية وهي نوع من الاتجاه العام الذي يتحرك فيه مجتمع الواجهة الأمامية.

نهاية الجزء الأول
الجزء الثاني