Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Web Development
Code

Разработка веб-приложений в соответствии с концепцией Organic

by
Difficulty:IntermediateLength:MediumLanguages:

Russian (Pусский) translation by AlexBioJS (you can also view the original English article)

Введение

Я работал графическим дизайнером несколько лет назад, и обычной проблемой, с которой я сталкивался, был выбор цветовой схемы для новых проектов. Один из моих коллег сказал: «Просто найди хорошую фотографию и возьми цвета оттуда». Этот способ работает хорошо, поскольку в фотографии предлагается естественная комбинация цветов. Поэтому я размышлял: «Почему бы не перенести эту же концепцию в мою работу в качестве программиста?». Именно для этого имеется концепция Organic. Когда я впервые познакомился с концепцией Organic, я был изумлен ее простотой и в то же время гибкостью этого подхода. В конечном счете у меня имелось нечто замечательное, что обеспечивало модульную разработку. Концепция Organic так же полезна, как и шаблон MVC (* Model-View-Controller - Модель-Представление-Контроллер. Здесь и далее примеч.пер) и является отличным инструментом для архитектурного проектирования.


Концепция

Как вы, наверное, догадались, концепция Organic имеет биологическое происхождение. Ваше главное приложение действует как Клетка, имеющая Мембрану и Ядро. Однако в действительности работа клетки осуществляется при помощи Органелл, которые взаимодействуют между собой посредством Химических соединений. Естественно, что элементы и процессы в рамках концепции Organic не идентичны на 100% тем, что происходят в настоящих клетках, однако они очень близки к ним. Теперь вот что. Я знаю, что вышесказанное звучит безумно, но как только вы начнете применять концепцию, то увидите, насколько простым и естественным может быть данный подход при применении его к вашим приложениям.

organic-concept

Скачивание модуля Organic

Organic распространяется в виде модуля Node. Поэтому у вас уже должна быть установлена платформа Node. Если не установлена, то, пожалуйста, перейдите на сайт nodejs.org и скачайте последнюю версию для своей операционной системы. Ваш файл package.json должен выглядеть следующим образом:

Выполните команду npm install в той же папке, и менеджер пакетов для JavaScript скачает необходимые файлы. Содержимое модуля Organic в действительности довольно небольшое. В нем имеется только определение главных элементов: Клетки, Мембраны, Плазмы, Органеллы, Химических соединений и ДНК. Естественно, в нем присутствуют несколько тестов, но в целом этот Node-пакет небольшой. Это способствует тому, что данная концепция легка в изучении и начать разработку можно практически сразу.


Пример

Для данной статьи я решил создать простой веб-сайт, используя только базовые возможности Organic. Исходный код можно скачать в верхней части этого руководства, если вы бы хотели последовать за написанием кода. Мне кажется, что создание этого примера приложения является лучшим способом представить этот новый паттерн разработки. На сайте имеется две страницы: Главная страница (Home) и О нас (About). Ниже представлен скриншот сайта:

site

Приложение содержит две кнопки, кликнув по которым можно перейти на две разные страницы. На странице About текста немного больше, чем на странице Home. Довольно просто, но давайте посмотрим, что находится за занавесом. Ниже представлена диаграмма, показывающая основной поток запросов приложения:

structure

Пользователь отсылает запрос к нашему приложению Node. Сервер (Server) принимает запрос и отсылает его Маршрутизатору (Router). После этого Воспроизводитель (Render) знает, какую страницу использовать, и возвращает ответ серверу. В конце ответ отсылается пользователю.

Также имеется один дополнительный элемент, Провайдеры данных (Data Providers), которые подготавливают необходимые файлы CSS (Cascading Style Sheets - каскадные таблицы стилей) или JavaScript для Воспроизводителя (учтите, что в нашей примере приложения я не использую JavaScript, будет использоваться только модуль CSS).

Ниже показано, как будет выглядеть наше приложение в виде Клетки согласно концепции Organic:

structureorganic

Клетка состоит из мембраны, которая отграничивает внутренние элементы от внешнего мира. Внутри этой мембраны мы и помещаем нашу первую органеллу, Сервер, поскольку именно тут данные могут как поступать, так и утекать из нашего приложения. Остальные органеллы (Маршрутизатор, Воспроизводитель и CSS) располагаются в плазме. Все эти компоненты взаимодействуют друг с другом посредством Химических соединений (запрос (request), страница (page) и css, отмечены красным). Сервер испускает Химическое соединение request. Маршрутизатор испускает page, а органелла CSS -  css. Также мне стоит отметить, что плазма выполняет роль канала (передачи информации) для Химических соединений. Органеллы ожидают определенное химическое вещество и при его наличии реагируют на него.

Ниже приведена диаграмма потока запросов, однако на этот раз добавлены испускаемые химические вещества (отмечены красным):

structureorganic2

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


ДНК

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

Давайте создадим новый файл index.js и напишем следующий код:

В коде выше происходит только определение ДНК и инициализация Клетки. Вы можете увидеть, что мы поместили наш Сервер в мембрану, а Маршрутизатор, CSS и Воспроизводитель - в плазму, как мы и обсуждали в предыдущем разделе.  Свойство source является обязательным и содержит путь к вашим отдельным органеллам.

