Урок 2. sapui5. model view controller. модуляризация

Введение в Spine.js

Предыстория

Несколько месяцев назад я встретился с очень опытным JavaScript разработчиком, которого зовут Алекс Маккоу, чтобы обсудить с ним оглавление книги, которая описывает современные подходы построения веб-приложений на JavаScript. Огромная часть этой книги посвящена работе с MVC – специальной архитектуре современных веб приложений. Там же он и расписал работу со Spine.js – новым простым инструментом создания веб-приложений на JavaScript.

Так что же такое Spine.js?

Spine представляет собой небольшой фрэймворк, который позволяет работать по схеме MVC, создавая приложения непосредственно на языке JavaScript, что обеспечивает логическое разделение кода, наследование моделей через классы и расширения. Также во многом этот инструмент базируется на Backbone.js API, так что те разработчики, которые имели дело с данным фрэймворком, без труда разберутся и в Spine (однако существует целый ряд существенных различий). Spine.js может работать совместно с HTML5 и асинхронными запросами сервера.

Razor View Engine

Microsoft introduced the razor view engine to compile a view with a mix of HTML tags and server-side code. The special syntax for razor view maximizes the speed of writing code by minimizing the number of characters and keystrokes required when writing a view.

The razor view uses @ character to include the server-side code instead of the traditional of ASP. You can use C# or Visual Basic syntax to write server-side code inside the razor view.

ASP.NET MVC supports the following types of razor view files:

File extension	Description
.cshtml	C# Razor view. Supports C# code with html tags.
.vbhtml	Visual Basic Razor view. Supports Visual Basic code with html tags.
.aspx	ASP.Net web form
.ascx	ASP.NET web control

Learn Razor syntax in the next section.

Event System Example

At heart of JavaScript MVC is Event system based on Publisher-Subscriber Pattern which makes possible for MVC components to intercommunicate in an elegant, decoupled manner.
Event is inherited by View and Model component in a MVC implementation. That way each of them can inform other component that event of interest to them happened.

// Mix in to any object in order to provide it with custom events.
var Events = Cranium.Events = {
  channels: {},
  eventNumber: ,
  // Used to publish to subscribers that an event of their interest happened
  trigger: function (events, data) {
    for (var topic in Cranium.Events.channels){
      if (Cranium.Events.channels.hasOwnProperty(topic)) {
        if (topic.split("-") == events){
          Cranium.Events.channelstopic(data) !== false || delete Cranium.Events.channelstopic;
        }
      }
    }
  },
  // Used to register for the event to listen
  on: function (events, callback) {
    Cranium.Events.channelsevents + --Cranium.Events.eventNumber = callback;
  },
  // Used to unsubscribe/stop listening to the event
  off: function(topic) {
    delete Cranium.Events.channelstopic;
  }            
};

Event system makes possible:

• for View to notify its subscribers of users interaction, like click or input in form etc., to update/re-render its UI etc..
• for Model once its data are changed it can notify its listeners to update themselves (e.g. view to re-render to show accurate/updated data) etc­.

Usage

<div class="container">Foo</div>

<button id="inc">Increment</button>
<button id="alerter">Alert</button>

<script type="text/template" class="counter-template">
    <h1><%= counter %><h1>
</script>​

// Let's create a basic application

var myModel = new Cranium.Model({
  counter: ,
  incr: function () {
    myModel.set({ counter: ++this.counter });
  }
});

var myView = new Cranium.View({
  el: '.container',
  template: _.template($('.counter-template').innerHTML),
  
  observe: function (model) {
    this.on(model.id + 'update', function (data) {
      
     $(this.el).innerHTML = this.template( model.toJSON() );
      
    }.bind(this));
  }   
});

var myController = new Cranium.Controller({

  // Specify the model to update
  model: myModel,

  // and the view to observe this model
  view:  myView,
  
  events: {
    "#inc.click" : "increment",
    "#alerter.click" : "alerter"
  },

  // Initialize everything
  initialize: function () {
    this.view.observe(this.model);
    return this;
  },
  increment: function () {
    myController.model.attributes.incr();
    return this;
  },
  alerter: function(){
   alert("Yo!"); 
  }
});

// Let's kick start things off
myController.initialize(myModel, myView).increment().increment();

// Some further experiments with Underscore utils
var myModel2 = new Cranium.Model({
  caption: 'hello!'
});
            
console.log(_.any(myModel, myModel2, null));
console.log(_.pluck(myModel, myModel2, 'id'));
console.log(_.shuffle(myModel, myModel2));

