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

На пятой неделе нашего курса по интерфейсу в The Iron Yard мы познакомились с этой новой средой JavaScript, Backbone.js, которая чрезвычайно полезна для создания одностраничных приложений (SAP). Поначалу казалось захватывающим освоить такой актуальный, полезный фреймворк, который используют на своих сайтах очень многие известные компании (Twitter, SoundCloud, USA Today и др.). Но потом мы начали читать документацию и пытаться программировать собственные приложения с помощью Backbone, и сложность полностью меня раздавила.

После пяти дней безысходности разработки, включая групповой проект, в котором мы создали клон сайта Twitter, я начинаю понимать (и любить!) гибкий фреймворк и его компоненты.

Что такое MVC?

Хороший вопрос. До прошлой недели я даже не знал, что существуют MVC (модели, представления и коллекции). Давайте разберем его до начального уровня…

Модели

Модель — это, по сути, прототип реальной вещи, которая еще не построена. Что-то вроде рецепта в поваренной книге: модель дает нам представление о том, как должен выглядеть результат в теории, хотя его еще нет.

Коллекции

Коллекция — это набор моделей, сгруппированных вместе. Итак, если модель — это рецепт, то коллекция — любимая кулинарная книга вашей мамы. Все еще гипотетически, поскольку в поваренной книге еще не было реальной еды, но есть более одного рецепта, отформатированного одинаково.

Взгляды

Здесь готовится еда. (Можете ли вы сказать, что у меня в голове День Благодарения?) Создание представления — это шаг, который берет эти модели и представления и воплощает их в жизнь. Вы создаете представление в базовой структуре, которое содержит новый экземпляр рецептов (моделей и/или коллекций), которые вы запланировали приготовить.

Создавая представление, вы собираете и смешиваете все ингредиенты вместе, шаг за шагом следуя ранее созданным прототипам.

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

Рендеринг

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

Маршруты

Отличительной особенностью одностраничных приложений является то, что вы можете включать столько страниц, сколько хотите, используя маршрутизатор. Каждый поддомен Twitter.com (например, страница профиля каждого пользователя) имеет собственное имя или «маршрут», который указывает браузеру изменить содержимое страницы на основе отображаемого нового URL-адреса. Все это поведение вызвано инструкциями, данными внутри маршрутизатора.

Еще одним преимуществом создания SAP является возможность браузера автоматически изменять отображаемый контент без необходимости обновления. Поэтому, когда вы входите в Twitter, пишете новый твит и нажимаете «Отправить», ваш твит автоматически публикуется в верхней части вашей страницы, даже если вы не обновляли экран.