Учтите, что свойство file в органелле CSS и свойство templates в Воспроизводителе фактически являются пользовательскими свойствами, которые я установил. Вы также можете добавить здесь какие угодно настройки.

И вам для справки ниже показана структура папок для вашего приложения:


Базовая органелла

В коде выше показан базовый формат для создания органеллы. Если вы хотите использовать методы this.emit или this.on, то вам необходимо будет обеспечить унаследование свойств от Organel, как мы и сделали выше. И, собственно, параметр plasma также обладает теми же самыми методами (emit и on), так что вы можете использовать непосредственно plasma и пропустить наследование, если хотите.

Также обратите внимание на параметр config. Это объект, который вы определили в вашей ДНК. Он также является хорошим местом для задания ваших пользовательских настроек.


Сервер

Сервер является вашей главной органеллой, которая принимает запросы и отсылает ответы браузеру. Ниже показано, как должна выглядеть органелла Сервер:

Тут происходит два действия. Первое - определение сервера NodeJS, у которого, конечно же, имеется обработчик, принимающий объекты запроса (req) и ответа (res). Как только запрос получен, органелла Сервер отправляет химическое вещество типа request, осведомляя об испускании остальные органеллы. Также к испускаемому соединению прикреплен объект req, так что любой, кому понадобится больше информации о входящем запросе, может получить данные из соединения напрямую.

Далее в метод emit передается второй параметр, функция обратного вызова. Вы можете использовать ее для возвращения потока запросов обратно к органелле, которая испустила химическое вещество. То есть, как только Маршрутизатор завершает свою работу, он вызывает функцию обратного вызова Сервера. Эта функция принимает созданный HTML - код и, используя объект res, отсылает страницу пользователю.


Маршрутизатор

Переходим к следующей нашей органелле, Маршрутизатору. Он ожидает появление химического соединения request, которое испускается Сервером. Эта органелла получает URL (* Uniform Resource Locator - унифицированный указатель [местонахождения информационного] ресурса) из объекта req и решает, какую страницу необходимо показать. Ниже представлен код для Маршрутизатора:

Далее Маршрутизатор сам испускает новое химическое вещество с типом page. Помните, что еще две другие органеллы также ожидают это соединение, однако по умолчанию вещество не переносится ко всем другим элементам плазмы. Конечно, могут быть случаи, когда вам понадобится такая функциональность. Для этого вам необходимо лишь добавить return false; в обработчике событий для соединения. Мы увидим это в действии в следующем разделе.


Провайдер стилей CSS

Этот модуль представляет из себя простую органеллу, выполняющую одно действие. Она берет путь к файлу .css, прочитывает его и позже испускает химическое соединение, содержащее собственно стили CSS. Также обратите внимание на выражение return false; внизу. Как я сказал в предыдущем разделе, важно его добавить. В ином случае Воспроизводитель не получит химическое соединение page, испущенное Маршрутизатором. Так происходит, поскольку органелла CSS определена до Воспроизводителя в ДНК.


Воспроизводитель

И, наконец, ниже показан код для нашего Воспроизводителя:

Здесь имеется два вспомогательных метода: getTemplate и formatTemplate, благодаря которым реализуется шаблонизатор для загрузки внешнего файла HTML и замены переменных в усатом стиле (* с фигурными скобками). Все шаблоны хранятся в объекте для быстрого доступа. Далее идут несколько строк для форматирования HTML. После этого шаблонизатор готов к использованию. Также Воспроизводитель ожидает химическое соединение css. И, наконец, при необходимости  приложение предоставляет страницу notFound 404.

Итак, ниже показано, как должна выглядеть структура папок:


Запуск приложения

Просто выполните в консоли node index.js, и вы должны будете увидеть нечто подобное:

console1

Теперь, когда ваш сервер запущен, вы можете перейти по адресу http://127.0.0.1:3000 в вашем любимом браузере. Попробуйте перейти по ссылкам, чтобы несколько раз переключиться между двумя страницами, и затем перейдите обратно в вашу консоль для просмотра результата.

console2

Вы должны будете увидеть аккуратный отчет об недавней активности приложения. Теперь вы также можете заметить еще кое-что в консоли:

Вы можете увидеть, что от браузера приходит еще один запрос. По нему должна загружаться иконка favicon.ico. Однако, на нашем сайте отсутствует такая иконка, поэтому в ответ на запрос отсылается страница 404. Вы можете попробовать это самостоятельно, посетив http://127.0.0.1:3000/favicon.ico.

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


Заключение

На мой взгляд, концепция Organic замечательна. Она гибка и способствует разработке лучших приложений. Учтите, что пример в этом руководстве приводился на основе моего личного опыта с другими шаблонами дизайна. Поэтому использование мной таких терминов как Маршрутизатор, Провайдер данных или Воспроизводитель не обязательно, и вы можете изменить имена на те, которые, на ваш взгляд, больше подходят. Поэкспериментируйте, создавая новые модули, разработанные в соответствии с концепцией Organic, и дайте мне знать, что думаете о концепции, в комментариях!

Базовые возможности Organic разработаны Борисом Филипповым и Валерием Богдановым, и я очень рекомендую вам посетить их профили на Github. Если вы заинтересованы в использовании Organic, то вам также окажутся полезными проекты Angel и WebCell.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.