Два слова об MVC

Применение паттерна MVC заключается в разделении собственно данных, их отображения и обработки действий пользователя по трем компонентам.

Модель (Model)

Собственно данные, методы для работы с данными, изменения и обновления данных.

Представление/Вид (View)

Отображение данных, оформление и другие аспекты презентации модели

Контроллер (Controller)

Реагирует на действия пользователя, интерпретирует данные, введенные пользователем, и информирует модель и производит необходимые манипуляции с моделью и видом.

Между компонентами есть взаимодействия, изображенные стрелочками на рисунке (один из устоявшихся вариантов MVC).

Главный тезис статьи можно сформулировать так:

Дальнейшая часть статьи — обоснование с примерами, почему именно так, а не иначе, и почему устоявшаяся практика MVC для javascript-интерфейсов работает плохо.

MVC в PHP

Особенностью при использовании MVC в PHP, является то, что существует одна точка входа в php приложение, которая, например, достигается следующим образом. Создается index.php через который будут обрабатываться все запросы, для этого создаем в папке с индексом файл .htaccess и помещаем в него такой код:

RewriteEngine on
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ index.php?route=$1 

В предоставленном коде, первой строкой, проверяется существование запрашиваемого файла, и если его нет, то идет перенаправление на index.php, иначе даже запросы картинок сайта будут перенаправляться на индекс. Последняя строка кода преобразовывает запросы вида index.php?route=chat/index у вид index.php/chat/index. Если у вас нет возможности использовать ModRewrite в своем приложении, то вам придется делать переадресацию вручную.

PHP Модель

Данные о PHP модели содержаться в ее атрибутах и могут быть изменены только через специальные функции. Модель может содержать в себе несколько представлений. Как правило, phpмодель это класс работающий с БД, конкретнее: запись, чтение, удаление. Естественно чтение информации с БД может быть реализовано несколькими представлениями (функциями). Как пример модель статей на сайте: можно получить конкретную статью из БД, список последних, популярных, какой-то категории… это все представления модели. Для наглядности ниже предоставлен пример php модели.

<?php function methodName()
{
$link = mysql_connect(’localhost’, ‘mysql_user’, ‘mysql_password’);
if (!$link) {
die(’Could not connect: ‘ . mysql_error());
}
echo ‘Connected successfully’;
mysql_close($link);
$query_results= mysql_query(’select * from searchNames order by firstname desc’);
$data = array();
while ($row = mysql_fetch_objects($query_results)) {
$data[] = $row;
}
return $data;
}
?>

PHP контролер (Поведение)

PHP контролеры получают запросы пользователей, которые мы направляли через index.php, и в соответствии с ними, корректируют работу модели. Правильнее сказать контролируют работу php приложения.

<?php $data= methodName();
display_template(’data.tpl’);
?>

PHP Представление

Представление отслеживает изменение в модели и создает или меняет интерфейс php приложения.

<?php echo $row->lastname?>

<?php } ?>

Как работает данный PHP MVC шаблон?

При обращении пользователем по нужному url выбирается соответственный контролер, который обращается к представлению и модели, и выводится информация. Другими словами контролер в mvc есть связующим звеном модели и представления.

Преимущества MVC шаблона при создании PHP приложения

Как упоминалось выше это, прежде всего дифференциация разработчиков php сайта на отделы. Также увеличивается скорость работы php приложения, если создается крупный проект. Ну и то, что касается непосредственно самого php разработчика, это правильная структуризация php кода (все на своих местах, так легче для понимания).

MVC пример

Особо не будем зацикливаться на примере работы MVC, так как уже имеется Добавлю лишь еще пару схем для более глубокого понимания.

Еще одна схема работы MVC шаблона на PHP, она более чем доступна для понимания.

Создание вида (JSP)

Используя фреймворк Spring MVC, отобразить страницу можно в десятках разных форматов, в числе которых — JSP, HTML, PDF, Excel, XML, Velocity templates, XSLT, JSON, каналы Atom и RSS, JasperReports и другие. Однако чаще всего применяются шаблоны JSP, написанные при помощи JSTL:

<html>
   <head>
      <title>Welcome to MVC</title>
   </head>
   
   <body>
      <h2>${message}</h2>
   </body>
</html>

Преимущества Spring MVC

Собирая все вместе, подведем итоги:

1. Легковесность: поскольку Spring — это легкий фреймворк, в веб-приложении на основе Spring не будет проблем с производительностью.
2. Высокая продуктивность: Spring MVC может ускорить любой процесс разработки.
3. Безопасность: большинство веб-приложений для онлайн-банкинга разрабатывается с использованием Spring MVC, что дает выгоду за счет встроенного Spring Security — отличного API для реализации безопасности корпоративного уровня.
4. Поддерживается паттерн MVC: поэтому это отличный способ разработки модульных веб-приложений.
5. Spring MVC также реализует все основные функции ядра Spring Framework, среди которых популярные Inversion of Control (инверсия управления) и Dependency Injection (внедрение зависимостей).

Примеры архитектуры MVC

В C ++

В ECMAScript

• Adobe Flex , Контроллер в ActionScript 3
• XUL , используемый для создания программного обеспечения Mozilla Foundation , основан на модели MVC:
  • Модель: XML , SQL и RDF
  • Просмотр: XUL , HTML и CSS
  • Контроллер: XBL и JavaScript

В Java

• Swing , графический интерфейс от Java до Java 8
• JavaFX , то Java графический интерфейс , так как Java 8
• JavaServer Faces
• Стойки
• Spring MVC
• Полосы
• SWT
• Играть!
• PureMVC
• ZeroCoupling
• SpringBoot

В Perl

Веб-ориентированные фреймворки на Perl  :

• Катализатор  ;
• CGI :: Application: на основе модуля Perl CGI.pm;
• Танцовщица;
• Gantry  : похож на Django;
• Jifty;
• MasonX;
• MayPole  : наложение катализатора;
• O2;
• Plack;
• Солнцестояние;
• Приседания.
• Mojolicious

В PHP

Фреймворки на основе архитектуры MVC:

• Агави
• CakePHP
• CodeIgniter
• Copix
• Dynatrix
• ТопливоPHP
• Gest-HVSL
• Hoa
• Джеликс
• Joomla! Платформа
• Кинкама
• Кохана
• Laravel
• MKFramework
• Phalcon_ (каркас)
• MODx
• Открытая веб-платформа
• PostNuke
• QCodo
• Symfony
• TemplatePP на основе Zend Framework
• Yii Framework
• Zend Framework

Использование Framework не является обязательным.

Проблемы дизайна в контексте

Важным аспектом шаблонов проектирования является выявление и документирование ключевых идей, которые отличает хорошую систему от плохой системы (это может быть дом, компьютерная программа или объект повседневного использования), а также помощь в проектировании будущего. системы. Идея, выраженная в шаблоне, должна быть достаточно общей, чтобы ее можно было применять в самых разных системах в ее контексте, но все же достаточно конкретной, чтобы дать конструктивное руководство.

Диапазон ситуаций, в которых применяются проблемы и решения, рассматриваемые в шаблоне, называется его контекстом

Важной частью каждого паттерна является описание этого контекста. Примеры могут дополнительно проиллюстрировать, как этот шаблон применим к очень разным ситуациям.

Например, шаблон Александра «МЕСТО ЖДАТЬ» обращается к автобусным остановкам так же, как и к комнатам ожидания в хирургии, но при этом предлагает полезные и конструктивные решения. Книга « Шаблоны дизайна » «Банда четырех» автора Gamma et al. предлагает решения, не зависящие от языка программирования и прикладной области программы.

Тем не менее, проблемы и решения, описанные в шаблоне, могут различаться по уровню абстракции и общности, с одной стороны, и специфичности, с другой. В конце концов, это зависит от предпочтений автора. Однако даже очень абстрактный узор обычно содержит примеры, которые по своей природе абсолютно конкретны и конкретны.

Шаблоны также могут различаться по тому, насколько они проверены в реальном мире. Александр дает каждому паттерну оценку ноль, одну или две звезды, показывая, насколько хорошо они проверены на реальных примерах. Обычно утверждается, что для всех шаблонов нужны хотя бы некоторые существующие примеры из реальной жизни. Однако возможно задокументировать еще не реализованные идеи в формате, подобном шаблону.

Паттерны в книге Александра также различаются по масштабу — одни описывают, как построить город или район, другие — отдельные здания и интерьер комнат. Александр рассматривает мелкомасштабные артефакты как конструктивные элементы крупномасштабного мира, поэтому их можно соединить в .

Баланс сил

Шаблон должен характеризовать проблемы, которые он предназначен для решения, контекст или ситуацию, в которой эти проблемы возникают, а также условия, при которых предлагаемые решения могут быть рекомендованы.

Часто эти проблемы возникают из-за конфликта разных интересов или «сил». Образец возникает в виде диалога, который затем поможет уравновесить силы и, наконец, принять решение.

Например, может быть шаблон, предлагающий беспроводной телефон. Силами будет необходимость общаться и одновременно заниматься другими делами (приготовление пищи, осмотр книжной полки). Очень конкретным шаблоном будет просто «БЕСПРОВОДНОЙ ТЕЛЕФОН». Более общие шаблоны — «БЕСПРОВОДНОЕ УСТРОЙСТВО» или «ВТОРИЧНАЯ ДЕЯТЕЛЬНОСТЬ», предполагая, что второстепенная деятельность (например, разговор по телефону или осмотр карманов джинсов) не должна мешать другим действиям.

Несмотря на то, что в своем контексте это довольно неспецифично, силы в шаблоне «ВТОРИЧНАЯ ДЕЯТЕЛЬНОСТЬ» очень похожи на силы в «БЕСПРОВОДНОМ ТЕЛЕФОНЕ». Таким образом, конкурирующие силы можно рассматривать как часть сущности концепции дизайна, выраженной в шаблоне.

Паттерны содержат собственное обоснование

Обычно шаблон содержит обоснование, относящееся к некоторым заданным значениям

Для Кристофера Александра очень важно думать о людях, которые будут соприкасаться с архитектурой. Одна из его ключевых ценностей — заставлять этих людей чувствовать себя более живыми

Он говорит о «качестве без имени» (QWAN).

В более общем плане мы могли бы сказать, что хорошая система должна приниматься, приветствоваться и с радостью восприниматься как обогащение повседневной жизни теми, кому предназначено ее использовать, или, что еще лучше, всеми людьми, которых она затрагивает. Например, обсуждая уличное кафе, Александр обсуждает возможные желания гостя, но также упоминает людей, которые просто проходят мимо.

То же самое можно применить к техническим устройствам, таким как телефоны и автомобили, к социальным структурам, таким как команда, работающая над проектом, или к пользовательскому интерфейсу компьютерной программы. Например, качества программной системы можно оценить, наблюдая за тем, проводят ли пользователи свое время, наслаждаясь системой или борясь с ней.

Сосредоточившись на влиянии на человеческую жизнь, мы можем выявить закономерности, не зависящие от меняющихся технологий, и, таким образом, найти «вневременное качество» (Александр).

Creating a View

You can create a view for an action method directly from it by right clicking inside an action method and select Add View...

The following creates a view from the action method of the , as shown below.

Create a View from Action Method

This will open the Add View dialogue box, shown below.
It’s good practice to keep the view name the same as the action method name so that you don’t have to explicitly specify the view name in the action method while returning the view.

Add a View

Select the scaffolding template. Template dropdown will show default templates available for Create, Delete, Details, Edit, List, or Empty view. Select «List» template because we want to show the list of students in the view.

Now, select from the model class dropdown. The model class dropdown automatically displays the name of all the classes in the folder.
We have already created the model class in the previous section, so it would be included in the dropdown.

Add a View

Check «Use a layout page» checkbox and select the default page for this view and then click Add button.

This will create the view under View -> Student folder, as shown below:

View

The following code snippet shows an Index.cshtml created above.

Views\Student\Index.cshtml:
Copy

As you can see in the above view, it contains both HTML and razor codes.
Inline razor expression starts with @ symbol. @Html is a helper class to generate HTML controls. You will learn razor syntax and HTML helpers in the coming sections.

Index.cshtml

The above Index view would look as below when we run the application.

Index View

Note:

Every view in the ASP.NET MVC is derived from class included in namespace.

We need to pass a model object to a view in order to display the data on the view. Learn how to integrate a model, view, and controller in the next chapter.

MVC the JavaScript Way

Complex JavaScript web application, Single Page Application (SPA), dances all the time in a user’s browser with all data persistence (saving to database on server) work done with Ajax calls in the background, which means, to put it boldly, no full browser refresh happens. Application behavior to be perceived by the users as dancing involves a lot of thought and work to be put in. Through evolution, trial and error, and a lot of spaghetti and not so spaghetti-like code developers in the end developed on ideas of traditional MVC paradigm and brought (big) part of the solution for structuring JavaScript code to the landscape of the SPAs through JavaScript MVC frameworks.

Typical page in a SPA consists of smaller ingredients which, when looked at deeper level, represent logical entities, which involve certain data domain that should be represented in a certain way on the page, e.g. a basket in an e-commerce web application which would typically have list of items, total price etc. and presented to the user as box in top right corner of the page (see the picture).

With this in mind it is obvious that each part, or a region or a widget, of the page in SPA needs separate set of MVC stack to take care of it. Derived from that, it means that typical SPA page consists of a set of MVC stacks with each MVC stack responsible for certain part of the page (for synchronizing its view — DOM, model and controller). That way code is better structured, decoupled and easier to maintain.

Still structuring those MVC stacks and organizing them to work seamlessly among each another can lead to problems down the road, as well, so it should be taken into account when designing application.

Let’s see a simple implementation of the MVC and its usage in vanilla JavaScript, to clarify some concepts.

Url модели:

var Url = Spine.Model.setup("Url", );
Url.extend(Spine.Model.Local);
Url.include({
  validate: function(){
    if ( !this.long_url )
      return "long_url required"
    if ( !this.long_url.match(/:\/\//))
      this.long_url = "http://" + this.long_url
  },
  fetchUrl: function(){
    if ( !this.short_url )
      $.bitly(this.long_url, this.proxy(function(result){
        this.updateAttributes({short_url: result});
      }));
  },
  fetchStats: function(){
    if ( !this.short_url ) return;
    $.bitly.stats(this.short_url, this.proxy(function(result){
      this.updateAttributes({stats: result});
    }));
  }
});
Url.bind("create", function(rec){
  rec.fetchUrl();
});

Как реализовывались компоненты JavaScript за многие годы до начала войн современных фреймворков?

Более 10 лет компоненты на чистом JS разрабатывались как плагины для jQuery или автономные виджеты. Проще говоря, это были те самые, простые объекты и функции в JavaScript. В большинстве случаев вы импортировали один файл и просто вызвали метод init(). Когда компонент был бы вставлен в DOM после загрузки кода, как простой выпадающий список, вам приходилось бы вручную вызвать метод init() на новом элементе DOM. 

Тем не менее, были доступны события DOM, которые мы могли бы использовать для прослушивания изменений в DOM, таких как добавленный, удаленный или измененный новый тег. Таким образом мы могли бы использовать их для вызова init() или deinit() автоматически. Проблема была в производительности, и из-за этого сегодня у нас есть современный API Mutation Observer, который работает во всех современных браузерах включая IE11. 

Вы можете инициализировать только один MutationObserver и прослушивать изменения во всем document.body, а затем регистрировать собственные калбеки, когда, например, новый тег добавляеться в DOM. Поскольку API-интерфейс Mutation Observer и даный алгоритм требуют логической реализации, каждый раз, когда я создаю DOM Observer, который можно легко использовать для работы с подобными задачами, просто вызовите DOMObserver.onInsert(‘tagname’, callback).

Примечания:

• Для оптимальной кроссбраузерной совместимости данный пример должен быть запущен на живом или локальном веб сервере. Используйте MAMP/WAMP в случае необходимости;
• Для проверки статистики кликов я рекомендую использовать URL сайтов, которые являются наиболее популярными на сегодняшний день. Например, информация о сайте http://www.google.com наверняка присутствует в базе данных Bit.ly;
• Отметим, что демо пример использует мои собственные ключевые API Bit.ly, которые должны быть заменены на ваши собственные.
• Круговые диаграммы сгенерированы динамически при помощи Google Chart API. Для того чтобы не усложнять и так новый для вас подход, я сам выбирал изменение изображения диаграммы, но вы в любой момент можете легко переключиться на Visualization API, в том случае, если вам требуется более тонкий подход для вывода данных;
• То, как вы формируете и структурируете свой каталог приложения,- это полностью ваше дело. Некоторые разработчики предпочитают общую структуру папок model / view / controller, в то время как другие разработчики предпочитают иметь универсальную папку приложения, где все, что касается MVC базироваться в единственном файле. В нашем демо приложении мы используем структуру папок, к которой я привык.
• Что касается сохранения состояния приложения и процесса маршрутизации в Spine, помните, что если вы хотите сохранить уникальные ‘представления’ для контента (например, одно представление для #ui/dashboard, а другое для #ui/stats), то вам тщательнейшим образом необходимо рассмотреть работу spine.controller.manager.js, поскольку в этом файле присутствует решение данной задачи.

Вот и всё!

Компромиссы

Полностью впихивать Model во View, конечно, не обязательно. Да оно обычно и не нужно.

Можно выделить три устоявшихся практики.

Создается единый объект, который существует над компонентами интерфейса и хранит данные всех моделей, задействованных в данном интерфейсе.

Например, во вложенном меню это будет единый объект Menu, который умеет show/hide любые подменю. При этом подменю как таковое не является javascript-объектом.

Аналогично, в javascript-дереве это может быть единый объект Tree, который манипулирует узлами, а сами узлы — просто элементы DOM и хранят данные непосредственно в DOM.

Существует единый объект, который при небольшой «доинициализации» может выполнить роль любой из однотипных компонент интерфейса.

Например, рассмотрим контекстное меню для javascript-дерева, которое вызывается правым кликом мыши на элементе.

Вместо пачки меню — для каждого элемента дерева своё, создается единый объект .

При клике на узел:

1. ContextMenu инициализуется нужным узлом
2. В зависимости от узла и прав на этот узел включает-выключает пункты подменю
3. Показывается на нужном месте экрана

Приспособление к конкретному элементу выполняется очень просто. В данном случае — не нужно создавать DOM-структуру меню, она и так есть. Не надо и создавать новый объект со своими методами — достаточно тех что есть.

Наконец, иногда целесообразно частично отделить некоторые аспекты Model от View.

Обычно при этом выводится в модель то, что во View хранить нельзя или неудобно, так чтобы не возникало дублирование.

Модель-представление (model-view)

Шаблон MVC направлен на отделение данных и логики (модели) от интерфейса (представления) программы. Так, например, при разработке игры «Тетрис» к модели могут относится массив с фигурами и логика игры, а представление отвечает за отображение этого массива на экране.Такое разделение соответствует принципу единой обязанности (SRP) , соблюдение которого обеспечивает:

• лучшую тестируемость кода, т.к. вы можете писать unit-тесты к модели и виду независимо друг от друга, что позволит более точно выявлять место с ошибкой при провале какого-либо из тестов ;
• ослабление зависимостей между видом и представлением, а значит более высокую гибкость. В любой момент заменить одно представление на другое, т.к. теперь модель не зависит от представления. В частности замена представления может быть необходима при переносе программы на мобильную платформу с другим пользовательским интерфейсом;
• снижение сложности проекта также является следствием ослабления зависимостей. Разрабатывать отдельные части можно дать программистам с более низкой квалификацией.

Итак, мы разделили нашу программу на модель, в которой сосредоточена логика работы и на представление, отвечающее лишь за отображение данных, предоставляемых моделью.

Модель и представление игры Тетрис

Это здорово, но откуда представление узнает, что в модели какие-либо данные изменились? — при использовании MVC для этого используется шаблон проектирования publish-subscribe.

Понятие MVC

MVC(Model-view-controller, «Модель-представление-поведение», «Модель-представление-контроллер») — это шаблон проектирования приложений, при котором управляющая логика поделена на три отдельных компонента таким образом, что модифицирование одного из них дает минимальное влияние на остальные.

Шаблон MVC хорошо применять при создании сложных проектов, где необходимо отделить работу php программиста (или разделить группу программистов на отделы), дизайнера, верстальщика, и т.д.

Шаблон MVC разделяет представление, данные, и обработку действий пользователя на три отдельных компонента:

MVC Модель (Model). Модель предоставляет данные (обычно для View), а также реагирует на запросы (обычно от контроллера), изменяя своё состояние.

MVC Представление (View). Отвечает за отображение информации (пользовательский интерфейс).

MVC Поведение (Controller). Интерпретирует данные, введённые пользователем, и информирует модель и представление о необходимости соответствующей реакции.

Для наглядности схемы действия шаблона MVC, ниже предоставлена иллюстрация.

Такие компоненты как представление и поведение зависят от модели, но никак не влияют на нее. Модель может иметь несколько представлений. Может быть, концепция MVCсложная для понимания, но если ее осмыслить, она становиться незаменимой при разработке приложений на PHP.

Коротко о Backbone.js

Сейчас я бы хотел коротко рассказать вам о Backbobe.js, для того чтобы вы могли увидеть разницу между ним и Spine: данные в Backbone представлены через модели (которые могут быть созданы, удалены и сохранены). Стоит изменить front-end/UI модель, как сразу же данная информация обновится во всех представлениях, существующих в ваших скриптах.

Такие инструменты как Spine и Backbone предоставляют вам полностью сконцентрироваться исключительно на логике вашего приложения и не терять время на различные другие задачи, касающиеся организации кода на разных этапах его написания.

Теперь давайте познакомимся с Spine.js – новым, альтернативным инструментом, который в последнее время становится всё более и более популярным.